1.2 HTML5 Game Development Best Practices
We discuss game development best practices throughout this book, starting here with seven that are specific to HTML5.
- Pause the game when the window loses focus.
- Implement a countdown when the window regains focus.
- Use CSS for user interface (UI) effects.
- Detect and react to slowly running games.
- Incorporate social features.
- Put all the game’s images in a single sprite sheet.
- Store high scores and realtime in-game metrics on a server.
We examine the preceding best practices in detail later in the book; for now, a quick look at each of them introduces more of Snail Bait’s features.
1.2.1 Pause the Game When the Window Loses Focus
If an HTML5 game is running in a browser and you change focus to another tab or browser window, most browsers severely clamp the frame rate at which the game’s animation runs so as to save resources such as CPU and battery power; after all, why waste resources on a window or tab that’s not visible?
Frame-rate clamping wreaks havoc with most collision detection algorithms because those algorithms check for collisions every time the game draws an animation frame; if it takes too long between animation frames, sprites can move past one another without detection. To avoid collision detection meltdowns resulting from frame-rate clamping, you must automatically pause the game when the window loses focus.
When Snail Bait pauses the game, it displays a toast to let the player know the game is paused, as shown in Figure 1.5.
Figure 1.5 Snail Bait paused
1.2.2 Implement a Countdown When the Window Regains Focus
When your window regains focus, you should give the player a few seconds to prepare for the game to restart. Snail Bait uses a three-second countdown when the window regains focus, as shown in Figure 1.6.
Figure 1.6 Snail Bait’s countdown after the window regains focus
1.2.3 Use CSS for UI Effects
Figure 1.7 shows a screenshot taken a short time after the game loads.
Figure 1.7 Snail Bait’s toasts
Note especially two things about Figure 1.7. First, a toast containing simple instructions is visible. That toast fades in when the game loads, and after five seconds, it fades out.
Second, when the game starts, the checkboxes (for sound and music) and instructions (telling which keystrokes perform which functions) below the game’s canvas are fully opaque, whereas the lives indicators and scoreboard at the top of the game are partially transparent, as shown in Figure 1.7. As the game’s instructions toast fades, that transparency reverses; the lives indicator and scoreboard become fully opaque, while the checkboxes and instructions become nearly transparent, as they are in Figure 1.6.
Snail Bait dims elements and fades toasts with CSS3 transitions.
1.2.4 Detect and React to Slowly Running Games
Unlike console games, which run in a tightly controlled environment, HTML5 games run in a highly variable, unpredictable, and chaotic one. Players can do things directly that significantly affect system performance, for example, running YouTube videos in another browser tab or window. Other performance killers, such as system backup software running in the background unbeknown to game players, can easily make an HTML5 game run so slowly that it becomes unplayable. And there’s always the possibility that your players will use a browser that can’t keep up.
As an HTML5 game developer, you must monitor frame rate and react when it dips below an unplayable threshold. When Snail Bait detects that an average of the last 10 frame rates falls below 40 frames per second (fps), it displays the running slowly toast shown in Figure 1.8.
Figure 1.8 Snail Bait’s running slowly toast
1.2.5 Incorporate Social Features
Many modern games incorporate social aspects, such as posting scores on Twitter or Facebook. When a Snail Bait player clicks on the Tweet my score link that appears at the end of the game (see Figure 1.4 on p. 6), Snail Bait creates a tweet announcing the score in a separate browser tab, as shown in Figure 1.9.
Figure 1.9 Snail Bait’s Twitter integration
1.2.6 Put All the Game’s Images in a Single Sprite Sheet
You can do several things to make your HTML5 game (or any HTML5 application) load more quickly, but the single most effective thing is to decrease the number of HTTP requests you make to the server. One way to do that is to put all your game’s images in a single image, known as a sprite sheet. Figure 1.10 shows Snail Bait’s sprite sheet.
Figure 1.10 Snail Bait’s sprite sheet (the gray background is transparent)
When Snail Bait draws the game’s sprites, it copies rectangles from the sprite sheet into the canvas.
1.2.7 Store High Scores and Send Realtime, In-game Metrics to the Server