Android游戏开发之切换游戏场景特效的实现 (十九)

135
回复
1144159
查看
  [复制链接]

249

主题

278

帖子

17

安币

初级码农

Rank: 1

发表于 2011-9-3 00:35:09 | 显示全部楼层 |阅读模式
带你走进游戏开发的世界之切换场景特效

大家在玩游戏的时候应该有时候会发现在切换游戏场景的时候 界面会播放一段非常好看的动画 比如一个百叶窗的形式关闭界面 然后在打开界面 效果非常好看 用户体验也非常好,今天我向大家解读游戏开发中常用的四种切换场景的特效动画。
下面游戏界面中 红框内标识了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.         public 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.             }
  14.         }
复制代码
通过点击图片按钮来设置播放特效的类型 在这里初始化当前需要播放的 特效绘制的相关参数。
  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.         }
  24.         
复制代码
最后如果你还是觉得我写的不够详细 看的不够爽 不要紧我把源代码的下载地址贴出来 欢迎大家一起讨论学习

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

0

主题

380

帖子

715

安币

代码手工艺人

Rank: 4

发表于 2011-9-3 20:03:58 | 显示全部楼层
学习了~!

14

主题

361

帖子

199

安币

程序猿

Rank: 2

发表于 2011-9-7 14:41:15 | 显示全部楼层
Android游戏开发之切换游戏场景特效的实现 (十九)

1

主题

25

帖子

12

安币

初级码农

Rank: 1

发表于 2011-9-13 13:34:17 | 显示全部楼层
强烈支持一下

0

主题

49

帖子

19

安币

程序猿

Rank: 2

QQ达人

发表于 2011-9-13 16:36:01 | 显示全部楼层
强烈支持

0

主题

21

帖子

0

安币

初级码农

Rank: 1

发表于 2011-9-14 10:22:45 | 显示全部楼层
谢谢楼主分享

0

主题

160

帖子

114

安币

程序猿

Rank: 2

发表于 2011-9-16 17:28:59 | 显示全部楼层
学习了,谢谢楼主啊

1

主题

42

帖子

73

安币

程序猿

Rank: 2

QQ达人

发表于 2011-9-19 16:10:18 | 显示全部楼层
{:soso_e178:}{:soso_e163:}
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

领先的中文移动开发者社区
18620764416
7*24全天服务
意见反馈:1294855032@qq.com

扫一扫关注我们

Powered by Discuz! X3.2© 2001-2019 Comsenz Inc.( 粤ICP备15117877号 )