enchant.jsでの画面タッチ処理のいろいろ

enchantjs講座

画面のタッチ処理について自分がやってみて気づいたことを紹介します。

画像無しのスプライトを使う

例えば画面全体のどこかを押すことで何か処理をさせるならシーンにイベントリスナを設定します。

じゃあ画面の右半分にタッチする場合と左半分にタッチする場合で処理を変えたい場合はどうすればいいのかな?

と思ったときに試してみたのが画像を設定しないスプライト。画像は設定していないので当然画面には何も表示されていないけど設定した大きさと場所にスプライトは存在しているようです。なのでイベントリスナを設定してやるとちゃんと反応してくれます。

タッチに当たり判定をつけて処理する

例えばタッチで触ったものに何かしらの処理をさせたいとき、普通はスプライトにイベントリスナを設置して処理すると思うんですが、これだと画像が重なった時に上になっている方のイベントが処理されます。

例えばそれが画像が小さくてスプライト的にはそこにあるけど見た目は何もない部分なんてときに、その余白部分の下に別の画像があって、プレイヤー的にはそっち押したつもりなんて状態の時に正しく処理できない(説明が難しい)。

上の画像で言うと重なってる部分では上になってる方のイベントリスナが発火します。もしプレイヤーが下の方を押したつもりだったらおかしなことになってしまいます。

というか余白部分でも反応してしまうのでそれをどうにかしたい(最初からそう言えば分かりやすかったんだな(^^;))。

で、どうしたもんかな?と考えた結果、スプライトのイベントリスナでは処理をせず、タッチした場所とキャラとの当たり判定を取るようにしました。

通常のシューティングゲームなどと同様にキャラの当たり判定を設定し、画面にタッチするたびにその場所とキャラとの当たり判定をとればOKです。

で、このとき上になってるキャラから当たり判定を取っていけば重なっていても問題なく処理できます。

コメントを残す

メールアドレスが公開されることはありません。