Cocos Creator Mind Your Step 3D Game Tutorial
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".
From the window that opens, create a new "Animations" folder and open it. Inside, name the animation as "oneStep". Later we will add "twoStep".
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.
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.
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.
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.
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.
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.
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.
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.
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);
}
}
}
}