【PixiJS v8対応】ScaleModeの設定方法とv7からの変更点

はじめに

ドットの画像をなめらかに表示するために、テクスチャの設定を変更しようと思いましたが、PixiJS v8にてSCALE_MODES の設定方法が変わっていました。

前提

バージョン： PixiJS v8

• PixiJS
  • マイグレーションガイド：https://pixijs.com/8.x/guides/migrations/v8
  • Texture：https://pixijs.download/release/docs/rendering.Texture.html
  • TextureSource：https://pixijs.download/release/docs/rendering.TextureSource.html
• 海外の方で質問している人がいました：html5gamedevs.com Using ScaleMode strings on Pixi v8?

SCALE_MODES の変更点

上にある前提項目のリンクから公式のガイドが読めます。

v7 → v8

SCALE_MODES.NEAREST → ‘nearest’

v7 の texture.baseTexture に相当する物は v8から、texture.source に変更されているようです。

v7

const texture = PIXI.Texture.from('examples/assets/player.png');
texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;

v8

const texture = await Assets.load('examples/assets/player.png');
texture.source.scaleMode = 'nearest';

左が nearest に設定したもの、右が設定していないものです。

おわりに

設定一つ変えるだけでもかなり時間がかかってしまったのでまとめてみました。

PixiJS の v8 の日本語記事が少ないのでもっと増えてほしいですね。

今後も v8 の変更点があればまとめていきます。