タッチシーケンスの管理

// 追跡中のタッチポイントのID
var currentID:int = 0;
 
function onTouchBegin(e:TouchEvent) {
  if(currentID != 0) {
    // 既にシーケンスが開始されているためそのまま終了
    return;
  }
  // タッチポイントのIDを保存
  currentID = e.touchPointID;
  // その他必要な処理を行う
}
 
function onTouchMove(e:TouchEvent) {
  if(e.touchPointID != currentID) {
    // 別のシーケンスのイベントは無視する
    return;
  }
  // オブジェクトの移動など、必要な処理を行う
}
 
function onTouchEnd(e:TouchEvent) {
  if(e.touchPointID != currentID) {
    // 別のシーケンスのイベントは無視する
    return;
  }
  // 変数を初期値に戻す
  currentID = 0;
  // その他必要な処理を行う
}
 

もし、ズームや回転のジェスチャーを TouchEvent で実装したい場合には 2 つ目のタッチポイントまで扱えるように変えることになります。あとは、タッチシーケンスの軌跡を正確に判断するロジックを揃えることさえできれば、ジェスチャーの実装はそれほど難しくないかも？ですね。

イベントハンドラの登録

さて、話を上のサンプルに戻して、イベントハンドラを追加するコードも足してみます。

操作開始の合図となる touchBegin イベントのハンドラは、操作する対象となるオブジェクトに追加する、で良さそうです。ですが、touchMove や touchEnd イベントは、タッチポイントが最初に触れたオブジェクトの外側に移動してから離れた場合のことを考えると、そのオブジェクトの外で発生するイベントも拾える必要がありそうです。そのため、touchMove と touchEnd のハンドラは stage に追加することにします。

オブジェクトをドラッグする場合は常にタッチポイントの下にオブジェクトがありそうな気もしますが、ドラッグ可能な領域の外側にタッチポイントが移動することはあり得るので、やはり touchMove と touchEnd のハンドラは stage に追加しておいた方が安全そうです。

ということで、下はイベントシーケンスを使ってオブジェクトをドラッグするサンプルです。touchBegin のイベントハンドラで touchMove と touchEnd のイベントハンドラを追加し、touchEnd のイベントハンドラで touchMove と touchEnd のイベントハンドラを削除しています。

Multitouch.inputMode=MultitouchInputMode.TOUCH_POINT;
 
// 追跡中のタッチポイントのID
var currentID:int = 0;
// ドラッグするオブジェクト
var mySprite:Sprite = new Sprite();
mySprite.graphics.beginFill(0xFFCC00);
mySprite.graphics.drawCircle(50, 50, 40);
addChild(mySprite);
 
mySprite.addEventListener(TouchEvent.TOUCH_BEGIN, onTouchBegin);
 
function onTouchBegin(e:TouchEvent) {
  if(currentID != 0) {
    // 既にシーケンスが開始されているためそのまま終了
    return;
  }
  // タッチポイントのIDを保存
  currentID = e.touchPointID;
  // stageにイベントハンドラを登録
  stage.addEventListener(TouchEvent.TOUCH_MOVE, onTouchMove);
  stage.addEventListener(TouchEvent.TOUCH_END, onTouchEnd);
  // その他必要な処理を行う
}
 
function onTouchMove(e:TouchEvent) {
  if(e.touchPointID != currentID) {
    // 別のシーケンスのイベントは無視する
    return;
  }
  mySprite.x = e.stageX;
  mySprite.y = e.stageY;
}
 
function onTouchEnd(e:TouchEvent) {
  if(e.touchPointID != currentID) {
    // 別のシーケンスのイベントは無視する
    return;
  }
  // 変数を初期値に戻す
  currentID = 0;
  // stageからイベントハンドラを削除
  stage.removeEventListener(TouchEvent.TOUCH_MOVE, onTouchMove);
  stage.removeEventListener(TouchEvent.TOUCH_END, onTouchEnd);
  // その他必要な処理を行う
}