CitrusEngine系列教程二：结合starling和Box2D开发游戏

教程出自 cls分享站 首先脑补一下相关知识吧 Starling是一个ActionScript类库，它模仿了传统的Flash显示列表。然而，和传统的显示对象不同，Starling对象完全存在于Stage3D环境。这意味着，所有的显示对象都直接由GPU渲染，这会带来非常明显的性能提升。=》Starling中文站 Box2DFlashAS3是Box2D物理引擎的ActionScript 3.0移植版本。它具有功能强大，效率较高等优点，应用Box2DFlashAS3可以使我们的网站模拟真实世界的物理效果，从而使我们的站点具有非常强的真实感。而我们热心的拉登大叔给我们写过不少优质教程。 这个教程参考官方例子，=》官方例子演示 最后效果： 见附件  开始之前，可以下载 CEV3-1-6-Starling-Feathers-Box2D.swc ，也可以像我一样单独去下载box2d，starling等源码来自己配置折腾…当然，也可以直接下载本文末尾提供的flex项目源码 1.创建主类 在StriusEngine中使用Starling，你必须继承StarlingCitrusEngine类，这个类继承于CitrusEngine（在教程一的时候我们使用的就是这个），主要提供了Starling的简单实现。 为了成功实现Starling，我们需要在构造函数中调用setUpStarling函数，该函数有三个参数debugMode(调试模式)，viewport 抗锯齿(默认为1)与anti-aliasing视图大小(默认是舞台大小)。同时需要是运行于Flash player11。 public class Main extends StarlingCitrusEngine { public function Main() { setUpStarling(true); } } 复制代码 2.创建游戏state 直译为状态，一个state可以是一个关卡，也可以将很多关卡放在一个state。state包含了游戏的逻辑，主类用来管理目录。同样这个我们需要用StarlingState代替之前的State。不过同样是通过重写initialize()方法来添加游戏元素，同样别忘了 super.initialize(). public function StarlingDemoGameState() { super(); } override public function initialize():void { super.initialize(); } 复制代码 主类 state = new StarlingDemoGameState(); 3.添加box2d 注意！box2d需要第一个被添加！否则在新建其他基于box2d的游戏元素（hero等）时候会报错，另外这个物理引擎的注册点事基于对象的中心点，所以坐标以中心点为准 var box2D:Box2D = new Box2D("box2D"); box2D.visible = true; add(box2D); 复制代码 接下来我们新建一些预设好的游戏元素，（新建元素的时候一般有两个参数，第一个参数是name（必选），CitrusEngine中是使用那么访问元素的，第二个Object类型，可选，可以给该元素的一些属性设置默认值 add(new Platform("bottom", {x:stage.stageWidth / 2, y:stage.stageHeight, width:stage.stageWidth})); add(new Platform("cloud", {x:250, y:250, width:170, oneWay:true})); var coin:Coin = new Coin("coin", {x:360, y:200}); add(coin); var hero:Hero = new Hero("hero", {x:100, y:350, width:60, height:135}); add(hero); var enemy:Enemy = new Enemy("enemy", {x:stage.stageWidth - 50, y:350, width:46, height:68, leftBound:20, rightBound:stage.stageWidth - 20}); add(enemy); 复制代码 简单介绍一下上面用到的元素吧（英文好的朋友，可以直接查看官网api，顺便求路过的大神帮忙翻译一下，各种求啊~） Platform：平台，可以用来做地板，站台，障碍物等，oneWay属性设置为ture的话，英雄可以从Platform下面往上跳，差不多可以说是穿墙术吧，哈 Coin：钱币，默认被英雄触碰后会消失，同时抛出一个事件，下问添加互动的时候会演示如何监听这个事件 hero：英雄，游戏主角，可以想超级玛丽那样杀死敌人（压死敌人），当他接触敌人coin时候，coin会消失，hurtVelocityX, hurtVelocityY可以设置英雄受伤时候回跳的距离 enemy：敌人，leftBound, rightBound设置敌人的活动范围，敌人会依据设置来回走动直到遇到障碍物 4.添加Starling 素材 添加素材的方法很多，这个教程我用了三种，直接给地址： var coin:Coin = new Coin("coin", {x:360, y:200, view:"levels/SoundPatchDemo/jewel.png"}); 使用Quad类，Quad根据指定的尺寸和颜色创建一个四边形。 最后一个参数决定是否在渲染的时候预乘透明度值，从而影响混合输出的颜色值，大多数情况下可以使用默认值。 add(new Platform("cloud",{x:450,y:580,width:170,height:30,oneWay:true, view:new Quad(170,30,0x000FF0)})) 通过Embed嵌入预先画好的美术图与xml和动画片系列组合完成素材的导入； [Embed(source="../embed/Hero.xml", mimeType="application/octet-stream")] private var _heroConfig:Class; [Embed(source="../embed/Hero.png")] private var _heroPng:Class; var bitmap:Bitmap = new _heroPng(); var texture:Texture = Texture.fromBitmap(bitmap); var xml:XML = XML(new _heroConfig()); var sTextureAtlas:TextureAtlas = new TextureAtlas(texture, xml); hero.view = new AnimationSequence(sTextureAtlas, ["walk", "duck", "idle", "jump", "hurt"], "idle"); 复制代码 这里也脑补一下一些Starling 的纹理知识吧，=》中文api Texture：纹理是用来储存展示图像的信息。它不能直接被添加到显示列表； 相应的它必须映射到一个显示对象上。 在Staring中那个显示对象就是“Image”类。 Texture.fromBitmap（）：fromBitmap通过一个bitmap来创建纹理对象。 注意：如果Starling需要处理一个丢失的设备 上下文，那么不允许你释放纹理数据。 TextureAtlas： TextureAtlas纹理集是一个将许多小的纹理整合到一张大图中。这个类是用来从一个纹理集中读取    纹理 TextureAtlas(texture:Texture, atlasXml:XML = null)通过指定纹理和用于描述范围的XML来创建一个纹理集 5.添加声音交互（主类添加声音，state中用_ce.sound 调用） a.在主类添加声音 sound.addSound("Collect", "sounds/collect.mp3"); b.给coin添加触碰监听 coin.onBeginContact.add(coinTouched); private function coinTouched(contact:b2Contact):void { trace('coin touched by an object'); } 复制代码 c.coinTouched添加播放声音的方法， _ce.sound.playSound("Collect",1,0); 这样就可以了，当coin被触碰时，就会播放collect.mp3了 6.使用控制台 运行游戏的时候，按“Tab”键，控制台会在顶部出现，基本上是一个输入框，这时我们可以通过name访问游戏中的元素并进行设置，如： set hero y 0 复制代码 呼，终于写完了。下期见 =》原文及源码网盘下载