Android游戲開發之游戲幀動畫的播放與處理

帶你走進游戲開發的世界之游戲幀動畫的處理
<ignore_js_op> 
1.幀動畫的原理

       幀動畫幀動畫顧名思義，一幀一幀播放的動畫就是幀動畫。 幀動畫和我們小時候看的動畫片的原理是一樣的，在相同區域快速切換圖片給人們呈現一種視覺的假象感覺像是在播放動畫，其實不過是N張圖片在一幀一幀的切換罷了。
     
       如圖所示：人物行走動畫的實現方式， 4幀行走動畫在播放區域 一幀一幀向左切換播放 給人們一種播放動畫的假象 ，圖片就動了起來， 很簡單吧，其它三方向播放動畫的方法類似我就不再一一舉例。
<ignore_js_op> 
2.動畫資源的原始文件

動畫資源的原始文件PNG 一般有三種形式的呈現方式 請聽我細細道來。



1.每一幀是一張png圖片中

       如圖所示上下左右方向每一組動畫中的每一幀都是一張png圖片，播放動畫須要切換整張圖片 ，實現動畫效果。代碼中只需要將下一幀圖片完整的覆蓋住上一幀的圖片就OK了，這種資源的排列方式在程式演算法上是最簡單的。
<ignore_js_op> 
2.所有動畫幀都存在一張png圖片中

       如圖所示一張png中存放了人物所有的幀動畫，播放動畫的時候程式需要計算出將要播放的圖片在原始圖片中的起始坐標和結束坐標，也就是說要從原始圖片中把將要播放的圖片扣出來，從而顯示在手機屏幕上。這種資源的排列方式程式需要編寫計算圖片坐標位置的演算法。
<ignore_js_op> 
3.動畫編輯器處理動畫

游戲公司都會有自己的動畫編輯器 ，動畫編輯器的好處是
1.減少圖片大小節省記憶體空間 
2. 縮短美工對坐標時間 ，因為如果沒有編輯器美工很痛苦的需要一張圖片一張圖片的對坐標，全是體力活。
3.完全數據驅動動畫 ，動畫出問題程式不用改代碼。BUG都是美術的 ，呵呵。

       動畫編輯器生成出來的其實就是坐標 告訴圖片的每一個點 每個動畫的點 拼接起來的每一個坐標 程式須要編輯對動畫編輯器生成的xml文件 根據生成出來的坐標 進行解析然後繪製出游戲動畫。AuroraGT動畫編輯器是筆者使用最多的一款動畫編輯器它的功能非常強大可以編出任意動畫。由於考慮到商業用途 對於這個編輯器的解析與使用我不做任何解釋 。如果只是單純的想學習我把編輯器的下載地址貼出來，大家可以互相研究互相討論互相學習。

下載地址： <ignore_js_op> AuroraGT.rar (1.51 MB, 下載次數: 2046) 
<ignore_js_op>
給大家看看生成出來的動畫效果很絢麗吧，是不是很給力呢 呵呵呵呵。

<ignore_js_op> 
<ignore_js_op> 
我用代碼詳細的說明一下第一種和第二種游戲動畫的代碼實現方法。

       我自己寫了一個動畫類來處理播放動畫，需要調用動畫只需要new一個Animation對象傳入動畫所需要的參數通過調用 DrawAnimation 方法就可以按幀播放繪製動畫。如果是單純的學習的話我覺得這個類已經夠學習使用了。

1. package cn.m15.xys;
3. import java.io.InputStream;
5. import android.content.Context;
6. import android.graphics.Bitmap;
7. import android.graphics.BitmapFactory;
8. import android.graphics.Canvas;
9. import android.graphics.Paint;
11. public class Animation {
13.     /** 上一幀播放時間 **/
14.     private long mLastPlayTime = 0;
15.     /** 播放當前幀的ID **/
16.     private int mPlayID = 0;
17.     /** 動畫frame數量 **/
18.     private int mFrameCount = 0;
19.     /** 用於儲存動畫資源圖片 **/
20.     private Bitmap[] mframeBitmap = null;
21.     /** 是否迴圈播放 **/
22.     private boolean mIsLoop = false;
23.     /** 播放結束 **/
24.     private boolean mIsend = false;
25.     /** 動畫播放間隙時間 **/
26.     private static final int ANIM_TIME = 100;
27.     
28.     
29.     /**
30.      * 構造函數 
31.      * @param context
32.      * @param frameBitmapID
33.      * @param isloop
34.      */
35.     public Animation(Context context, int [] frameBitmapID, boolean isloop) {
36.         mFrameCount = frameBitmapID.length;
37.         mframeBitmap = new Bitmap[mFrameCount];
38.         for(int i =0; i < mFrameCount; i++) {
39.             mframeBitmap[i] = ReadBitMap(context,frameBitmapID[i]);
40.         }
41.         mIsLoop = isloop;
42.     }
43.     
44.     /**
45.      * 構造函數
46.      * @param context
47.      * @param frameBitmap
48.      * @param isloop
49.      */
50.     public Animation(Context context, Bitmap [] frameBitmap, boolean isloop) {
51.         mFrameCount = frameBitmap.length;
52.         mframeBitmap = frameBitmap;
53.         mIsLoop = isloop;
54.     }
55.     
56.     
57.     
58.    /**
59.     * 繪製動畫中的其中一幀
60.     * @param Canvas
61.     * @param paint
62.     * @param x
63.     * @param y
64.     * @param frameID
65.     */
66.     public void DrawFrame(Canvas Canvas, Paint paint, int x, int y,int frameID) {
67.         Canvas.drawBitmap(mframeBitmap[frameID], x, y, paint);
68.     }
69.     
70.     
71.     /**
72.      * 繪製動畫
73.      * @param Canvas
74.      * @param paint
75.      * @param x
76.      * @param y
77.      */
78.     public void DrawAnimation(Canvas Canvas, Paint paint, int x, int y) {
79.         //如果沒有播放結束則繼續播放
80.         if (!mIsend) {
81.             Canvas.drawBitmap(mframeBitmap[mPlayID], x, y, paint);
82.             long time = System.currentTimeMillis();
83.             if (time - mLastPlayTime > ANIM_TIME) {
84.                 mPlayID++;
85.                 mLastPlayTime = time;
86.                 if (mPlayID >= mFrameCount) {
87.                     //標誌動畫播放結束
88.                     mIsend = true;
89.                     if (mIsLoop) {
90.                         //設置迴圈播放
91.                         mIsend = false;
92.                         mPlayID = 0;
93.                     }
94.                 }
95.             }
96.         }
97.     }
98.     
99.     /**
100.      * 讀取圖片資源
101.      * @param context
102.      * @param resId
103.      * @return
104.      */
105.     public Bitmap ReadBitMap(Context context, int resId) {
106.         BitmapFactory.Options opt = new BitmapFactory.Options();
107.         opt.inPreferredConfig = Bitmap.Config.RGB_565;
108.         opt.inPurgeable = true;
109.         opt.inInputShareable = true;
110.         // 獲取資源圖片
111.         InputStream is = context.getResources().openRawResource(resId);
112.         return BitmapFactory.decodeStream(is, null, opt);
113.     }
114. }

大家看看我做的游戲demo  利用上下左右按鍵 播放向上 向下 向左 向右人物行走動畫。
<ignore_js_op> 
<ignore_js_op> 
<ignore_js_op> 
最後由於代碼較多我就不貼在博客中了 ， 下麵給出Demo源碼的下載地址歡迎大家下載閱讀互相學習，互相研究
<ignore_js_op> 第三講之幀動畫.rar (426.78 KB, 下載次數: 1354) 

問啊-定製化IT教育平臺，牛人一對一服務，有問必答，開發編程社交頭條 官方網站：www.wenaaa.com

QQ群290551701 聚集很多互聯網精英，技術總監，架構師，項目經理！開源技術研究，歡迎業內人士，大牛及新手有志於從事IT行業人員進入！