COCOS2D-JS official complete Project Tutorial translation: Vi. adding chipmunk physics engine in our game world

Add Chipmunk physics engine in our world of games
First, Introduction

Cocos2d JS can give us the power to create an impressive game world. But the lack of a certain reality.
While we can do complex calculations to make the game world more realistic, there is another option
It can alleviate our life. The answer is the physics engine.
The physics engine provides gravity, collision detection and physical simulations that can make our game world look more realistic.
In this tutorial, we will introduce the Chipmunk physics engine into our parkour game.
Second, why is the Chipmunk physics engine

Why should we choose Chipmunk's physics engine? Because it gives us more power than any other 2D physics engine.
While using Chipmunk's physical engine, we have another option--box2d.
Box2D is a good 2D physics engine that has existed for a long time. Many 2D games have used box2d physics for their games.
But Chipmunk has its own merits. You can go to Chipmunk's website for more information.
Third, open the physics engine in the COCOS2D-JS
Get ready
First, let's turn on the Chipmunk physics engine.
Open Project.json File
Change the following item to

"Modules": ["cocos2d"], change to


"Modules": ["cocos2d", "Chipmunk"],

Therefore, when Cocos2d JS is completed, it is automatically imported into the Shipmunk Physics engine library.
Next, let's create a new file named Globals.js and add two global variables to it.
var g_groundhight = 57;
var g_runnerstartx = 80;
Finally, we should tell the framework to load the file when the engine starts globals.js.
Attach the globals.js path to the end of the jslist array:

"Jslist": [
"Src/resource.js",
"Src/app.js",
"Src/animationlayer.js",
"Src/backgroundlayer.js",
"Src/playscene.js",
"Src/statuslayer.js",
"Src/globals.js"

Note: When you want to add a new class file to Cocos2d-js yes you should remember to load the new class file into

Jslist
In the list

Iv. initializing the physical world of Chipmunk
In Chipmunk, there is a space object to represent the physical world.
First, let's add a new member variable playscene.js file namespace:
Space:null,
In general, a game requires only one space object. Spatial objects can be shared at different levels.
We usually playscene the space to initialize the code.
The following code sets the physical world:
Init space of Chipmunk
Initphysics:function () {
1. New Space object
This.space = new CP. Space ();
2. Setup the Gravity
this.space.gravity = CP.V (0,-350);

3. Set up Walls
var wallbottom = new CP. Segmentshape (This.space.staticBody,
CP.V (0, g_groundhight),//Start point
CP.V (4294967295, g_groundhight),//MAX int:4294967295
0);//thickness of wall
This.space.addStaticShape (Wallbottom);
},
The code above is self-explanatory and we can leave safely. If you want to know the details of these APIs, you should
Refer to Chipmunk's official documents for more information.
Next, let's determine the main loop of our game:
Update:function (DT) {
Chipmunk Step
This.space.step (DT);
}
In the updated feature, we tell Chipmunk to start simulating physics.
Before we go on, let's add a tiny change to Animationlayer. Because we're going to create a physical actor in Animationlayer, so
We should modify the Animationlayer constructor through the spatial object.
Ctor:function (space) {
This._super ();
This.space = space;
This.init ();
},
Of course, we should define a weak reference member variable in Animationlayer and initialize it to null.
So our preparations have been completed. Let's put the end and call these methods in the OnEnter function:
Onenter:function () {
This._super ();
This.initphysics ();

This.addchild (New Backgroundlayer ());
This.addchild (New Animationlayer (This.space));
This.addchild (New Statuslayer ());

This.scheduleupdate ();
}, note: You should initialize the physical space and load it into Animationlayer.
V. Adding physical components to the character wizard

In the last tutorial, we created characters with Spritsheet. In this section, we will rewrite the characters with Physicssprite.
This is a reusable component that can be combined with the physicssprite physical body and the cocos2d sprite.
The following code to create the Physicssprite character:
1. Create Physicssprite with a sprite frame name
This.sprite = cc. Physicssprite.create ("#runner0. png");
var contentsize = This.sprite.getContentSize ();
2. Init the runner physic body
This.body = new CP. Body (1, Cp.momentforbox (1, Contentsize.width, contentsize.height));
3. Set the position of the runner
THIS.BODY.P = CC.P (g_runnerstartx, g_groundhight + CONTENTSIZE.HEIGHT/2);
4. Apply impulse to the body
This.body.applyImpulse (CP.V (0), cp.v (0, 0));//run speed
5. Add the created body to space
This.space.addBody (This.body);
6. Create the shape for the body
This.shape = new CP. Boxshape (This.body, contentsize.width-14, contentsize.height);
7. Add Shape to space
This.space.addShape (This.shape);
8. Set body to the Physic sprite
This.sprite.setBody (This.body);
Self-explanatory code and comments.
In
Animationlayer
The Init
Method
Add these
Code
。

Vi. Commissioning and testing
Congratulations to you. You can press the Debug button on the Webstorm.
Now you can see the genie running through the screen!
Vii. Summary

In this tutorial, we have shown you how to set up the physical world of chipmunk, how to establish the boundaries of the physical world, how to create a rigid body and the associated
Shape. We've also added physics sprites to make their behavior more realistic. You can http://cocos2d-x.org/docs/tutorial/framework/html5/parkour-game-with-javascript-v3.0/chapter6/res/here. Parkour.zip get the full source code.
Eight, what do we do next?
In the next tutorial, we will introduce the camera movement into the game. We will also replace the background image with Tiledmap.
More importantly, we will make the background infinite loop in the game display.

COCOS2D-JS official complete Project Tutorial translation: Vi. adding chipmunk physics engine in our game world