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を作成して幅・高さだけを指定すると作成することができます。

 

同カテゴリー記事

当サイトのオリジナルゲーム(ランダム表示)

あほげー。意味など考えないでください。鶏の気持ちを理解しましょう。
餌を全部食べて巣に帰るゲーム。食べる順番が大事。全10ステージ。
あほげー。なんか見つけたらタッチしてみて。なにかあるかも?
クッソしょうもないあほげー。ある温泉街で殺人事件がおきた。どうやら犯人はこの中にいるようだ。

記事の感想・コメント

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

コメントを残す

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

ゲームジャンルタグ

新着技術ブログ記事

新着開発日記