HTML and CSS Reference
In-Depth Information
Chapter 3
High-Performance JavaScript
Florian d'Erfurth, Freelance Game Developer
For a game to be enjoyable, smoothness is critical. A smooth game can feel lifelike and amazing; without smoothness,
a game will be sluggish and annoying, even with the best art.
Smoothness is also important for user retention. Facebook recently revealed the results of an A/B test in which
scrolling was slowed from 60FPS to 30FPS (
http://youtu.be/3-WYu_p5rdU?t=36m
)
: engagement collapsed.
In this chapter, I will discuss the essential techniques for making a simple, two-dimensional HTML5 game feel
and perform like a native one.
The first two techniques are the low-hanging fruit and will give you a lot, while taking only a couple of hours each
to implement. It is worth noting that these techniques are useful even if you are using one of the many game frame
works available.
You may have heard that premature optimization is the root of all evil, and although this is true, planning for
optimizations in advance of your game architecture is a smart move. If you have a game in the planning stages, that is
the time to consider how optimizations would fit, and in the event that you decide to apply the following techniques
to your game, make sure, using profiling, that it would benefit from their implementation.
Profiling your game with Google Chrome DevTools will help you identify bottlenecks; these tools have improved
considerably in last year, especially in the area of profiling. I'd recommend checking the documentation for updated
About the Demo
I will use the example of a particle system throughout this chapter to illustrate how the aforementioned techniques
can be applied. You can find the demo at the topic's home page on the Apress web site (
www.apress.com
)
, along with
the code this chapter is based on. This particle system wasn't made to be efficient as a particle system
per se
, but
instead was made to resemble a two-dimensional game, in the sense that the system moves objects around and then
renders them every frame.
The demo uses the Web Graphics Library (WebGL) to render two-dimensional sprites; however, you don't need
to know WebGL to understand the techniques I outline.
As Figure
3-1
shows, the coordinate system is the same as that of Canvas 2D, with
x
: 0,
y
: 0 at the top-left corner
and
x
: width,
y
: height at the bottom-right corner, so you should feel at ease, even if you are more comfortable with
Canvas 2D.
