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的位置就會走位。還好導出效發行版的時候是正常的。


=> 去個人我的網站下載源碼