30 December 2015

The tricks to a good HTML5 game - Part 2 - Clearing and Redrawing

Space Zombies v1.8.0 
     Making an HTML5 game has its own quirks, there are things that work , and things that seem like they should work sometimes just don't work.As I worked on Space Zombies ,I experienced this first hand, there were times i was frustrated after looking for days for a solution to some of the issues i faced. If you plan on making an HTML5 game and this is your first time , this series of posts will surely be of use to you.

Note: This is part 2 in a series of posts , read the first part about animations and game loop here..

Canvas redraws are expensive

    One thing that you will realize while building your app is no matter how 'natural' it seems to do a clearRect() on your entire canvas and redrawing your backgrounds on every single redraw doing that will definitely slow your game down.This is because canvas redraws and clearing are expensive to perform.For a small game this is usually not too big a problem,especially on a desktop/laptop browser. But for anything remotely serious and perhaps to support mobile devices, you want to reduce the redraws as much as possible.

What you can do instead, is one of the following
  • If your background is a static image, just use CSS for setting a background to the entire canvas, by far the easiest way of removing a full background redraw,obviously if needed you can even alter the background with the help of JavaScript .
  • If you have a dynamic background then, you may want to layer canvases on top of each other, where the background is on a completely different canvas,on which you do redraws periodically as required , but not every time foreground redraws.
  • For clearing past object locations(your characters) you will have to store the previous coordinates and dimensions of all your objects and then use clearRect() on only those selected areas, this might sound like it would be less efficient than just clearing the whole thing.But think of it this way, if your game requires to clear less than 20-30% of the canvas size for previous positions every frame ,it'll take much less time than clearing the entire 100% of the canvas.
HTML5 canvas efficient redraws demo

Here is a demo for the CSS + partial clearing redraws that I've put together which shows just how much of a difference this technique and the one explained in part one can make to your game, open the demo in a mobile device to see the difference. 

Clear only the objects that have actually moved

    This is another one of those simple modifications that will give you a significant speed boost.If you have a lot of objects going about at different speeds, just check if an object has changed its position or its dimensions before rendering, if so clearRect() for the previous position and dimensions, and draw the new position,If these attributes remain unchanged,skip clearing and redrawing the object in the same place with same dimensions.

Basically, whenever possible , Avoid Clearing and redrawing on the canvas, it will improve your performance by a significant amount .

Space Zombies v1.8.0 
I have implemented these techniques and more , in my game Space Zombies , which just received a significant update! please try the game on Play Store .

Looking for a way to monetize your android or Ios app ? I've been using Startapp , and its fairly easy to integrate and they have bonus cash to earn based on your current earning , they support multiple platforms , from HTML5 to JAVA application to Unity  , give them a shot !