一起來玩鳥 Starling Framework（4）TouchEvent，Touch，以及TouchPhase

這一篇來介紹一下TouchEvent。我們先來談單點的touch，下一篇再介紹MultiTouch。翻過Starling文件的應該會發現，Starling裡面沒有MouseEvent，而是整合在TouchEvent裡，但使用上有一些些小技巧要注意一下，才能做出MouseEvent.MOUSE_OUT的功能。

首先來比較一下Starling的TouchEvent跟native的TiuchEvent，Starling只有一個TouchEvent.TOUCH，而不像native有分TouchEvent.TOUCH_BEGIN、TouchEvent.TOUCH_MOVE、TouchEvent.TOUCH_END等等。除此之外，整個Touch的概念是一樣的。

Starling裡面，當DisplayObject與滑鼠或手指產生互動時，就會發出TouchEvent.Touch。而這時候Starling會產生Touch物件來記錄滑鼠或手指的"點"，而每個點依照它與DisplayObject互動的狀況可分為不同的TouchPhase：點下去為TouchPhase.BEGAN，放開為TouchPhase.ENDED，經過時為TouchPhase.HOVER，停住不動為TouchPhase.STATIONARY。用法是DisplayObject監聽TouchEvent.TOUCH，然後在event handler部分，假設我們接收到e為TouchEvent，可使用e.getTouch()來取得滑鼠或第一點的Touch，若需要偵測多點則使用e.getTouches()取得一個Touch Vector。可以在e.getTouch()的第二個參數線定要取得的TouchPhase，也可以取得後再從touch.phase來判斷。

我們來寫個練習，使用Image代替上個範例的Button，利用TouchEvent做出Mouse Over與Mouse Out的效果：

publicclassGame4extendsSprite
{
privatevar _container:Sprite;
privatevar _msgText:TextField;
privatevar _btnTexture:Texture;
privatevar _btnDownTexture:Texture;
privatevar _btnHoverTexture:Texture;
[Embed(source ="/assets/btnBg.png")]//embed Button一般狀態的圖
privatestaticconstBtnBitmap:Class;
[Embed(source ="/assets/btnDownBg.png")]//embed Button壓下的圖
privatestaticconstBtnDownBitmap:Class;
[Embed(source ="/assets/btnHoverBg.png")]//embed Button Hover(Mouse Over)的圖
privatestaticconstBtnHoverBitmap:Class;

publicfunctionGame4()
{
super();
addEventListener(Event.ADDED_TO_STAGE, init);
}

privatefunction init(e:Event):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);

_container =newSprite();
addChild(_container);
addChild(newStats());
var menu:Sprite=newSprite();
menu.x =100;
menu.y =30;
_container.addChild(menu);
_msgText =newTextField(300,20,"No Button Triggered.","Arial",14,0xFF0000,true);
_msgText.x =100;
_msgText.y =80;
_msgText.hAlign =HAlign.LEFT;
_container.addChild(_msgText);

_btnTexture =Texture.fromBitmap(newBtnBitmap());//Button一般狀態的Texture
_btnDownTexture =Texture.fromBitmap(newBtnDownBitmap());//Button壓下的Texture
_btnHoverTexture =Texture.fromBitmap(newBtnHoverBitmap());//Button Hover(Mouse Over)的Texture
var btnTexts:Vector.＜string＞=newVector.＜string＞();
btnTexts.push("About");
btnTexts.push("Works");
btnTexts.push("Video");
btnTexts.push("Contact");
var btnNum:uint= btnTexts.length;
var button:Image;//改用Image來當Button
for(var i:int=0; i ＜ btnNum; i++)
{
button =newImage(_btnTexture);
button.x = i *150;
button.name ="btn"+ btnTexts[i];
menu.addChild(button);
}

menu.addEventListener(TouchEvent.TOUCH, onTouch);//TouchEvent預設會bubble，所以menu加監聽就可以了
}

privatefunction onTouch(e:TouchEvent):void
{
var touch:Touch;//滑鼠或手指產生的Touch
var target:Image=Image(e.target);//真正發出事件的Image

touch = e.getTouch(this,TouchPhase.BEGAN);//針對BEGAN處理
if(touch)
{
target.texture = _btnDownTexture;//換上壓下的texture
_msgText.text = target.name +" began!";//顯示訊息
return;
}

touch = e.getTouch(this,TouchPhase.ENDED);//針對ENDED處理
if(touch)
{
target.texture = _btnTexture;//換上一般狀態的Texture
if(touch.tapCount ==2)//使用touch.tapCount可知道短時間內點了幾次
{
_msgText.text = target.name +" double click(tab)!";//連點兩次為double click(tab)
}else{
_msgText.text = target.name +" end!";//單點的訊息
}
return;
}

touch = e.getTouch(this,TouchPhase.MOVED);//針對MOVE處理
if(touch)
{
target.texture = _btnHoverTexture;//換上Hover的Texture
_msgText.text = target.name +" move!";//顯示訊息
return;
}

touch = e.getTouch(this,TouchPhase.HOVER);//針對HOVER處理
if(touch)
{
target.texture = _btnHoverTexture;//換上Hover的Texture
_msgText.text = target.name +" hover!";//顯示訊息
return;
}

touch = e.getTouch(this);//偵測Mouse Out的方法，有事件發生但抓不到Touch，代表Mouse Out
if(touch ==null)
target.texture = _btnTexture;
_msgText.text = target.name +" out!";
return;
}
}
}

 
以上的程式碼應該很直覺，註解也都附上了。主要是使用e.getTouch()的第二個參數限定我們取到的TouchPhase，然後去做相對應的處理。第一個則是一個DisplayObject，說是要設定touch座標系參考的物件用的，不過Touch裡並沒有local座標的資訊，所以我看不出丟不一樣的DisplayObject有甚麼差別。touch.tapCount可以計算出這個Touch短時間內tap了幾次，所以可以用來做double click等效果。最後是Mouse Out，參考了Starling作者在論壇的回覆，當滑鼠離開DisplayObject時會發出一次TouchEvent，但不帶Touch。根據這個詭異的規則，我們就可以偵測當touch == null時就是Mouse Out。實際測試發現，當滑鼠離開一個物件確實會觸發這個狀態，但若滑鼠又很快進入其他物件的話，則可能不會有這個狀態。所以只能等看看作者會不會去修復這個問題了。Demo如下：