With the help of our excellent illustrator Pat, we will soon be releasing Face Paint Peggy, an HTML Canvas game for Android mobile phones. The object of the game is to catch “drops” that are of a certain color, progressing through levels where drops move faster and more drops are on the playing field.
The development of the game went through multiple stages, first starting out as a React game and then moving over to Canvas, as the game in it’s React form had stuttering issues and was not smooth. This resulted in a rewrite with Canvas for the release. Below are a few tips I ran across while rewriting the game for Canvas.
The desktop version of Chrome also has a handy DevTool to debug Canvas.
Use actual elements when you can
The loading, start, pause, etc.. screens can be done with traditional HTML and CSS, no need to draw it out with Canvas. Doing this saves you a lot of headache drawing it with Canvas and helps with performance. Think of the moving parts as Canvas elements and anything static as regular DIVs.
In Face Paint Peggy, the start screen and the header bar are done in traditional HTML and CSS while Canvas handles the actual game. These elements are placed on top of the canvas and managing them is made much easier.
Instead of using setInterval, use requestAnimationFrame. If you’re not familiar, requestAnimationFrame only animates when the window is visible (so it doesn’t run in the background) and runs off of frames instead of seconds (like a timer does) so the animation ends up being smooth without the weird jumps and lag you get with intervals.
Use native features when you can
In Face Paint Peggy, the status bar color changes with the corresponding drop color. When a player hits the drop, it calls a function changeStatusBarColor that passes a hex over to the corresponding WebAppInterface method. The corresponding method then sets the status bar color.