[ Starling Framework ] イベント – TouchEvent –

前回の記事で、Tweenクラス使用したアニメーションを実現することが出来ました。
今回は、タッチ(クリック)イベントのご紹介です。

タッチイベントを扱うには、オブジェクトに対して、starlingで用意されている TouchEvent をリスナーとして追加する必要があります。
今までご紹介してきた表示リスト(Quad, Image, MovieClip)を含む、starlingの全ての表示オブジェクトで利用することが出来ます。

それでは、イベントを追加するところから見ていきましょう。

    private function main(e:starling.events.Event):void
    {         
        var texture:Texture = Texture.fromBitmap( new Img() );
        var image:Image = new Image( texture );
        addChild( image );
        
        //タッチイベントを追加
        image.addEventListener(TouchEvent.TOUCH, touchEvent);
    }
    
    private function touchEvent( evt:TouchEvent ):void
    {
        trace( "Touch!!" );
    }

上記サンプルでは、Imageオブジェクトであるimage01にタッチイベントのリスナーを追加しています。
第一引数には、イベントの種別(今回ではTouchEvent)、第二引数にはイベント時に実行する関数を渡します。

もちろん、無名関数を使用したリスナーの追加も可能です。

    image01.addEventListener(TouchEvent.TOUCH, function ( evt:TouchEvent ):void{
        
            trace( "無名関数のタッチイベント" );

        });

TouchEventは、getTouch関数によってTouchオブジェクトを取得することが出来ます。
TouchPhaseクラスを使用することで、操作状況を指定することができ、今回はその中でも使用頻度の高い以下の４つをご紹介します。

• BEGAN : 指が画面に触れた時、若しくはクリック開始時
• ENDED : 指が画面に触れた状態で動いた時、若しくはクリックしたままマウスが動いた時
• MOVED : 指が画面から離れたとき、もしくはクリック終了時
• HOVER : マウスポインタがオブジェクトに乗ったとき(マウス限定)

getTouch関数は一つ目の引数にターゲット、二つ目の引数にTouchPhaseを指定します。
getTouchが値を返すのは、ターゲットに指定した引数と一致する場合はもちろんですが
それ以外にもターゲット配下にあるオブジェクトの範囲に含まれるので
以下のように　this　を指定することで クラス全体のオブジェクトを対象にすることが出来ます。

    private function touchEvent( evt:TouchEvent ):void
    {
        var touch:Touch = evt.getTouch( this, TouchPhase.BEGAN );

        //開始時のタッチイベント
        if( touch ){
            
            trace( "touch Began!!" );
        }
    }

次は、TouchEvent若しくはTouchオブジェクトが持つ target属性 からタッチ対象のオブジェクトを判定します。

以下は、記事の最初のリスナー登録方法で使用したサンプルにある image をタッチ対象かどうかを判定しています。

    image = new Image( texture );

    //name属性を設定
    image.name = "image_Object";
     
     addChild( image );
        
    //タッチイベントを追加
    image01.addEventListener(TouchEvent.TOUCH, touchEvent);
    
    private function touchEvent( evt:TouchEvent ):void
    {
        var evtImage:Image = ( evt.target as Image );
    
        //name属性から判定
        if( evtImage.name == "image_Object" )
            trace( "Touch Event A !!" );
            
        //オブジェクト自身と比較
        if( evtImage == image )
            trace( "Touch Event B !!" );
    }

Touchオブジェクトが持つ globalX/globalY プロパティ、若しくはgetLocation関数により、タッチ座標を取得することが出来ます。
これで、TouchPhaseにMOVEDを指定し、その条件のときにタッチ座標を取得することで、指やマウスポインタを追従するような処理も簡単に行うことが出来るようになりました。

以上で、タッチイベントのご紹介は終了となります。

最後まで御覧いただきありがとうございました。

タッチイベントのサンプルコード

import starling.core.Starling;
import starling.display.Image;
import starling.display.Sprite;
import starling.events.Touch;
import starling.events.TouchPhase;
import starling.events.TouchEvent;
import starling.textures.Texture;
import starling.events.Event;

internal class StarlinTestMain extends Sprite
{
    //各種ファイルの埋め込み
    [Embed(source = "img.png")]
    private static const Img:Class;     
    
    private var image01:Image;
    private var image02:Image;

    public function StarlinTestMain()
    {
        addEventListener(starling.events.Event.ADDED_TO_STAGE, addStage);
    }
 
    private function addStage(e:starling.events.Event):void
    {
        removeEventListener(starling.events.Event.ADDED_TO_STAGE, addStage);

        var texture:Texture = Texture.fromBitmap( new Img() );
        
        image01 = new Image( texture );
        image01.x = stage.stageWidth * 0.3;
        image01.y = stage.stageHeight * 0.5;
        image01.name = "image01";
        image01.pivotX = image01.width * 0.5;
        image01.pivotY = image01.height * 0.5;		
        image01.scaleX = 2.0;
        image01.scaleY = 2.0;
        image01.addEventListener(TouchEvent.TOUCH, touchEvent);
        addChild( image01 );

        image02 = new Image( texture );
        image02.x = stage.stageWidth * 0.7;
        image02.y = stage.stageHeight * 0.5;
        image02.name = "image02";
        image02.pivotX = image02.width * 0.5;
        image02.pivotY = image02.height * 0.5;		
        image02.scaleX = 2.0;
        image02.scaleY = 2.0;
        image02.addEventListener(TouchEvent.TOUCH, touchEvent);
        addChild( image02 );
    }
	
    private function touchEvent( evt:TouchEvent ):void
    {
        //クリック(タッチ)開始タイミングのTouchオブジェクトを取得
        var began:Touch = evt.getTouch( this, TouchPhase.BEGAN );

        //クリック(タッチ)されたまま移動したタイミングのTouchオブジェクトを取得
        var moved:Touch = evt.getTouch( this, TouchPhase.MOVED );

        //クリック(タッチ)終了タイミングのTouchオブジェクトを取得
        var ended:Touch = evt.getTouch( this, TouchPhase.ENDED );

        //マウスポインタが乗ったタイミングのTouchオブジェクトを取得
        var hover:Touch = evt.getTouch( this, TouchPhase.HOVER );

        //クリック開始・タップ開始時(指が画面に触れたとき)
        if ( began ) {
            trace( "BEGAN!" );

            //拡大する
            ( began.target as Image ).scaleX = 3.0;
            ( began.target as Image ).scaleY = 3.0;
        }
        //クリックまたは、タップした状態での移動時(ドラッグ)
        else if ( moved ) {
            trace( "MOVED!" );
            
            //マウスポインタに追従
            ( moved.target as Image ).x = moved.globalX;
            ( moved.target as Image ).y = moved.globalY;
        }
        //クリック終了、タップ終了時(指が画面から離れたとき)
        else if ( ended ) {
            trace( "ENDED!" );

            //初期設定の大きさに戻す
            ( ended.target as Image ).scaleX = 2.0;
            ( ended.target as Image ).scaleY = 2.0;
        }
        //マウスポインターが対象オブジェクトの上に乗ったとき
        else if ( hover ) {
            trace( ( hover.target as Image ).name );
        }
    }
}
　　　　

＜次回の更新について＞
次回は、starling用のＵＩコンポーネントであるfethersを使用したボタンの実装についてご紹介します。

---

弊社では全国各地の請負い（ご自宅）で作業協力頂ける、フリーランスエンジニアの方を常時探しております。
ご興味ある方は、お気軽にお問い合わせ下さい。

---