天天看點

英雄之舞—迷蹤“安可心”二、連結安可心三、混元步法四、行雲流水

奎特爾的進化之路可追溯到遠古可可思大陸,從可可思大陸上一直流傳這樣一句真言:

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

「英雄」是誰?英雄是Node,英雄就是你!

「安可心」為何物?不好意思,安可心其實是cc.Action,是我為他起的中文名字。之前我還給他起過:俺可行、安可行,感覺太俗了,「安可心」更貼切。

# 一、初識安可心

英雄之舞—迷蹤“安可心”二、連結安可心三、混元步法四、行雲流水

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

- 英雄的位置(position):MoveTo、MoveBy,她們控制英雄的位移,是迷蹤步的核心,需要的能量是位置(cc.p/cc.Vect2)。

- 英雄的旋轉(rotation): RotateTo、RotateBy,這兩姐妹控制英雄的轉身,華麗無比,需要的能量是角度(Angle)。

- 英雄的縮放(scale): ScaleTo、ScaleBy,他們讓英雄伸縮自如,有時如泰山壓頂,有時突如其來,需要的能量是縮放比例(scale)。

- 英雄的隐形(opacity)能力:FadeTo現身、FadeOut隐身,互相配合讓英雄若隐若現,Blink則是控制英雄時隐時現,奇幻無比。

- 英雄成為變色龍(color):TintTo、TintBy控制英雄的顔色過度,需要的能量是一個目标顔色(rgb值)。

以上「安可心」是實作迷蹤步的核心,需要謹記于心。同時還有一些「安可心」是英雄位移的變種或增強:

- 跳躍:JumpTo、JumpBy

- 曲線:bezierBy、bezierTo

其中曲線位移是英雄舞步殺手锏,可惜Shawn也學的不好,在這裡誠心呼喚高手,可以來奎特爾星球上講講bezier曲線!

二、連結安可心

英雄之舞—迷蹤“安可心”二、連結安可心三、混元步法四、行雲流水

我們在上面介紹了安可心家族迷蹤步的核心成員,但具體怎麼施展迷蹤步呢?首先要記住,奎特爾發源地是可可思大陸,需要牢記:色色點是根基,例如:

cc.MoveTo、cc.ScaleTo

在色色點後面,大寫字母是具體的安可心家族成員,而在真實戰場上,通常是用的召喚術(工廠函數)呼喚的安可心分身(執行個體化):

//注意cc.MoveTo與cc.moveTo的差別
let moveTo = cc.moveTo(, cc.p(, ));
           

cc.MoveTo是可娜絲的安可心化身,而cc.moveTo隻召喚術,它召喚了cc.MoveTo的一個分身moveTo,具像化他是做的: new cc.MoveTo(…)。

迷蹤安可心還有一個重要的,特性是:

持續時間

任何一個舞步或動作其實都是英雄在一定時間内的空間與形态的變化,我們來看看具體的操作:

let moveTo = cc.moveTo(, cc.p(, ));
node.runAction(moveTo);
           

此時不管node英雄在何處,在5秒内,他會移動到坐标x=100,y=100的位置上,runAction就是英雄舞動迷蹤步的關鍵,通過它與安可心建立連結。

三、混元步法

我們知道通過英雄的runAction可以與安可心建立連結,但要同時與多個安可心連結怎麼辦呢?比如一邊移動,一邊旋轉?

1. 并行訣

要實作這類舞步,就需要運用到迷蹤混元步法中的:并行訣。

并行訣cc.Spawn也是一個安可心,他可以将其她多個安可心打包起來,成為一個安可心,交給英雄,請看下面:

//3秒勻速移動到到坐标100,100的位置
let moveTo = cc.moveTo(, cc.p(, ));
//3秒勻速旋轉1080度(三圈)
let rotateTo = cc.rotateTo(, );
//并行訣:移動與旋轉同時舞動
let spawn = cc.spawn(moveTo, rotateTo);
//執行并行訣安可心
node.runAction(spawn);
           

2. 串行訣

你肯定又要問,如果要移動後再旋轉,旋轉後再移動,這類舞步怎麼做呢?這是**串行訣**cc.sequence解訣的問題。

//3秒勻速移動到到坐标100,100的位置
let moveTo = cc.moveTo(, cc.p(, ));
//3秒勻速旋轉1080度(三圈)
let rotateTo = cc.rotateTo(, );
//1秒後移動到150,150的位置
let moveToo = cc.moveTo(, cc.p(, ));
//串行訣:先移動,再旋轉,然後又移動
let sequence = cc.sequence(moveTo, rotateTo, moveToo);
//執行并行訣安可心
node.runAction(sequence);
           

3. 混元訣

将并行訣與串元訣,合理組合就形成了混元訣,例如:英雄一邊移動一邊旋轉,此時動作完後,做一個縮放消失:

//3秒勻速移動到到坐标100,100的位置
let moveTo = cc.moveTo(, cc.p(, ));
//3秒勻速旋轉1080度(三圈)
let rotateTo = cc.rotateTo(, );
//并行訣:移動同時旋轉
let spawn = cc.spawn(moveTo, rotateTo);
//3秒勻速縮小
let scaleTo = cc.scaleTo(, );
//串行訣打包了一個并行訣與scaleTo
let sequence = cc.sequence(spawn, scaleTo);
//執行并行訣安可心
node.runAction(sequence);
           

混元訣的要義:

将并行訣**Spawn和串行訣**Sequece互相嵌套包裝,可以無限組合,完成無比複雜的舞步

四、行雲流水

按理來說,将混元訣運用自如之後,就算進入就算是迷蹤步入門了。

“我嚓!看了半天才算是入門”?

英雄們,請不要着急,要達到行雲流水的境界還需要進一步的修煉,我們還有不少問題還沒解訣。

 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. 根本停不下來?

思考一下:

如何與春晚的小彩旗比旋轉?

如何與炫邁口香糖比誰更持久?

你可能想到下面的做法:

//看我的大法
node.runAction(cc.rotateTo(, ));
           

不好意思,告訴你這是非常不科學的,數字再大總會有比你更大的。

這裡就需要使用到repeat: 複重訣,為什麼叫複重訣,不叫重複訣呢?因為我也不在道怎麼取名字好,複重訣這樣念起來更坳口一點,意思似乎更明确:“反複地重來”,讓你不會忘記。

//旋轉
let rotateBy = cc.rotateBy(, );
//複重訣:将旋轉重複99999999次
let repeat = cc.repate(rotateBy, );
node.runAction(repeat);
           

還是不解訣問題嘛,重複再多也幹不過炫邁口香糖的“久到離譜”。

沒關系,我們還有殺手锏,比看誰才離譜:真•複重訣 repeatForever

//旋轉
let rotateBy = cc.rotateBy(, );
//真•複重訣:這才叫根本停不下來
let repeat = cc.repeatForever(rotateBy);
           

不論是小彩旗還是炫邁,跟他們比持久都太沒意思了,不論英雄怎麼舞動,我們要求的是随心所欲,想停就停才是更高境界:

使用stopAction可以立即停止所指定的舞步,使用stopAllActions可中止英雄目前所有舞步,無需要指定舞步。

3. 行雲流水

何為行雲流水?雲可散、水可斷,雲行水流英雄想怎樣就怎樣!

遠處傳來,可不可以不動,什麼都不做呢?這個嘛,當然!DelayTime 懶人訣

//移動
let moveTo = ...
//懶人訣: 懶惰秒
let delayTime = cc.delayTime();
//縮放
let scaleTo = ...
//串行訣:先移動、暫停、縮放
let sequence = cc.sequence(moveTo, delayTime, scaleTo);
node.runAction(sequence);
           

大風起兮雲飛揚,微風拂面暧洋洋,之前的基礎步法都是做的勻速運動,這個怎麼破呢?哈哈最後必殺技:緩動訣 easeAction。

緩動訣是對基礎步法安可心的修飾,将其從勻速運動調整為各種速率運動,大至分為

入•緩動訣、出•緩動訣、入出•緩動訣
//緩入、緩出式的位移,令人欲罷不能
let moveTo = cc.moveTo(, cc.p(, )).easeInOut());
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);
           

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

英雄之舞—迷蹤“安可心”二、連結安可心三、混元步法四、行雲流水

這次就到這裡,希望我的分享望能讓你舞動起來!

歡迎關注「奎特爾星球」微信公衆号,有代碼、有教程、有視訊、有故事,等你一起來奎特爾星球玩耍!

英雄之舞—迷蹤“安可心”二、連結安可心三、混元步法四、行雲流水

繼續閱讀