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

作者：cls分享站   CitrusEngine系列教程一：认识CitrusEngine CitrusEngine系列教程二：结合starling和Box2D开发游戏 CitrusEngine系列教程三：使用flash cs 设计关卡 CitrusEngine系列教程四：Citrus的2D动画和摄像头 CitrusEngine系列教程五：使用PhysicsEditor创建box2d刚体 CitrusEngine系列教程六：使用Tiled Map Editor创建地图   ............................................................................ 这次我们讨论一下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="idle0000" x="0" y="0" width="65" height="64" frameX="0" frameY="0" frameWidth="68" frameHeight="65"/> < 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，摄像头不会移动 用法示例： var offset:MathVector = new MathVector(stage.stageWidth/2,stage.stageHeight/2); var bounds:Rectangle = new Rectangle(0, 0, 1500, 768); var easing:MathVector = new MathVector(0.25, 0.25); view.camera.setUp(hero, offset, bounds, easing); 复制代码

=》原文及源码下载