Android游戲開發教程之九：場景特效

       大家在玩游戲的時候應該有時候會發現在切換游戲場景的時候 界面會播放一段非常好看的動畫 比如一個百葉窗的形式關閉界面 然後在打開界面 效果非常好看 用戶體驗也非常好，今天我向大家解讀游戲開發中常用的四種切換場景的特效動畫。

　　下面游戲界面中 紅框內標識了4個圖片按鈕 分別點擊這4個按鈕會分別播放4組切換場景的特效動畫。

　　1. 交叉相合動畫

　　如圖所示 左右兩邊分別以若干個矩形以交替相合的形式合並 控制屏幕關閉

　　通過兩個for循環 1 3 5 7 9 繪制屏幕左方矩形 2 4 6 8 10 繪制屏幕右放矩形 在游戲更新中計算矩形移動的坐標  然後左邊的矩形 分別向右延伸 右邊的矩形分別向左延伸  這樣就可以實現矩形的交叉合並動畫。

1. /**交錯的實現矩形相交**/  
2. int count = (mScreenHeight / RANDOM_TYPE_2_RANGE);  
3. for (int i = 0; i < count; i += 2){  
4.                   drawFillRect(mCanvas, Color.BLACK, 0, i * RANDOM_TYPE_2_RANGE, s_effRange, RANDOM_TYPE_2_RANGE);  
5. }  
6. for (int i = 1; i < count; i += 2){  
7.                   drawFillRect(mCanvas, Color.BLACK, mScreenWidth - s_effRange, i * RANDOM_TYPE_2_RANGE, s_effRange, RANDOM_TYPE_2_RANGE);  
8. }  

　　繪制矩形的方法

1. /** 
2.  * 繪制一個矩形 
3.  * @param canvas 
4.  * @param color 
5.  * @param x 
6.  * @param y 
7.  * @param w 
8.  * @param h 
9.  */  
10. public void drawFillRect(Canvas canvas, int color, int x, int y, int w, int h) {  
11.     int backColor = mPaint.getColor();  
12.     mPaint.setColor(color);  
13.     canvas.drawRect(x, y, x + w, y + h, mPaint);  
14.     mPaint.setColor(backColor);  
15. }  

　　2. 扇形合並動畫

　　如圖所示以扇形的轉圈的形式來控制屏幕關閉

　　在游戲更新中一直更新扇形繪制的區域 根據繪制區域的參數將扇形繪制出來 實現扇形合並的動畫效果。

1. //rectf為扇形繪制區域 為了讓扇形完全填充屏幕所以將它的區域擴大了100像素  
2. RectF rectf = new RectF(- RANDOM_TYPE_3_RANGE, - RANDOM_TYPE_3_RANGE,mScreenWidth+RANDOM_TYPE_3_RANGE,mScreenHeight + RANDOM_TYPE_3_RANGE);  
3. //將扇形繪制出來  
4. drawFillCircle(mCanvas, Color.BLACK,rectf,0,s_effRange,true);  

　　繪制扇形的方法

1. /** 
2.  * 繪制一個扇形 
3.  * @param canvas 
4.  * @param color 
5.  * @param oval 
6.  * @param startAngle 
7.  * @param sweepAngle 
8.  * @param useCenter 
9.  */  
10. public void drawFillCircle(Canvas canvas, int color, RectF oval, int startAngle, int sweepAngle, boolean useCenter) {  
11.     int backColor = mPaint.getColor();  
12.     mPaint.setColor(color);  
13.     canvas.drawArc(oval, startAngle, sweepAngle, useCenter, mPaint);  
14.     mPaint.setColor(backColor);  
15. }  

　　3. 百葉窗合並動畫

　　如圖所示 屏幕中若干的矩形慢慢放大的形式關閉游戲屏幕

　　在屏幕中用雙for循環繪制出若干的矩形 在游戲更新中更新矩形繪制的寬與高 直到將屏幕完全填充。這樣就可以實現游戲百葉窗合並動畫的效果啦。

1. /**百葉窗效果利用雙for循環 修改每個矩形繪制的寬度**/  
2. for (int i = 0; i <= (mScreenWidth / RANDOM_TYPE_0_RANGE); i++) {  
3.     for (int j = 0; j <= (mScreenHeight / RANDOM_TYPE_0_RANGE); j++) {  
4.     drawFillRect(mCanvas, Color.BLACK, i* RANDOM_TYPE_0_RANGE, j * RANDOM_TYPE_0_RANGE,  
5.         s_effRange, s_effRange);  
6.     }  
7. }  

　　4. 滾動水紋矩形合並動畫

　　如圖所示 利用矩形的滾動實現水紋向右關閉游戲屏幕效果。

　　大家仔細觀察上圖這個動畫效果 其實就是4個矩形 從右到左 前3個矩形的大小是固定的中間的間隙也是固定的 最左邊的矩形才為真正關閉屏幕的矩形 更新游戲界面時 4個矩形同時向右方移動 前3個只移動坐標 最後一個才是真正填充的矩形。這樣就可以實現滾動的水紋的效果了。

1. /**水紋效果其實繪制了4個矩形 中間留一些縫隙 **/  
2. drawFillRect(mCanvas, Color.BLACK, 0, 0, s_effRange, mScreenHeight);  
3. drawFillRect(mCanvas, Color.BLACK, s_effRange + RANDOM_TYPE_1_SPACE1, 0, RANDOM_TYPE_1_RANGE1, mScreenHeight);  
4. drawFillRect(mCanvas, Color.BLACK, s_effRange + RANDOM_TYPE_1_SPACE2, 0, RANDOM_TYPE_1_RANGE2, mScreenHeight);  
5. drawFillRect(mCanvas, Color.BLACK, s_effRange + RANDOM_TYPE_1_SPACE3, 0, RANDOM_TYPE_1_RANGE3, mScreenHeight);  

　　這樣4個動畫效果已經介紹完畢， 下面我將一些重要的代碼貼上。

　　根據特效的狀態 進行繪制特效

1.        /**繪制特效**/  
2. public void RenderEffect() {  
3.     switch (s_effectType) {  
4.     case RANDOM_EFFECT_TYPE_SQUARE:  
5.     /**百葉窗效果利用雙for循環 修改每個矩形繪制的寬度**/  
6.     for (int i = 0; i <= (mScreenWidth / RANDOM_TYPE_0_RANGE); i++) {  
7.         for (int j = 0; j <= (mScreenHeight / RANDOM_TYPE_0_RANGE); j++) {  
8.         drawFillRect(mCanvas, Color.BLACK, i* RANDOM_TYPE_0_RANGE, j * RANDOM_TYPE_0_RANGE,  
9.             s_effRange, s_effRange);  
10.         }  
11.     }  
12.     break;  
13.     case RANDOM_EFFECT_TYPE_SHADOW:  
14.     /**水紋效果其實繪制了4個矩形 中間留一些縫隙 **/  
15.     drawFillRect(mCanvas, Color.BLACK, 0, 0, s_effRange, mScreenHeight);  
16.     drawFillRect(mCanvas, Color.BLACK, s_effRange + RANDOM_TYPE_1_SPACE1, 0, RANDOM_TYPE_1_RANGE1, mScreenHeight);  
17.     drawFillRect(mCanvas, Color.BLACK, s_effRange + RANDOM_TYPE_1_SPACE2, 0, RANDOM_TYPE_1_RANGE2, mScreenHeight);  
18.     drawFillRect(mCanvas, Color.BLACK, s_effRange + RANDOM_TYPE_1_SPACE3, 0, RANDOM_TYPE_1_RANGE3, mScreenHeight);  
19.     break;  
20.   
21.     case RANDOM_EFFECT_TYPE_CROSS:  
22.                /**交錯的實現矩形相交**/  
23.     int count = (mScreenHeight / RANDOM_TYPE_2_RANGE);  
24.     for (int i = 0; i < count; i += 2){  
25.                    drawFillRect(mCanvas, Color.BLACK, 0, i * RANDOM_TYPE_2_RANGE, s_effRange, RANDOM_TYPE_2_RANGE);  
26.                }  
27.                for (int i = 1; i < count; i += 2){  
28.                    drawFillRect(mCanvas, Color.BLACK, mScreenWidth - s_effRange, i * RANDOM_TYPE_2_RANGE, s_effRange, RANDOM_TYPE_2_RANGE);  
29.                }  
30.     break;  
31.   
32.     case RANDOM_EFFECT_TYPE_SECTOR:  
33.     //rectf為扇形繪制區域 為了讓扇形完全填充屏幕所以將它的區域擴大了100像素  
34.     RectF rectf = new RectF(- RANDOM_TYPE_3_RANGE, - RANDOM_TYPE_3_RANGE,mScreenWidth+RANDOM_TYPE_3_RANGE,mScreenHeight + RANDOM_TYPE_3_RANGE);  
35.     //將扇形繪制出來  
36.     drawFillCircle(mCanvas, Color.BLACK,rectf,0,s_effRange,true);  
37.     break;  
38.   
39.     }  
40. }  

　　在播放動畫的時候須要更新游戲特效 主要是用來更新特效繪制的參數 根據時時更新的參數在繪制中讓特效動畫動起來。

1. /**更新特效**/  
2. ublic void UpdataEffectRange(int range) {  
3.    if (s_effRange < s_effectRangeTarget) {  
4. s_effRange += range;  
5. if (s_effRange > s_effectRangeTarget) {  
6.     s_effRange = s_effectRangeTarget;  
7. }  
8. } else if (s_effRange > s_effectRangeTarget) {  
9. s_effRange -= range;  
10. if (s_effRange < s_effectRangeTarget) {  
11.     s_effRange = s_effectRangeTarget;  
12. }  
13. }  

　　通過點擊圖片按鈕來設置播放特效的類型 在這裡初始化當前需要播放的 特效繪制的相關參數。

1. /**設置播放特效類型**/  
2. public void SetCurtainEffect(int type) {  
3.     s_effectType = type;  
4.     switch (s_effectType) {  
5.     case RANDOM_EFFECT_TYPE_SQUARE:  
6.     s_effRange = 0;  
7.     s_effectRangeTarget = RANDOM_TYPE_0_RANGE;  
8.     break;  
9.     case RANDOM_EFFECT_TYPE_SHADOW:  
10.     s_effRange = EFFECT_RANGE_PERFRAME_1;  
11.     s_effectRangeTarget = mScreenWidth;  
12.     break;  
13.     case RANDOM_EFFECT_TYPE_CROSS:  
14.     s_effRange = 0;  
15.     s_effectRangeTarget = mScreenWidth;  
16.     break;  
17.     case RANDOM_EFFECT_TYPE_SECTOR:  
18.     s_effRange = 0;  
19.     s_effectRangeTarget = 360;  
20.     break;  
21.     }  
22.     setGameState(GAME_EFFECT);  
23. }  

　　最後如果你還是覺得我寫的不夠詳細，看的不夠爽，不要緊我把源代碼的下載地址貼出來，歡迎大家一起討論學習，希望可以和大家一起進步。

　　下載地址：http://vdisk.weibo.com/s/aadp0