Cocos Creator 快速上手：制作第一個游戲

可以在這里感受一下這款游戲的完成形態(tài)：
http://fbdemos.leanapp.cn/star-catcher/

準備項目和資源

我們已經(jīng)為您準備好了制作這款游戲需要的全部資源，下載 初始項目 后，解壓到您希望的位置，之后我們就可以開始了：
下載初始項目：Gitee
您也可以下載最終完成的項目，跟隨教程制作過程中有任何不明白的地方都可以打開完成版的項目作為參考：
下載完成項目：Gitee

Cocos Creator 的 動作（Action）系統(tǒng)

在 Cocos Creator 中，動作簡單來說就是 節(jié)點的位移、縮放和旋轉(zhuǎn)。

// Player.jsproperties: {//...},setJumpAction: function () {// 跳躍上升var jumpUp = cc.moveBy(this.jumpDuration, cc.v2(0, this.jumpHeight)).easing(cc.easeCubicActionOut());// 下落var jumpDown = cc.moveBy(this.jumpDuration, cc.v2(0, -this.jumpHeight)).easing(cc.easeCubicActionIn());// 不斷重復return cc.repeatForever(cc.sequence(jumpUp, jumpDown));},

例如在上面的代碼中，moveBy() 方法的作用是在規(guī)定的時間內(nèi)移動指定的一段距離，第一個參數(shù)就是我們之前定義主角屬性中的跳躍時間，第二個參數(shù)是一個 Vec2（表示 2D 向量和坐標）類型的對象，為了更好的理解，我們可以看看官方給的函數(shù)說明：

/*** !#en* Moves a Node object x,y pixels by modifying its position property.                                  <br/>* x and y are relative to the position of the object.                                                 <br/>* Several MoveBy actions can be concurrently called, and the resulting                                <br/>* movement will be the sum of individual movements.* !#zh 移動指定的距離。* @method moveBy* @param {Number} duration duration in seconds* @param {Vec2|Number} deltaPos* @param {Number} [deltaY]* @return {ActionInterval}* @example* // example* var actionTo = cc.moveBy(2, cc.v2(windowSize.width - 40, windowSize.height - 40));*/
cc.moveBy = function (duration, deltaPos, deltaY) {return new cc.MoveBy(duration, deltaPos, deltaY);
};

可以看到，方法 moveBy 一共可以傳入三個參數(shù)，前兩個參數(shù)我們已經(jīng)知道，第三個參數(shù)是 Number 類型的 Y 坐標，我們可以發(fā)現(xiàn)第二個參數(shù)是可以傳入兩種類型的，第一種是 Number 類型，第二種才是 Vec2 類型，如果我們在這里傳入的是 Number 類型，那么默認這個參數(shù)就是 X 坐標，此時就要填第三個參數(shù)，為 Y 坐標。上面的例子中 cc.moveBy(this.jumpDuration, cc.v2(0, this.jumpHeight)) 第二個參數(shù)傳入的是使用 cc.v2 方法構(gòu)建的 Vec2 類型對象，這個類型表示的是一個坐標，即有 X 坐標也有 Y 坐標，因為不需要再傳入第三個參數(shù)！同時注意官方的一段話 x and y are relative to the position of the object.，這句話的意思是傳入的 X、Y 坐標都是相對于節(jié)點當前的坐標位置，而不是整個坐標系的絕對坐標。

了解了參數(shù)的含義之后，我們再來關(guān)注 moveBy() 方法的返回值，看官方說明可以知道，這個方法返回的是一個ActionInterval類型的對象，ActionInterval在 Cocos 中是一個表示時間間隔動作的類，這種動作在一定時間內(nèi)完成。到這里我們就可以理解代碼 cc.moveBy(this.jumpDuration, cc.v2(0, this.jumpHeight)).easing(cc.easeCubicActionOut()) 前一部分 的意思了，它的意思就是構(gòu)造一個 ActionInterval類型的對象，這個對象表示在jumpDuration 的時間內(nèi)，移動到相對于當前節(jié)點的 （0，this.jumpHeight） 的坐標位置，簡單來說，就是一個向上跳躍的動作。

那么后半部分 easing(cc.easeCubicActionOut()) 的作用是什么呢？easing 是ActionInterval類下的一個方法，這個方法可以讓時間間隔動作呈現(xiàn)為一種緩動運動，傳入的參數(shù)是一個緩動對象，返回一個ActionInterval類型對象，這里傳入的是使用 easeCubicActionInOut方法構(gòu)建的緩動對象，EaseCubicInOut是按三次函數(shù)緩動進入并退出的動作，具體曲線可參考下圖：

詳細內(nèi)容可參考： API

---

在 onLoad 方法里調(diào)用剛添加的 setJumpAction 方法，然后執(zhí)行 runAction 來開始動作：

// Player.jsonLoad: function () {// 初始化跳躍動作this.jumpAction = this.setJumpAction();this.node.runAction(this.jumpAction);},

onLoad 方法會在場景加載后立刻執(zhí)行，所以我們會把初始化相關(guān)的操作和邏輯都放在這里面。我們首先將循環(huán)跳躍的動作傳給了 jumpAction 變量，之后調(diào)用這個組件掛載的節(jié)點下的 runAction 方法，傳入循環(huán)跳躍的 Action 從而讓節(jié)點（主角）一直跳躍。保存腳本，然后我們就可以開始第一次運行游戲了！

點擊 Cocos Creator 編輯器上方正中的 預覽游戲 按鈕，Cocos Creator 會自動打開您的默認瀏覽器并開始在里面運行游戲。

總結(jié)

以上是生活随笔為你收集整理的Cocos Creator 的 动作（Action）系统:moveBy的使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。