《全民飞机大战》2D动画制作经验

发表于2015-05-03
评论0 1.7k浏览

目录:

   1概述:1《全民飞机大战》2D动画运使用到的软件。

         2  2D动画在《全民飞机大战》中出现的原因。

         3《全民飞机大战》2D动画运使用到的软件的优势。

         4  2D动画软件在《全民飞机大战》中运用到的范围。

   2 CocosBuilder在《全民飞机大战》中的制作流程与规范。

   3《全民飞机大战》2D动画范例分享。

        1主机动画制作经验分享

        2敌机BOSS动画制作经验分享

   4《全民飞机大战》2D动画制作技巧小结与经验总结。

  

二正文:

1《全民飞机大战》2D动画运使用到的软件。

 

                        

          /common/getfile?fileurl=server2/doc/77b8f338-146e-4a25-b96e-bf2183a105ed.002.jpeg     /common/getfile?fileurl=server2/doc/77b8f338-146e-4a25-b96e-bf2183a105ed.003.jpeg     /common/getfile?fileurl=server2/doc/77b8f338-146e-4a25-b96e-bf2183a105ed.004.jpeg                                         

 

 

2  2D动画在《全民飞机大战》中出现的原因。

之所以选择CocosBuilderTexturepackerGUI作为《全民飞机大战》2D动画制作的软件原因只要有以下几点:

1. CocosBuilder可以直接编辑动画

2. TexturepackerGUI可以将游戏中需要制作动画的形象分拆 

3.成若干个小部件, 再将多个小部件(图片)整合成一个大  的图集,支持多种图片格式和swf格式。

使用图集的优势在于节省内存,载入速度快,

3. 后续动画资源整理方便。

4. 支持目录拖拽。

 

3《全民飞机大战》2D动画运使用到的软件的优势。

  1非常方便的编辑UI,可以添加各种空间,比如 laber,button,sprite,动画。

  2可以无缝衔接cocos2dx.

  3提供了解决屏幕分辨率配方法

  4 ccb文件可以多次复用。

  5可以随意添加关键帧,如图1所示。

  6如果是缩放,旋转,可见,变色等效果,可以设置动画过渡,在粉色条上点击右键,可以选择动画过渡的效果。如图2所示:

/common/getfile?fileurl=server2/doc/77b8f338-146e-4a25-b96e-bf2183a105ed.005.jpeg

 

图1

 

 

 

 

/common/getfile?fileurl=server2/doc/77b8f338-146e-4a25-b96e-bf2183a105ed.006.jpeg

如图2

  

7为了适应多种屏幕分辨率,Cocosbuilder可以将需求哦的分辨率添加进去,达到全部是配的目的,但是要注意控件的位置,对其方式,缩放,这些对多分辨率都将产生影响。如图3所示

 

/common/getfile?fileurl=server2/doc/77b8f338-146e-4a25-b96e-bf2183a105ed.007.jpeg

图3

8Cocosbuilder的工程文件,或者一个组合,或者一个动画,支持重复使用编辑好的ccb座位一个节点,添加进去。如图4所示

4/common/getfile?fileurl=server2/doc/77b8f338-146e-4a25-b96e-bf2183a105ed.008.jpeg

图4

 

2D动画软件在《全民飞机大战》中运用到的范围

  1主机出场动画,待机动画(一般按照等级分为1—4级)

  2普通敌机出场动画,待机动画 

  3敌机BOSS出场动画,待机动画

 

5《全民飞机大战》中2D动画的制作流程与规范。

《全民飞机大战》中2D动画的制作流程按照制作流程基本可 以分为以下几个步骤:

1根据策划提出的动画需求,原画同事会出一个动画概念稿。如图4所示/common/getfile?fileurl=server2/doc/77b8f338-146e-4a25-b96e-bf2183a105ed.009.png

 

图4

2根据原画和策划需求描述,设计出需要做动画的主机的动画设计。如图5所示

/common/getfile?fileurl=server2/doc/77b8f338-146e-4a25-b96e-bf2183a105ed.010.png图5

3在PS中完成对需要动画的各个部件的拆分和修补

4在TexturepackerGUI中完成对各个部件的突击整理工作,输出plist格式的文件,和PNG格式图集。如图6所示

/common/getfile?fileurl=server2/doc/77b8f338-146e-4a25-b96e-bf2183a105ed.011.png

 

 

图6

4将生成的部件图集和plist导入Cocosbuilder指定路径下面以后,就可以在Cocosbuilder中对动画部件和特效进行导入编辑和动画制作了。这里需要主义的一点是,因为全民飞机大战)运用到的部件动画较多,一定要做好plist文件的整理和命名规范。

 

如图7所示

 

 

 

 

 

 

/common/getfile?fileurl=server2/doc/77b8f338-146e-4a25-b96e-bf2183a105ed.012.jpeg图7

8 动画完成以后,最后通过Cocosbuilder发布输出ccbi格式的文件,提交给程序使用。如图8所示

/common/getfile?fileurl=server2/doc/77b8f338-146e-4a25-b96e-bf2183a105ed.013.jpeg

图8

9动画文件图集生成的命名规则,如:/common/getfile?fileurl=server2/doc/77b8f338-146e-4a25-b96e-bf2183a105ed.014.png

动画完成后发布ccbi格式的文件命名规则,如/common/getfile?fileurl=server2/doc/77b8f338-146e-4a25-b96e-bf2183a105ed.015.png

 

3《全民飞机大战》2D动画范例分享。

   1主机动画制作范例1经验分享

/common/getfile?fileurl=server2/doc/77b8f338-146e-4a25-b96e-bf2183a105ed.016.png

 

在于策划和原画同事初步沟通后,动画制作步骤可以分为:

1拆分部件

2制作部件动画、

3制作特效动画

4发布ccbi并生成ccb文件提交给程序同事。

/common/getfile?fileurl=server2/doc/77b8f338-146e-4a25-b96e-bf2183a105ed.017.jpeg

1范例主机需要根据策划描述按照等级制作出动画效果不一样的感觉,简单地说就是,等级越低的主机动画要求效果相对平实,简洁,合体后的高等级主机动画要求效果相对夸张,有力,给玩家的主机出场增加带入感和冲击力。根据这一动画要求,我们将动画部件的拆分也做了区分,(等级相对低的主机分拆的部件越少,反之,合体后的高等级主机需要分拆的部件就相对更多。如图所示

/common/getfile?fileurl=server2/doc/77b8f338-146e-4a25-b96e-bf2183a105ed.018.jpeg/common/getfile?fileurl=server2/doc/77b8f338-146e-4a25-b96e-bf2183a105ed.019.png

等级相对低的主机分拆的部件越少

/common/getfile?fileurl=server2/doc/77b8f338-146e-4a25-b96e-bf2183a105ed.020.jpeg/common/getfile?fileurl=server2/doc/77b8f338-146e-4a25-b96e-bf2183a105ed.021.png

合体后的高等级主机需要分拆的部件就相对更多

2经过与策划同事的前期沟通,范例主机需要在游戏当中表现迅捷有力,简洁快速华丽的特征,所以出来动画要表现出夸张和迅捷有力的感觉以外,还需要制作背景特效动画来表现主机华丽的特征。特效的图集制作方法与部件动画制作方法雷同,就不赘述了。如图所示

/common/getfile?fileurl=server2/doc/77b8f338-146e-4a25-b96e-bf2183a105ed.022.jpeg

特效部分主要运用了特效素材的图集座位动画的主题,配合Cocosbuilder自带的粒子系统,如图所示

 

/common/getfile?fileurl=server2/doc/77b8f338-146e-4a25-b96e-bf2183a105ed.023.jpeg

 

 

3制作完成的动画特效与原画设计稿比较效果,做最终于的效果优化。如图所示

/common/getfile?fileurl=server2/doc/77b8f338-146e-4a25-b96e-bf2183a105ed.024.jpeg

到此,一个完整的主机动画特效就完成了,最后就是通过Cocosbuilder发布ccbiccb一起提交各程序同事了。

 

 

2敌机BOSS动画制作范例2经验分享

《全民飞机大战》中的BOSS敌机一般体型偏大(占到屏幕的三分之一甚至更多,座椅一般要求2D动画表现出BOSS变形动画的笨重和机械动画特有的顿挫感。

 

/common/getfile?fileurl=server2/doc/77b8f338-146e-4a25-b96e-bf2183a105ed.025.jpeg

由于BOSS体型偏大,需要制作动画的部件分拆也相对较多,主要的部件与主机类似,包括(头,躯干,四肢,武器)细分的话一般还包括(头盔,躯干部件,四肢盔甲,局部携带的武器等等)如图所示

 

/common/getfile?fileurl=server2/doc/77b8f338-146e-4a25-b96e-bf2183a105ed.026.jpeg

具体制作过程中,由于需要表现BOSS变形动画的冲击力,增加的特效动画,与诸暨东华特效类似,采用的是素材图集与Cocosbuilder自带粒子相结合的表现方式。如图所示

/common/getfile?fileurl=server2/doc/77b8f338-146e-4a25-b96e-bf2183a105ed.027.jpeg

4《全民飞机大战》2D动画制作技巧小结与经验总结。

1拿到需要制作2D动画的主机或者BOSS动画需求以后,及时与策划同事沟通该主机在游戏当中的设定特征要求和动画时长限制。

2在于策划同事沟通过后,需要与原画同事一起沟通主机活BOSS的动画表现则重点(比如动画表现的重点是简洁还是复杂,节奏是迅捷还是顿挫等等,如果还需要加入特效动画的表现,则需要原画同事配合制作特效设计稿,以统一风格和动画制作要求。

3在动画和特效完成以后,需要及时发布ccbi和上传ccb格式文件,做好本地源文件的备份工作和上传工作,后续如果有动画或者特效优化,需要及时告知程序同事进行更新,避免因为文件没有及时更新而影响项目进度。

4保存动画,Publish动画。    

常用功能键,保存是command+s,发布是command+option+S,也可以用菜单中的选项。

5在Xcode中添加ccbPublish里面的文件,使用cocos2d-­‐x代码读取ccbPublish中的ccbi文件。添加文件时需要注意路径一定要和cocosBuilder中的路径一致,(xcode中一般来说都是bundle路径)在工程中添加按一般的步骤来即可,若cocosBuilder文件夹中含有其他文件夹对应的是

Xcode添加文件夹中,如图所示:/common/getfile?fileurl=server2/doc/77b8f338-146e-4a25-b96e-bf2183a105ed.028.png

否则会导致程序找不到相应的资源,程序崩溃。

6层级的用法,如图所示:

/common/getfile?fileurl=server2/doc/77b8f338-146e-4a25-b96e-bf2183a105ed.029.jpeg

 

 

总结:

受篇幅所限,《全民飞机大战》关于2D动画的制作流程规范和经验总结到此就告一段落。随着项目美术工作的不断深入,本人还将继续整理工作中的规范和流程,不断优化2D动画流程,提升《全民飞机大战》2D动画精度。

 

               

                /common/getfile?fileurl=server2/doc/77b8f338-146e-4a25-b96e-bf2183a105ed.030.jpeg

 

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引