ことれいのもり

【PixiJS】canvasのクリックを検知するイベントの作成方法～画面のどこでも良いからクリックを検知する～

2025-03-10

はじめに

canvasをクリックした時に何か動作を起こすといったようなイベントの作り方を説明します。

前提

バージョン： PixiJS v8

参考リンク

canvasのクリックを検知する方法

canvasにイベントリスナーをつけるだけです！

// アプリケーションの作成
const app = new Application();
await app.init({
  width: 400,
  height: 600,
  antialias: false,
});

// canvasを追加
document.body.appendChild(app.canvas);

// canvasに対してクリックイベントを追加
app.canvas.addEventListener('pointerdown',function clickEvent(e) {
    console.log('Clicked!!');
});

app.canvas.addEventListener(追加したいイベント, 実行したい処理)　と書くことでできます。

追加したいイベントは 公式ドキュメントのConteinerクラスの Eventsに記載されています。

余談ですが、v7では基底クラスとして存在していたDisplayObjectが、v8からはContainerに変わりました。

ここのあたりはマイグレーションガイドに記載されています。

前提のところには英語の原文の方のリンクを記しておきます。（上のリンクは日本語で説明されているもの）

別の場所にイベントを設定する

例えばstageにクリックイベントを適用した場合は、stage上のオブジェクトにイベントリスナーが適用されます。

// アプリケーションの作成
const app = new Application();
await app.init({
  width: 400, // 幅
  height: 600, // 高さ
  antialias: false, // アンチエイリアスはオフ
});
document.body.appendChild(app.canvas); // canvasを追加

// デバッグ用テキスト
const debugText = new Text({
    text: 'Hello,',
    style: {
      fontFamily: 'Arial',
      fontSize: 24,
      fill: 0xff1010,
      align: 'center',
  }
  });
  // テキストの位置を指定
  debugText.position.set(10, 10);
  // テキストを追加
  app.stage.addChild(debugText);

// ゲームシーンのコンテナ
const gameScene = new Container();
app.stage.addChild(gameScene);

// クリックイベント
app.stage.addEventListener('pointerdown',function clickEvent(e) {
    console.log('Clicked!!');
});

この場合、ステージ上のオブジェクトである、テキストをクリックした時にイベントが発火します。

addEventListenerを追加すれば様々なイベントをおこせますね。

おわりに

イベントリスナーに関して、「特定のオブジェクトのクリックを検知する」という記事はたくさんありましたが、「画面のどこでも良いからクリックを検知する」というものは見つかりませんでした。

調べていく内にコンテナーのことも理解が深められて良かったです。