こんにちは。CTOのづやです。珍しく続いていますが、またPixi.jsです。
※この記事はPixi.js v1.6.1 で動作確認しております。
いろんな要素を配置したり動かしたりはわかった（自分が）ので、今回はイベントの使い方です。
けっこう簡単に使えるのでぜひ試してみてください。
// クリックイベントとかを有効にするモードを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];こんだけですね、簡単です。
さっきのデモもクリックしたらブラーするようにしてみました。
簡単にブラーさせることができるのでぜひ使ってみてください。それでは。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
