999久久久精品,成年人在线视频,久久亚洲一区

前提

無論學什么技術知識，官方文檔都應該是你第一個教程，所以請先至少閱讀新手上路這一節 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，你就會永遠失去我了。

代碼編輯器選擇

這里只推薦兩個：

Visual Studio Code
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 環境配置

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

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

控制臺會輸出

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

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

CocosCreator入門教程之用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) {},
}

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

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

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文件

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

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

CocosCreator入門教程之用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;
}

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

用 TypeScript 寫一個游戲

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

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

第一步：新建一個工程

CocosCreator入門教程之用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制作游戲的資料請關注服務器之家其它相關文章！

原文鏈接：https://blog.csdn.net/potato47/article/details/79254524