CitrusEngine系列教程四：Citrus的2D动画和摄像头

作者： cls分享站
这次我们讨论一下CitrusEngine的2D动画和摄像头。关于动画，基本上支持Starling的 都可以在CitrusEngine使用，不过CitrusEngine简化了操作步骤而已.这里我将介绍三种方式来创建Citrus的2D动画

• 使用swf动画
• 用Sprite Sheet的位图序列来构建动画
• 通过龙骨（Dragon Bones ）创建骨骼动画（=》官方中文教程）
  

在开始之前，我们同样先用  Components.fla 来为我们的关卡设置布局，其实也是在设置box2d的刚体位置与范围(这次我命名为Level2.fla)，不过这次为了让摄像头有用武之地，我们将场景设大点（1500 * 768）：
灰色是平台（Platform），黄色是钱币（coin），蓝色是英雄（hero），红色是敌人（Enemy） 
http://www.chenlinsheng.com/?p=463 
这里我们先给Enemy设置默认的活动范围（敌人默认会在leftBound, rightBound设置的范围内来回走动直到遇到障碍物返回，如Platform）
http://www.chenlinsheng.com/?p=463  
现在我们来开始会角色创建动画：
1.使用swf动画 这个是最简单的动画创建方案，做法就是将swf作为游戏元素的view。如我们可以这样给coin设置动画
1）创建coin.fla，创建一个影片剪辑元件coin_anim，做一个简单的帧动画
http://www.chenlinsheng.com/?p=463 
2）将元件拉入舞台，并将其大小设置为50*50，这个是为了与Level2.fla设置的coin大小一致。至于其他的，如坐标和coin.fla的舞台大小和背景色等无关紧要，可以随意设置
3）最后在Level2.fla中coin的view上填写coin.swf的路径，谨记路径是相对于flex项目。呵，是不是与上一篇教程设置英雄的view的时候一模一样~
http://www.chenlinsheng.com/?p=463 
2.使用Sprite Sheet的位图序列来构建动画 在Starling中一般使用Sprite Sheet的位图序列来构建动画，其实在我的 系列教程二 中正是使用这个方法给英雄添加动画的，不过那个时候我没有讲如果通过flash cs创建位图和xml。现在我们来看看怎么通过 flash cs 来给我们的英雄（hero）创建Sprite Sheet的位图。
a.首先，我们需要知道hero有以下几种动画：走路（walk），死亡（die），跳跃（jump），受伤（hurt），闲置（idle），闪避（duck）等，而我们需要做的是 为这些动画创建相应的影片剪辑将其作为库元件，当然我们可以根据需要之创建必要的动画，如本教程只创建了walk，idle，jump。以下库元件jump（跳跃）的截图：
http://www.chenlinsheng.com/?p=463 
注意：需要新建一层在第一帧标记一个“jump”的标签。
b.创建相关动画后，我们可以在库文件选中并右键导出Sprite Sheet
http://www.chenlinsheng.com/?p=463  
以下是我导出时候的参数设置：
http://www.chenlinsheng.com/?p=463  
这样子我们就得到了一张Sprite Sheet的位图序列和xml文件，接下来我们可以通过Embed嵌入使用： http://www.chenlinsheng.com/?p=463 

1. <SubTexture name="idle0000" x="0" y="0" width="65" height="64" frameX="0" frameY="0" frameWidth="68" frameHeight="65"/>
   
2. < SubTexture name="idle0001" x="65" y="0" width="65" height="64" frameX="0" frameY="0" frameWidth="68" frameHeight="65"/>
   
3. < SubTexture name="idle0002" x="130" y="0" width="66" height="64" frameX="0" frameY="0" frameWidth="68" frameHeight="65"/>

复制代码

那么接下来使用方法和 系列教程二 一样

1. [Embed(source="../../levels/hero.png")]
   
2. private var heroAnimBitmap:Class;
   
3. [Embed(source="/../levels/hero.xml",mimeType="application/octet-stream")]
   
4. private var heroAnimXML:Class;
   
5. 
   
6. var ta:TextureAtlas=new TextureAtlas(
   
7. Texture.fromBitmap(new heroAnimBitmap()),XML(new heroAnimXML()));
   
8. var animationSeq:AnimationSequence=new AnimationSequence(ta,
   
9. ["walk","idle","jump"],"idle",24);
   
10. hero.view=animationSeq;

复制代码

3.通过龙骨（Dragon Bones ）创建骨骼动画（=》官方中文教程） DragonBones是一套开源的 2D骨骼动画框架和工具，它包含了基于Flash Pro的骨骼动画编辑面板DragonBonesDesignPanel及骨骼动画ActionScript框架。它可以让开发者运用熟悉的Flash Pro元件及时间轴编辑方式，快速创建2D骨骼动画，并运用到Flash或其他技术的应用中。 Features

• 动画基于Flash pro时间轴，可以使用Flash传统动画方式制作游戏动画；
• 骨骼绑定可以让动画更精准，更真实自然，并可通过程序动态控制；
• 可设置单个骨骼的动画时间缩放和延时播放，使用较少的关键帧就可以表现复杂生动的动画效果；
• 动画各部分采用拼接方式，动画有缓动补间，占用位图／内存资源少；
• 骨骼显示对象与骨骼的逻辑分离，可在不影响动画播放的情况下动态更换；
• 能方便用于传统DisplayList、Starling及其他技术的2D应用。
  

首先我们需要 下载龙骨 并安装Flash Pro扩展插件。需要注意的是这个插件只支持Flash Pro 5.5或以上版本。安装方法：打开flash cs-》帮助=》管理扩展=》安装=》选择下载包中的“DragonBonesDesignPanel.zxp”进行安装安装完成之后，我们可以通过 窗口>其他面板>DragonBonesDesignPanel打开骨骼动画编辑面板。现在我们需要将我们刚刚的三个元件动画合并成一个（我将其命名为“allAnimations”），当然我们还是要用标签来区分它们。（这个时候不需要补间动画，你可以选择删除补间或者保留，事情上使用龙骨时我们只需要设置关键帧并排好对应位置就行了） 然后我们在库中选中这个元件（allAnimations），打开骨骼编辑面板》导入》导入选中库元件： http://www.chenlinsheng.com/?p=463  这个时候你可以通过Bone Tree(骨骼树)等设置骨骼的从属关系等内容使动画更流畅，也可以直接将其导出，导出的时候我们选择“png（包含xml）”。最后我们得到一张包含xml信息的png图片 http://www.chenlinsheng.com/?p=463  最后在flex中使用龙骨动画：

1. [Embed(source="../../levels/hero_output.png",mimeType="application/octet-stream")]
   
2. private var heroAnimBitmapAndXML:Class;
   
3. 
   
4. /*Armature: 我们可以把它想像为一个容器，它对应在Flash Pro中编辑并通过骨骼面板导出的一个MoiveClip。
   
5. 通过Armature来对各骨骼进行管理，播放动画等。*/
   
6. var armature:Armature;
   
7. /*基于Starling的Factory,这是构建骨骼动画的基础。它负责从前面骨骼面板导出的资源中解析数据格式
   
8. 和准备图像资源，并且通过它创建骨骼容器Armature。*/
   
9. var factory:StarlingFactory=new StarlingFactory();
   
10. factory.addEventListener(Event.COMPLETE,function(event:Event):void{
    
11. armature=factory.buildArmature("allAnimations");
    
12. armature.animation.timeScale=0.7;
    
13. hero.view=armature;
    
14. hero.offsetX = 35;
    
15. hero.offsetY = 35;
    
16. });
    
17. factory.parseData(new heroAnimBitmapAndXML());

复制代码

最后我们来看一下如何设置摄像头： CitrusEngine中，我们可以通过view.camera对摄像头进行访问，通过其setUp(target:Object=null,offset:MathVector=null, bounds:Rectangle=null,
easing:MathVector=null, cameraLens:MathVector=null):ACitrusCamera快速的设置摄像头的相关属性。以下是对该方法参数的介绍：

• target：摄像头的目标，如将其设置为hero，摄像头将随着hero的运动而运动
• offset：设置目标运动时候，目标左上角的区域，如将其设为MathVector(0,0)且如果你的场景足够大，你会发现你的目标运动的时候左边没有空余的距离，即你向右跑的话，你看不到你身后的物体，除非你右边显示区域已经没有已经到头~
• bounds：相机显示区域，这个教程我们设置为Level2.swf的大小
• easing：在x和y上摄像头跟随目标变化的速率，数值越小变化越慢，最大不能超过1，当设置为0，摄像头不会移动
  

用法示例：

1. var offset:MathVector = new MathVector(stage.stageWidth/2,stage.stageHeight/2);
   
2. var bounds:Rectangle = new Rectangle(0, 0, 1500, 768);
   
3. var easing:MathVector = new MathVector(0.25, 0.25);
   
4. view.camera.setUp(hero, offset, bounds, easing);

复制代码

=》原文及源码下载