2013/5/17

手機遊戲動畫之製作

張貼者： Nason 於 凌晨4:46


cocos2d-x提供的動畫主要可分為暫態動畫和延時動畫，前者就是不需要時間轉換即時展現的動作，其基類是CCActionInstant類；而後者則指動作完成需要一段時間，故須定義動作執行時間作參數，其基類為CCActionInterval類。 
Ø  暫態動畫
實現x翻轉和y翻轉
原圖(iconccc.png)
使用下面的代碼實現x和y翻轉
    CCSprite *sprite=CCSprite::create("iconccc.png");  //創建精靈
    sprite->setPosition(ccp(200,200));  //設置物件之錨點位置
    addChild(sprite,1);  //添加至場景

    CCActionInstant *AIx=CCFlipX::actionWithFlipX(1);  //定義對x軸作翻轉動作
    CCActionInstant *AIy=CCFlipY::actionWithFlipY(1);  //定義對y軸作翻轉動作

    sprite->runAction(AIx);    //運行
    sprite->runAction(AIy);

運行效果：

在此處有個概念順道提述一下：設置物件之錨點位置，除用ccp()外尚可利用CCPoint()或 CCPointMake()函式，全部均是傳遞兩個float參數以指定錨點位置(預設為物件之中心點)，若定義為CCPointZero則是指定在(0,,0)原點位置。

Ø  延時動畫
cocos2d-x對此類型動畫之類別定義有個簡單的命名規則以作區別：
u  CCXxxxTo - 絕對動作，執行的結果與當前的狀態關係無關 
u  CCXxxxBy - 相對動作，執行動作依存於當前的狀態上，即執行的結果與當前狀態具有相關性 
至於常用於遊戲之動畫類別列舉如下：
．移動至 - CCMoveTo
．移動 - CCMoveBy
．跳躍至 - CCJumpTo ：其設定參數為終點位置、跳躍高度和跳躍次數
．跳躍 - CCJumpBy
．貝賽爾曲線 – CCBezierBy：其 設定參數為P0-起點、P1-起點切線方向、P2-終點切線方向及P3-終點，可參考如下圖說明。
．放大至 - CCScaleTo ：若設定參數為小數則為縮小動作，反之則為放大
．放大 - CCScaleBy
．旋轉至 - CCRotateTo
．旋轉 - CCRotateBy
．閃爍 - CCBlink
．色調變換至 - CCTintTo
．色調變換 - CCTintBy
．漸變至 - CCFadeTo
．扇入 - CCFadeIn
．扇出 - CCFadeOut
       應用代碼如下：
       CCActionInterval *AIr=CCRotateBy::actionWithDuration(2,270);  //定義旋轉動畫270度，時間為2秒
       sprite->runAction(AIr);  //運行

除前述之動畫類別外，尚有一些組合動畫類別，分述如下：
u  CCSequence
此類別是繼承CCActionInterval之 CCFiniteTimeAction子類別衍生而來，本身可被CCNode物件執行，其使用時機乃為線性排列定義若干個動作，然後依照先後次序逐個進行，應用代碼如下：    CCActionInterval *ac=CCRotateBy::actionWithDuration(2,270);
    CCActionInterval *bc=CCBlink::actionWithDuration(3,10);
    CCActionInterval *mc=CCMoveTo::actionWithDuration(2,CCPoint(300,200));
    CCActionInterval *jc=CCJumpTo::actionWithDuration(3,CCPoint(400,400),20,4);

    CCFiniteTimeAction *se=CCSequence::actions(ac,bc,mc,jc,NULL);  //串聯組合動畫

    sprite->runAction(se);  //運行，動畫依序執行

u  CCSpawn
此類別亦是繼承CCActionInterval之CCFiniteTimeAction子類別衍生而來，其可要求動作同時出現，如：移動式翻轉、變色、縮放等。但需要特別注意的是，同步執行最後完成的時間由基本動作中使用時間最大者來決定，應用代碼如下：
    CCActionInterval *ac=CCRotateBy::actionWithDuration(2,270);
    CCActionInterval *sc=CCScaleBy::actionWithDuration(2,2,2);

    CCFiniteTimeAction *se=CCSpawn::actions(ac,sc,NULL);  //串聯組合動畫

    sprite ->runAction(se);   //運行，動畫同時進行

u  CCRepeat
此類別是繼承CCActionInterval衍生而來，其可用來將某一動作作有限次數之重複，應用代碼如下：    CCActionInterval *ac=CCRotateBy::actionWithDuration(2,270);    CCActionInterval *sc=CCScaleBy::actionWithDuration(2,2,2);

    CCFiniteTimeAction *se=CCSpawn::actions(ac,sc,NULL);  //串聯組合動畫

    CCActionInterval *rc=CCRepeat::actionWithAction(se,4);  //定義動畫重複執行次數

     sprite ->runAction(rc);   //運行，動畫重複執行

u  reverse()
反向執行某個動作，只限於支持針對序列動作的反向執行。此反向執行動作並不是一個專門的類，而是CCFiniteTimeAction提供的一個操作方法。須注意的是：並非所有的類都支持反向執行動作，如CCXxxxTo類不支持反向執行動作，而CCXxxxBy類通常可支援，應用代碼如下：
    CCActionInterval *ac=CCRotateBy::actionWithDuration(2,270);
    CCActionInterval *sc=CCScaleBy::actionWithDuration(2,2,2);

    CCFiniteTimeAction *se=CCSpawn::actions(ac,sc,NULL);  //串聯組合動畫
    CCFiniteTimeAction *rrc=se->reverse();    //定義反向執行動作
    CCFiniteTimeAction *lc=CCSequence::actions(se,rrc,NULL); //串聯組合動畫
     sprite ->runAction(lc);   //運行，動畫將被還原

u  CCDelayTime
通過CCDelayTime類，可為序列動作中增加一個時間間歇，應用代碼如下：    CCActionInterval *ac=CCRotateBy::actionWithDuration(2,270);
    CCActionInterval *sc=CCScaleBy::actionWithDuration(2,2,2);

    CCFiniteTimeAction *se=CCSpawn::actions(ac,sc,NULL);
    CCFiniteTimeAction *rrc=se->reverse();
    CCFiniteTimeAction *lc=CCSequence::actions(se,CCDelayTime::actionWithDuration(3),rrc,NULL);
     sprite ->runAction(lc);   //運行，動畫執行將間隔停歇一段時間

u  CCCallFunc 
可在運行動畫過程中進行函式呼叫，此函式無返回值，參數為CCObject*，通常用於自訂之動畫設計，應用代碼如下：    CCActionInterval *ac=CCRotateBy::actionWithDuration(2,270);
    CCActionInterval *sc=CCScaleBy::actionWithDuration(2,2,2);

    CCFiniteTimeAction *se=CCSpawn::actions(ac,sc,NULL);
    CCFiniteTimeAction *rrc=se->reverse();
    CCFiniteTimeAction *func=CCCallFunc::actionWithTarget(this,callfunc_selector(HelloWorld::backFunc));  //定義呼叫函式
    CCFiniteTimeAction *lc=CCSequence::actions(se,func,CCDelayTime::actionWithDuration(3),rrc,NULL);
     sprite ->runAction(lc);   //運行，此會在se動畫運行完成後調用函數

 

0 意見:

張貼留言

訂閱： 張貼留言 (Atom)