cocos-creator學習筆記1（旋轉，位置移動，鍵盤監控移動基礎）

大一結束的寒假，我無意中發現了一款觸碰科技公司開發的開源遊戲引擎——cocos-creator，對於開發遊戲本來就熱愛的我怎麼能錯失這個機會的，對的起開源就要好好學習（手動滑稽）。由於網課佔用時間比例高，而昨天是週六，順帶學習了一波cocos-creator裏面相對基礎的API及其他知識（當然語言是JavaScript）。
廢話不多說，第一次學習，寫個筆記紀念一下：（介紹cocos-creator軟件組成我就不寫了，官方cocos裏面說的應該夠清楚了）
1.this的理解： 在一個cocos-creator裏面的JavaScript腳本里面，this基本上是無處不在的，我說說我個人的看法吧，我也是第一次學（別說我誤導子弟，o(╥﹏╥)o）。this我一般把這個關鍵詞看做指代這個你正在編輯的腳本，舉個例子，比如還有什麼this.maxnum=0，可能意思就是這個腳本 （this） 裏面一個類似於全局的變量maxnum賦值爲0.如下

在這兩個腳本里面，這樣子定義，maxnum只能在腳本一使用，在腳本二使用就會出現未聲明的報錯提示，對於腳本二也是一樣的意思。而且在輸出時不能僅僅寫“輸出maxnum”，要寫“this.maxnum”，JavaScript是一門弱語言，你可以把它當小學生看，你要輸出這個maxnum，相當於你還要喊它一下“嘿，腳本1，輸出你裏面的maxnum”，所以輸出時就帶了前綴this.（手動滑稽）。
2.在cocos-creator裏面的輸出語法是： cc.log()

cc.Class({ //cocos類庫
    extends: cc.Component,

    properties: {
        maxnum:0,
    },
    onLoad () {},
    update (dt) { //每一次更新是1/60s，也就是dt=0.01667s左右更新一次
    	cc.log(this.maxnum);
    },
});

2.圖片旋轉
我下面實現是按圖片的中心點進行旋轉的，因爲一般你創建一個精靈後，其默認位置的錨點都是（0.5,0.5），也就是圖片中心處。

cc.Class({ //cocos類庫
    extends: cc.Component,

    properties: {
        test:{
        	type:cc.Node, //創建一個名叫test的節點。
        	default:null,
        },
        w:120, //設置角速度爲120度/秒
    },
    onLoad () {},
    update (dt) { //每一次更新是1/60s，也就是dt=0.01667s左右更新一次
    	this.test.angle += this.w * dt; //angle就是test節點上的一個屬性（角度）
    	// 乘於dt的意思是沒次更新都要按照角速度進行疊加
    },
});

3.位置移動
2d上就是精靈在二維座標平面的移動。

cc.Class({ //cocos類庫
    extends: cc.Component,

    properties: {
        test:{
        	type:cc.Node, //創建一個名叫test的節點。
        	default:null,
        },
        //w:120, //設置角速度爲120度/秒
    },
    onLoad () {},
    update (dt) { //每一次更新是1/60s，也就是dt=0.01667s左右更新一次
    	//this.test.angle += this.w * dt; //angle就是test節點上的一個屬性（角度）
    	// 乘於dt的意思是沒次更新都要按照角速度進行疊加
    	this.test.x += 5*dt;
    	this.test.y += 5*dt; //加多少完全取決於自己，主要注意一下這個x，y就是圖片的
    	//座標，（注意，這個座標是相對於test這個節點父節點的座標，而不是絕對座標。）
    },
});

4.接受鍵盤控制
在cocos-creator裏面，cocos庫專門有一些API用於處理接受用戶的鍵盤輸入而達到控制所謂遊戲英雄的移動。

1.首先開啓鍵盤的監控功能，通過我們用的兩類操作來實現，一個是我們按下鍵盤按鍵時做出的反應，還有一個是我們手指離開你所按的按鍵的反應，分別是KEY_DOWN和KEY_UP
上述過程實現的大致流程：首先調用cocos類庫裏面的systemEvent，並將其開關打開（也就是後面的on）現在開始你監控的類型（調用cocos類庫裏面的SystemEvent，再調用其內的EventType，也就是查找監控事件的類型——KEY_DOWN或者KEY_UP）括號內第一個逗號後面是一個自定義的函數，我這裏將函數名分別定義爲OnKeyDown和OnKeyUp，通過this關鍵詞來索引調用這個函數（下面會寫這兩個函數的內容），最後一個this是對此腳本實現鍵盤監控。

2.我們來看第二類，與之相反，你居然可以開鍵盤監控，那我也就可以關閉鍵盤監控

定義在onDestroy裏面，上面on是打開監控，這個off是關閉監控。

3.定義一系列的移動判斷變量，我將他們定義在onLoad裏面，當然start裏面也可以

默認移動變量是false，也就是說是關閉的。
5.接下來實現鍵盤移動
首先是當你的手將一個方向鍵按沉了，說明調用KEY_DOWN那行裏面的OnKeyDown函數
event就是指代你這次監控的事件類型

相應的，如果你的手離開了鍵盤，此時的移動變量開關應該又變成false；

6.實現後在updat函數裏面通過四個移動變量那個爲true來判斷英雄移動的方向

貼上完整代碼（其他代碼可以不用理會）

cc.Class({
    extends: cc.Component,

    properties: {
        player:{
            type:cc.Node,
            default:null,
        },
        Bullent:{
            type:cc.Prefab,
            default:null,
        },
        ememy:{
            type:cc.Prefab,
            default:null,
        },
    },

    onLoad () {
        this.isleft=false;
        this.isright=false;
        this.isup=false;
        this.isdown=false;
        this.kaihuo=false;
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN,this.OnKeyDown,this);
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP,this.OnKeyUp,this);
        this.jiage=0;
        this.jg=0;
        this.num=0;
    },
    onDestroy(){
        cc.systemEvent.off(cc.SystemEvent.EventType.KEY_DOWN,this.OnKeyDown,this);
        cc.systemEvent.off(cc.SystemEvent.EventType.KEY_UP,this.OnKeyUp,this);
    },
    CreateBullet:function(){
        var bull = cc.instantiate(this.Bullent);
        this.node.addChild(bull);
        bull.setPosition(this.player.x,this.player.y - this.player.height/2+15);
        bull.getComponent('bullet').game = this;
    },
    CreateEmemy:function(){
        var EM = cc.instantiate( this.ememy );
        this.node.addChild(EM);
        EM.setPosition((Math.random()-0.5)*2*460 , -325-EM.height/2);
    },
    OnKeyDown(event){
        switch(event.keyCode)
        {
            case cc.macro.KEY.a:
                this.isleft = true;
                cc.log("anxia");
                break;
            case cc.macro.KEY.d:
                this.isright = true;
                break;
            case cc.macro.KEY.s:
                this.isdown = true;
                break;
            case cc.macro.KEY.w:
                this.isup = true;
                break;
            case cc.macro.KEY.space:
                this.kaihuo = true;
                cc.log("kaihuo");
                break;
        }
    },
    OnKeyUp(event){
        switch(event.keyCode)
        {
            case cc.macro.KEY.a:
                this.isleft = false;
                break;
            case cc.macro.KEY.d:
                this.isright = false;
                break;
            case cc.macro.KEY.s:
                this.isdown = false;
                break;
            case cc.macro.KEY.w:
                this.isup = false;
                break;
            case cc.macro.KEY.space:
                this.kaihuo = false;
                break;
        }
    },

    update (dt) {
        cc.log(this.player.x);
        if(this.isleft){
            this.player.x -= 4;
        }
        else if(this.isright){
            this.player.x += 4;
        }
        else if(this.isdown){
            this.player.y -= 4;
        }
        else if(this.isup){
            this.player.y += 4;
        }
        this.jiage++;this.jg++;
        /*if(this.jiage>20)
        {
            this.CreateBullet();
            this.jiage=0;
        }
        if(this.num<=6&&this.jg==240)
        {
            this.CreateEmemy();
            this.num++;
            this.jg=0;
        }*/
    },
});

第一次學習cocos-creator，也纔剛剛進入大學半年，歡迎大家一起討論學習！