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

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

準備項目和資源

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

Cocos Creator 的 動作（Action）系統

在 Cocos Creator 中，動作簡單來說就是 節點的位移、縮放和旋轉。

// 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() 方法的作用是在規定的時間內移動指定的一段距離，第一個參數就是我們之前定義主角屬性中的跳躍時間，第二個參數是一個 Vec2（表示 2D 向量和坐標）類型的對象，為了更好的理解，我們可以看看官方給的函數說明：

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

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

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

詳細內容可參考： API

---

在 onLoad 方法里調用剛添加的 setJumpAction 方法，然后執行 runAction 來開始動作：

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。