flash游戏开发,非stage3d的动画解决方案【转自air移动研究小组todoair.com】(原创文章)

5/7/2014来源:Photoshop教程人气:2936

非stage3d的动画解决方案

(本文是本人发表在air移动研究小组网站:todoair.com上的一片教程,旨在解决可以解决因为Flash素材太多太大会跑不了60帧或者卡死的现象。)

仅以此篇教程,献给那些在大动画面前因效率问题纠结而死的flash原生开发者们。

首先,允许我表达作为一个美工的我对各位码农的敬佩之情。

其次,这篇东西旨在解决非stage3d的动画的优化问题,使用stage3d的情况下的具体性能没有测试过,所以请所有基于stage3d的开发人员绕行,选择更合适的骨骼动画编辑器。

言归正传。

作为一个美术,我了解美术每天都在做什么工作,我也了解如何和程序员沟通,但是大部分美术人员和程序员互相是不经常沟通的,虽然有时候大家在讲同一件事,但经常会出现鸡同鸭讲的情况。

一直以来,我和小组的其他成员一直都在追着新技术跑。出了一个新鲜玩意就兴奋的研究一通。虽然说这样会了解技术的动向,但很容易把简单问题复杂化,渐渐的忘记了关注那些还没有能力和必要用到新技术的项目需要。

这话要从京辉的动画编辑器说起。

因为我们团队中的动画需求量比较大,但是对于移动设备的小的可怜的内存来说,大量的超过200帧的序列动画都是一个超级大的挑战。

于是“屌丝逆袭”骨骼动画编辑器就此而生:

先把每个元件的动画帧都放在同一个图层,给每个元件打上标识,然后纪录每个带标识的元件的属性诸如:坐标,旋转角度,倾斜角度,颜色属性等数值的变化,形成一套动画配置表。再将所有元件安排在一张素材图上,生成截取素材图片的配置表。等到前台呈现的时候只要先读取素材图片的配置表,把各个元件截取出来。再根据动画配置表一帧一帧的把元件摆出来就ok了。

这种方法固然是目前对于程序猿和射机湿来说最优动画的解决方案,但是有个前提:stage3d。。。。。

在非stage3d的情况下有木有一种方法能再不改变射机湿和程序猿工作习惯的情况下,模拟这个动画编辑器的效果呢?

答案是:有。

具体实现方法如下(以下素材来源于air移动小组的黑莓jamhack比赛项目,版权归air移动小组所有):

1) 拆解出动画所需素材元件,如下图将动画需要的部件拆开,并把这些部件全部打成MC。

2) 把拆解出的动画原件拼合在一张素材图片上。切记:在用软件拼接大图的时候最好留出10像素的间隙。(为方便识别,生成的素材图片我用的白底,实际生成的是带alpha通道的png图片)

3) 把大图导入flash,选择矩形工具,选择随便一种线的颜色,把填充的颜色选成无色。再将元件部分框选中,删掉框选的线和素材图其余的部分。如下图:

4) 根据上述依次拆出其余所有所需元件

5) 使用上述方法生成好的元件制作动画

6)Perfect~!打完收工!就是这么简单,但是确实很实用。没用到stage3d的娃子们,这个方法值得推广喔,亲。包邮喔,亲~

经过在黑莓开发机和部分ios设备上测试,效率较于传统序列运行效率有明显提升(17帧优化至60帧)。具体的效果还要待各位看官自行尝试才好。

最后引用一句名人名言:我们从来没做过60帧以下的游戏!——赵京辉*。

* 赵京辉:air移动研究小组委员,pamakids主程,ios最佳应用《鲸鱼岛的冬天》制作者

王小元

2012-12-11

以下是应要求加的实例的示范图,上图是传统的位图元件动画做法,每个元件都是个单独的位图。满屏140个60帧动画,每个动画都被缩放了,稳定时在30-40帧。

下图是我所讲的大图元件动画的做法,只使用了一个大的位图来切割使用区域。满屏140个60帧动画,每个动画都被缩放了,稳定时在55-60帧。

而且明显,大图元件动画会更清晰。

我把swf打包放在附件里了,不知道诸位的电脑如何,电脑好会跑得很快,两个都60帧都有可能,电脑慢的同学就自求多福吧。。。