###PixijsのSpriteで透明部分のclickを判定する方法
ノベルゲームを作っています。エンジンにPixi.jsを使っています。
以下のように地面の画像と透明部分のある家の画像を組み合わせて画面を作り、そこで家をクリックしたらアクションを起こすような動作を考えています。
以下が省略形のコードです。
loader .add("images/buill/buill_base.png") .add("images/buill/buill_hood.png") .load(setup); //This `setup` function will run when the image has loaded function setup() { let base = new Sprite(resources["images/buill/buill_base.png"].texture);//地面 let hood = new Sprite(resources["images/buill/buill_hood.png"].texture);//家 app.stage.addChild(base); app.stage.addChild(hood); hood.interactive = true; hood.on('click', ()=>{ alert("hello") }) }
しかしここで問題が起きます。それは家の部分以外(透明部分)の部分を押してもalert("hello")
が発動してしまうということです。
これは家の画像の全てにクリックリスナーをはってしまっているということだと思いますが、これを回避したいです。
そこで考えたのが、クリックしたところのピクセルを取得し、それとSpriteのピクセルのalpha値と照らし合わせることです。
しかしざっと調べたところ、Sprite内でクリックしたpixelを取得する方法が見当たりませんでした。
以下のようなメソッドがないということです。
//架空のメソッド var pixeldata = hood.getPixel(x,y)
ここで挫折してしまいました。
PixijsのSpriteで透明部分のclickを判定する方法はなにかあるでしょうか?
かすかな情報しか提供できていないかもしれませんが、ご教示いただけらたと思います。
あなたの回答
tips
プレビュー