ゲームをつくる：CocosCreator v2.x でタッチ位置を検出する

この記事は、

大戦略好きが、最近スマホでイケてるヘックス・ターン制SLGが無いので自分で作る奮闘記です。

この記事のまとめ

• Cocos Creator v2.xのTouch Eventはスクリーン座標なので
• CameraでWorld座標に変換した後
• 該当NodeでNode座標に変換して判定する

Cocos Creator v2.x のタッチイベント

基本的に、cc.Nodeに用意されているイベントコールバック用のメソッドを使います。

node.on(cc.Node.EventType.TOUCH_START, callback, this);

イベントが発生すると、callbackが呼ばれます。
最後のthisは、callbackが呼ばれた際のターゲットの指定。省略可。

今回はヘックスマップがあるSLGを作る予定です。なのでどのヘックスにタッチされたか検出する必要があります。
すべてのヘックスにそれぞれイベントを貼るのは処理が重くなりそうで嫌なので、ゲーム全体をカバーするタッチ検出用の大きなnodeを作って、状況に応じて、メニューやヘックスやユニットなど、何をタッチしたか判定する形にします。
こんな感じ。

    this.node.on(cc.Node.EventType.TOUCH_START, this.TouchStart);
    this.node.on(cc.Node.EventType.TOUCH_MOVE, this.TouchMove);
    this.node.on(cc.Node.EventType.TOUCH_END, this.TouchEnd);
    this.node.on(cc.Node.EventType.TOUCH_CANCELED, this.TouchEnd);

this.nodeが全体をカバーするnodeです。
タッチ開始、タッチ移動、タッチ終了は、それぞれ別のコールバックになります。
ダブルクリックや、スワイプ、慣性スクロールなどは、この3つを駆使して検出することになります。

コールバックが呼ばれた際の処理

タッチコールバックのメソッドがコールバックとして呼ばれると、Touchクラスのインスタンスが引数として渡されます。
ここからtouch座標をメソッドを使って取得します。

// ****************************
// タッチ開始イベントコールバック
// ****************************
  TouchStart(event) {
    let touchPos = event.getLocation();
  }

この座標はCameraの影響を受けた、スクリーンのどこをタッチしたかの座標です。

ワールド座標に戻す

最終的に該当ノードのどこをタッチしているのか判定するためには、一度カメラを使ってワールド座標に戻す必要があります。
cc.CameraのgetCameraToWorldPointメソッドを使います。

this.MainCamera.getCameraToWorldPoint(touchPos, worldPos);

this.MainCameraは、エディタのNodeTreeに置かれているMainCameraノードのCameraコンポーネントです。
あらかじめ取得しておきます。
結果のワールド座標は第２引数のwordPos（cc.Vec2）に入ります。
(このメソッドだけちょっと特殊な気がします。大抵のメソッドがVec2の参照を戻り値で返すのに）

タッチ判定を行いたいNodeの座標系に変換

ワールド座標から、判定を行いたいノードの座標系に変換して、判定を行います。

let hexMapTouchPos = HexMap.node.convertToNodeSpace(worldPos);

さて、これでHexMapノード上で、どのヘックスをタッチしたか判定する準備が整いました。
次回は実際にどのヘックスをタッチしたか判定します。