1. 程式人生 > >從頭開始學cocos2dx筆記之八(ActionTest)(一)

從頭開始學cocos2dx筆記之八(ActionTest)(一)

    首先讓我們來看看ActionTest裡面教了我們什麼。第一個LAYER演示瞭如何進行人為的轉移,不過我直接理解為設定初始屬性什麼的似乎要容易理解一點。介面都是SPRITE的介面。第一個層對應的類是ActionManual,這個類繼承自ActionDemo,在ActionDemo中,進行了初始化,讀取並建立了3個精靈以及下方的3個按鈕和MainMenu。精靈的建立也很簡單,用的CCSprite::create()函式,引數也很簡單,c風格的字串,指向資源路徑。回頭來看ActionManual的onEnter()函式,很顯然,精靈的setScaleX用於實現X軸的放大,setScaleY實現Y軸的縮放,引數為負,實現顛倒效果setPosition設定位置,setOpacity用於設定透明度,這個值越小,透明度越高。setRotation實現順時針的旋轉,setColor設定顏色;另外還有2個巨集:ccp(x,y):建立一個點;ccc3(r,g,b),建立一個顏色。為了後面不至於混淆,這裡也讓我們認識一下3個精靈:m_tamara指的是曲頭髮的女性,m_grossini指男性,m_kathia指的圓頭髮的女性。

    接下來是演示MoveTo和MoveBy的用法。首先我們注意到,程式首先是建立了3個ACTION,然後使用sprite->runAction()介面來執行。這個和上面的簡單的使用set有本質的區別,所以第一個DEMO的演示,還是理解為設定初始屬性來的方便一些。建立ACTION很簡單,都是使用對應類的靜態create函式。注意moveto和moveby的建立引數都是一樣的,第一個引數是一個浮點值,代表動作持續的時間,第2個引數為一個ccp,表達的含義不一樣。moveTo第2個引數指的是絕對座標,即移動到達的地點,而moveBy是相對座標,代表移動的相對位移。這個把引數的Y值改為負數來看,就會很明瞭。action還有一個reverse()介面,返回這個動作的倒退。這個也很方便。接下來我們看到如何將2個動作進行銜接,使用CCSequence::create()。注意最後有個NULL引數,這個建立函式可以加入多個動作,但是最後必須要有個NULL結尾。可以修改下程式碼,把上面建立的3個動作都加里面看看效果。

    第3個畫面演示了旋轉效果。to代表到達的值,by代表偏移量。第一個引數仍然為以秒為單位的動作持續事件,第2個代表角度,一圈為360度。這個值為正,人物順時針旋轉,為負則逆時針旋轉。

    ScaleTo/ScaleBy:這個動作的建立,如果只帶2個引數,則表示整體的縮放;如果帶3個引數,則後2個引數分別代表X與Y方向的縮放。

    SkewTo/SkewBy:演示了扭曲效果。注意這個扭曲X/Y的2個引數有相互加成抵消的效果。比方說第一個動作(37.2,-37.2),事實上人物只是在側身旋轉,人物本身沒有扭曲,而第3個人物(45,45),加成為90,最後扭曲效果幾乎和第2個一致:扭曲成了一條線。

    RotationSkewTo/RotationSkewBy:實際上這裡用的還是CCRotateTo和CCRotateBy,只不過引數比第3個示例比,引數變成了3個。這個程式碼引數和上個示例的取值幾乎一摸一樣,但是效果有些細微的差別。這個用Rotation也實現了扭曲的效果。

    接下來的這個示例更為詳盡的演示了Skew與Rotate的區別。從效果上看,Skew扭曲的幅度更大,幾乎達到全屏的效果,而ratation顯然影響範圍要小一點。這裡我們看到幾個介面:sprite->removeFromParentAndCleanup(),自清理;setAnchorPoint(),設定錨點;錨點簡單點說就是一個參照點,一個精靈是一個圖塊,設定他的位置以及其他變換參照總是要歸結到某個點,這個點就是錨點。

    再接下來是skew rotate與scale的組合運用。這個很神奇的組合看上去有3D的效果。但是很顯然,這個是個2D變換。

    JumpTo/JumpBy:實現跳躍效果,但引數多了2個:第3個引數為跳多高,第4個引數為總共跳多少次。這裡我們看見如何讓一個動作永久持續:使用CCRepeatForever::create()。

    CardinalSplineTo/CardinalSplineBy:這個示例讓精靈沿這個特定的曲線移動。這個特定的曲線是什麼呢。。好吧。。我不是學數學的。。不過看程式碼,畫左邊的曲線和右邊的正方形都是用同一個函式ccDrawCardinalSpline()畫的,所以正方形也該是這個曲線的一種。不過我放棄去理解這個曲線的內部原理。

    CatmullRomBy/CatmullRomTo:又一種曲線。。我在網上搜索了下,這2種曲線應該都是某種插值演算法,讓過度顯得比較平滑。從程式碼使用上來,建立這個動作要傳入一個CCPointArray做引數。建立這個Array需要傳遞一個容量做引數,使用addControlPoint()函式增加控制點。所以使用上還是比較簡單。

    BezierBy/BezierTo:貝塞爾曲線。。。

    Blink:閃爍!啊 終於不再曲線裡面打轉了。。傳遞一個引數閃多少次,簡單明瞭。

    FadeIn/FadeOut:淡入與淡出!注意在使用淡入效果前,程式實現將精靈透明度設定為0!如果把這句程式碼註釋掉,可以發現一開始精靈會有個閃爍的效果。

    Tint:實現染色效果。

    Animation:這個示例演示如何建立動畫。先建立一個空的動畫物件,然後用addSpriteFrameWithFileName()逐幀加入。。這也太沒效率了。。現在幀動畫應該都放在一張圖片裡面。setDelayPerUnit(),設定每幀間隔事件;setRestoreOriginFrame();動畫結束是否回到初始幀。接下來程式演示了另一個種建立動畫的模式:讀取一個PLIST檔案來建立,但這裡沒有任何資訊告訴我怎麼建立這個plist檔案;再接下來我們看到,動畫也可以通過copy來建立。。我網上GOOGLE了一下,這個PLIST檔案格式其實就是利用XML寫的有關設定幀動畫的資訊。不過我們沒有必要手工去編寫這個檔案。因為有個比較廣泛好用的工具:TexturePacker可以生成這個檔案。這裡給個地址:http://zengrong.net/post/1981.htm 不過為毛是未完待續啊。。

    接下來是2個有關CCSequence的演示。需要注意的是第2個示例,演示瞭如何把一些特殊的動作以及回撥函式放入動作組裡面去。

    CCRemoveSelf:讓自己消失。

    CCSpawn:讓多個動作混合。

    CCactionInterval->reverse():建立一個反轉動作。

    CCDelayTime:延遲

    CCRepeat/CCRepeatForever:Repeat只重複固定的次數。

    接下來程式演示瞭如果通過在回撥函式來實現動作效果。先將某回撥函式加入動作鏈,然後回撥中使用pSender->runAction。