starling教程-觸摸事件(Touch Events)（四）

在前面提到過，Starling是Sparrow的姊妹篇，正因為這樣，Starling里的touch事件的機制其實是為移動設備的觸摸交互設計的，所以當你使用它進行使用鼠標交互的桌面應用開發時，第一眼會感覺有些困惑。

首先，如果你看一下starling的類結構圖的話，你會發現starling和本地顯示列表結構不同的地方在於它沒有InteractiveObject類（InteractiveObject 類是用戶可以使用鼠標和鍵盤與之交互的所有顯示對象的抽象基類），所有的顯示對象使用默認的交互，換句話說，在displayobject中定義了這些交互行為（starling其實從本地stage中注冊事件，然后通過自己的結構將本地MouseEvent和TouchEvent結合成為它自己的獨有的TouchEvent，這樣開發桌面應用時，基本不用做什么修改就可以移植到移動平台了，大家知道的，現在平板電腦正在瘋狂普及吶！）。

我們在前面已經用到過touch事件了。我們從最基本的東西開始，比如捕捉當鼠標觸碰到quad時觸發的事件。為了實現這點我們使用 TouchEvent.TOUCH事件：

// when the sprite is touched 
_customSprite.addEventListener(TouchEvent.TOUCH, onTouchedSprite); 

你會不會認為這是一個相當有限的功能？事實上它是非常強大的，因為你可以從這個單一的事件里得到許多不同的狀態。每當鼠標或手指和圖形對象發生交互時，TouchEvent.TOUCH就會被觸發。

讓我們在進一步看看下面的代碼，我們在onTouch方法里trace了一下Touch對象的phase屬性：

private function onTouch (e:TouchEvent):void 
{ 
  // get the mouse location related to the stage 
    var touch:Touch = e.getTouch(stage); 
    var pos:Point = touch.getLocation(stage); 
 
    trace ( touch.phase ); 
 
    // store the mouse coordinates 
    _mouseY = pos.y; 
    _mouseX = pos.x; 
} 

 

當我們開始和一個quad交互直到點擊了它，這個過程會觸發不同的phase。下面是TouchPhase類中所有phase的常量屬性：

•  began : A mouse or finger starts interacting (similar to a mouse down state). 
•  ended : A mouse or finger stop interacting (similar to a native click state). 
•  hover : A mouse or finger is hovering an object. (similar to a native mouse over state) 
•  moved : A mouse or finger is moving an object (similar to a native  mouse down state + a mouse move state). 
•  stationary : A mouse or finger stopped interactng with an object and stays over it. 

我們再來看看TouchEvent類的其他一些常用的屬性：

•  ctrlKey : A boolean returning the state of the ctrl key (down or not). 
•  getTouch: Gets the first Touch object that originated over a certain target and are in a certain phase. 
•  getTouches : Gets a set of Touch objects that originated over a certain target and are in a certain phase. 
•  shiftKey: A boolean returning the state of the shift key (down or not). 
•  timestamp : The time the event occurred (in seconds since application launch). 
•  touches : All touches that are currently happening. 

在使用鍵盤組合鍵的時候shiftKey和ctrlKey屬性就非常有用了。綜上，每當有交互發生不論是鼠標還是手指，都會有一個Touch事件相關聯。

 

讓我們來看看Touch類的pai：

•  clone : Clones the object. 
•  getLocation: Converts the current location of a touch to the local coordinate system of a display object. 
•  getPreviousLocation: Converts the previous location of a touch to the local coordinate system of a display 
object. 
•  globalX: The x-position of the touch in screen coordinates. 
•  globalY : The y-position of the touch in screen coordinates. 
•  id: A unique id for the object. 
•  phase : The current phase the touch is in. 
•  previousGlobalX : The previous x-position of the touch in screen coordinates. 
•  previousGlobalY : The previous y-position of the touch in screen coordinates 
•  tapCount : The number of taps the finger made in a short amount of time. Use this to detect double-taps, etc. 
•  target : The display object at which the touch occurred. 
•  timestamp : The moment the event occurred (in seconds since application start). 
 

 

模擬多點觸摸

當進行移動設備的開發時，你會有很多時候想要使用多點觸摸的交互操作，比如放大縮小圖片。當你再台式電腦上進行開發時，手里沒有移動設備，這時你就會需要使用到Starling內建的一個很好的模擬多點觸摸的機制。

使用這個機制需要你將Starling類的simulateMultiTouch屬性設置為true：

 

package
{ 
    import flash.display.Sprite; 
    import flash.display.StageAlign; 
    import flash.display.StageScaleMode; 
    import starling.core.Starling; 
     
    [SWF(width="1280", height="752", frameRate="60", backgroundColor="#002143")] 
    public class Startup extends Sprite 
    { 
        private var mStarling:Starling; 
         
        public function Startup() 
        { 
           // stats class for fps 
      addChild ( new Stats() ); 
       
      stage.align = StageAlign.TOP_LEFT; 
      stage.scaleMode = StageScaleMode.NO_SCALE; 
     
      // create our Starling instance 
              mStarling = new Starling(Game, stage); 
      // emulate multi-touch 
      mStarling.simulateMultitouch = true; 
             // set anti-aliasing (higher the better quality but slower performance) 
             mStarling.antiAliasing = 1; 
             // start it! 
      mStarling.start(); 
        } 
    } 
} 

按照上面的代碼進行設置之后，按住ctrl鍵，這時會出現兩個小圓圈來模擬多點觸摸，下面的插圖說明了這一點：

在下面的代碼中，我們將使用模擬多點觸摸的小圓點來將一個quad進行形變，就像使用兩個手指一樣。

我們取出兩個觸摸點並計算它們之間的距離：

package  
{ 
    import flash.geom.Point; 
 
    import starling.display.Sprite; 
    import starling.events.Event; 
    import starling.events.Touch; 
    import starling.events.TouchEvent; 
    import starling.events.TouchPhase; 
 
    public class Game extends Sprite 
    { 
    private var customSprite:CustomSprite; 
     
        public function Game() 
        {   
      addEventListener(Event.ADDED_TO_STAGE, onAdded); 
        } 
 
    private function onAdded ( e:Event ):void 
    { 
      // create the custom sprite 
      customSprite = new CustomSprite(200, 200); 
       
      // positions it by default in the center of the stage 
      // we add half width because of the registration point of the custom sprite (middle) 
      customSprite.x = (stage.stageWidth - customSprite.width >> 1 ) + (customSprite.width >> 1); 
      customSprite.y = (stage.stageHeight - customSprite.height >> 1) + (customSprite.height >> 1); 
       
      // show it 
      addChild(customSprite); 
 
      // we listen to the mouse movement on the stage 
      //stage.addEventListener(TouchEvent.TOUCH, onTouch); 
      // need to comment this one ? ;) 
      stage.addEventListener(Event.ENTER_FRAME, onFrame); 
      // when the sprite is touched 
      customSprite.addEventListener(TouchEvent.TOUCH, onTouchedSprite); 
    } 
 
    private function onFrame (e:Event):void 
    { 
      // we update our custom sprite 
      customSprite.update(); 
    } 
 
    private function onTouchedSprite(e:TouchEvent):void 
    { 
            // retrieves the touch points 
            var touches:Vector.<Touch> = e.touches; 
 
            // if two fingers 
            if ( touches.length == 2 ) 
            { 
                var finger1:Touch = touches[0]; 
                var finger2:Touch = touches[1]; 
 
                var distance:int; 
                var dx:int; 
                var dy:int; 
 
                // if both fingers moving (dragging) 
                if ( finger1.phase == TouchPhase.MOVED && finger2.phase == TouchPhase.MOVED ) 
                { 
                    // calculate the distance between each axes 
                    dx = Math.abs ( finger1.globalX - finger2.globalX ); 
                    dy = Math.abs ( finger1.globalY - finger2.globalY ); 
                     
                    // calculate the distance 
                    distance = Math.sqrt(dx*dx+dy*dy); 
 
                    trace ( distance ); 
                } 
            } 
    } 
    } 
} 

下一篇我們進行如何操作紋理（texture）的講解。