工程源碼:請在公衆號中回覆【action】獲取工程代碼。
在線演示:http://example.creator-star.cn/action-demo
你可以點擊【閱讀原文】在手機上體驗
Creator星球的進化之路可追溯到遠古 可可思大陸(Cocos2d-x),在可可思大陸上一直流傳這樣一句真言:
「英雄」是舞者,「安可心」是舞步
「英雄」是誰?英雄是Node,英雄就是你!「安可心」爲何物?不好意思,安可心其實是cc.Action,是我爲他起的中文名字,之前我還給他起過:俺可行,感覺太俗了,「安可心」更溫馨。
初識安可心
這裏的「安可心」可不是一個人,她是一個家族,迷蹤舞步中的安可心大多是爲英雄的屬性而孕育的,其中絕大多數還是雙胞胎。
英雄的位置(position):MoveTo、MoveBy,她們控制英雄的位移,是迷蹤步的核心,需要的能量是位置(cc.v2)。
英雄的旋轉(rotation): RotateTo、RotateBy,這兩姐妹控制英雄的轉身,華麗無比,需要的能量是角度(Angle)。
英雄的縮放(scale): ScaleTo、ScaleBy,他們讓英雄伸縮自如,有時如泰山壓頂,有時突如其來,需要的能量是縮放比例(scale)。
英雄的隱形(opacity)能力:FadeTo現身、FadeOut隱身,相互配合讓英雄若隱若現,Blink則是控制英雄時隱時現,奇幻無比。
英雄成爲變色龍(color):TintTo、TintBy控制英雄的顏色過渡,需要的能量是一個目標顏色(RGB值)。
以上「安可心」是實現迷蹤步的核心,需要謹記於心。同時還有一些「安可心」是英雄位移的變種或增強:
跳躍:JumpTo、JumpBy
曲線:bezierBy、bezierTo
其中的貝塞爾曲線動作是英雄舞步殺手鐗,我會在另外的教程中講解。
鏈接安可心
我們在上面介紹了安可心家族迷蹤步的核心成員,但具體怎麼施展迷蹤步呢?
首先要記住,Creator的發源地是可可思(Cocos2d-x),需要牢記:色色點是根基,例如:
cc.MoveTo、cc.ScaleTo
在色色點後面,大寫字母是具體的安可心家族成員,而在真實戰場上,通常是用的召喚術(工廠函數)呼喚的安可心分身(實例化):
//注意cc.MoveTo與cc.moveTo的區別
let moveTo = cc.moveTo(5, cc.p(100, 100));
cc.moveTo 是 cc.MoveTo 的創建函數,cc.MoveTo 是可娜絲女神(cc.Class)的安可心化身,而cc.moveTo就是召喚術,它召喚了cc.MoveTo的一個分身moveTo,具像化他是做了:new cc.MoveTo(…)。
迷蹤安可心還有一個重要的,特性是:
多溫馨(duration 持續時間)
任何一個舞步或動作其實都是英雄在一定時間內的空間與形態的變化,我們來看看具體的操作:
let moveTo = cc.moveTo(5, cc.v2(100, 100));
node.runAction(moveTo);
此時不管node英雄在何處,在5秒內,他會移動到座標x=100,y=100的位置上,runAction就是英雄舞動迷蹤步的關鍵,通過它與安可心建立鏈接。
混元步法
我們知道通過英雄的 runAction 可以與安可心建立鏈接,但要同時與多個安可心鏈接怎麼辦呢?比如一邊移動,一邊旋轉?
1. 並行訣
要實現這類舞步,就需要運用到迷蹤混元步法中的:並行訣。並行訣 cc.Spawn 也是一個安可心,他可以將其她多個安可心打包起來,成爲一個安可心,交給英雄,請看下面:
//3秒勻速移動到到座標100,100的位置
let moveTo = cc.moveTo(3, cc.v2(100, 100));
//3秒勻速旋轉1080度(三圈)
let rotateTo = cc.rotateTo(3, 1080);
//並行訣:移動與旋轉同時舞動
let spawn = cc.spawn(moveTo, rotateTo);
//執行並行訣安可心
node.runAction(spawn);
2. 串行訣
你肯定又要問,如果要移動後再旋轉,旋轉後再移動,這類舞步怎麼做呢?這叫做串行訣 cc.Sequence 解決的問題。
//3秒勻速移動到到座標100,100的位置
let moveTo = cc.moveTo(3, cc.p(100, 100));
//3秒勻速旋轉1080度(三圈)
let rotateTo = cc.rotateTo(3, 1080);
//1秒後移動到150,150的位置
let moveToo = cc.moveTo(1, cc.p(150, 150));
//串行訣:先移動,再旋轉,然後又移動
let sequence = cc.sequence(moveTo, rotateTo, moveToo);
//執行並行訣安可心
node.runAction(sequence);
3. 混元訣
將並行訣與串行訣,合理組合就形成了混元訣,例如:英雄一邊移動一邊旋轉,此時動作完後,做一個縮放消失:
//3秒勻速移動到到座標100,100的位置
let moveTo = cc.moveTo(3, cc.v2(100, 100));
//3秒勻速旋轉1080度(三圈)
let rotateTo = cc.rotateTo(3, 1080);
//並行訣:移動同時旋轉
let spawn = cc.spawn(moveTo, rotateTo);
//3秒勻速縮小
let scaleTo = cc.scaleTo(3, 0);
//串行訣打包了一個並行訣與scaleTo
let sequence = cc.sequence(spawn, scaleTo);
//執行並行訣安可心
node.runAction(sequence);
混元訣的要義:
將並行訣和串行訣相互嵌套,無限組合,完成無比複雜的英雄舞步。
行雲流水
按理來說,將混元訣運用自如之後,就算進入就算是迷蹤步入門了。
“我嚓!看了半天纔算是入門啊!!!”
英雄們,請不要着急,要達到行雲流水的境界還需要進一步的修煉,我們還有不少問題還沒解訣。
1. 分身訣與逆行訣
編排一段混元舞步需要念誦不少的咒語(編寫代碼),如果想將這段舞步給另一個英雄,可通過分身訣clone一份出來。
//編排舞步
...
//使用串行訣打
let action1 = cc.sequence(...)
//使用action1的分身訣,生成action2
let action2 = action1.clone();
//node1與node2共同起舞
node1.runAction(action1);
node2.runAction(action2);
還有一種情況,需要將舞步按之前的順序顛倒重來一遍,這時就需要用到逆行訣reverse
...
//串行訣:先移動,再縮放,最後旋轉
let sequence1 = cc.sequence(moveTo, scaleTo, rotateTo);
//逆行訣:先旋轉,再縮放,最後移動
let sequence2 = sequence.reverse();
上面的逆行 sequence 外,sequence 中串行的安可心也會逆行,以前是放大的,現在是縮小,以前是向左移動,逆行會移動會原位。
分身訣與逆行訣本質上,都是安可心的分身,逆行訣將輸入次序顛倒或取反執行,以得到來去自如的能力。
2. 根本停不下來?
思考一下:
如何與春晚的小彩旗比旋轉? 如何與炫邁口香糖比誰更持久?
你可能想到下面的做法:
//看我的999大法
node.runAction(cc.rotateTo(99999999999, 99999999999));
不好意思,告訴你這是非常不科學的,數字再大總會有比你更大的,這裏就需要使用到repate:重生訣。
爲什麼叫重生訣,不叫重複訣呢?因爲我也不知道怎麼取名字好,重生訣這樣念起來更坳口一點,意思似乎更明確:“反覆地重來”,讓你不會忘記。
//旋轉
let rotateBy = cc.rotateBy(1, 360);
//復重訣:將旋轉重複99999999次
let repate = cc.repate(rotateBy, 99999999);
node.runAction(repate);
還是不解訣問題嘛,重複再多也幹不過炫邁口香糖的“久到離譜”。
沒關係,我們還有殺手鐗,比看誰才離譜:真•重生訣 repateForever
//旋轉
let rotateBy = cc.rotateBy(1, 360);
//真•復重訣:這才叫根本停不下來
let repate = cc.repateForever(rotateBy);
不論是小彩旗還是炫邁,跟他們比持久都太沒意思了,不論英雄怎麼舞動,我們要求的是隨心所欲,想停就停纔是更高境界:
node.stopAction(action);
使用stopAction可以立即停止所指定的舞步,使用stopAllActions可中止英雄當前所有舞步,無需要指定安可心。
node.stopAllActions();
3. 行雲流水
何爲行雲流水?雲可散、水可斷,雲行水流英雄想咋的就咋的!遠處傳來,可不可以不動,什麼都不做呢?這個嘛,當然我們還有DelayTime: 懶人訣
//移動
let moveTo = ...
//懶人訣: 懶惰2秒
let delayTime = cc.delayTime(2);
//縮放
let scaleTo = ...
//串行訣:先移動、暫停、縮放
let sequence = cc.sequence(moveTo, delayTime, scaleTo);
node.runAction(sequence);
大風起兮雲飛揚,微風拂面曖洋洋,之前的基礎步法都是做的勻速運動,這個怎麼破呢?
最後必殺技:緩動訣 easeAction。
緩動訣是對基礎步法安可心的修飾,將其從勻速運動調整爲各種速率運動,大至分爲:
入•緩動、出•緩動、入出•緩動
//緩入、緩出式的位移,令人欲罷不能
let moveTo = cc.moveTo(3, cc.p(100, 100)).easeInOut(3.0));
node.runAction(moveTo);
緩動訣有很多,這裏不一一舉例了,在實際戰鬥中需要多多嘗試體驗。
4. 逍遙訣
英雄的迷蹤步就介紹完了,迷蹤步的核心是安可心舞步,與幾個重要的步訣:
並行訣、串行訣、混元訣、分身訣、逆行訣、重生訣、真•重生訣、懶人訣、緩動訣
靈活運用基礎步法,配合這些步訣就可以讓英雄獨步舞林了。對只能是獨步舞林了,就是說能是一個人跳舞,如果要在自己舞完後,接上下一個英雄,自己去逍遙快活,這裏還需要一個cc.callFunc:逍遙訣
...
//逍遙訣:將後續舞步傳導下去
let callFunc = cc.callFunc(() =>{
...
let action = ...
node2.runAction(action);
});
//將逍遙訣放在最後
let sequence = cc.sequence(..., callFunc);
//當sequence執行完後,node2出場
node1.runAction(sequnece);
逍遙訣除了可以與其他英雄建立鏈接外,還可以用於執行其它事件通知等,奧妙無窮,存乎一心!
工程源碼:請在公衆號中回覆【action】獲取工程代碼。
在線演示:http://example.creator-star.cn/action-demo
你可以點擊【閱讀原文】在手機上體驗
今天的分享就到這裏,希望你能跟着Shawn一起舞動起來!