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

作者&＃xff1a;cls分享站

1. CitrusEngine系列教程一&＃xff1a;认识CitrusEngine

2. CitrusEngine系列教程二&＃xff1a;结合starling和Box2D开发游戏

3. CitrusEngine系列教程三&＃xff1a;使用flash cs 设计关卡

4. CitrusEngine系列教程四&＃xff1a;Citrus的2D动画和摄像头

5. CitrusEngine系列教程五&＃xff1a;使用PhysicsEditor创建box2d刚体

6. CitrusEngine系列教程六&＃xff1a;使用Tiled Map Editor创建地图

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

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

• 使用swf动画

• 用Sprite Sheet的位图序列来构建动画

• 通过龙骨&＃xff08;Dragon Bones &＃xff09;创建骨骼动画&＃xff08;&＃61;》官方中文教程&＃xff09;

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

1. [Embed(source&＃61;"../../levels/hero.png")]

2. private var heroAnimBitmap:Class;

3. [Embed(source&＃61;"/../levels/hero.xml",mimeType&＃61;"application/octet-stream")]

4. private var heroAnimXML:Class;

5. 
   

6. var ta:TextureAtlas&＃61;new TextureAtlas(

7. Texture.fromBitmap(new heroAnimBitmap()),XML(new heroAnimXML()));

8. var animationSeq:AnimationSequence&＃61;new AnimationSequence(ta,

9. ["walk","idle","jump"],"idle",24);

10. hero.view&＃61;animationSeq;

• 动画基于Flash pro时间轴&＃xff0c;可以使用Flash传统动画方式制作游戏动画&＃xff1b;

• 骨骼绑定可以让动画更精准&＃xff0c;更真实自然&＃xff0c;并可通过程序动态控制&＃xff1b;

• 可设置单个骨骼的动画时间缩放和延时播放&＃xff0c;使用较少的关键帧就可以表现复杂生动的动画效果&＃xff1b;

• 动画各部分采用拼接方式&＃xff0c;动画有缓动补间&＃xff0c;占用位图&＃xff0f;内存资源少&＃xff1b;

• 骨骼显示对象与骨骼的逻辑分离&＃xff0c;可在不影响动画播放的情况下动态更换&＃xff1b;

• 能方便用于传统DisplayList、Starling及其他技术的2D应用。

首先我们需要下载龙骨并安装Flash Pro扩展插件。需要注意的是这个插件只支持Flash Pro 5.5或以上版本。安装方法&＃xff1a;打开flash cs-》帮助&＃61;》管理扩展&＃61;》安装&＃61;》选择下载包中的“DragonBonesDesignPanel.zxp”进行安装安装完成之后&＃xff0c;我们可以通过 窗口>其他面板>DragonBonesDesignPanel打开骨骼动画编辑面板。现在我们需要将我们刚刚的三个元件动画合并成一个&＃xff08;我将其命名为“allAnimations”&＃xff09;&＃xff0c;当然我们还是要用标签来区分它们。&＃xff08;这个时候不需要补间动画&＃xff0c;你可以选择删除补间或者保留&＃xff0c;事情上使用龙骨时我们只需要设置关键帧并排好对应位置就行了&＃xff09;

然后我们在库中选中这个元件&＃xff08;allAnimations&＃xff09;&＃xff0c;打开骨骼编辑面板》导入》导入选中库元件&＃xff1a;

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

最后在flex中使用龙骨动画&＃xff1a;

1. [Embed(source&＃61;"../../levels/hero_output.png",mimeType&＃61;"application/octet-stream")]

2. private var heroAnimBitmapAndXML:Class;

3. 
   

4. /*Armature: 我们可以把它想像为一个容器&＃xff0c;它对应在Flash Pro中编辑并通过骨骼面板导出的一个MoiveClip。

5. 通过Armature来对各骨骼进行管理&＃xff0c;播放动画等。*/

6. var armature:Armature;

7. /*基于Starling的Factory,这是构建骨骼动画的基础。它负责从前面骨骼面板导出的资源中解析数据格式

8. 和准备图像资源&＃xff0c;并且通过它创建骨骼容器Armature。*/

9. var factory:StarlingFactory&＃61;new StarlingFactory();

10. factory.addEventListener(Event.COMPLETE,function(event:Event):void{

11. armature&＃61;factory.buildArmature("allAnimations");

12. armature.animation.timeScale&＃61;0.7;

13. hero.view&＃61;armature;

14. hero.offsetX &＃61; 35;

15. hero.offsetY &＃61; 35;

16. });

17. factory.parseData(new heroAnimBitmapAndXML());

• target&＃xff1a;摄像头的目标&＃xff0c;如将其设置为hero&＃xff0c;摄像头将随着hero的运动而运动

• offset&＃xff1a;设置目标运动时候&＃xff0c;目标左上角的区域&＃xff0c;如将其设为MathVector(0,0)且如果你的场景足够大&＃xff0c;你会发现你的目标运动的时候左边没有空余的距离&＃xff0c;即你向右跑的话&＃xff0c;你看不到你身后的物体&＃xff0c;除非你右边显示区域已经没有已经到头~

• bounds&＃xff1a;相机显示区域&＃xff0c;这个教程我们设置为Level2.swf的大小

• easing&＃xff1a;在x和y上摄像头跟随目标变化的速率&＃xff0c;数值越小变化越慢&＃xff0c;最大不能超过1&＃xff0c;当设置为0&＃xff0c;摄像头不会移动

1. var offset:MathVector &＃61; new MathVector(stage.stageWidth/2,stage.stageHeight/2);

2. var bounds:Rectangle &＃61; new Rectangle(0, 0, 1500, 768);

3. var easing:MathVector &＃61; new MathVector(0.25, 0.25);

4. view.camera.setUp(hero, offset, bounds, easing);