cocos creator 基礎1，小白自學日常。
阿新 • • 發佈：2018-06-02
麻煩 extend 自學 topic 創建 我認 ocs 數字 code 
<!--作為一個初學者，難免有遺漏和不妥之處，還請不吝賜教，不勝感激。錯則改之，無則加勉。
接觸ccc的第一天。我首先去看了下Cocos Creator 用戶手冊（http://docs.cocos.com/creator/manual/zh/），然後跟著做了一個摘星星的小遊戲。
第一天就是簡單的復制粘貼，簡單了解了一下操作界面和運行原理。第二天我找了下前輩們的教程，找了一個基礎加實戰的教程（http://forum.cocos.com/t/topic/40659），這裏對作者表示感謝。
作為小白，不希望在選擇教程這些環節浪費時間，等以後深入了解之後，再對這些教程進行推薦比較靠譜。下面主要記錄學習過程，與同是初學者的共勉，對各位前輩表示膜拜。-->
第一天，大概內容就是看跳動的小球制作教程，然後分析代碼。<!--像一些初學者的心路歷程會以標註為註釋的形式記錄。-->
首先貼出代碼：<!--是分析代碼過程之後的代碼，裏面會有一些代碼是用來測試方法參數，或者一些瞎玩的，但是都會註釋，留下關鍵代碼，表示新手了解關鍵字的過程，如果我認為有用的測試過程會在解釋關鍵字的過程中提到-->
1 cc.Class({ 2 extends: cc.Component, 3 4 properties: { 5 jumpDuration: 1, 6 jumpHight: 300 7Code}, 8 9 balljumpAction: function() { 10 //var jumpRight = cc.moveBy(this.jumpDuration,cc.p(this.jumpHight,0)).easing(cc.easeQuadraticActionIn()); 11 //var jumpLeft = cc.moveBy(this.jumpDuration,cc.p(-this.jumpHight,0)).easing(cc.easeQuadraticActionOut()); 12 //定義小球跳起來的動作。 13//var jumpUp = cc.moveBy(this.jumpDuration,cc.p(0,this.jumpHight)).easing(cc.easeQuadraticActionOut()); 14 //var jumpUp = cc.moveBy(this.jumpDuration,0,this.jumpHight).easing(cc.easeQuadraticActionOut()); 15 var jumpUp = cc.moveBy(this.jumpDuration,cc.p(0,this.jumpHight)).easing(cc.easeQuadraticActionOut()); 16 //var jumpUp = cc.moveTo(this.jumpDuration,cc.v2(0,this.jumpHight)).easing(cc.easeQuadraticActionOut()); 17 //定義小球落下去的動作。 18 var jumpDown = cc.moveBy(this.jumpDuration,cc.p(0,-this.jumpHight)).easing(cc.easeQuadraticActionIn()); 19 //var jumpDown = jumpUp.reverse().easing(cc.easeQuadraticActionIn()); 20 //var jumpDown = cc.moveTo(this.jumpDuration,cc.p(0,-this.jumpHight)).easing(cc.easeQuadraticActionIn()); 21 //return cc.moveBy(this.jumpDuration,cc.p(0,this.jumpHight)).easing(cc.easeQuadraticActionIn()); 22 //return cc.sequence(jumpUp,jumpDown); 23 return cc.repeatForever(cc.sequence(jumpUp,jumpDown)); 24 //返回小球重復跳起來落下去的動作。 25 // return cc.repeat(cc.sequence(jumpUp,jumpDown),2); 26 }, 27 28 onLoad () { 29 //this.node.runAction(cc.sequence(cc.moveBy(this.jumpDuration,cc.p(0,this.jumpHight)).easing(cc.easeQuadraticActionOut()),cc.moveBy(this.jumpDuration,cc.p(0,-this.jumpHight)).easing(cc.easeQuadraticActionIn())).repeatForever()); 30 this.ballAction = this.balljumpAction(); 31 //this.node.runAction(this.balljumpAction()); 32 //在加載的執行動作。 33 this.node.runAction(this.ballAction); 34 //this.schedule(function(){this.node.stopAllActions();this.node.runAction(this.ballAction);},1); 35 }, 36 37 start () { 38 39 }, 40 41 });
下面我會大概講下我對代碼的理解，主要是關鍵字的用法。<!-- 雖然 官方api（http://docs.cocos.com/creator/api）裏面都有,但是畢竟把自己的理解寫下來，不說麻煩別人指出對不對，就是以後自己回頭看自己當初的理解，有個記錄作為學習思考反省的依據也是蠻有必要的。-->
首先整體看代碼：一個小球對象，它有兩個屬性，jumpDuraction是小球跳動的時間，jumpHight是小球跳動的高度。然後定義一個balljumpAction的方法，返回小球跳動的行動。最後在onload代碼塊（Sence加載的時候自動執行）裏面調用執行小球balljumpAction方法。在ccc界面操作就是把畫布中的ball圖片節點添加上以上代碼的組件，在屬性檢測器中可以對小球的兩個屬性進行調整。<!--可能對一些對象解釋說法不準確，畢竟新手，學習過程必須經歷的，等什麽時候不在自稱小白，我再承受語言必須準確的責任-->
依此列出閱讀代碼中遇到的關鍵字，參考官方api後，進行理解。
moveBy 移動指定的距離。 function cc.moveBy(duration: number, deltaPos: number | cc.Vec2, deltaY?: number): cc.ActionInterval <!-- 這個是vbc裏面的提示，鼠標移上去就有--> 方法有三個參數，第一個參數 duration: number 是指的持續的時間，類型為數字。第二個參數 deltaPos: number | cc.Vec2 是指 x軸增量 類型為數字，或者一個Vec2對象。（Vec2對象,在api裏面可以查到,表示2D的向量和坐標，這裏可以理解為擁有x，y兩個屬性的對象，moveBY能夠使用這兩個屬性值作為自己的移動的距離依據，因為包括x和y，所以moveBy的第三個參數就不需要了，我也測試過在第二個參數是Vec2的同時，也給第三個參數一個值，雖然不會報錯，但是對結果不會起任何作用），第三個參數deltaY?: number是指的Y軸的增量，類型為數字。（不是很明白這個？的意思，應該是可以不賦值的意思） 類似的有一個moveTo 移動到指定位置。<!-- (function cc.moveTo(duration: number, position: number | cc.Vec2, y?: number): cc.ActionInterval 方法的參數都一樣，但是我直接把moveBy換成moveTo發現跳得更高，落得更低.那麽是為什麽呢？我在代碼16行和19行做了一個測試，開始的確發現只是跳得更高和落得更低其他沒區別。然後我去屬性檢測器看這個ball的節點的坐標到底是多少。然後我發現Position是指的相對應父節點的坐標，我把ball節點移出Canvas的分支，再測試就能看到小球以整個屏幕為基礎的左下的兩點運動，剛好是符合移動到傳入Vec2的坐標值為目標的運動。在MoveTo和MoveBy中Vec2的作用不同，一個作為有方向，長度的向量，一個是有x，y的坐標。所以在api裏面解釋Vec2是表示2D的向量和坐標。)--> 和Moveby同樣的參數，區別在於傳入的Vec2對象是作為一個坐標。movetTo將為移動到這個坐標位置。 p 通過該簡便函數創建Vec2對象。 function cc.p(x?: any, y?: number): cc.Vec2 傳入兩個數字參數獲得一個Vec2對象。類似的有v2(function cc.v2(x?: any, y?: number): cc.Vec2 ）。 <! -- cc.p(1,2) cc.v2(1,2) 第一個參數可以是數字或者尺寸的對象 --> easing 緩動運動。 (method) cc.ActionInterval.easing(easeObj: any): cc.ActionInterval 方法，可以實現easeObj（緩動對象）。緩動對象就是 小球跳躍用到的，easeQuadraticActionOut 按照二進制緩慢退出動作。easeQuadraticActionIn 按照二進制緩慢進入動作。<!-- 還有按照是四進制緩退緩入，五進制，彈性曲線，正弦函數，指數函數，圓型曲線緩動入退，按貝塞爾曲線，按彈跳動作緩動退出進入等等--> ActionInterval 時間間隔動作。 MoveBy，MoveTo返回的對象。表示一段時間的動作。這個動作可以通過調用不同的方法實現不同的操作。easing就是緩動運動，為動作增加不同運動的動態。<!-- 同理，還有返回動作持續了多久的方法，復制自己，重復動作，返回動作完成狀態，獲取動作不同階段的節點，當前，現在，原始的節點，reverse是返回一個相反的動作，代碼19行，我用這個相反動作方法實現小球落下 --> repeatForever 永遠重復一個動作。 function cc.repeatForever(action: cc.FiniteTimeAction): cc.ActionInterval <!--ActionInterval 時間間隔動作 繼承於FiniteTimeAction 有限時間動作類，ActionInstant 即時動作也繼承於FinteTimeAction，暫時看見這倆 --> 類似的有repeat （function cc.repeat(action: cc.FiniteTimeAction, times: number): cc.ActionInterval）給定一個數值（times）讓動作重復指定次數。<--代碼25行--> sequence 順序執行動作，傳入的動作會按照順序依此執行。 function cc.sequence(actionOrActionArray: cc.FiniteTimeAction | cc.FiniteTimeAction[], ...tempArray: cc.FiniteTimeAction[]): cc.ActionInterval 傳入一系列的FiniteTimeAction 有限時間動作類，然後返回一個按照順序執行的 ActionInterval 時間間隔動作。<!--有種拼接字符串的感覺--> <!--所以用到的關鍵字順便看到的類似的或者有關系的都大概羅列了一下，剛開始可能有點慢，如果光看一遍api，感覺也達不到學習的目的。後面肯定會變得快起來。但是api有中文解釋看著是賊爽就是了。代碼裏面還有一些什麽schedule，stopAllAction什麽的，就是我看到了忍不住想試試。有用的測試我會說在多少行。這就是全部了，謝謝觀看。-->cocos creator 基礎1，小白自學日常。