Pixi.jsを初めて触って簡単にクリックイベントを使ってみた話


Pixi.jsを初めて触って簡単にクリックイベントを使ってみた話

こんにちは。CTOのづやです。珍しく続いていますが、またPixi.jsです。

いろんな要素を配置したり動かしたりはわかった(自分が)ので、今回はイベントの使い方です。

けっこう簡単に使えるのでぜひ試してみてください。

// クリックイベントとかを有効にするモードをONにする
button.setInteractive(true);

// ポインターを変更(別に変更しなくてもよい)
button.buttonMode = true;

// clickイベントを追加
button.click = function(data){
	alert("clickしたよ");
}

こんな感じでつくった表示用オブジェクトのsetInteractiveにtrueを渡して、clickにコールバックを渡すだけです。

デモではclickだけ使用しましたが、下記のようなイベントが用意されてるのでいろいろできます。

  • mouseup
  • mousedown
  • mouseover
  • mouseout
  • mouseupoutside
  • touchstart
  • touchend
  • tap
  • touchendoutside

けっこう有名所が用意されており、そのまま直感的に使っていけるかと思います。

ちなみにコールバックの戻り値ではInteractionData型のオブジェクトがもらえます。
イベントを発生させたオブジェクト(target)とか発生させたイベントオブジェクトとかを持ってるオブジェクトです。

尺が余ったのでブラーフィルターの使い方

ちょっと短いのでつかいそうなブラーのかけ方を書いて終わります。
Pixi.jsでは様々なブラーが用意されています。
基本的な使い方は一緒なのでよくつかいそうなブラーフィルターの使い方です。


// ブラーフィルターオブジェクトを用意します。
var filter = new PIXI.BlurFilter();

// displayオブジェクトのfiltersに配列で設定します。
button.filters = [filter];

こんだけですね、簡単です。
さっきのデモもクリックしたらブラーするようにしてみました。

簡単にブラーさせることができるのでぜひ使ってみてください。それでは。

この記事を書いた人

づや
づや 取締役 2007年入社
高遠です。俺ほどずっとプログラム書いてるやつはいるかって、たぶんいないですね。LIGで唯一の闇属性です。好きな本は「ドグラマグラ」「ヴォイニッチ手稿」「旧約聖書」です。好きな思考実験は「シュレーディンガーの猫」。好きな言語はラテン語です。あと、嫌だったんですがLINEスタンプにもなりました。