HTML 5 2D Game development: graphics and animations

Graphics and animations are the most fundamental aspects of any video game, so in this article, I'll start with a brief introduction to the Canvas2d API to discuss the implementation of Snail Bait's central animation. In this article, you will learn how to:

Draw image and graphic primitives to the canvas

Create a smooth, flicker-free animation

Implementing the Game Loop

To monitor the speed of an animation in units of frame number per second

Scrolling background of the game

Using parallax to simulate three-dimensional effects

Implement a time based motion

The final results of the code discussed in this article are shown in Figure 1:

Figure 1. Scroll the background and monitor the frame rate

Background and platform level scrolling. These platforms are in the foreground, so they move significantly faster than the background, which creates a moderate parallax effect. At the beginning of the game, the background scrolls from right to left. At the end of a level, the background and platform begin to reverse direction.

At this stage of development, the runner does not move. In addition, the game has not been hit-tested, so when there is no platform underneath the runner, she floats in mid-air.

Finally, the icons above and to the left of the game canvas show the number of remaining lives (as shown in Figure 1 in the first article in this series). Currently, the game displays the current animation speed (in frames per second) in this location.

Instant mode Graphics

Canvas is an instant mode graphics system, which means that it will instantly draw what you specify and then forget it instantly. Other graphics systems, such as scalable vector graphics (Scalable vector Graphics, SVG), implement reserved pattern graphics, which means they hold a list of objects that will be drawn. Because there is no overhead in saving the display list, Canvas is faster than SVG; however, if you want to save a list of objects that a user can manipulate, you must implement the feature in Canvas yourself.

Before you continue, you may want to try to create a game of this type, because it is in Figure 1, and if you create such a game, it will be easier to understand the relevant code. (see download for the Snail bait implementation for this period.) ）

HTML5 Canvas Overview

The Canvas 2D context provides an extensive graphics API that allows you to implement everything in a text editor in a platform video game. When I wrote this article, the API contained more than 30 methods, but Snail bait only used a handful of them, as shown in table 1:

Table 1. Canvas 2D Context method used by Snail bait