CocosCreator Getting Started Tutorial: Making Your First Game with TS

premise
TypeScript vs JavaScript
Code editor selection
Learn TypeScript
TypeScript environment configuration
Configure your own declaration file
Attribute type declaration
Writing a game in TypeScript

premise

No matter what technical knowledge you learn, the official documentation should be your first tutorial, so please at least read the Getting Started section http://docs.cocos.com/creator/manual/zh/getting-started/ before reading this article.

Here it is assumed that you have successfully installed Cocos Creator .

TypeScript vs JavaScript

Of course, I will only talk about the advantages here:
1. ts is a superset of js, and ts supports all js syntax.
2. ts supports nearly perfect code hints, while js supports almost no code hints.
3. ts has type definitions, which can eliminate many meaningless errors during compilation.
4. ts can be refactored and is suitable for large projects.
5. ts can use all new syntax such as es6 async. However, js Cocos Creator does not fully support es6 yet.
6. The most important point: All my future tutorials will be written in ts. If you don’t use ts, you will lose me forever .

Code editor selection

Here are just two recommendations:

Visual Studio Code
WebStorm

The advantages of vs code are that it is fast and well integrated with cocos creator, but some functions require you to install plug-ins yourself.

The advantage of webstorm is that all the functions you want are built-in. The disadvantage is that it takes up memory and I personally think it is a bit ugly.

For myself, I use WebStorm at work and VS Code at home.

If you still don’t know which one to use, I can only recommend you to use VS Code first because the following content is for VS Code.

Learn TypeScript

Since you want to use ts to develop games, you must know the syntax of ts. It is impossible for me to explain all the syntax of ts in this article, so https://www.tslang.cn/docs/home.html. Of course, you don’t have to read it all at once. You can take a look first and then review it when you encounter problems.

TypeScript environment configuration

Open any project and click on all of these.

The console will output

Open the editor and you will find a script named creator.d.ts

The prompts of creator all rely on this script, and the engine's API changes must also update this script in time, so every time you update the engine, you must click the "Update VS Code can only prompt data" above to regenerate creator.d.ts.

Right-click in the resource manager to create a new ts script. When you open it, you will find a lot of useless things and there will also be a prompt error (1.81). . .

// - [English] http://www.cocos2d-x.org/docs/editors_and_tools/creator-chapters/scripting/typescript/index.html
// Learn Attribute:
// - [Chinese] http://www.cocos.com/docs/creator/scripting/reference/attributes.html
// - [English] http://www.cocos2d-x.org/docs/editors_and_tools/creator-chapters/scripting/reference/attributes/index.html
// Learn life-cycle callbacks:
// - [Chinese] http://www.cocos.com/docs/creator/scripting/life-cycle-callbacks.html
// - [English] http://www.cocos2d-x.org/docs/editors_and_tools/creator-chapters/scripting/life-cycle-callbacks/index.html

const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

    @property(cc.Label)
    label: cc.Label = null;

    @property
    text: string = 'hello';

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {},

    start () {

    },

    // update (dt) {},
}

Click "Open program installation path" in the upper right corner of the editor.

static-》template-》new-script.ts
This script is the default style of the new ts script. Let's re-edit it. The edited script is as follows

const {ccclass, property} = cc._decorator;

@ccclass
export class NewClass extends cc.Component {

}

Create a new ts script and you will find that it looks the same as the default script you just edited.

Configure your own declaration file

Files with the suffix d.ts will be recognized as declaration files. creator.d.ts is the declaration file of the engine. We can also define our own declaration files. It should be noted that the declaration file should be placed outside the assets file, because the scripts in the assets file will be compiled by the engine, and the purpose of the declaration file is to prompt when writing code, and it is no longer needed after compilation.

For example, add a global.d.ts file to the root directory of the project

Then the script in the project can get the corresponding prompt

For more type definitions, see https://www.tslang.cn/docs/handbook/declaration-files/introduction.html

Attribute type declaration

const LEVEL = cc.Enum({EASY:1,HARD:2});

@ccclass
export class Game extends cc.Component {
    // Integer @property (cc.Integer)
    intVar: number = 0;
    // Floating point type @property(cc.Float)
    floatVar: number = 0;
    // Boolean @property (cc.Boolean)
    boolVar: boolean = false;
    // Node@property(cc.Node)
    nodeVar: cc.Node = null;
    // Node array @property([cc.Node])
    nodeArrVar: Array<cc.Node> = [];
    // Label
    @property(cc.Label)
    labelVar: cc.Label = null;
    // Prefab @property(cc.Prefab)
    prefabVar: cc.Prefab = null;
    //Point @property(cc.Vec2)
    vec2Var: cc.Vec2 = cc.v2();
    // Custom node @property(Player)
    palyerVar:Player = null;
    // Here comes the point, custom enumeration/**
     * Global variables* const LEVEL = cc.Enum({EASY:1,HARD:2});
     */ 
    @property({
        type:LEVEL
    })
    enumVa = LEVEL.EASY;
}

Writing a game in TypeScript

Finally, let's experience the softness and smoothness of TypeScript.

Pick a familiar game to write about. There is a star-picking game in the official documentation. Let’s rewrite it using Ts.

Step 1: Create a new project

Step 2: Write a few scripts

Game.ts

import { Player } from "./Player";

const { property, ccclass } = cc._decorator;

@ccclass
export class Game extends cc.Component {
    // This property references the prefab resource of the star @property(cc.Prefab)
    private starPrefab: cc.Prefab = null;
    // Random range of time for stars to disappear after they are generated @property(cc.Integer)
    private maxStarDuration = 0;
    @property(cc.Integer)
    private minStarDuration = 0
    // Ground node, used to determine the height of the star generation @property(cc.Node)
    private groundNode: cc.Node = null;
    // player node, used to obtain the height of the protagonist's bounce and control the protagonist's action switch @property(cc.Node)
    public playerNode: cc.Node = null;
    // reference to score label @property(cc.Label)
    private scoreLabel: cc.Label = null;
    // Scoring sound effect resource @property(cc.AudioClip)
    private scoreAudio: cc.AudioClip = null;

    // Y-axis coordinate of the ground node private groundY: number;
    //Timerpublic timer: number;
    // Duration of a star's existence public starDuration: number;
    // Current score private score: number;

    protected onLoad() {
        // Get the y-axis coordinate of the ground plane this.groundY = this.groundNode.y + this.groundNode.height / 2;
        // Initialize the timer this.timer = 0;
        this.starDuration = 0;
        // Generate a new star this.spawnNewStar();
        // Initialize scoring this.score = 0;
    }

    // Generate a new star public spawnNewStar() {
        // Generate a new node in the scene using the given template let newStar = cc.instantiate(this.starPrefab);
        // Add the newly added node to the Canvas node this.node.addChild(newStar);
        // Set a random position for the star newStar.setPosition(this.getNewStarPosition());
        // Pass the instance of the Game component to the star component newStar.getComponent('Star').init(this);
        // Reset timer this.starDuration = this.minStarDuration + cc.random0To1() * (this.maxStarDuration - this.minStarDuration);
        this.timer = 0;
    }

    // The position of the new star public getNewStarPosition() {
        let randX = 0;
        // Randomly get the y coordinate of a star based on the ground plane position and the protagonist's jump height let randY = this.groundY + cc.random0To1() * this.playerNode.getComponent('Player').jumpHeight + 50;
        // Randomly get a star's x coordinate based on the screen width let maxX = this.node.width / 2;
        randX = cc.randomMinus1To1() * maxX;
        // Return the star coordinates return cc.p(randX, randY);
    }

    // called every frame
    protected update(dt: number) {
        // Update the timer every frame. If the limit is exceeded and no new stars are generated, the game failure logic will be called if (this.timer > this.starDuration) {
            this.gameOver();
            return;
        }
        this.timer += dt;
    }

    // Score public gainScore() {
        this.score += 1;
        // Update the text of scoreDisplay Label this.scoreLabel.string = 'Score: ' + this.score.toString();
        // Play the score sound effect // If you don't add as any, you will get an error. If you don't believe it, try cc.audioEngine.play(this.scoreAudio as any, false, 1);
    }

    //gg
    private gameOver() {
        this.playerNode.stopAllActions(); //Stop the jump action of the player node cc.director.loadScene('game');
    }

}

Player.ts

const { ccclass, property } = cc._decorator;

@ccclass
export class Player extends cc.Component {
    // The protagonist's jump height @property(cc.Integer)
    private jumpHeight: number = 0;
    // The duration of the protagonist's jump @property(cc.Integer)
    private jumpDuration: number = 0;
    // Maximum moving speed @property(cc.Integer)
    private maxMoveSpeed: number = 0;
    // acceleration@property(cc.Integer)
    private accel: number = 0;
    // Jump sound effect resource @property(cc.AudioClip)
    private jumpAudio: cc.AudioClip = null;

    private xSpeed: number = 0;
    private accLeft: boolean = false;
    private accRight: boolean = false;
    private jumpAction: cc.Action = null;

    private setJumpAction() {
        // Jump up let jumpUp = cc.moveBy(this.jumpDuration, cc.p(0, this.jumpHeight)).easing(cc.easeCubicActionOut());
        // Falling let jumpDown = cc.moveBy(this.jumpDuration, cc.p(0, -this.jumpHeight)).easing(cc.easeCubicActionIn());
        // Add a callback function to call other methods we defined when the action ends let callback = cc.callFunc(this.playJumpSound, this);
        // Repeat continuously, and call the callback to play the sound each time the landing action is completed return cc.repeatForever(cc.sequence(jumpUp, jumpDown, callback));
    }

    private playJumpSound() {
        //Call the sound engine to play the sound cc.audioEngine.play(this.jumpAudio as any, false, 1);
    }

    private addEventListeners() {
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);
        cc.find("Canvas").on(cc.Node.EventType.TOUCH_START, this.onScreenTouchStart,this);
        cc.find("Canvas").on(cc.Node.EventType.TOUCH_CANCEL, this.onScreenTouchEnd, this);
        cc.find("Canvas").on(cc.Node.EventType.TOUCH_END, this.onScreenTouchEnd,this);
    }

    private moveLeft() {
        this.accLeft = true;
        this.accRight = false;
    }

    private moveRight() {
        this.accLeft = false;
        this.accRight = true;
    }

    private stopMove() {
        this.accLeft = false;
        this.accRight = false;
    }

    private onScreenTouchStart(event: cc.Event.EventTouch) {
        if (event.getLocationX() > cc.winSize.width/2) {
            this.moveRight();
        } else {
            this.moveLeft();
        }
    }

    private onScreenTouchEnd() {
        this.stopMove();
    }

    private onKeyDown(event: cc.Event.EventKeyboard) {
        switch ((event as any).keyCode) {
            case cc.KEY.a:
            case cc.KEY.left:
                this.moveLeft();
                break;
            case cc.KEY.d:
            case cc.KEY.right:
                this.moveRight();
                break;
        }
    }

    private onKeyUp(event: cc.Event.EventKeyboard) {
        switch ((event as any).keyCode) {
            case cc.KEY.a:
            case cc.KEY.left:
                this.stopMove();
                break;
            case cc.KEY.d:
            case cc.KEY.right:
                this.stopMove();
                break;
        }
    }

    // use this for initialization
    protected onLoad() {
        // Initialize the jump action this.jumpAction = this.setJumpAction();
        this.node.runAction(this.jumpAction);

        // Acceleration direction switch this.accLeft = false;
        this.accRight = false;
        // The current horizontal speed of the protagonist this.xSpeed = 0;

        // Initialize input listening this.addEventListeners();
    }

    // called every frame
    protected update(dt: number) {
        // Update the speed every frame according to the current acceleration direction if (this.accLeft) {
            this.xSpeed -= this.accel * dt;
        } else if (this.accRight) {
            this.xSpeed += this.accel * dt;
        }
        // Limit the protagonist's speed to not exceed the maximum value if (Math.abs(this.xSpeed) > this.maxMoveSpeed) {
            // if speed reaches limit, use max speed with current direction
            this.xSpeed = this.maxMoveSpeed * this.xSpeed / Math.abs(this.xSpeed);
        }

        // Update the protagonist's position according to the current speed this.node.x += this.xSpeed * dt;
        if (this.node.x <= -this.node.parent.width / 2) {
            this.node.x = this.node.parent.width / 2;
        }
        if (this.node.x > this.node.parent.width / 2) {
            this.node.x = -this.node.parent.width / 2;
        }
    }

}

Star.ts

import { Game } from "./Game";

const {ccclass,property} = cc._decorator;

@ccclass
export class Star extends cc.Component {

    // When the distance between the star and the protagonist reaches this value, the collection will be completed @property(cc.Integer)
    private pickRadius: number = 0;
    private game:Game = null;

    public init(game:Game) {
        this.game = game;
    }

    getPlayerDistance() {
        // Determine the distance based on the player node position let playerPos = this.game.playerNode.getPosition();
        // Calculate the distance between two points based on their positions let dist = cc.pDistance(this.node.position, playerPos);
        return dist;
    }

    onPicked() {
        // When a star is collected, call the interface in the Game script to generate a new star this.game.spawnNewStar();
        //Call the scoring method of the Game script this.game.gainScore();
        // Then destroy the current star node this.node.destroy();
    }

    // called every frame
    update(dt:number) {
        // Each frame determines whether the distance between the player and the main character is less than the collection distance if (this.getPlayerDistance() < this.pickRadius) {
            //Call the collection behavior this.onPicked();
            return;
        }
        // Update the transparency of the star according to the timer in the Game script let opacityRatio = 1 - this.game.timer/this.game.starDuration;
        let minOpacity = 50;
        this.node.opacity = minOpacity + Math.floor(opacityRatio * (255 - minOpacity));
    }

}

The above is the detailed content of the CocosCreator introductory tutorial on how to make your first game with TS. For more information about making games with CocosCreator TS, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in: