【Nuxt】Pixi.jsで画像を読み込む際の注意点

NuxtでPixi.jsを使った2Dアニメーションの描画をする際に、アセットの読み込みで詰まったのでメモ。

PixiのPIXI.mesh.Ropeというメソッドで複数のポイントを持つテクスチャを描画したい場面があり、components内で以下のように変数stripeを定義していました。

  // <script>内での定義
  const strip = new PIXI.mesh.Rope(PIXI.Texture.fromImage('/assets/img/img.png'), points)

これで、img.pngからテクスチャが生成されるかと思いきや、うまく読み込まれず…。開発者ツールからNetworkを見ても、404になってるし、Content Typeが謎に`GIF`になってるし、なんかおかしい。

解決策： 画像アセットはimportして使う

結論、画像をimportして使うことで無事読み込まれるようになりました。

  import Image from '~/assets/img/img.png'

  // <script>内での定義
  const strip = new PIXI.mesh.Rope(PIXI.Texture.fromImage(Image), points)

こういう読み込ませ方はPixi.jsを使う場合以外でもやると思いますが、Pixi.jsにおいてインスタンスを生成する際にアセットを渡すときはimportしておいたほうがいいかもしれません。