Sweshi's Tutorials

Cocos Creator Mind Your Step 3D Game Tutorial - Part 8 - Steps Counter

We will need to create some sort of score. For this, we can simply count and display how many steps the player has made. Start by clicking on the canvas since this is a 2D item. We will add a label to the Canvas. Right-Click Canvas->Create->2D Object->Label. Name the label as steps. Click on the label Node you just created named steps and then go to the inspector.

Cocos Creator 3D Tutorial: Mind Your Step  - steps label node.
  • As shown in the screenshot, you can adjust its position, put it higher that the startMenu at around 250 on the Y position.
  • Increase the contentSize and fontSize so that it looks bigger.
  • The String should have "0" because it will be 0 steps moved when the game is starting.

Now we need to be able to change the score and the GameManager is the one that can do this for us. So open the GameManager Script and add the following property.

@property({type: Label}) public stepsLabel: Label | null = null;

Save the code in the GameManager and go back to the editor. From the editor, click on the GameManager and see the steps Label reference in the inspector. Drag the steps label from the Node hierarchy to the steps label reference in the inspector as shown in the figure below.

Cocos Creator 3D Tutorial: Mind Your Step  - dragging the steps to the game manager.

Once the steps label is referenced in the GamemManager, we can then write code that updates the number of steps from zero. Thankfully we already have a moveIndex variable that is keeping track of the number of steps the player has made. We also need to make sure that the score is reset to zero every time the player starts playing. So open the GameManager and go to the set curState(). Go to the case GS_PLAYING and make it look as shown below.

set curState(value:GameState){ switch(value){ case GameState.GS_INIT: this.init();//execute initialisation break; case GameState.GS_PLAYING: if(this.startMenu){ //disables the start menu this.startMenu.active = false; } //CHECK IF THE STEPS LABEL REFERENCE IS FINE if(this.stepsLabel){ //RESET TO ZERO AT THE START OF PLAY this.stepsLabel.string = '0'; } setTimeout(()=>{ if(this.playerCtrl){ //enable the mouse input this.playerCtrl.setInputActive(true); } },0.1);//enable a small delay break; case GameState.GS_END: break; } }

We will now be updating the score as the player finishes a jump. For this, we will be running the update in the onJumpEnd function.

  • We first check if the stepsLabel reference is fine.
  • We then type cast(convert) the number of steps the player has made from integer to string. This is done by having the quotes added to the moveIndex.
  • We also make sure that the value of the score never goes beyond 50
onPlayerJumpEnd(moveIndex:number){ //check if the reference to the stepslabel is fine. if(this.stepsLabel){ //casting to string from number, make sure we always score up to 50 this.stepsLabel.string = ''+(moveIndex >= this.roadLength?this.roadLength:moveIndex); } this.checkResult(moveIndex); }

This will be able to play correctly with the score updating on each jump.



Videos