COS CREATOR implementation

?1. How to play

After the game starts, click on the left and right sides of the screen, the robot will jump one step toward the upper left or upper right. If there is a stone in the next step, you will get 1 point for success. Otherwise the game is over.

2. Module introduction

The game scene is divided into two: homepage scene (home), game scene (game).

?

The home page scene (home) serves as the game entrance, without other functions, and simply provides the game entrance.

p>

?< /span>

Game scene (game) realizes game play and game logic control, the interface is as follows:

?

The main functions of the game are all in the game scene. The main function structure of the game scene is as follows:

?

3. Development instructions

Here we mainly introduce the logic of the game scene, according to the above functional structure to introduce, first look at all the courseware UI components in the game scene:

?

The following sub-modules are introduced:

Stone Block logic (Box)

The script is mounted on the prefabricated stone to realize the logic related to the stone. There are two main ones:

1 . Stone moves down

According to the current screen position of the robot, after the robot jumps, whether it succeeds or fails, let the stone move downwards and move out of the screen. The corresponding code is as follows:

p>

down(y: number){
    this.node.runAction(cc.sequence(
        cc.moveBy(0.4, 0, y),
        cc.callFunc( () => {
            NodeMgr.putBox(this.node);
        })
    ));
}

2. Record data

private mPrevBox: cc.Node = null; / / Previous stone
private mNextBox: cc.Node = null; // next stone
private mOffset: number = 0; // Left and right offset [-4,4]

The upper and lower stones are mainly for the robot to use, so that the machine knows where the next jump is, and the offset is Record the position of the rock in the horizontal direction of the screen, from left to right, the value is [-4,4] integer.

Node management logic (NodeMgr)

When the stones in the game are at most, they are only covered with 3 screen heights. After they are exceeded, the screen It will move to the bottom, the stones will be redrawn, and the cycle will be repeated to achieve the purpose of continuous play. Therefore, the stones are repeatedly removed and added. Using battery-saving can make the game perform better.

1. Get the stone node

Judging whether there is already in the battery, if there is one, go to the ready-made one, if not, return empty, let the game logic itself Generate a new node, the code is as follows:

public static putBox(box: cc.Node){
    if(this.mBoxNodePool == null){
        this.mBoxNodePool = new cc.NodePool(‘boxs’);
    }
?
    if(box != null){
        this.mBoxNodePool.put(box);
    }
}

2. Recycling the stone node

When removing the node, directly put the node into the node pool, and provide it for the next time you need it , The code is as follows:

public static getBox() {
    if(this.mBoxNodePool != null && this.mBoxNodePool.size()> 0){
        let box = this.mBoxNodePool.get();
        box.stopAllActions();
        return box;
    }else{
        return null;
    }
}

Game logic (Game)

The Game script component is mounted on the root node of the game scene, and the stone management script component is the same, as shown in the figure below:

? span>

There are three main functions:

1. Click event logic

According to the click To judge the x-coordinate of the position, jump to the left on the left side of the screen, and jump to the right on the right side of the screen. Before you can jump, you need to judge whether the robot is jumping now. You need to pay attention to the code as follows:

onTouchCallback(event: any){
    if(!this.mIsPlaying){
        return;
    }
?
    if(this.nodeRobot.getComponent(‘Robot’).isJumping()){
        return;
    }
?
    this.bgDown();
?
    this.mIsPlaying = true;
    let location = event.getLocation();
    if(location.x 
  

2. Game background motion control

When the game starts, calculate the maximum y-coordinate of the background motion, before the exercise, determine whether it is after the jump Exceed the maximum coordinates, move to the first screen position, similar to stone placement logic, the main code is as follows:

bgDown(){
    let maxY = -cc.winSize.height / 2-2 * cc.winSize.height;
    let interval = this.node.getComponent(‘BoxMgr’).getIntervalY();
    
    // Exceeded, refresh the screen
    if(this.nodeBg.y-interval <= maxY){
        this.nodeBg.y += 2 * cc.winSize.height;
        this.reloadBoxs();
    }
?
    // move down
    this.nodeBg.runAction(cc.sequence(
        cc.moveBy(0.2, 0, -interval),
        cc.callFunc( () => {
            
        })
    ));
}

3. Control stone redrawing

Combined with the game background control logic, determine whether all rocks need to be redrawn.

Stone management logic (BoxMgr)

Mounted on the root node of the game scene, it mainly completes the following 3 functions:

1. Generate a new stone

Corresponding to the reloadNew function in the code, there is too much code, so no code will be posted. If necessary, download the project code to see.

2. Load all stones

First determine if there is any remaining on the previous screen, if so, draw the previous screen first, and then draw the new one Yes, the new ones can be displayed on the third screen and need to be kept for drawing when the screen is cut next time.

3. Clean up rocks

Clean up all rocks and keep them in NodeMgr. The code is as follows:

clearAll(){
    if(this.mMemBoxs != null){
        for(let i = 0; i 
  

down(y: number){
    this.node.runAction(cc.sequence(
        cc.moveBy(0.4, 0, y),
        cc.callFunc( () => {
            NodeMgr.putBox(this.node);
        })
    ));
}

private mPrevBox: cc.Node = null; // previous stone
private mNextBox: cc.Node = null; // next stone
private mOffset: number = 0; // Left and right offset [-4,4]

public static putBox(box: cc.Node){
    if(this.mBoxNodePool == null){
        this.mBoxNodePool = new cc.NodePool(‘boxs’);
    }
?
    if(box != null){
        this.mBoxNodePool.put(box);
    }
}

public static getBox(){
    if(this.mBoxNodePool != null && this.mBoxNodePool.size()> 0){
        let box = this.mBoxNodePool.get();
        box.stopAllActions();
        return box;
    }else{
        return null;
    }
}

onTouchCallback(event: any){
    if(!this.mIsPlaying){
        return;
    }
?
    if(this.nodeRobot.getComponent(‘Robot’).isJumping()){
        return;
    }
?
    this.bgDown();
?
    this.mIsPlaying = true;
    let location = event.getLocation();
    if(location.x 
 
bgDown(){
    let maxY = -cc.winSize.height / 2-2 * cc.winSize.height;
    let interval = this.node.getComponent(‘BoxMgr’).getIntervalY();
    
    // Exceeded, refresh the screen
    if(this.nodeBg.y-interval <= maxY){
        this.nodeBg.y += 2 * cc.winSize.height;
        this.reloadBoxs();
    }
?
    // move down
    this.nodeBg.runAction(cc.sequence(
        cc.moveBy(0.2, 0, -interval),
        cc.callFunc( () => {
            
        })
    ));
}
 
clearAll(){
    if(this.mMemBoxs != null){
        for(let i = 0; i