偶像來了 | 英雄請一起跳支舞!

640?wx_fmt=png

工程源碼:請在公衆號中回覆【action】獲取工程代碼。

在線演示:http://example.creator-star.cn/action-demo

你可以點擊【閱讀原文】在手機上體驗

Creator星球的進化之路可追溯到遠古 可可思大陸(Cocos2d-x),在可可思大陸上一直流傳這樣一句真言:

「英雄」是舞者,「安可心」是舞步

「英雄」是誰?英雄是Node,英雄就是俺可行,感覺太俗了,「安可心」更溫馨。

一、初識安可心

640?wx_fmt=jpeg

這裏的「安可心」可不是一個人,她是一個家族,迷蹤舞步中的安可心大多是爲英雄的屬性而孕育的,其中絕大多數還是雙胞胎。

  • 英雄的位置(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

其中的塞爾曲線動作是英雄舞步殺手鐗,我會在另外的教程中講解。

二、鏈接安可心

640?wx_fmt=jpeg

我們在上面介紹了安可心家族迷蹤步的核心成員,但具體怎麼施展迷蹤步呢?

首先要記住,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);

逍遙訣除了可以與其他英雄建立鏈接外,還可以用於執行其它事件通知等,奧妙無窮,存乎一心!

640?wx_fmt=jpeg

工程源碼:請在公衆號中回覆【action】獲取工程代碼。

在線演示:http://example.creator-star.cn/action-demo

你可以點擊【閱讀原文】在手機上體驗


今天的分享就到這裏,希望你能跟着Shawn一起舞動起來!

640?wx_fmt=jpeg

640?wx_fmt=png

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章