pixi.jsのタッチイベントの使い方

pixi.jsでのタッチイベントについてわかったことを書いておきます。

 

イベントの基本

pixi.jsでのイベントの使い方は

abcde.on('pointerup', () => {
  //処理
});

のようにonメソッドでイベント名を指定してコールバック処理を書けばそのイベントが発生したときに処理を行ってくれます。

interactiveをtrueにする

タッチイベントを使うには対象オブジェクトのinteractiveプロパティをtrueにする必要があります。

これを設定し忘れるとタッチイベントを作っても動いてくれません。

「あれぇ?なんで動かんのや?」ってときはだいたいこれを忘れています(;^ω^)

pointerでつくればPCもスマホもいける

pixi.jsではかなりたくさんのタッチ/マウスに関するイベントがあります。

参考 ▷▷▷ PIXI.interaction.InteractionManager

mousedownやtouchstartなどマウス・スマホ用にイベントがありますが、基本的にpointerで指定すればPCでもスマホでも動きます。

pointerdown、pointermove、pointerupを基本的に使っていけばOKです。

ただしpointermoveはPCの場合pointerdownしてようがしてなかろうが関係なしにマウスを動かせば発火するので押しているだけを判別して動かすには押している状態を管理するフラグが必要です。

スマホではpointeroutが効かない

対象のオブジェクトからポインターが外れたときに発生するpointeroutが残念ながらスマホでは使えないようです。

そして残念ながらtouchoutというものもないようです。

なのでスマホの場合はtouchmoveで動かした位置が対象のオブジェクトの大きさより外側になっているかをチェックして外側に出ていたら処理を行うようにする必要があります。

他にもpointerイベントでスマホでは動かないものがあるようです(でも使わないんじゃないかな?)。

タッチで動かしたいものと実際にタッチするもの

ゲームで表示されている画像を動かしたいときに動かしたいものを直接タッチして動かすのか?それとも背景をタッチして動かした方が良いのか?をちょっと考えたりします。

スマホで遊ぶ場合にプレイヤーキャラなどを直接指でタッチして動かそうとすると指で隠れて見づらくなってしまうので直接キャラクターではなく背景にタッチイベントを仕込んで動かすようにしたりしています。

ゲームにもよりますがどこを触って動かすかっていうのはちょっと考えてみると良いと思います。

Containerにはタッチイベントがない

背景をタッチして動かす場合にPixi.ContainerにイベントをつけたいところですがContainerはタッチイベントは機能しないみたいです。

Containerはただの入れ物ということらしく、そういった機能は無いんだそうです。

透明な背景でタッチイベントをつけたい場合は画像無しのSpriteを作成して幅・高さだけを指定すると作成することができます。

 

どのゲームで遊ぶ?

同じ色で複数くっついているタイルをタッチすると消すことができます。一度にたくさん消すと...
変な顔を一か所入れ替えて連鎖で全消しを狙うゲーム。全部消えたときはスッキリ快感です。
短時間でたくさん計算問題を解くゲームです。掛け算割り算なのでかなり難しい。
モバイル&対戦専用リバーシ。角を取ってみたら予想外に戦略が変わって面白い。

コメント欄

※コメントはまだありません※

コメントを残す

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

ゲームタグ一覧

ゲーム開発書籍(amazon)

HTML5 ゲーム開発の教科書 スマホゲーム制作のための基礎講座
ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング[改訂版] (Future Coders(NextPublishing))
改訂2版 はじめて学ぶ enchant.jsゲーム開発