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

教程出自 cls分享站

 

1. CitrusEngine系列教程一：认识CitrusEngine

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

3. CitrusEngine系列教程三：使用flash cs 设计关卡

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

5. CitrusEngine系列教程五：使用PhysicsEditor创建box2d刚体

6. CitrusEngine系列教程六：使用Tiled Map Editor创建地图

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

 

首先脑补一下相关知识吧

Starling是一个ActionScript类库，它模仿了传统的Flash显示列表。然而，和传统的显示对象不同，Starling对象完全存在于Stage3D环境。这意味着，所有的显示对象都直接由GPU渲染，这会带来非常明显的性能提升。=》 Starling中文站

Box2DFlashAS3 是Box2D物理引擎的ActionScript 3.0移植版本。它具有功能强大，效率较高等优点，应用Box2DFlashAS3可以使我们的网站模拟真实世界的物理效果，从而使我们的站点具有非常强的真实感。而我们热心的拉登大叔给我们写过不少 优质教程 。
这个教程参考官方例子，=》 官方例子演示

最后效果：

http://www.chenlinsheng.com/?p=415 

开始之前，可以下载  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。

1. public class Main extends StarlingCitrusEngine {
   
2. public function Main() {
   
3. setUpStarling(true);
   
4. }
   
5. }

复制代码

2.创建游戏state
直译为状态，一个state可以是一个关卡，也可以将很多关卡放在一个state。state包含了游戏的逻辑，主类用来管理目录。同样这个我们需要用StarlingState代替之前的State。不过同样是通过重写initialize()方法来添加游戏元素，同样别忘了

super.initialize().

1. public function StarlingDemoGameState() {
   
2. super();
   
3. }
   
4. override public function initialize():void {
   
5. super.initialize();
   
6. }

复制代码

主类
state = new StarlingDemoGameState();


3.添加box2d
注意！box2d需要第一个被添加！否则在新建其他基于box2d的游戏元素（hero等）时候会报错，另外这个物理引擎的注册点事基于对象的中心点，所以坐标以中心点为准

1. var box2D:Box2D = new Box2D("box2D");
   
2. box2D.visible = true;
   
3. add(box2D);

复制代码

接下来我们新建一些预设好的游戏元素，（新建元素的时候一般有两个参数，第一个参数是name（必选），CitrusEngine中是使用那么访问元素的，第二个Object类型，可选，可以给该元素的一些属性设置默认值

1. add(new Platform("bottom", {x:stage.stageWidth / 2, y:stage.stageHeight, width:stage.stageWidth}));
   
2. add(new Platform("cloud", {x:250, y:250, width:170, oneWay:true}));
   
3. var coin:Coin = new Coin("coin", {x:360, y:200});
   
4. add(coin);
   
5. var hero:Hero = new Hero("hero", {x:100, y:350, width:60, height:135});
   
6. add(hero);
   
7. var enemy:Enemy = new Enemy("enemy", {x:stage.stageWidth - 50, y:350, width:46, height:68, leftBound:20, rightBound:stage.stageWidth - 20});
   
8. 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和动画片系列组合完成素材的导入；

1. [Embed(source="../embed/Hero.xml", mimeType="application/octet-stream")]
   
2. private var _heroConfig:Class;
   
3. [Embed(source="../embed/Hero.png")]
   
4. private var _heroPng:Class;
   
5. var bitmap:Bitmap = new _heroPng();
   
6. var texture:Texture = Texture.fromBitmap(bitmap);
   
7. var xml:XML = XML(new _heroConfig());
   
8. var sTextureAtlas:TextureAtlas = new TextureAtlas(texture, xml);
   
9. 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添加触碰监听

1. coin.onBeginContact.add(coinTouched);
   
2. private function coinTouched(contact:b2Contact):void {
   
3. trace('coin touched by an object');
   
4. }

复制代码

c.coinTouched添加播放声音的方法，
_ce.sound.playSound("Collect",1,0);
这样就可以了，当coin被触碰时，就会播放collect.mp3了
6.使用控制台
运行游戏的时候，按“Tab”键，控制台会在顶部出现，基本上是一个输入框，这时我们可以通过name访问游戏中的元素并进行设置，如：

1. set hero y 0

复制代码

呼，终于写完了。下期见

=》原文及源码下载