During the summer four trainees did little games as an introduction project to JavaScript, Canvas, HTML5 and WebGL. Four games developed were Space Attack, Jump, Mouse and Bullet.
- Space Attack is an arcade type shooting game where player controls a space ship and destroys enemies.
- Jump is a simple 2D platform game where player collects coins and tries to avoid falling down.
- Mouse is a reaction game where player controls a mouse character, tries to collect cheese and avoid hitting cats in a restricted area.
- Bullet is another reaction game where player has to counter-attack enemies with correct types of bullets.
Games were done without any experience of web programming, JavaScript or HTML5. When games were ready we decided to do some research and comparisons between different technologies that could be used composing similar games.
Two of the games, Space Attack and Mouse, were redone in traditional way using just CSS styles, HTML and JavaScript (no Canvas involved) and other two games, Jump and Bullet were redone with WebGL. Performance, memory usage and code complexity were compared between the original compositions and remakes.
Performance
For measuring the percentage of time used in rendering we used profiles from Chrome's developer tools. Measurements showed that the performance differences between implementations were small. Traditional implementations were from 3% to 8% more efficient than Canvas implementation. Differences between WebGL and Canvas implementations were similar: WebGL implementations were up to 9% more efficient than Canvas implementations. We found out that the reason for Canvas being the most inefficient might be text rendering. In our games rendering a simple text showing scores during gameplay took from 35% to 87% of the time used in rendering.
We also tried to measure FPS of the games but it's not a trivial task when browser’s rendering loop dominates drawing. For Canvas and WebGL we could use Chrome's FPS counter with 2D-hardware acceleration to measure FPS, but for games that doesn't involve Canvas or WebGL Chrome's FPS counter can't be used. Chrome also limits FPS to 60, so differences between efficiency in Canvas and WebGL weren’t exposed in measurements.
MozPaintCount was another method we tried for measuring FPS but for Mouse game that uses mouse movements as a control
MozPaintCount didn't provide reliable results. MozPaintCount gives the number of how many times the whole document is rendered and when you move the cursor, document is apparently rendered again. So for measuring game performance MozPaintCount weren't the right tool.
One huge problem of comparing FPS of program in browser is that there aren't tools that works for Canvas, WebGL and traditional programs and are available in several browsers. MozPaintCount method works only in Mozilla Firefox and Chromes FPS counter is only available in Chrome so reliable and comparable results can't be provided easily.
Memory Usage
Memory usage we explored with Timeline from Chrome's developer tools. Between Canvas game and traditional web game there isn't a significant difference in memory usage but between Canvas and WebGL the difference is notable. WebGL implementations uses 2-3 times more memory than Canvas implementations. In Canvas games the memory usage were mostly under 10 MB when in WebGL games it was over 20 MB after games had been running approximately 15 minutes.
Code Complexity
Measuring code complexity were a hard task because, like in measuring FPS, there aren't good tools or any tools at all for complexity analysis for JavaScript or HTML. One tool we managed to found was
jsmeter. Jsmeter provided some results but it couldn't handle source code that was divided in more than one file. Even though we couldn't do complexity analysis we draw some conclusions about complexity based on amount of code lines.
Just based on amount of code lines WebGL implementations were the most complex. We didn't use any library or framework for WebGL implementations even tough there are libraries to hide away WebGL's syntax and complexity. Between Canvas and traditional implementations there weren't significant differences in complexity. Traditional implementations have usually less JavaScript code than Canvas implementations but more lines written in HTML and CSS.
Amount of JavaScript code lines | Canvas | Traditional | WebGL |
| Space Attack | 573 | 533 | - |
| Jump | 918 | - | 1458 |
| Mouse | 830 | 798 | - |
| Bulletgame | 1041 | - | 1777 |
