JavaScript
pixi.js

PixiJS でのマウス座標取得

HTML 側でキャンバスのサイズを拡大縮小していたりするとマウス座標が変わってしまったのでメモ。

1. 相対的な座標を取得

イベントハンドラ function(event) {} 内で

event.data.getLocalPosition(this)

もしくは、 this の代わりに具体的な PIXI.DisplayObject を指定。
キャンバスの拡大縮小や、オブジェクトの位置が反映されます。

参考「[pixi.js] MagicLight (4) ~Sprite, TouchEvent~ | にゃあプロジェクト

2. event を使わずに取得したい

具体的に event を使いたくないときってどんなときなのか分かりませんが、自分が先に見つけた方法がこっちだったので一応載せておきます。

rendererPIXI.CanvasRendererPIXI.WebGLRenderer が入っているとして、

renderer.plugins.interaction.mouse.getLocalPosition(this)

renderer.plugins.interaction.mouse の中身は event.data と同じく PIXI.interaction.InteractionData です。
thisPIXI.DisplayObject にできます。

参考「PIXI.interaction.InteractionData - PixiJS API Documentation
参考「PIXI.CanvasRenderer - PixiJS API Documentation
参考「PIXI.WebGLRenderer - PixiJS API Documentation

3. 絶対位置を取得

自分は相対位置が知りたかったのですが、絶対位置の取得方法も見つけたので載せておきます。

renderer.plugins.interaction.mouse.global.x
renderer.plugins.interaction.mouse.global.y

キャンバスの拡大縮小に関わらない座標が入っています。

参考「Pixi.jsでマウスクリックなどのインタラクティブ性をつける - code snippets

4. 廃止

最新バージョンでは廃止されて使えない方法なのですが、検索すると出てくるので一応メモ。

Stage.getMousePosition()

参考「簡単アニメーション!Pixi.jsを触ってみる!(6)インタラクションに挑戦!(のつづき) - Qiita

v3 で廃止されたようです。