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

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

Kazuya Takato

Kazuya Takato

こんにちは。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サイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

1983年生まれ。SIerとしてのキャリアをスタートし、JavaやC#を中心に多岐にわたる開発プロジェクトにエンジニアとして参加。その経験を活かし、LIGを創業。バックエンドおよびフロントエンドエンジニアとしての深い知識と経験をもとに、多様なプロジェクトに従事。2023年7月には社長室室長に就任にし、社内の体制やルールの最適化、AI技術の推進など、経営戦略の一翼を担っています。

このメンバーの記事をもっと読む