Use HTML 5 to create a physical game

HTML5 technology provides a very broad space for today's Web applications to play in the browser. Its powerful features make it no longer difficult for us to develop and play games on the browser. With Canvas and powerful JavaScript engine, we can easily develop casual games. Players just need to open their browsers and enjoy the game without installing plug-ins.

This article was made by the NTFusion team, combining the paper saved PAPA published on Google Chrome Web Store to share with you the experiences of using HTML5 to develop physical games.

Before reading this article, you can try it out by installing save PAPA in Chrome Web Store.

Build a physical world

All objects in a physical game operate in a set physical world. To create a physical world, we now use the JavaScript version of The Box2D physical engine. The Box2D engine has a good function, DebugDraw, which can simulate our preset physical world and show it to us. It is very suitable for rapid game prototype development.

It is the physical world instance in saving PAPA drawn by DebugDraw:

 

 

Figure 1

When building a physical world, we first need to define the relevant physical objects, and then set the relevant physical parameters according to the characteristics of the game.
// Create a physical world instance
Var world = new b2World (new b2Vec2 (0, 9.8), true );
Var scale = 1/30;/* convert the pixel to the length unit in Box2D */
 
// Create ground and physical settings
Var bodyDef = new b2BodyDef ();
Var body = world. CreateBody (bodyDef );
Var fixtureDef = new b2FixtureDef ();
FixtureDef. density = 10;
FixtureDef. friction = 0.3;
FixtureDef. restitution = 0.1;
Var polygonShape = new b2PolygonShape ();
PolygonShape. SetAsBox (800 * scale, 20 * scale );
FixtureDef. shape = polygonShape; body. SetType (b2Body. b2_staticBody );
Body. CreateFixture (fixtureDef );
Body. SetPosition (new b2Vec2 (400 * scale, 490 * scale ));
Www.2cto.com
// Create the PAPA block and its physical settings
Var bodyDef = new b2BodyDef ();
Var body = world. CreateBody (bodyDef );
Var fixtureDef = new b2FixtureDef ();
FixtureDef. density = 10;/* density indicates density */
FixtureDef. friction = 0.3;/* friction indicates the friction coefficient */
FixtureDef. restitution = 0.8;/* restitution is the elastic coefficient */
Var polygonShape = new b2PolygonShape ();
PolygonShape. SetAsBox (30 * scale, 30 * scale );
FixtureDef. shape = polygonShape;
Body. SetType (b2Body. b2_dynamicBody );
Body. CreateFixture (fixtureDef );
Body. SetPosition (new b2Vec2 (400 * scale, 100 * scale ));

 

After the physical world is built, we can see the prototype of the game through the DebugDraw function, so that we can adjust the object parameters and create checkpoints on this basis. After these tasks are completed, we need to "Paste" the film on the physical object so that players can see the real game picture.

Synchronous Display object

First, we need to create a DisplayObject class, which is similar to the display class in the Flash display list mechanism. This class has corresponding properties such as x, y, and rotation, and has its own drawing method, the list is displayed in array format.

Next, add the DisplayObject to the display list, and synchronize its position and rotation angle with the corresponding object in Box2D:
 
Var position = body. GetPosition ();
Var angle = body. GetAngle ();
DisplayObject. x = position. x/scale;
DisplayObject. y = position. y/scale;
DisplayObject. rotation = angle * 180/Math. PI;

According to the physical world shown in figure 1, we can see the following images after we draw a picture:

 

 

 

Figure 2

Animation

After the DisplayObject is synchronized with the physical object, we can fill it with the image to be displayed, and then change the image at a certain interval to achieve the animation effect. Generally, an animation consists of many images. To reduce the number of reads, we combine all the images in the animation into a large image called SpriteSheet. Figure 3 shows the animation SpriteSheet of tool 1 in save PAPA:

 

 

Figure 3

Then, we can obtain the image to be displayed in the current frame according to the coordinates in SpriteSheet:
 
Var canvas = document. createElement ("canvas ");
Canvas. width = width;/* width is the width of the image */
Canvas. height = height;/* height is the height of the image */
Canvas. getContext ('2d '). drawImage (sheet, x, y, width, height, 0, 0, width, height );

Summary

HTML5 technology is gradually being improved, and our programmers are constantly working hard to create more good works. The construction of the physical world, display objects, and animation playing technologies discussed in this article are very useful for HTML5 games. We are looking forward to seeing the continuous development of HTML5 technology and more innovative HTML5 web games.

Welcome to the NTFusion team's HTML5 physical game save PAPA!