Advanced: Add Light, Shadow and Skeleton Animation

In this section, we will show you how to use third-part assets such as animation, etc to complete the game prototype we have made in Quick Start: Make Your First 3D Game

Lighting and Shadows

Lighting and shadows are important rendering features that describe the game. With light sources and shadows, we can simulate a more realistic game world, providing better immersion and empathy.

Next, we add a simple shadow to the character.

Turn on shadows

  1. Click the top Scene node in the Hierarchy panel, then in the Inspector panel check Enabled in shadows and modify the Distance and Normal properties to:

    planar shadows

  2. Click on the Body node under the Player node and set ShadowCastingMode to ON in the cc.MeshRenderer component.

    model shadow

At this point, you will see a shadow sheet in the Scene Editor. The preview will show that the shadow is not visible because it is directly behind the model, covered by the capsule.

player shadow

Adjusting lighting

By default, a Main Light node with cc.DirectionalLight component is added when creating a new scene. So to make the shadows appear in a different position, we can adjust the direction of this light. Click in the Hierarchy panel to select the Main Light node and adjust the Rotation property to (-10, 17, 0).

main light

The shadow effect can be seen by clicking on the preview at

player shadow preview

Adding a protagonist model

Importing model resources

Importing models, materials, animations and other resources from the original sources is not the focus of this basic tutorial, so we will directly use the resources that have been imported into the project. Put project (GitHub in the assets directory and copy the cocos folder to the assets directory of your own project.

Adding to the scene

A Prefab named Cocos is already included in the Cocos file. Drag it to the Body node under the Player node in the Hierarchy panel as a child node of the Body node.

add cocos prefab

Also, remove the original capsule model from the Inspector panel:

remove capsule

You can add a Spotlight under the Cocos node to highlight its shiny head.

add cocos light

Add jump animation

Now the preview shows that the main character will have a standby animation initially, but it will look very inconsistent to use this standby animation when jumping, so we can change it to a jump animation during jumping. Add a variable to the PlayerController.ts class that references the model animation:

  1. @property({type: SkeletalAnimation})
  2. public CocosAnim: SkeletalAnimation|null = null;

Also, since we have changed the protagonist from a capsule body to a character model, we can discard the animation previously created for the capsule body and comment on the relevant code as follows:

  1. // @property({type: Animation})
  2. // public BodyAnim: Animation|null = null;
  4. jumpByStep(step: number) {
  5.     // ...
  6.     // if (this.BodyAnim) {
  7.     //     if (step === 1) {
  8.     //         this.BodyAnim.play('oneStep');
  9.     //     } else if (step === 2) {
  10.     //         this.BodyAnim.play('twoStep');
  11.     //     }
  12.     // }
  13. }

Then in the Hierarchy panel drag and drop the Cocos node into the CocosAnim property box of the Player node:

assign cocos prefab

Play the jump animation in the jumpByStep function of the PlayerController script:

  1. jumpByStep(step: number) {
  2.     if (this._startJump) {
  3.         return;
  4.     }
  5.     this._startJump = true;
  6.     this._jumpStep = step;
  7.     this._curJumpTime = 0;
  8.     this._curJumpSpeed = this._jumpStep / this._jumpTime;
  9.     this.node.getPosition(this._curPos);
  10.     Vec3.add(this._targetPos, this._curPos, new Vec3(this._jumpStep, 0, 0));
  12.     if (this.CocosAnim) {
  13.         this.CocosAnim.getState('cocos_anim_jump').speed = 3.5; // Jump animation time is relatively long, here to speed up the playback
  14.         this.CocosAnim.play('cocos_anim_jump'); // Play jump animation
  15.     }
  17.     // if (this.BodyAnim) {
  18.     //     if (step === 1) {
  19.     //         this.BodyAnim.play('oneStep');
  20.     //     } else if (step === 2) {
  21.     //         this.BodyAnim.play('twoStep');
  22.     //     }
  23.     // }
  25.     this._curMoveIndex += step;
  26. }

Here _jumpStep time is 0.3 seconds, if the animation length and _jumpStep don’t match, it may cause the following problem:

  • The animation transition is not smooth when the animation is not finished yet
  • or the animation is finished but the jump time is not yet up, resulting in slippage

One way to handle this is to recalculate the speed of the animation directly from the length of the animation clip and _jumpStep instead of using a constant: _jumpStep:

  1. var state = this.CocosAnim.getState('cocos_anim_jump');            
  2. state.speed = state.duration/this._jumpTime;

Developers can try it themselves, or manually modify _jumpStep and speed to the right values to control the game’s pace.

In the OnceJumpEnd function of the PlayerController script, make the main character standby and play the standby animation.

  1. onOnceJumpEnd() {
  2.     if (this.CocosAnim) {
  3.         this.CocosAnim.play('cocos_anim_idle');
  4.     }
  5.     this.node.emit('JumpEnd', this._curMoveIndex);
  6. }

Note: onOnceJumpEnd will be triggered when the jump is completed, see the update function in PlayerController.ts for details.

The preview effect is as follows:

cocos play

Final Code

PlayerController.ts

  1. import { _decorator, Component, Vec3, input, Input, EventMouse, Animation, SkeletalAnimation } from 'cc';
  2. const { ccclass, property } = _decorator;
  4. @ccclass("PlayerController")
  5. export class PlayerController extends Component {
  7.     @property({type: Animation})
  8.     public BodyAnim: Animation|null = null;
  9.     @property({type: SkeletalAnimation})
  10.     public CocosAnim: SkeletalAnimation|null = null;
  12.     // for fake tween
  13.     private _startJump: boolean = false;
  14.     private _jumpStep: number = 0;
  15.     private _curJumpTime: number = 0;
  16.     private _jumpTime: number = 0.3;
  17.     private _curJumpSpeed: number = 0;
  18.     private _curPos: Vec3 = new Vec3();
  19.     private _deltaPos: Vec3 = new Vec3(0, 0, 0);
  20.     private _targetPos: Vec3 = new Vec3();
  21.     private _curMoveIndex = 0;
  23.     start () {
  24.     }
  26.     reset() {
  27.         this._curMoveIndex = 0;
  28.     }
  30.     setInputActive(active: boolean) {
  31.         if (active) {
  32.             input.on(Input.EventType.MOUSE_UP, this.onMouseUp, this);
  33.         } else {
  34.             input.off(Input.EventType.MOUSE_UP, this.onMouseUp, this);
  35.         }
  36.     }
  38.     onMouseUp(event: EventMouse) {
  39.         if (event.getButton() === 0) {
  40.             this.jumpByStep(1);
  41.         } else if (event.getButton() === 2) {
  42.             this.jumpByStep(2);
  43.         }
  45.     }
  47.     jumpByStep(step: number) {
  48.         if (this._startJump) {
  49.             return;
  50.         }
  51.         this._startJump = true;
  52.         this._jumpStep = step;
  53.         this._curJumpTime = 0;
  54.         this._curJumpSpeed = this._jumpStep / this._jumpTime;
  55.         this.node.getPosition(this._curPos);
  56.         Vec3.add(this._targetPos, this._curPos, new Vec3(this._jumpStep, 0, 0));
  58.         if (this.CocosAnim) {
  59.             this.CocosAnim.getState('cocos_anim_jump').speed = 3.5; // Jump animation time is relatively long, here to speed up the playback
  60.             this.CocosAnim.play('cocos_anim_jump'); // Play jump animation
  61.         }
  63.         // if (this.BodyAnim) {
  64.         //     if (step === 1) {
  65.         //         this.BodyAnim.play('oneStep');
  66.         //     } else if (step === 2) {
  67.         //         this.BodyAnim.play('twoStep');
  68.         //     }
  69.         // }
  71.         this._curMoveIndex += step;
  72.     }
  74.     onOnceJumpEnd() {
  75.         if (this.CocosAnim) {
  76.             this.CocosAnim.play('cocos_anim_idle');
  77.         }
  79.         this.node.emit('JumpEnd', this._curMoveIndex);
  80.     }
  82.     update (deltaTime: number) {
  83.         if (this._startJump) {
  84.             this._curJumpTime += deltaTime;
  85.             if (this._curJumpTime > this._jumpTime) {
  86.                 // end
  87.                 this.node.setPosition(this._targetPos);
  88.                 this._startJump = false;
  89.                 this.onOnceJumpEnd();
  90.             } else {
  91.                 // tween
  92.                 this.node.getPosition(this._curPos);
  93.                 this._deltaPos.x = this._curJumpSpeed * deltaTime;
  94.                 Vec3.add(this._curPos, this._curPos, this._deltaPos);
  95.                 this.node.setPosition(this._curPos);
  96.             }
  97.         }
  98.     }
  99. }

GameManager.ts

  1. import { _decorator, Component, Prefab, instantiate, Node, Label, CCInteger, Vec3 } from 'cc';
  2. import { PlayerController } from "./PlayerController";
  3. const { ccclass, property } = _decorator;
  5. // The runway type, pit (BT_NONE) or solid road (BT_STONE)
  6. enum BlockType{
  7.     BT_NONE,
  8.     BT_STONE,
  9. };
  11. enum GameState{
  12.     GS_INIT,
  13.     GS_PLAYING,
  14.     GS_END,
  15. };
  17. @ccclass("GameManager")
  18. export class GameManager extends Component {
  20.     // The runway prefab
  21.     @property({type: Prefab})
  22.     public cubePrfb: Prefab | null = null;
  23.     // Length of the road
  24.     @property({type: CCInteger})
  25.     public roadLength: Number = 50;
  26.     private _road: BlockType[] = [];
  27.     // Node of the start menu
  28.     @property({type: Node})
  29.     public startMenu: Node | null = null;
  30.     // The reference of the PlayerController instance on the Player node
  31.     @property({type: PlayerController})
  32.     public playerCtrl: PlayerController | null = null;
  33.     // Label to display the step
  34.     @property({type: Label})
  35.     public stepsLabel: Label | null = null!;
  37.     start () {
  38.         this.curState = GameState.GS_INIT;
  39.         this.playerCtrl?.node.on('JumpEnd', this.onPlayerJumpEnd, this);
  40.     }
  42.     init() {
  43.         // Active the start menu
  44.         if (this.startMenu) {
  45.             this.startMenu.active = true;
  46.         }
  47.         // Generate the runway
  48.         this.generateRoad();
  49.         if(this.playerCtrl){            
  50.             // Disable user input
  51.             this.playerCtrl.setInputActive(false);
  52.             // Reset the player's position
  53.             this.playerCtrl.node.setPosition(Vec3.ZERO);
  54.             // Reset the steps
  55.             this.playerCtrl.reset();
  56.         }
  57.     }
  59.     set curState (value: GameState) {
  60.         switch(value) {
  61.             case GameState.GS_INIT:
  62.                 this.init();
  63.                 break;
  64.             case GameState.GS_PLAYING: 
  65.                 if (this.startMenu) {
  66.                     this.startMenu.active = false;
  67.                 }
  69.                 if (this.stepsLabel) {
  70.                     this.stepsLabel.string = '0';   // Reset the number of steps to 0
  71.                 }
  72.                 // What happens is that the character already starts moving at the moment the game starts
  73.                 // Therefore, a delay is needed here
  74.                 setTimeout(() => { 
  75.                     if (this.playerCtrl) {
  76.                         this.playerCtrl.setInputActive(true);
  77.                     }
  78.                 }, 0.1);
  79.                 break;
  80.             case GameState.GS_END:
  81.                 break;
  82.         }
  83.     }
  85.     generateRoad() {        
  86.         // Prevent the track from being the old track when the game is restarted
  87.         // Therefore, the old track needs to be removed and the old track data cleared
  88.         this.node.removeAllChildren();
  89.         this._road = [];
  90.         // Make sure that the character is standing on the real road when the game is running
  91.         this._road.push(BlockType.BT_STONE);
  93.         // Determine the type of track for each frame
  94.         for (let i = 1; i < this.roadLength; i++) {
  95.             // If the last track is a pit, then this frame must not be a pit
  96.             if (this._road[i-1] === BlockType.BT_NONE) {
  97.                 this._road.push(BlockType.BT_STONE);
  98.             } else {
  99.                 this._road.push(Math.floor(Math.random() * 2));
  100.             }
  101.         }
  103.         // Generate tracks based on track type
  104.         let linkedBlocks = 0;
  105.         for (let j = 0; j < this._road.length; j++) {
  106.             if(this._road[j]) {
  107.                 ++linkedBlocks;
  108.             }
  109.             if(this._road[j] == 0) {
  110.                 if(linkedBlocks > 0) {
  111.                     this.spawnBlockByCount(j - 1, linkedBlocks);
  112.                     linkedBlocks = 0;
  113.                 }
  114.             }        
  115.             if(this._road.length == j + 1) {
  116.                 if(linkedBlocks > 0) {
  117.                     this.spawnBlockByCount(j, linkedBlocks);
  118.                     linkedBlocks = 0;
  119.                 }
  120.             }
  121.         }
  122.     }
  124.     spawnBlockByCount(lastPos: number, count: number) {
  125.         let block: Node|null = this.spawnBlockByType(BlockType.BT_STONE);
  126.         if(block) {
  127.             this.node.addChild(block);
  128.             block?.setScale(count, 1, 1);
  129.             block?.setPosition(lastPos - (count - 1) * 0.5, -1.5, 0);
  130.         }
  131.     }
  132.     spawnBlockByType(type: BlockType) {
  133.         if (!this.cubePrfb) {
  134.             return null;
  135.         }
  137.         let block: Node|null = null;
  138.         switch(type) {
  139.             case BlockType.BT_STONE:
  140.                 block = instantiate(this.cubePrfb);
  141.                 break;
  142.         }
  144.         return block;
  145.     }
  147.     onStartButtonClicked() {
  148.         // To start the game by clicking the Play button
  149.         this.curState = GameState.GS_PLAYING;
  150.     }
  152.     checkResult(moveIndex: number) {
  153.         if (moveIndex < this.roadLength) {
  154.             // Jumped on the pit
  155.             if (this._road[moveIndex] == BlockType.BT_NONE) {
  156.                 this.curState = GameState.GS_INIT;
  157.             }
  158.         } else {    // Jumped over the maximum length
  159.             this.curState = GameState.GS_INIT;
  160.         }
  161.     }
  163.     onPlayerJumpEnd(moveIndex: number) {
  164.         if (this.stepsLabel) {
  165.             // Because in the last step there may be a jump with a large pace, but at this time, whether the jump is a large pace or a small pace should not increase the score more
  166.             this.stepsLabel.string = '' + (moveIndex >= this.roadLength ? this.roadLength : moveIndex);
  167.         }
  168.         // Check the type of the currently falling road and get the result
  169.         this.checkResult(moveIndex);
  170.     }
  172.     // update (deltaTime: number) {
  173.     //     // Your update function goes here.
  174.     // }
  175. }

Conclusion

Congratulations on completing your first game made with Cocos Creator! You can download the full project at GitHub - Mind-Your-Step-3D. We hope this quick start tutorial will help you understand the basic concepts and workflow of the Cocos Creator game development process. If you are not interested in writing and learning to script, you can also copy the script directly from the finished project.

Next, you can continue to improve all aspects of the game, here are some recommended improvements:

  • Add difficulty to the game, when the character stays in the same place for 1 second it is considered a failure
  • Change the runway to infinite, dynamically delete the runway that has been run and extend the runway behind.
  • Add game sound effects
  • Add an end menu for the game, count the number of jumps and the time spent by the player
  • Replace characters and runways with more beautiful resources
  • Add some pickup items to guide the player to “make mistakes”
  • Add some particle effects, such as trailing when the character is moving, dust when it hits the ground
  • Add two buttons for touchscreen devices instead of left and right mouse buttons

In addition, if you want to publish your finished game to the server and share it with your friends, you can read the Cross-Platform Game Publishing section.