HTML5 Game Development-graphics and animation (i)

Recently researched out a long time HTML5, summed up a bit, ready to come to a series, the text may have a lot of questions, welcome to correct me.

About Canvas

Canvas is used to draw an element of a graphic in a Web page, see HTML5 canvas for details

Here are some of the things that are not in W3school.

Immediate Mode

The canvas element is a graphical system of immediate mode, meaning that when you ask for it, he draws it immediately, and then immediately forgets (the object is destroyed when the object is drawn). Other graphics systems (for example, SVG) use a reserved-mode graphical system, meaning they retain a series of objects to be drawn when drawn. Because the canvas does not need to maintain this series of objects, the canvas runs much faster.

Dual caching mechanism

In the above, we mentioned the immediate mode, but here the "draw now" is not what everyone calls immediately, here need further clarification.

The canvas element does not immediately draw the content you specify when the browser calls our defined drawing method (assuming this method is Drawgame) to draw the current animation frame. Instead, it creates another canvas element (we call it Canvas2), and all the drawing is actually done in CANVAS2. When the Drawgame method returns, the browser will copy the CANVAS2 content to the screen through a graphical operation, which we call the dual-cache technology, and the dual-cache technology makes the animation's implementation smoother.

coordinate system (translate)

Translate (x, y) This is a method of the canvas element, the game background movement, mostly through this method to achieve. In the game, we do not implement object scrolling by frequently doing coordinate calculations on a large number of elements, because such calculations not only consume computer performance, but also increase the difficulty of maintaining code.

Note: In order to not affect subsequent drawing, after modifying the coordinate system with translate (x, y), you need to call translate (-X,-Y) again to restore the coordinate system.

For details, please see HTML5 Canvas translate ()

Create a canvas mirror and restore canvas

When animating, we often make changes to the canvas element's drawing environment (context), such as Strokestyle,linewidth. These modifications are permanent, which means that the modifications to them will affect any subsequent graphical operation of your canvas element. So how do you get these operations to work only temporarily? Here we can use the Save () and restore () methods to mirror and restore the state of the drawing environment for the current canvas element. Any environment property modifications written between the two methods will revert to the state of Save when the restore is executed.

Note: Save () and restore () require a pair to appear, that is, save, there will be a restore.

Achieve smooth HTML5 animations

The so-called animation, plainly speaking is a picture of a continuous change. Therefore, through the programming to achieve animation is constantly through the replacement of pictures, to achieve the effect of animation.

However, this constant substitution, of course, cannot be achieved using the dead loop while (true), and the traditional approach is to use the settimeout () and SetInterval () methods, both of which provide millisecond-level accuracy, but in fact, But not up to the millisecond level (see here: settimeout accuracy test, setinterval accuracy test). So in order to ensure the smoothness of the animation, we should not continue to use the settimeout and SetInterval methods to achieve time-critical requirements of the animation, with what to replace? We'll talk about it in the next section.

Requestanimationframe () method

In the timing Control for script-based animations (see here, w3c-script-based animations) description, Defines a method for a Requestanimationframe () window object. Unlike the settimeout and SetInterval methods, Requestanimationframe is specifically designed to animate, and it uses the browser's time interval to draw and not drop frames.

It is important to note that the Requestanimationframe method pauses when the form is not activated or the tab is not visible.

The following is a stolen diagram that supports the browser and version of the Requestanimationframe method (source: HTML5 Requestanimationframe () Animation API)

JavaScript instance:

1 function Animate (now) 2 {3    drawgame (now); 4     requestanimationframe (animate); 5 }6 ... 7 requestanimationframe (animate);

Make time-based motion

The game frame rate is not stable, perhaps at this time can be 60 frames per second, the next moment may be 10 frames/second. The rate of the game frame changes, we can not let the game frame rate image to the game object movement rate, such as: character movement, background scrolling, bullet speed and so on. Therefore, the motion of the object in the game must be time-based and only depends on time (for example: pixels/second), not the animation frame rate.

In the example in the previous section, we can find that animate has a parameter of now, which represents the current drawing time, and since we have this parameter, we can know the two time intervals to calculate the distance of the motion.

JavaScript instance:

1 varSpeed = 50;2 varLastanimationtime =NewDate ();3 varOffsetX = 0;4 functionSetbackgroundoffsetx (now)5 {6OffsetX + = speed * (now-lastanimationtime)/10007     ...8     //If you continue to add, the background will slowly move out of the screen, the following code to write it yourself9}

End

Here, about the graphics and animation content is almost over, the content is not much, the code is very small, but I think it is enough, after all, most of the basic knowledge can be found on the internet haha.

I am not HTML5, such as the text of a problem, please help correct me, thank you ~

HTML5 Game Development-graphics and animation (i)