2013年7月29日 星期一

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

上一篇教學,我們製作了戰鬥機的元件,並且加上了由下至上移動的DEMO。不過實際上,遊戲元件,應該是可以透過某些動作方法來操作他。
本篇介紹InputController物件,這個物件是專門負責操作控制的。
記得之前介紹的一個遊戲,我們直接把Hero物件new出來後,就可以直接操作他,不需要再添加任何程式碼,實際上是因為 CitrusEngine已經在一開始時幫你預設加上了一個Keyboard物件,他繼承一個InputController物件,並幫你寫了一些預設動作(移動 跳躍 ...),所以你的Hero一開始就可以操作了。
由於我們這次要控制的元件並不是Hero,而且遊戲也不是在PC上執行,所以也無法使用Keyboard,所以我們必須得自己作一個InputController來控制戰鬥機。
以下先作一個InputController可以用觸控拖曳的方式來移動戰鬥機。
首先我們new一個TuochInputController Class,並繼承InputController.. (以下程式碼)
package  
{
 import citrus.input.InputController;
 import flash.geom.Point;
 import starling.display.Sprite;
 import starling.display.Stage;
 import starling.events.Touch;
 import starling.events.TouchEvent;
 import starling.events.TouchPhase;
 
 /**
  * 觸控輸入控制
  * @author Cain
  */
 public class TuochInputController extends InputController 
 {
  private var myStage:Stage;
  private var movePoint:Point;
  public function TuochInputController(name:String = "TuochInputController", params:Object = null)
  {
   super(name, params);
   myStage = Sprite(_ce.state).stage;
   myStage.addEventListener(TouchEvent.TOUCH, onTOUCH); //偵聽觸控
  }
  
  private function onTOUCH(e:TouchEvent):void 
  {
   e.stopPropagation();
   var _touch:Touch = e.getTouch(myStage);
   if (_touch) 
   {
    switch (_touch.phase) 
    {
     case TouchPhase.BEGAN:
      
     break;
     case TouchPhase.MOVED:
      movePoint = _touch.getMovement(myStage); //抓取移動數值
     break;
     case TouchPhase.ENDED:
      
     break;
     default:
      movePoint = null;
    }
   }
  }
  
  override public function update () : void
  {
   super.update();
   if (movePoint) 
   {
    //改變移動量
    triggerVALUECHANGE("movX", movePoint.x);
    triggerVALUECHANGE("movY", movePoint.y);
   }else 
   {
    triggerVALUECHANGE("movX", 0);
    triggerVALUECHANGE("movY", 0);
   }
  }
  
  override public function destroy () : void
  {
   myStage.removeEventListener(TouchEvent.TOUCH, onTOUCH);
   movePoint = null;
   myStage = null;
   super.destroy();
  }
 }

}
首先我們取得stage,然後偵聽他的觸控事件。(23行)
用getMovement方法取得手勢移動時的座標變量(38行)
覆寫update() (49行)
如果有移動變量movePoint的話,就用triggerVALUECHANGE發出變量改變的訊息。
 triggerVALUECHANGE帶兩個參數,第一個是變量的名稱,第二個是變動的值。
可以利用這個方法把手勢的移動量傳出去。
覆寫destroy 把該清理的清一清..
這樣子我們的InputController就完成了。
接下來只要把作好的TuochInputController套在戰鬥機上就可以了。
打開Fighter物件,先把上一次的移動DEMO的地方跟判斷Loop移除,之後我們要打移動改成使用 TuochInputController來控制。
打開MainStarlingState場景,在initialize加上
//加入TuochInputController控制
_ce.input.addController(new TuochInputController);
_ce.input.actionTriggeredVALUECHANGE.add(moveFighter);

用addController方法把剛剛作的TuochInputController物件add到_ce.input裡面,然後有變量改變時就執行moveFighter這個方法。

public function moveFighter(inputAction:InputAction):void 
  {
   //取得移動變量並且套用在速度velocity
   var _arr:Array = [_ce.input.getActionValue("movX") * 80, _ce.input.getActionValue("movY") * 80];
   fighter.velocity = _arr;
  }
用getActionValue把變量抓出來,然後在用變量去改變戰鬥機的速度,好了之後你就可以輸出到移動裝置,現在你可以用觸控的方法來移動戰鬥機了。
程式碼下載 
















Flash遊戲引擎 CitrusEngine (十) 開始你的第一個行動APP遊戲吧 - 卷軸背景製作

沒有留言: