- 1.1 Snail Bait
- 1.2 HTML5 Game Development Best Practices
- 1.3 Special Features
- 1.4 Snail Bait's HTML and CSS
- 1.5 Snail Bait's Humble Beginning
- 1.6 The Use of JavaScript in This Book
- 1.7 Conclusion
- 1.8 Exercises
This chapter is from the book
This chapter is from the book
This chapter is from the book
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
NOTE
Pausing is more than stopping the game
When a paused game resumes, everything must be in exactly the same state as it was when the game was paused; for example, in Figure 1.5, when play resumes, the runner must continue her jump from exactly where she was when the game was paused.
In addition to pausing and unpausing the game, therefore, you must also freeze and thaw the game to ensure a smooth transition when the game resumes. We discuss pausing and freezing the game in more detail in Chapter 4.
NOTE
Toasts
A toast—as in raising a glass to one’s health—is information that a game displays to a player for a short time. A toast can be simple text, as in Figure 1.5, or it can represent a more traditional dialog box, as in Figure 1.8 on p. 14.
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.
NOTE
Focus on what’s currently important
When Snail Bait starts, the instructions below the game’s canvas are fully opaque, whereas the lives indicator and score above the game’s canvas are partially transparent. Shortly thereafter, they switch opacities; the elements above the canvas become fully opaque and the elements below become partially transparent.
Snail Bait goes to all that trouble to focus attention on what’s currently important. Initially, players should pay attention to the instructions below the game’s canvas; once the game is underway, players will be more focused on their score and how many lives are remaining.
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.
){kind=link}
)
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.
NOTE
Sprite sheets on mobile devices
Some mobile devices place limits on the size of image files, so if your sprite sheet is too large, you may have to split it into multiple files. Your game will load more slowly as a result, but that’s better than not loading at all.
1.2.7 Store High Scores and Send Realtime, In-game Metrics to the Server
Most games interact with a server for a variety of reasons. Snail Bait stores high scores on a server in addition to sending game metrics during gameplay. Snail Bait does not use any third-party graphics frameworks; however, it does use two JavaScript frameworks—Node.js and socket.io—to communicate between the player’s computer and a server. See Chapter 19 for more details.