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

............................................................................

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

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

在开始之前，我们同样先用 Components.fla来为我们的关卡设置布局，其实也是在设置box2d的刚体位置与范围(这次我命名为Level2.fla)，不过这次为了让摄像头有用武之地，我们将场景设大点（1500 * 768）：
灰色是平台（Platform），黄色是钱币（coin），蓝色是英雄（hero），红色是敌人（Enemy）

这里我们先给Enemy设置默认的活动范围（敌人默认会在leftBound, rightBound设置的范围内来回走动直到遇到障碍物返回，如Platform）

现在我们来开始会角色创建动画：
1.使用swf动画这个是最简单的动画创建方案，做法就是将swf作为游戏元素的view。如我们可以这样给coin设置动画
1）创建coin.fla，创建一个影片剪辑元件coin_anim，做一个简单的帧动画

2）将元件拉入舞台，并将其大小设置为50*50，这个是为了与Level2.fla设置的coin大小一致。至于其他的，如坐标和coin.fla的舞台大小和背景色等无关紧要，可以随意设置
3）最后在Level2.fla中coin的view上填写coin.swf的路径，谨记路径是相对于flex项目。呵，是不是与上一篇教程设置英雄的view的时候一模一样~

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（跳跃）的截图：

注意：需要新建一层在第一帧标记一个“jump”的标签。
b.创建相关动画后，我们可以在库文件选中并右键导出Sprite Sheet

以下是我导出时候的参数设置：

这样子我们就得到了一张Sprite Sheet的位图序列和xml文件，接下来我们可以通过Embed嵌入使用：

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

复制代码

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

[Embed(source="../../levels/hero.png")]
private var heroAnimBitmap:Class;
[Embed(source="/../levels/hero.xml",mimeType="application/octet-stream")]
private var heroAnimXML:Class;
var ta:TextureAtlas=new TextureAtlas(
Texture.fromBitmap(new heroAnimBitmap()),XML(new heroAnimXML()));
var animationSeq:AnimationSequence=new AnimationSequence(ta,
["walk","idle","jump"],"idle",24);
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），打开骨骼编辑面板》导入》导入选中库元件：

这个时候你可以通过Bone Tree(骨骼树)等设置骨骼的从属关系等内容使动画更流畅，也可以直接将其导出，导出的时候我们选择“png（包含xml）”。最后我们得到一张包含xml信息的png图片

最后在flex中使用龙骨动画：

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

用法示例：