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

教程出自 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建立地图

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

 

CitrusEngine支持不少关卡编辑器，能够经过swf或者xml快捷的实现布局，这意味着咱们可使用flash cs 来实现场景设计。如今就让咱们来探讨一下如何用flash cs 来设计关卡（本教程源文件使用的是flash cs6 和flex4.7）。

首先CitrusEngine给咱们提供了很是方便的 Components.fla（点击能够下载）, 这个flash 文件使咱们能够快速的建立基于box2d或nape的游戏场景。

打开Components.fla，咱们能够看到库面板已经包含全部CitrusEngine基本的关卡组件

咱们只须要将其拉入舞台就能够实现很是快速的布局，下面是我作的简单布局：（使用Components.fla的时候最好将其重命名，我这里将其重命名为level.fla）

上面蓝色的是Hero,灰色是 Platform,粉红色的是RevolvingPlatform，黄色的是Coin。关于Hero，Platform和Coin咱们已在以前的教程使用过，我就不介绍了。如今我简单介绍一下RevolvingPlatform。RevolvingPlatform继承与 Platform，能够理解为能围绕一个中心点旋转的Platform，如今咱们经过flash cs的面板来对其进行一些设置旋转半径和速度作一些设置,固然宽高什么的也能够很方便在flash cs的属性面板设置

如今你就能够按 “ctrl+ enter”键调试swf，并将生成的swf拷贝到flex 的项目中使用了在本教程中，我将flash源文件和swf放在flex项目组的levels文件夹中。如今咱们新建类Level，继承于StarlingState。将level映射到变量_level，设置objectsUsed，这样就只会导入游戏所必需的类。建立physics并添加到关卡中。使用ObjectMaker2D来从载入(Level.swf)的MovieClip中建立关卡。

1. public class Level extends StarlingState
   
2. {
   
3. protected var level:MovieClip;//这里使用flash.display.MovieClip；
   
4. public function Level(_level:MovieClip)
   
5. {
   
6. super();
   
7. level=_level;
   
8. var objectsUsed:Array=[Hero,Platform,RevolvingPlatform,Coin];
   
9. }
   
10. override public function initialize():void{
    
11. super.initialize();
    
12. var physics:Box2D=new Box2D("physics");
    
13. physics.visible=true;
    
14. add(physics);
    
15. /*ObjectMaker是一个快捷批量建立多个CitrusObjects的工具类，
    
16. 一般当你使用关卡编辑器或xml布局你的关卡的时候会使用这个类。*/
    
17. ObjectMaker2D.FromMovieClip(level);
    
18. } }

复制代码

而后咱们在主类中加载swf并将其作为Level类的实例化参数。同时将level设置为主类的state。

1. public function CitrusLevelEditor1()
   
2. {
   
3. setUpStarling(true);
   
4. var loader:Loader=new Loader();
   
5. loader.contentLoaderInfo.addEventListener(Event.COMPLETE,_levelLoaded);
   
6. loader.load(new URLRequest(“../levels/level.swf”));
   
7. }
   
8. private function _levelLoaded(evt:Event):void{
   
9. state=new Level(evt.target.loader.content);
   
10. 
    
11. evt.target.removeEventListener(Event.COMPLETE,_levelLoaded);
    
12. evt.target.loader.unloadAndStop();
    
13. }

复制代码

如今你能够测试一下效果了，这时候你除了发现RevolvingPlatform在不停的围绕咱们设置的参数旋转外，还会发现咱们在flash中设计的只是游戏元素的box2d的刚体，并无view显示对象。那么咱们要怎么定义组件的view呢。这里提供两中方法：1.在flash中设置，flash属性面板中的组件参数有个view，咱们能够直接填上图片的路径，不过须要注意的一点是，这个路径是相对于flex项目路径。如咱们将hero的图片也放在levels文件夹下，那么咱们须要这样填写hero的view   发现了吧，这时候路径与咱们在主类中加载swf的路径是一致的
loader.load(new URLRequest(“../levels/level.swf”));

2.咱们能够直接在level类内访问游戏元素并进行相关设置。要实现这个访问，咱们须要在flash cs中给组件设置实例名，那么如今以地面为例进行设置吧：
 
这样咱们level中就能够用getObjectByName（）方法方便的实现访问设置了

1. var floor:Platform=getObjectByName("floor") as Platform;
   
2. floor.view=new Quad(1024,30,0x000FF0)

复制代码

 
那么此次教程就到这里吧，下期咱们来用龙骨（Dragon Bones）来为咱们的英雄建立流畅的动画 吧。最后舒适提醒你们，用这个方法布局关卡，在flex调试的时候若是发现于预期结果不一致，请清理一下项目再看看（项目-清理）。我在作这个教程的时候，就发生了第二次调试RevolvingPlatform的位置就会走位。还好导出效发行版的时候是正常的。


=> 去个人我的网站下载源码