pixi.js

Pixi.jsでContainerに対してクリックイベントを追加する

概要

Containerにクリックイベントを持たせようとした時に、試した方法のメモ。

バージョン

Pixi.js 4.6.2

1. Container.hitAreaを使う

const app = new PIXI.Application({
  width: 800,
  height: 600
})
document.body.appendChild(app.view)

const hogeContainer = new PIXI.Container()
// マウス、タッチのイベントを拾えるようにする
hogeContainer.interactive = true
// 画面の大きさでrectangleを設定
hogeContainer.hitArea = new PIXI.Rectangle(0, 0, 800, 600)
hogeContainer.on('pointerdown', () => {
  // なにか素晴らしいイベント
})

app.stage.addChild(hogeContainer)

2. Containerに透明Graphicsを追加する

// app宣言略

const hogeContainer = new PIXI.Container()

const hogeGraphics = new PIXI.Graphics()
// 色はなんでも良いけど、Alphaは0(透明)にする
hogeGraphics.beginFill(0x000000, 0)
// 画面サイズで描画する
hogeGraphics.drawRect(0, 0, 800, 600)
hogeGraphics.endFill()
// マウス、タッチのイベントを拾えるようにする
hogeGraphics.interactive = true
hogeGraphics.on('pointerdown', () => {
  // なにか素晴らしいイベント
})

hogeContainer.addChild(hogeGraphics)
app.stage.addChild(hogeContainer)

もちろん hogeGraphics.visible = false にすると、イベントは拾わなくなる