HTML and CSS Reference
In-Depth Information
You should control garbage collection itself. It takes about 10ms for one minor garbage collection (GC), so it is
critical for 60fps games. Sometimes a major GC can stop the world for a second or more, which kills the fun of games
like action games. To control GC, you need to allocate all the memory including Canvasses and arrays on initialization,
and never allocate any more during the game.
Battery Problems
It's ideal if you can prevent excessively consuming the battery. Mobile game users are very sensitive to games
consuming a lot of battery. They'll avoid playing games eventually if they feel the game is battery hungry. It's
important to design games not to consume too much power.
Generally speaking, the consumption of battery correlates with CPU utilization. So one good solution is to keep
CPU utilization low if you can. Unfortunately, usually mobile CPUs have little margin. If you have any available CPU,
you might want to increase frames per second. However, you should consider an option to drop framerate to save
battery for particular scenes, such as a main menu.
The GPU can also consume a lot of battery. For example, the code in Listing 16-18 consumes battery rapidly, even
though the CPU is not working much at all.
Listing 16-18.
Consuming Battery
(function draw() {
setTimeout(draw, 16);
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
})();
By reducing drawing, the Dirty Rect method I mentioned earlier helps with battery management. You don't need
to adopt the entire Dirty Rect method. It can be effective to simply skip frames properly when you don't need to redraw.
Profiling on the Real Devices
I described many techniques around mobile HTML5; however, the most important is to profile correctly on a real
device. You should gather the real time profiling data of drawing codes from not a PC but from mobile devices, and
improve your game based on the real data.
If you are developing on Android, you may use Android Debug Bridge or Chrome Remote debugging. If you
are developing on iOS, you may use Inspector. Modern browsers support remote debug features so you can check
the status of a mobile device on your PC in real time. By doing this investigation you can choose the best method to
resolve current problems.
As you see from the information provided in this chapter, making mobile HTML5 games is like exploring
minefields. However, I believe that the benefits of mobile browser games are quite significant. I hope you agree with
me, and you create lots of fine mobile browser games.
