Flash遊戲引擎 CitrusEngine (三) 建立你的第一個遊戲-設定顯示素材

在CitrusEngine (二)文章中，我們已經建立了遊戲的物理世界，接下來就是幫他穿上新衣，我們開始建立顯示物件。

以下的例子是我們幫地板貼上素材，首先先準備一張地板圖，大小500x30(正好是我們的舞台大小)

//加入地板
   var bottom:Platform = new Platform("bottom", { 
     x:stage.stageWidth / 2, 
     y:stage.stageHeight, 
     width:stage.stageWidth,
     view:"500x30.jpg" // <==== 圖的路徑
    } );
   add(bottom);

如果只是一張靜態圖，只要直接設定路徑就可以了，很簡單吧!

接下來我們準備好平台、金幣、敵人的圖...置入圖的方法都一樣

var bottom:Platform = new Platform("bottom", { 
     x:stage.stageWidth / 2, 
     y:stage.stageHeight, 
     width:stage.stageWidth,
     view:"500x30.jpg"
    } );
   add(bottom);
   
   //加入一個平台
   var cloud:Platform = new Platform("cloud", {
     x:250, 
     y:300, 
     width:100, 
     oneWay:true, //單一方向判定
     view:"100x30.jpg" // 地板圖
    });
   add(cloud);
   //加入一個金幣
   var coin:Coin = new Coin("coin", { x:250, y:150 } );
   coin.view = "gold.png"; // 金幣圖
   add(coin);
   //加入敵人
   var enemy:Enemy = new Enemy("enemy", {
     x:stage.stageWidth - 50, 
     y:350, 
     width:30, 
     height:30, 
     leftBound:20, 
     rightBound:stage.stageWidth - 20,
     view:"Enemy.png" // 敵人圖
    });
   add(enemy);

接下來，輸出測試看看..

你應該會看到地板、平台、敵人、金幣都有素材依附在物件上面了
目前我們都使用靜態圖，所以沒有動畫，實際上如果你希望素材是動態的，也可以直接連結swf動畫元件。

接下來我們製作主角Hero的素材，後面我們介紹一種 AnimationSequence 動畫素材的作法。
一般遊戲的圖片或動畫，應該是依據操作的方法來決定動畫或圖片的種類，比方行走時會有行走的動畫，跳躍時會切換到跳躍的動畫，諸如此類，這時後可以用AnimationSequence 類別來幫你完成。
首先準備動畫素材，你可以先下載這個練習使用
素材怎麼準備的，你可以參考Gray Liao老師寫的這篇文章
準備好了之後，我們把他匯入當作素材

//準備角色素材
   var bitmap:Bitmap = new _heroPng(); //素材圖片
   var texture:Texture = Texture.fromBitmap(bitmap);
   var xml:XML = XML(new _heroConfig()); //素材定義xml
   var sTextureAtlas:TextureAtlas = new TextureAtlas(texture, xml);
   
   var hero:Hero = new Hero("hero", {
     x:100, 
     y:200, 
     width:30, 
     height:120 //配合素材調整一下大小
    });
   hero.acceleration = 0.3; //加速度
   hero.maxVelocity = 5; //速度極限
                        //把動畫物件丟到hero的view裡面去
   hero.view = new AnimationSequence(sTextureAtlas, ["walk", "duck", "idle", "jump", "hurt"], "idle");
   hero.offsetY = -10; //把素材調整到適當位置
   add(hero);

AnimationSequence類別第一個參數是素材，第二個參數是動作的動畫陣列("walk", "duck", "idle", "jump", "hurt" 這些是框架針對Hero類別預設好的動作，當你製作素材時名稱可以直接對照套用)，最後一個參數是一開始的預設動作。 這些設定好了之後，你可以把
 box2D.visible = true;
先註解起來，再次輸出看看效果，並且操作看看。

現在當你移動時，角色應該會有跑步的動畫，跳躍與觸碰到怪物也都會切換到相對應的動畫。

你應該會發現一個問題，就是當角色跑到平台的位置卻發現，平台把角色的素材覆蓋住了，原因是角色的順序在平台物件之後，這不是我們希望看到的情況。

你可以幫你的hero設定group屬性

hero.group = 1;

這個屬性是物件的群組順序，預設是0，現在設成1，hero就會在其他物件之上。
這時候你再輸出看一次應該就不會有這樣的情況了
接下來我們幫整個場景加上一個底圖

addChildAt(new Image(Texture.fromBitmap(new BG_IMAGE as Bitmap)),0);

BG_IMAGE是背景圖片，因為需要放在最下層，所以我們直接把他addChildA在0位置，現在你應該就可以看到圖片置入在整個背景上了。

Demo預覽

原始碼下載

Flash遊戲引擎 CitrusEngine (四) 建立你的第一個遊戲-狀態與音效