Cocos Creator Mind Your Step 3D Game Tutorial
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.
- 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.
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.