使用動畫編輯器編輯、繪製複雜的精靈動畫

時間 2019-12-05

標籤使用動畫編輯器編輯繪製複雜精靈简体版

原文原文鏈接

咱們平時所玩的不少遊戲都有着很是絢麗的動畫效果，尤爲是像ACT、RPG等類型的遊戲，必須擁有華麗的魔法和攻擊效果才能吸引玩家的眼球。本文將主要介紹如何使用OPhone API以及動畫編輯器類的工具來編輯、繪製和處理精靈的動畫，整個程序的運行效果以下圖所示：程序員

圖1 遊戲最終效果算法

動畫原理

咱們都看過動畫片，看過電影，玩過遊戲，裏面都有各類絢麗的動畫，實際上動畫的繪製機制歸納說來就是以必定的速度連續播放靜態的圖片，這樣人眼就能識別出動畫。通常咱們人眼可以分辨的動畫速度爲10——20幀/秒，咱們稱之爲FPS（Frame Per Second），低於10幀就會變得很卡，高於20就會變成快動做，所以，控制好這個數值對遊戲總體的流暢度相當重要。api

那麼總結起來，要想在遊戲中繪製動畫須要具有如下幾個必要元素：數組

1. 動畫的原始圖片編輯器

2.動畫序列數據ide

3.動畫刷新機制（下一幀）工具

常規的動畫播放方法

1.實現第一步（動畫的原始圖片）佈局

常規的播放2D動畫方法的方法實際就是對上述過程的一個分解：在遊戲中，精靈的圖片常常是被放置到一張圖片上，下圖就是一個典型的2D遊戲精靈圖片：post

圖2 角色原始圖片動畫

2.實現第二步（設定動畫序列）

有了原始圖片以後，咱們就能夠把這些圖片按照必定的尺寸進行分割，切割成的每一個塊咱們稱之爲「幀」，同時爲每一幀進行編號，爲每幀分配惟一的索引號，索引號能夠從任意數字開始，可連續也能夠隨機，但要注意不能有重複的索引號，分配好的索引號可參照下圖所示：

表1 遊戲幀序列

有了這個索引，咱們就能夠爲每一個動畫設定動畫序列了，好比，咱們能夠分別定義精靈的上、下、左、右行走的動畫序列，每一個動畫的序列以下面代碼所示：

final static int ACTION_UP[]={0,1,2};

final static int ACTION_DOWN[]={6,7,8};

final static int ACTION_LEFT[]={9,10,11};

final static int ACTION_RIGHT[]={3,4,5};

final static int ACTION_STAND[]={7};

數組中的每一個元素值就是上面表格中的數值。

3.實現第三步（切換並播放動畫）
　因爲全部的圖片塊都被放置到了一個數組中保存起來，所以有個動畫數據以後，咱們就能夠把數據所對應的圖片繪製到屏幕上了，而後，經過線程來控制一幀一幀的切換，這就是遊戲中動畫處理的通常過程。

上面這種播放動畫的方式的優勢是開發簡單，便於切換和控制，可是也有以下的一些缺點：

　　1.存在重複的圖片資源

咱們能夠從原始圖片上看到，若是要實現精靈向下走的動畫，須要使用4幀圖片，可是這4幀圖片中只有精靈腳步的圖片存在差別，剩下的都大體相同，這就是一種圖片上的浪費。而咱們的手機內存目前還比較小，所以這種浪費應該是要儘可能避免的。

　　2.動畫數據直接存在於代碼中

上面的例子中，咱們直接把動畫的序列以數組的形式保存到了代碼中，也就是說，把對動畫數據的處理交給了程序員來完成，而程序員的主要工做應該是處理遊戲中的算法邏輯，所以，比較好的解決方法是把動畫的處理交給美工和策劃來完成。所以，上面這種方法也存在缺點。

　　3.幀圖片要求規整

若是採用上面的方法繪製動畫，要求每一幀必須按照指定的長度和寬度進行分割，不然就是出現繪製錯誤，這在必定程度上也限制了程序的靈活性。

　　4. 難易實現複雜的動畫效果

因爲幀的尺寸人爲的被限定，同時每個動做就必需要一幀進行顯示，若是要想實現複雜的動畫序列就意味着要存在大量的幀序列，而原始圖片勢必要隨之變得很大，進而增長了對內存的佔用，而在這種狀況下，幀數越多，重複的內容也會隨之不斷增多，顯然這也不適合手機這種資源有限的設備的特色。

上面說了這些缺點，那麼該如何解決呢？下面就爲你介紹一下目前比較流行的一種動畫處理方式，也是本文的重點——使用動畫編輯工具。

做者介紹

李建，樂成數字通訊學院高級講師。層就任於國內數家SP，CP公司，具備豐富的軟件、遊戲開發經驗。並從事多年教學工做，具備豐富的教學經驗。目前主要從事OPhone、J2ME開發和教學方面的工做。

動畫編輯器的原理

動畫編輯器就是一種軟件工具，它的做用就是經過軟件對原始圖片進行切割，而後在軟件中把切割好的圖片塊拼成一幀一幀的圖片，再選擇相應的圖片來組成動畫序列，最後將數據導出以文件。

動畫編輯器的使用

目前，不少的手機遊戲公司都在使用動畫編輯器來製做動畫，而不一樣的公司使用的工具也不盡相同，下圖爲一個功能比較強大且使用很普遍的動畫編輯工具，界面以下圖所示：

圖3 動畫編輯器界面

接下來我將一步一步的演示如何使用這個工具來製做動畫：

1. 首先要創建一個工程，這個同時點擊「」按鈕引入一張圖片，以下圖：

圖4 角色原始圖片

從圖中咱們看到，原始圖片再也不是規則的幀序列，精靈圖片被一塊塊的分解了。

2. 下面咱們要對圖片進行分割了，選中左邊欄的「」，而後在圖片上進行切割，把烏龜的各個零部件都用方塊圈出來，最後的效果以下圖：

圖5 分割原始圖片

3. 接下來就能夠用這些「零件」拼圖了。首先咱們在右上方的窗口中點擊「」按鈕，接下來就能夠看到右側窗口變成以下圖所示的界面：

圖6 frame窗口

4. 接下來雙擊上圖中的「1-Frame」，就會出現以下圖所示界面：

圖7 拼圖界面

5. 接下來你就能夠在左邊的窗口中按住鼠標左鍵選擇你要的烏龜的零部件圖片並將其拖入右邊窗口的座標系中，通常將其放置到第一象限，一個拼好的幀圖片以下圖所示：

圖8 幀的拼圖

在拼圖中，你可使用左邊的一些按鈕來實現各個圖塊的位置和對齊，如圖：

圖9 佈局排列按鈕

能夠點擊「」來回到幀列表界面，同時可使用「」按鍵增長新的幀。按照上述方法能夠拼出烏龜的上、下、左、右行走等各個幀序列，拼好的效果以下圖：

圖10 拼好的各個幀

6. 有了幀圖片就能夠利用它們來組成動畫了，方法以下：

菜單中選擇「Action——Edit」，效果以下圖：

圖11 增長動畫

圖12 動畫編輯界面

7. 接下來在「Action Edit」窗口中經過「」按鈕增長一個動畫，而後就能夠從Frame列表中選擇相應的幀來組成相應動畫了，以下圖所示：

圖13 設置動畫

這樣咱們就製做好了一個烏龜向下行走的動畫，同時你能夠點擊「」按鈕來觀察這個動畫，並根據效果對動畫進行調整，很是方便。

如今咱們已經完成了整個動畫的製做過程，下面就要將數據進行導出，過程以下圖所示：

圖14 導出數據

上面介紹瞭如何使用動畫編輯器來設定動畫，相信你已經掌握了這個工具的使用了。可是，用這個工具製做的動畫並不能直接顯示到手機屏幕上，還須要咱們經過代碼的方式來對其進行處理。下面來介紹一下如何經過代碼來繪製響應的動畫。

動畫播放類——Animation的實現：

要想實現對動畫的播放必需要有一個動畫的解析類，也就是須要對「.sprite」數據文件進行解析，這裏咱們將這個類命名爲SpriteX，這個類的做用是解析數據文件並提供動畫的繪製方法，因該類內容較多，此處沒有貼出源代碼，請參考附件。

精靈類——Role的實現

每一個精靈類都須要有個SpriteX類的對象用來處理該精靈的動畫，所以須要在這個類中定義以下屬性：

SpriteX spx;

精靈類的構造方法以下：

public Role(GameView view)  
 
    {  
 
       spx=new SpriteX("s.sprite",R.drawable.a2,view);  
 
    }

這裏面的「view」爲視圖類的對象，稍後會有介紹。

注意：精靈圖片須要放置到「res/drawable」文件夾，動畫數據要放到「assets」文件夾下面。

精靈類的繪製方法以下：

public void paint(Canvas g)  
 
    {  
 
        spx.paint(g,100,100);  
 
        spx.nextFrame();  
 
    }

設計屏幕類

定義好精靈類只是實現了這個項目的第一步，咱們還不能在屏幕上看到精靈的動畫，咱們須要一個視圖來把精靈顯示出來，接下來咱們定義視圖類，在這裏咱們自定義一個類GameView來實現這個功能。做爲一個自定義的視圖類，這個類須要繼承View，關於這個類請參考api文檔。這個類用來處理精靈的繪製，按鍵處理等功能。其構造方法以下：

public GameView(Context view)  
 
    {  
 
       super(view);  
 
        
 
       gamePaint = new Paint();  
 
       player=new Role(this);  
 
   
 
       // 創建線程  
 
       Thread t = new Thread(this);  
 
       t.start();  
 
}

精靈對象建立完畢後，咱們就能夠將其繪製到屏幕上了，這裏須要重寫View類中的onDraw()方法，此方法會在該類對象被Activity調用時自動調用，其方法以下：

@Override  
 
  protected void onDraw(Canvas g)  
 
  {  
 
     role.draw(gamePaint);  
 
  }

動畫的刷新

在GameView類中須要處理動畫的刷新，也就是每隔一段時間來播放動畫的下一幀，所以咱們用線程來實現這個功能，線程的run方法以下所示：

public void run()  
 
    {  
 
       while (true)  
 
       {  
 
           // 放慢速度  
 
           long bm = System.currentTimeMillis();  
 
           // 更新屏幕  
 
           postInvalidate();  
 
           long cm = System.currentTimeMillis();  
 
           if (cm - bm < SPLASH_RATE)  
 
              try  
 
              {  
 
                  Thread.sleep(SPLASH_RATE - (cm - bm));  
 
              } catch (InterruptedException e)  
 
              {  
 
                  e.printStackTrace();  
 
              }  
 
       }  
 
    }

在這裏要注意給線程適當的休眠時間，用來控制FPS，這樣有利於獲得更好的遊戲體驗。

注意：SPLASH_RATE就是每一個線程的間隔時間

定義Activity

最後咱們定義一個Activity的子類用來運行該遊戲，在Activitiy中咱們須要創一個GameView對象，而後經過setContentView()方法進行設定，代碼以下：

@Override  
 
    public void onCreate(Bundle savedInstanceState)  
 
    {  
 
        super.onCreate(savedInstanceState);  
 
        instance=this;  
 
         
 
        view=new GameView(this);  
 
        setContentView(view);  
 
}