Flash遊戲引擎 CitrusEngine (八) 開始你的第一個行動APP遊戲吧 - 試著製作一個CitrusEngine角色元件

接下來我們開始試著製作一個元件。
整理一下遊戲的素材..(如果你懶得自己作，可以先用我做好的)

CitrusEngine裡的元件都是CitrusObject，所以我們作的元件只要繼承CitrusObject就可以把他add到CitrusEngine使用。
首先我們開始製作一個角色在畫面上，開一個新的Class。

package  
{
 import citrus.objects.CitrusSprite;
 
 /**
  * 戰鬥機
  * @author Cain
  */
 public class Fighter extends CitrusSprite 
 {
  public function Fighter(ob_:Object = null) 
  {
   super("Fighter", ob_);
   updateCallEnabled = true; //自動update
   registration = "center"; //素材居中
  }
  
  override public function update (timeDelta:Number) : void
  {
   super.update(timeDelta);
   
  }
  
  override public function destroy () : void
  {
   super.destroy();
  }
 }

}

寫一個Fighter(戰鬥機) Class 他繼承CitrusSprite，CitrusSprite也是一個CitrusObject，不過他有更多的顯示控制可以讓你使用。
這裡要覆寫update與destroy這兩個function， 如果updateCallEnabled這個屬性是true的話，CitrusEngine就會再每個影格去呼叫update並且傳入與上一格間格的時間(timeDelta)， 當你移除這個元件時CitrusEngine也會自動呼叫destroy去銷毀這個元件。
元件的註冊點預設是在左上角，可以把registration 設成 center，把註冊點改成居中。
這樣子一個元件的版型就製作完成了。

回到主畫面的MainStarlingState，我們把戰鬥機加到畫面上。

package  
{
 import citrus.core.starling.StarlingState;
 import flash.display.Bitmap;
 import starling.textures.Texture;
 import starling.textures.TextureAtlas;
 import citrus.view.starlingview.AnimationSequence;
 /**
  * ...
  * @author Cain
  */
 public class MainStarlingState extends StarlingState 
 {
  [Embed(source = "Material.xml", mimeType = "application/octet-stream")]
  static private const MaterialXml:Class;
  [Embed(source = "Material.png")]
  static private const MaterialImage:Class;
  private var textureAtlas:TextureAtlas;
  public function MainStarlingState() 
  {
   super();
  }
  
  override public function initialize () : void
  {
   super.initialize();
   //素材宣告
   var _xml:XML = XML(new MaterialXml());
   var _bmp:Bitmap = new MaterialImage() as Bitmap;
   var _texture:Texture = Texture.fromBitmap(_bmp);
   textureAtlas = new TextureAtlas(_texture, _xml);
   //戰鬥機
   var _animationSequence:AnimationSequence = new AnimationSequence(textureAtlas, ["m1"], "m1", 30, true);
   var fighter_Ob:Object = {
     x : _ce.stage.fullScreenWidth >> 1,
     y : _ce.stage.fullScreenHeight >> 1,
     view:_animationSequence
    };
   var fighter:Fighter = new Fighter(fighter_Ob);
   add(fighter);
  }
  
  override public function destroy () : void
  {
   textureAtlas.dispose();
   textureAtlas = null;
  }
 }

}

首先宣告素材，先作一個textureAtlas素材庫，然後在作一個戰鬥機的動畫顯示的View (AnimationSequence的使用法，之前的教學有提到，忘記的同學可以再回去複習一下)。
我們把戰鬥機的位置(x y)設成居中，然後把動畫元件設成他的view。
然後把他add到畫面上，就可以先輸出看看結果。

戰鬥機置中，然後螺旋槳會旋轉...
感覺不夠過癮，接下來我們再 Fighter加上一些東西讓他動起來。
把Fighter的velocity設成[0,-100]。 velocity屬性可以設定物件的移動速度(18行)，我們傳入一個陣列0, -V，代表x與y的速度。 update中，判定一下戰鬥機是否到達螢幕頂端y小於0 輸出前改一下輸出的設定，把底色改成藍色(海)，影格率放首調到60。

你會看到你的彈鬥機從下方往上移動，然後一直loop這個動作。
目前都是在模擬器上執行，版型預設的模擬器是NexusOne(480x800)，如果你想看一下其他不同尺寸機型可以打開專案下的Run.bat檔，第17行的地方目前是設定set SCREEN_SIZE=NexusOne，你可以把NexusOne改成iPad(768x1024)或iPhone(480x640)iPhoneRetina(960x1280)或iPadRetina。

接下來我們先輸出到行動裝置上看看效果，以下以Android為例子，(IOS認證比較煩瑣，有機會再與各位分享)。
1.首先執行一次專案bat資料夾裡的CreateCertificate.bat，會在cert裡面產生一個p12的檔案。
2.打開專案下的run.bat，第7行的地方，goto desktop，意思是輸出到桌面模擬器，你可以把這行前面加上兩個冒號註解起來，然後把下面的::goto android-test前面的2個冒號移除，這樣只要在接上Android裝置的情況下就可以直接輸出到裝置上。
如果順利的話，你就可以再你的裝置上看到剛剛的畫面了。

專案下載

Flash遊戲引擎 CitrusEngine (九) 開始你的第一個行動APP遊戲吧 -用 InputController 操作你的角色