cocos學習筆記：快速上手 - asworm－IT工程師數位筆記本

文章出處

cc.Class({
    //奇怪的語法風格，cc.class，
    extends: cc.Component, //擴展自cc.Component

    properties: {
        //類的屬性設置
        jumpHeight: 0, //在這里可以在屬性檢察器里面設置，很奇怪的實現機制
        jumpDuration: 0, //但是圖形化的操作也很方便了，開發人員定義，動畫人員
        maxMoveSpeed: 0, //根據實際修改
        accel: 0, //加速度
        // foo: { //默認的屬性等，不知道這種是如何呈現的呢
        //    default: null,
        //    url: cc.Texture2D,  // optional, default is typeof default
        //    serializable: true, // optional, default is true
        //    visible: true,      // optional, default is true
        //    displayName: 'Foo', // optional
        //    readonly: false,    // optional, default is false
        // },
        // ...
    },
    setJumpAction:function(){
         var jumpUp = cc.moveBy(this.jumpDuration, cc.p(0, this.jumpHeight)).easing(cc.easeCubicActionOut());
        // 下落
        var jumpDown = cc.moveBy(this.jumpDuration, cc.p(0, -this.jumpHeight)).easing(cc.easeCubicActionIn());
        // 不斷重復
        return cc.repeatForever(cc.sequence(jumpUp, jumpDown));
    },
    setInputControl: function () {
        var self = this;
        //this指向哪里呢？？？？
        // 添加鍵盤事件監聽
        cc.eventManager.addListener({
            event: cc.EventListener.KEYBOARD,  //時間字符串常量
            // 有按鍵按下時，判斷是否是我們指定的方向控制鍵，并設置向對應方向加速
            onKeyPressed: function(keyCode, event) {
                switch(keyCode) {
                    case cc.KEY.a:
                        self.accLeft = true;
                        self.accRight = false;
                        break;
                    case cc.KEY.d:
                        self.accLeft = false;
                        self.accRight = true;
                        break;
                }
            },
            // 松開按鍵時，停止向該方向的加速
            onKeyReleased: function(keyCode, event) {
                switch(keyCode) {
                    case cc.KEY.a:
                        self.accLeft = false;
                        break;
                    case cc.KEY.d:
                        self.accRight = false;
                        break;
                }
            }
        }, self.node);
    },

    // use this for initialization
    onLoad: function () {
        this.jumpAction = this.setJumpAction();  //類本身沒有定義jumpAction啊，這種寫法是？
        //是cc本來的語法，還是觸控科技自己定義的呢？
        //觸控科技，隱藏了諸如場景等的實現
        //鼠標事件，然后響應鼠標事件
        //對于原件的操作
        this.node.runAction(this.jumpAction);
        
        this.accLeft = false;
        this.accRight = false;
        // 主角當前水平方向速度
        this.xSpeed = 0;

        // 初始化鍵盤輸入監聽
        this.setInputControl();
    },
    update: function (dt) {
        // 根據當前加速度方向每幀更新速度
        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;
    },

    // called every frame, uncomment this function to activate update callback
    // update: function (dt) {

    // },
});

cc.moveBy
cc.jumpAction
cc.onLoad
cc.Update
cc.eventManager.addListener
event: cc.EventListener.KEYBOARD,
cc.p
cc.easing

2016年4月26日14:28:39

使用模擬器運行游戲時，腳本中的日志信息（使用 cc.log 打印的內容）和報錯信息會出現在 控制臺 面板中。

2016年4月26日14:44:44

在場景中修改了預置對象后，在 屬性檢查器 中直接點擊 應用，即可保存對應的預置資源：

我們前面提到了組件式的結構是以組合方式來實現功能的擴展的，下圖中就展示了節點和 Sprite 組件的組合。

s2016年4月26日15:01:09

上面的例子里，我們先是將 Sprite 組件和節點組合，有了可以指定渲染圖片資源的場景圖像，接下來我們通過修改節點屬性，能夠對這個圖像進行縮放和顏色等不同方式的顯示。現在我們又為這個節點添加了 Button 組件，讓這個節點具有了根據按鈕的不同狀態（普通、懸停、按下等）的行為。這就是 Cocos Creator 中組件式開發的工作流程，我們可以用這樣的方式將不同功能組合在一個節點上，實現如主角的移動攻擊控制、背景圖像的自動卷動、UI 元素的排版和交互功能等等復雜目標。

在一個節點上可以添加多個組件，來為節點添加更多功能。在上面的例子中，我們可以繼續選中 New Sprite 這個節點，點擊 屬性檢查器 面板下面的 添加組件 按鈕，選擇 添加 UI 組件/Button 來添加一個 Button（按鈕）組件。

之后按照下圖對 Button 組件的屬性進行設置（具體的顏色屬性可以根據愛好自由設置）：

文章列表