CocosCreator入門教程之用TS制作第一個遊戲

Posted on by

前提

無論學什麼技術知識，官方文檔都應該是你第一個教程，所以請先至少閱讀新手上路這一節 http://docs.cocos.com/creator/manual/zh/getting-started/ 再來看這篇文章。

這裡假設你已經安裝成功瞭 Cocos Creator。

TypeScript VS JavaScript

這裡當然隻會講優點：
1. ts 是 js 的超集，所有 js 的語法 ts 都支持。
2. ts 支持接近完美的代碼提示，js 代碼提示接近於沒有。
3. ts 有類型定義，編譯時就可以排除很多無意義的錯誤。
4. ts 可以重構，適合大型項目。
5. ts 可以使用 es6 async之類的所有新語法。而 js Cocos Creator 還沒有完全支持es6。
6. 最重要的一點：我以後的教程都會用 ts 寫，如果你不用 ts，你就會永遠失去我瞭。

代碼編輯器選擇

這裡隻推薦兩個：

  1. Visual Studio Code
  2. WebStorm

vs code 的優點是快，與cocos creator 結合的好，一些功能需要自己安裝插件。

webstorm 的優點是所有你想要的功能都先天內置瞭，缺點是占內存，個人感覺還有點醜。

對於我自己來說，我在公司用 WebStorm，在傢用 VS Code。

如果你還是不知道用哪個，我隻能先推薦你用VS Code 因為下面的內容是面向VS Code。

學習 TypeScript

既然要用ts開發遊戲，肯定要知道ts的語法，我這一篇文章不可能把所有ts的語法都講完，所以https://www.tslang.cn/docs/home.html，當然，不一定要一次性全看完，你可以先看個大概，遇到問題再補習。

TypeScript 環境配置

任意打開一個項目，把這幾個都點一遍

控制臺會輸出

打開編輯器，你會發現一個名字為 creator.d.ts 的腳本

 creator 的提示都依靠這個腳本，引擎的api變動也要及時更新這個腳本，所以每次更新引擎的時候都要重新點一次上面那個“更新VS Code隻能提示數據“來重新生成creator.d.ts。

資源管理器右鍵新建一個ts腳本，點開後你會發現有很多沒用的東西，而且還會有一個提示錯誤（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) {},
}

編輯器右上角“打開程序安裝路徑“，

static-》template-》new-script.ts
這個腳本就是新建ts腳本的默認樣式，我們來重新編輯一下，編輯後的腳本如下

const {ccclass, property} = cc._decorator;

@ccclass
export class NewClass extends cc.Component {

}

重新新建一個ts腳本，你會發現跟剛才編輯的默認腳本是一個樣子瞭。

配置自己的聲明文件

以d.ts為後綴名的文件，會被識別為聲明文件，creator.d.ts是引擎的聲明文件，我們也可以定義自己的聲明文件，需要註意的是聲明文件要放在assets文件外，因為assets文件裡的腳本都會被引擎編譯，而聲明文件的作用就是寫代碼時提示一下，編譯之後就不需要瞭。

舉個栗子
在項目的根目錄添加一個global.d.ts文件

 然後在項目裡的腳本就可以得到對應的提示

更多類型定義戳 https://www.tslang.cn/docs/handbook/declaration-files/introduction.html

屬性類型聲明

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

@ccclass
export class Game extends cc.Component {
    // 整型
    @property(cc.Integer)
    intVar: number = 0;
    // 浮點型
    @property(cc.Float)
    floatVar: number = 0;
    // 佈爾型
    @property(cc.Boolean)
    boolVar: boolean = false;
    // 節點
    @property(cc.Node)
    nodeVar: cc.Node = null;
    // 節點數組
    @property([cc.Node])
    nodeArrVar: Array<cc.Node> = [];
    // Label
    @property(cc.Label)
    labelVar: cc.Label = null;
    // 預制體
    @property(cc.Prefab)
    prefabVar: cc.Prefab = null;
    // 點
    @property(cc.Vec2)
    vec2Var: cc.Vec2 = cc.v2();
    // 自定義節點
    @property(Player)
    palyerVar: Player = null;
    // 重點來瞭，自定義枚舉
    /**
     * 全局變量
     * const LEVEL = cc.Enum({EASY:1,HARD:2});
     */ 
    @property({
        type:LEVEL
    })
    enumVa = LEVEL.EASY;
}

用 TypeScript 寫一個遊戲

最後我們來切身體會一下TypeScript的柔軟絲滑。

挑一個熟悉的遊戲來寫，官方文檔裡有一個摘星星的遊戲，我們用Ts重新寫一下。

第一步：新建一個工程

第二步：寫幾個腳本

Game.ts

import { Player } from "./Player";

const { property, ccclass } = cc._decorator;

@ccclass
export class Game extends cc.Component {
    // 這個屬性引用瞭星星的預制資源
    @property(cc.Prefab)
    private starPrefab: cc.Prefab = null;
    // 星星產生後消失時間的隨機范圍
    @property(cc.Integer)
    private maxStarDuration = 0;
    @property(cc.Integer)
    private minStarDuration = 0
    // 地面節點，用於確定星星生成的高度
    @property(cc.Node)
    private groundNode: cc.Node = null;
    // player 節點，用於獲取主角彈跳的高度，和控制主角行動開關
    @property(cc.Node)
    public playerNode: cc.Node = null;
    // score label 的引用
    @property(cc.Label)
    private scoreLabel: cc.Label = null;
    // 得分音效資源
    @property(cc.AudioClip)
    private scoreAudio: cc.AudioClip = null;

    // 地面節點的Y軸坐標
    private groundY: number;
    // 定時器
    public timer: number;
    // 星星存在的持續時間
    public starDuration: number;
    // 當前分數
    private score: number;

    protected onLoad() {
        // 獲取地平面的 y 軸坐標
        this.groundY = this.groundNode.y + this.groundNode.height / 2;
        // 初始化計時器
        this.timer = 0;
        this.starDuration = 0;
        // 生成一個新的星星
        this.spawnNewStar();
        // 初始化計分
        this.score = 0;
    }

    // 生成一個新的星星
    public spawnNewStar() {
        // 使用給定的模板在場景中生成一個新節點
        let newStar = cc.instantiate(this.starPrefab);
        // 將新增的節點添加到 Canvas 節點下面
        this.node.addChild(newStar);
        // 為星星設置一個隨機位置
        newStar.setPosition(this.getNewStarPosition());
        // 將 Game 組件的實例傳入星星組件
        newStar.getComponent('Star').init(this);
        // 重置計時器
        this.starDuration = this.minStarDuration + cc.random0To1() * (this.maxStarDuration - this.minStarDuration);
        this.timer = 0;
    }

    // 新星星的位置
    public getNewStarPosition() {
        let randX = 0;
        // 根據地平面位置和主角跳躍高度，隨機得到一個星星的 y 坐標
        let randY = this.groundY + cc.random0To1() * this.playerNode.getComponent('Player').jumpHeight + 50;
        // 根據屏幕寬度，隨機得到一個星星 x 坐標
        let maxX = this.node.width / 2;
        randX = cc.randomMinus1To1() * maxX;
        // 返回星星坐標
        return cc.p(randX, randY);
    }

    // called every frame
    protected update(dt: number) {
        // 每幀更新計時器，超過限度還沒有生成新的星星
        // 就會調用遊戲失敗邏輯
        if (this.timer > this.starDuration) {
            this.gameOver();
            return;
        }
        this.timer += dt;
    }

    // 得分
    public gainScore() {
        this.score += 1;
        // 更新 scoreDisplay Label 的文字
        this.scoreLabel.string = 'Score: ' + this.score.toString();
        // 播放得分音效
        // 不加as any就會報錯，不信你試試
        cc.audioEngine.play(this.scoreAudio as any, false, 1);
    }

    // gg
    private gameOver() {
        this.playerNode.stopAllActions(); //停止 player 節點的跳躍動作
        cc.director.loadScene('game');
    }

}

Player.ts

const { ccclass, property } = cc._decorator;

@ccclass
export class Player extends cc.Component {
    // 主角跳躍高度
    @property(cc.Integer)
    private jumpHeight: number = 0;
    // 主角跳躍持續時間
    @property(cc.Integer)
    private jumpDuration: number = 0;
    // 最大移動速度
    @property(cc.Integer)
    private maxMoveSpeed: number = 0;
    // 加速度
    @property(cc.Integer)
    private accel: number = 0;
    // 跳躍音效資源
    @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() {
        // 跳躍上升
        let jumpUp = cc.moveBy(this.jumpDuration, cc.p(0, this.jumpHeight)).easing(cc.easeCubicActionOut());
        // 下落
        let jumpDown = cc.moveBy(this.jumpDuration, cc.p(0, -this.jumpHeight)).easing(cc.easeCubicActionIn());
        // 添加一個回調函數，用於在動作結束時調用我們定義的其他方法
        let callback = cc.callFunc(this.playJumpSound, this);
        // 不斷重復，而且每次完成落地動作後調用回調來播放聲音
        return cc.repeatForever(cc.sequence(jumpUp, jumpDown, callback));
    }

    private playJumpSound() {
        // 調用聲音引擎播放聲音
        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() {
        // 初始化跳躍動作
        this.jumpAction = this.setJumpAction();
        this.node.runAction(this.jumpAction);

        // 加速度方向開關
        this.accLeft = false;
        this.accRight = false;
        // 主角當前水平方向速度
        this.xSpeed = 0;

        // 初始化輸入監聽
        this.addEventListeners();
    }

    // called every frame
    protected update(dt: number) {
        // 根據當前加速度方向每幀更新速度
        if (this.accLeft) {
            this.xSpeed -= this.accel * dt;
        } else if (this.accRight) {
            this.xSpeed += this.accel * dt;
        }
        // 限制主角的速度不能超過最大值
        if (Math.abs(this.xSpeed) > this.maxMoveSpeed) {
            // if speed reach limit, use max speed with current direction
            this.xSpeed = this.maxMoveSpeed * this.xSpeed / Math.abs(this.xSpeed);
        }

        // 根據當前速度更新主角的位置
        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 {

    // 星星和主角之間的距離小雨這個數值時，就會完成收集
    @property(cc.Integer)
    private pickRadius: number = 0;
    private game: Game = null;

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

    getPlayerDistance() {
        // 根據 player 節點位置判斷距離
        let playerPos = this.game.playerNode.getPosition();
        // 根據兩點位置計算兩點之間距離
        let dist = cc.pDistance(this.node.position, playerPos);
        return dist;
    }

    onPicked() {
        // 當星星被收集時，調用 Game 腳本中的接口，生成一個新的星星
        this.game.spawnNewStar();
        // 調用 Game 腳本的得分方法
        this.game.gainScore();
        // 然後銷毀當前星星節點
        this.node.destroy();
    }

    // called every frame
    update(dt:number) {
        // 每幀判斷和主角之間的距離是否小於收集距離
        if (this.getPlayerDistance() < this.pickRadius) {
            // 調用收集行為
            this.onPicked();
            return;
        }
        // 根據 Game 腳本中的計時器更新星星的透明度
        let opacityRatio = 1 - this.game.timer/this.game.starDuration;
        let minOpacity = 50;
        this.node.opacity = minOpacity + Math.floor(opacityRatio * (255 - minOpacity));
    }

}

以上就是CocosCreator入門教程之用TS制作第一個遊戲的詳細內容，更多關於CocosCreator TS制作遊戲的資料請關註WalkonNet其它相關文章！

推薦閱讀：

    None Found