This example uses the engine Cocos Creator V2.1.4. Code editing tools VSCode or WebStorm.
I. Start and use of the physics engine
1. Visual editing of basic scenes
As shown above:
[1] Create a monochrome Sprite node bg, add the adaptive Widget, set the distance to 0, or set the size of bg node to be the same as the Canvas resolution. As shown below:
[2] Create a monochrome Sprite node red, set the node color to red, add RigidBody, and set the Type attribute value to Dynamic, indicating that the node position is variable. Add PhysicsBoxCollider.
[3] Create a new ground monochrome render node, set the color, set the fit, add RigidBody, set the Type attribute to Static, which means the ground position is fixed, add PhysicsBoxCollider, as follows:
2. Componentized development (start physics engine)
[1] Create a component class that can be recognized by the game engine. New enable_phy. Js.
[2] instantiate to get an instance of a component, either through the addComponent button on the node, or by using the addComponent method in your code. As shown in the following figure, add the user-defined script component ENABle_PHY to the Canvas node through the editor to start the physics engine.
[3] Provide fixed entry points (start and update methods) in the code for the game engine to recognize. As shown below:
Running, the red block will fall down, fall to the ground and stop. The physical engine is started successfully.
Two, the use of rope joints
1. Rotate the fixed point
As shown in the image above, create a new monochrome render node, Blue, and add the Widget component so that the blue block is at the top. As a mount point for the spinning rope. At the same time, add RigidBody to the Blue node and set its Type property to static. Add PhysicsBoxCollider.
2. Rope making
As shown in the figure above, create a monochrome render node, modify the node size and set the node color; Add RigidBody component, set Type property to Dynamic, can move; Add PhysicsBoxCollider; Click [Add Component] button, select [Physical Component] – [Joint] – [Rope], set the maximum Max Length to 5, drag the blue node to Connected Body, indicating that the Rope connection point is blue node, and then drag the circle on the Rope to modify the anchor point.
Copy the wire node to obtain the Wire2 node, modify the related properties as follows, mainly modify the wire2 connected rigid body as wire, connect the first section of rope, adjust the connection anchor point as shown in the following figure.
In the same way, we copy wire2 to wire3, modify the connected rigidbody to Wire2, adjust the connection anchor point, copy wire3 to wire4, modify the connected rigidbody to Wire3, adjust the connection anchor point. Thus, a rope with four sections has been made. The diagram below:
Change the friction between ground and red block to 0 as follows:
3. Run tests
The rope will swing down under the force of gravity, the red block will fall to the ground under the force of gravity, and when the rope hits the brick it will push the brick to the right, and the rope will continue to swing back and forth. As shown above.