Sweshi's Tutorials

Cocoos Creator Mind Your Step 3D Game Tutorial

Animating the Jump

Click on the Capsule within the Player node in the hierarchy. Now go to the "animation" panel on the center bottom of the editor. By default it will be on "console". Once there select the "Please add animation component".

Cocos Creator 3D Tutorial: Mind Your Step  - Animation Panel

From the window that opens, create a new "Animations" folder and open it. Inside, name the animation as "oneStep". Later we will add "twoStep".

Cocos Creator 3D Tutorial: Mind Your Step  - animation created.

Click on the "property List" and select "position". We will be moving the position of the player on the Y axis to simulate a jump.

Cocos Creator 3D Tutorial: Mind Your Step  - position animation.

Go to "Frame" and insert "0" and press enter. Enter "0" on the Y axis as shown in the figure. Press enter and move to the next frame.

Cocos Creator 3D Tutorial: Mind Your Step  - frame zero.

Insert 4 on the "Frame" and insert 0.5 on the Y axis as shown in the figure. Press enter and move to the next frame.

Cocos Creator 3D Tutorial: Mind Your Step  - frame four.

Insert 8 on the "Frame" and insert 0 on the Y axis as shown in the figure. Press enter and click the play button to see if it is animating the player. Click save.

Cocos Creator 3D Tutorial: Mind Your Step  - frame eight.

Go to the "assets" section on the left and right click the "Animations" folder->create->AnimationClip. Name the clip as "twoStep". NB: Don't worry about the other things in the screenshot that we have not yet demonstrated, we will show the whole process for everything we have added in the coming tutorials.

Cocos Creator 3D Tutorial: Mind Your Step  - Creating two step.

In the animation panel, go to "clips" and click on the drop down to select "twoStep". This will allow us to edit the clip we created.

Cocos Creator 3D Tutorial: Mind Your Step  - animating two step.

We will do everything just like with oneStep but with different Y axis values. So add a position from the property just like we did for oneStep. Then go to frame 0 and put a Y axis of 0 then presss enter. Go to frame 4 and put a Y axis of 1 and press enter. Go to frame 8 and put a Y axis of 0 and press enter. Save the animation.

Cocos Creator 3D Tutorial: Mind Your Step  - twoStep animations.

To make the animation usable with our player, we need it added to the player script so that we can use it with the code. So open the PlayerController and on top of the other variables add the following line.

@property({type: Animation}) public BodyAnim: Animation | null = null;

Rename the capsule in under the player to "Body". Now click on the Player Node. When you look in the inspector, the PlayerController script will now have a "Body Anim" section expecting a body animation. You now have to drag the body(formerly capsule) into this section because this is the node that has the oneStep and twoStep animations. NB: Dont worry about the cubes in the screenshot, we will add those properly in the next tutorial.

Cocos Creator 3D Tutorial: Mind Your Step  - dragging the body.

Open the PlayerController script and go to the "jumpByStep" function. At the bottom of the function, it should have the following code.

if (this.BodyAnim) { if (step === 1) { this.BodyAnim.play('oneStep'); } else if (step === 2) { this.BodyAnim.play('twoStep'); } }

The code is checking the the animation body is true, meaning that your dragged the body to "Body anim" successfully in the editor and that the body has animations. the code then checks how many steps have been passed to the function i.e., 1 or 2. We play oneStep or twoStep depending on the steps passed.

You can try running the game and see if the player is jumping up and down when you click the left or right mouse buttons.

Complete PlayerController Script
import { _decorator, Component, input, Input, EventMouse, Vec3 } from 'cc'; const { ccclass, property } = _decorator; @ccclass("PlayerController") export class PlayerController extends Component { // Whether received jump command private _startJump: boolean = false; // The jump step count private _jumpStep: number = 0; // Current jump time private _curJumpTime: number = 0; // Total jump time private _jumpTime: number = 0.5; // current jump speed private _curJumpSpeed: number = 0; // current position of the private _curPos: Vec3 = new Vec3(); // The difference of the current frame movement position during each jump private _deltaPos: Vec3 = new Vec3(0, 0, 0); // Target position of the character private _targetPos: Vec3 = new Vec3(); start () { // Your initialization goes here. input.on(Input.EventType.MOUSE_UP, this.onMouseUp, this); } onMouseUp(event: EventMouse) { if (event.getButton() === 0) { //jump by one step this.jumpByStep(1); } else if (event.getButton() === 2 ) { //jump by two steps this.jumpByStep(2); } } jumpByStep(step: number) { if (this._startJump) { return; } this._startJump = true; this._jumpStep = step; this._curJumpTime = 0; this._curJumpSpeed = this._jumpStep / this._jumpTime; this.node.getPosition(this._curPos); Vec3.add(this._targetPos, this._curPos, new Vec3(this._jumpStep, 0, 0)); if (this.BodyAnim) { if (step === 1) { this.BodyAnim.play('oneStep'); } else if (step === 2) { this.BodyAnim.play('twoStep'); } } } update (deltaTime: number) { //we want to only jump if the _startJump is true if (this._startJump) { //we add the delta time to the jump time this._curJumpTime += deltaTime; // if the current jump time is more than what we have allocated then we stop the jump //meaning we have already jumped if (this._curJumpTime > this._jumpTime) { // end jump // force the player to the target position this.node.setPosition(this._targetPos); // mark the end of the jump by changing _startJump to false this._startJump = false; } else { // otherwise if we are still jimping // we tween so that we have a smooth jump ing animation // Get the current position this.node.getPosition(this._curPos); // calculate the length of this frame that should be displaced this._deltaPos.x = this._curJumpSpeed * deltaTime; // add the current position to the length of the displacement Vec3.add(this._curPos, this._curPos, this._deltaPos); // set the position after displacement this.node.setPosition(this._curPos); } } } }

Videos