v8 移行ガイド

PixiJS v8 移行ガイドへようこそ！このドキュメントは、PixiJS v7 から最新かつ最高の PixiJS v8 へプロジェクトをスムーズに移行するのに役立つように設計されています。移行を成功させるために、以下の手順に従ってください。

目次

1. はじめに
2. 破壊的変更
3. 非推奨の機能
4. リソース

1. はじめに

PixiJS v8 では、レンダラーのパフォーマンスを劇的に向上させる、いくつかのエキサイティングな変更と改善が導入されています。移行プロセスを可能な限りスムーズにするよう努めてきましたが、いくつかの破壊的変更は避けられません。このガイドでは、PixiJS v7 プロジェクトを PixiJS v8 に移行するために必要な手順を説明します。

2. 破壊的変更

移行プロセスに入る前に、PixiJS v8 で導入された破壊的変更を確認しましょう。既存のコードベースに影響を与える可能性があるため、これらの変更に細心の注意を払ってください。

アップグレードすべきか？

一般的には、答えはイエスです！しかし、現時点では、まだアップグレードしない方が良い理由があるかもしれません。以下の質問を自問自答してみてください。

• **プロジェクトでは、まだ v8 に移行されていない既存の Pixi ライブラリを活用していますか？** 主要なライブラリを v8 に移行するために懸命に取り組んでいますが、純粋な Pixi を使用しているユーザーにとって、これが障害にならないようにしたいと考えています。これは、一部のライブラリにはまだ v8 対応版がないことを意味します。この場合は、移行を保留するのが最善です。

移行済み

• フィルター
• サウンド
• Gif
• Storybook
• UI
• • Open Games

現在移行中

• React
• Spine (秘教的バージョン)

移行予定

• Pixi レイヤー (これを移行するのではなく、PixiJS v8 に機能として直接組み込む可能性が高いです)

**新しいパッケージ構造**

バージョン 5 以降、PixiJS は個別のサブパッケージを利用して、コードベースをより小さな単位に編成してきました。しかし、このアプローチは、異なる PixiJS バージョンの競合するインストールなど、内部キャッシュに問題を引き起こす原因となりました。

v8 では、PixiJS は単一パッケージ構造に戻りました。PixiJS の特定の部分をインポートすることはできますが、メインパッケージをインストールするだけで済みます。

以前

import { Application } from '@pixi/app';
import { Sprite } from '@pixi/sprite';

現在

import { Application, Sprite } from 'pixi.js';

カスタムビルド

PixiJS は「拡張機能」システムを使用して、レンダラー機能を追加します。デフォルトでは、PixiJS には、包括的なすぐに使えるエクスペリエンスのための多くの拡張機能が含まれています。ただし、機能とバンドルサイズを完全に制御するために、特定の PixiJS コンポーネントを手動でインポートできます。

  // imported by default
  import 'pixi.js/accessibility';
  import 'pixi.js/app';
  import 'pixi.js/events';
  import 'pixi.js/filters';
  import 'pixi.js/sprite-tiling';
  import 'pixi.js/text';
  import 'pixi.js/text-bitmap';
  import 'pixi.js/text-html';
  import 'pixi.js/graphics';
  import 'pixi.js/mesh';
  import 'pixi.js/sprite-nine-slice';

  // not added by default, everyone needs to import these manually
  import 'pixi.js/advanced-blend-modes';
  import 'pixi.js/unsafe-eval';
  import 'pixi.js/prepare';
  import 'pixi.js/math-extras';
  import 'pixi.js/dds';
  import 'pixi.js/ktx';
  import 'pixi.js/ktx2';
  import 'pixi.js/basis';

  import { Application } from 'pixi.js';

  const app = new Application();

  await app.init({
      manageImports: false, // disable importing the above extensions
  });

アプリケーションを初期化するときに、自動インポート機能を無効にして、PixiJS が拡張機能を自動的にインポートしないようにすることができます。上記のように、手動でインポートする必要があります。

また、`pixi.js/text-bitmap` は `Assets` 読み込み機能も追加することに注意してください。したがって、レンダラーを初期化する**前**にビットマップフォントを読み込みたい場合は、この拡張機能をインポートする必要があります。

  import 'pixi.js/text-bitmap';
  import { Assets, Application } from 'pixi.js';

  await Assets.load('my-font.fnt'); // If 'pixi.js/text-bitmap' is not imported, this will not load
  await new Application().init();

**非同期初期化**

PixiJS は désormais 非同期で初期化する必要があります。WebGPU レンダラーの導入により、PixiJS は使用する前に待機する必要があります

以前

import { Application } from 'pixi.js';

const app = new Application();

// do pixi things

現在

import { Application } from 'pixi.js'

const app = new Application();

(async () => {
    await app.init({
        // application options
    });

    // do pixi things
})()

この変更により、`ApplicationOptions` オブジェクトはコンストラクターではなく `init` 関数に渡すことができるようになりました。

**テクスチャの調整**

テクスチャ構造は、v7 で舞台裏でかなり混乱していたものを簡素化するために変更されました。テクスチャはもはやリソースの読み込みを認識または管理しません。これは、ユーザーまたはアセットマネージャーによって事前に実行する必要があります。テクスチャは完全にロードされたリソースのみを想定しています。これにより、テクスチャの検証は基本的に構築時に行うことができ、そのままにしておくことができるため、管理がはるかに簡単になります。BaseTexture はもはや存在しません。代わりに、さまざまな TextureSource が利用可能です。テクスチャソースは、テクスチャの設定と、そのテクスチャをアップロードして使用する方法を組み合わせたものです。 v8 には以下のテクスチャソースがあります

TextureSource - レンダリングしたり、好きなようにアップロードできるバニラテクスチャ。(主にレンダーテクスチャで使用されます) ImageSource - ある種のイメージリソース (ImageBitmap や html イメージなど) を含むテクスチャソース CanvasSource - キャンバスを含むキャンバスソース。主にキャンバスのレンダリングまたはキャンバスへのレンダリングに使用されます (webGPU) VideoSource - ビデオを含むテクスチャソース。 GPU 上のテクスチャの更新を処理して、同期を維持します。 BufferSource - バッファを含むテクスチャソース。本当に何でも！バッファタイプと形式に互換性があることを確認してください！ CompressedSource - 圧縮テクスチャを処理するテクスチャソース。 GPU 圧縮テクスチャ形式で使用されます。

`Assets` はほとんどの場合テクスチャを返しますが、独自に作成することもできます。もっと力を込めて！

テクスチャソースを作成するためのシグネチャは baseTexture とは異なります。例

const image = new Image();

image.onload = function(){

  // create a texture source
  const source = new ImageSource({
    resource: image,
  });

  // create a texture
  const texture = new Texture({
    source
  });
}

image.src = 'myImage.png';

**グラフィック API のオーバーホール**

グラフィック API にはいくつかの重要な変更があります。実際、これはおそらく v8 で最も変更された部分です。可能な限り非推奨を追加しましたが、以下は変更の概要です

• 塗りつぶしまたはストロークを開始してからシェイプを作成する代わりに、v8 ではシェイプを作成してからストローク/塗りつぶしを行うように求められます。 `Line` という用語は `Stroke` という用語に置き換えられました

以前

// red rect
const graphics = new Graphics()
  .beginFill(0xFF0000)
  .drawRect(50, 50, 100, 100)
  .endFill();

// blur rect with stroke
const graphics2 = new Graphics()
  .lineStyle(2, 'white')
  .beginFill('blue')
  .circle(530, 50, 140, 100)
  .endFill();

現在

// red rect
const graphics = new Graphics()
  .rect(50, 50, 100, 100)
  .fill(0xFF0000);


// blur rect with stroke
const graphics2 = new Graphics()
  .rect(50, 50, 100, 100)
  .fill('blue')
  .stroke({width:2, color:'white'});

• シェイプ関数の名前が変更されました。各描画関数は、その名前の短いバージョンに簡略化されています。ただし、パラメータは同じです

v7 API 呼び出し	v8 API 相当
drawChamferRect	chamferRect
drawCircle	circle
drawEllipse	ellipse
drawFilletRect	filletRect
drawPolygon	poly
drawRect	rect
drawRegularPolygon	regularPoly
drawRoundedPolygon	roundPoly
drawRoundedRect	roundRect
drawRoundedShape	roundShape
drawStar	star

• 塗りつぶし関数は、パラメーターの文字列ではなく、`FillStyle` オプションまたは色を想定しています。これは `beginTextureFill` も置き換えます

以前

  const rect = new Graphics()
    .beginTextureFill({texture:Texture.WHITE, alpha:0.5, color:0xFF0000})
    .drawRect(0, 0, 100, 100)
    .endFill()
    .beginFill(0xFFFF00, 0.5)
    .drawRect(100, 0, 100, 100)
    .endFill();

現在

  const rect = new Graphics()
   .rect(0, 0, 100, 100)
   .fill({texture:Texture.WHITE, alpha:0.5, color:0xFF0000})
   .rect(100, 0, 100, 100)
   .fill({color:0xFFFF00, alpha:0.5});

• ストローク関数は、パラメーターの文字列ではなく、`StrokeStyle` オプションまたは色を想定しています。これは `lineTextureStyle` も置き換えます**以前:**

  const rect = new Graphics()
    .lineTextureStyle({texture:Texture.WHITE, width:10, color:0xFF0000})
    .drawRect(0, 0, 100, 100)
    .endFill()
    .lineStyle(2, 0xFEEB77);
    .drawRect(100, 0, 100, 100)
    .endFill();

現在

  const rect = new Graphics()
   .rect(0, 0, 100, 100)
   .stroke({texture:Texture.WHITE,  width:10, color:0xFF0000})
   .rect(100, 0, 100, 100)
   .stroke({color:0xFEEB77, width:2});

• 穴は désormais 新しい `cut` 関数を使用します。 `stroke` や `fill` と同様に、`cut` は前のシェイプに作用します。 **以前:**

  const rectAndHole = new Graphics()
    .beginFill(0x00FF00)
    .drawRect(0, 0, 100, 100)
    .beginHole()
    .drawCircle(50, 50, 20)
    .endHole()
    .endFill();

現在

  const rectAndHole = new Graphics()
   .rect(0, 0, 100, 100)
   .fill(0x00FF00)
   .circle(50, 50, 20)
   .cut();

• `GraphicsGeometry` は `GraphicsContext` に置き換えられました。これにより、`Graphics` データをより効率的に共有できます。

以前

  const rect = new Graphics()
  .beginFill(0xFF0000)
  .drawRect(50, 50, 100, 100)
  .endFill();

  const geometry = rect.geometry;

  const secondRect = new Graphics(geometry);

現在

  const context = new GraphicsContext()
    .rect(50, 50, 100, 100)
    .fill(0xFF0000);

  const rect = new Graphics(context);
  const secondRect = new Graphics(context);

シェーダーの変更

WebGL と WebGPU の両方のシェーダーに対応する必要があるため、それらの構築方法がこれを考慮して調整されました.主な違いは(これはシェーダー全般に当てはまります)、テクスチャがもはやユニフォームとは見なされないことです(ユニフォームグループに含めることができないため)。代わりに、リソースの概念があります。リソースには、次のようないくつかのものがあります

• TextureSource - ソーステクスチャ `myTexture.source`
• TextureStyle - テクスチャスタイル `myTexture.style`
• UniformGroup - 数値ベースのユニフォームのコレクション `myUniforms = new UniformGroup({})`
• BufferResource - ユニフォームグループとして扱われるバッファ (上級)

WebGL 専用シェーダーの作成は désormais このようになります

以前

const shader = PIXI.Shader.from(vertex, fragment, uniforms);

現在

WebGL のみ

const shader = Shader.from({
    gl: { vertex, fragment },
    resources, // resource used from above including uniform groups
});

WebGL と WebGPU

const shader = Shader.from({
    gl: { vertex, fragment },
    gpu: {
        vertex: {
            entryPoint: 'mainVert',
            source,
        },
        fragment: {
            entryPoint: 'mainFrag',
            source,
        },
    },
    resources, // resource used from above including uniform groups
});

ユニフォームの構築方法も少し異なります。それらを作成するときに、 désormais は必要な変数の型を提供します.

以前

const uniformGroup = new UniformGroup({
  uTime:1,
});

uniformGroup.uniforms.uTime = 100;

現在

const uniformGroup = new UniformGroup({
  uTime:{value:1, type:'f32',
});

uniformGroup.uniforms.uTime = 100; // still accessed the same!

この新しい設定を完全に理解し、使いこなすための最良の方法は、メッシュとシェーダーの例を確認することです

**以前**: v7 の例 **現在**: v8 の例

フィルター

カスタムフィルターを構築していない限り、フィルターの動作はほぼ同じです。この場合、上記のシェーダーの変更を考慮する必要があります。

以前

  const filter = new Filter(vertex, fragment, {
      uTime: 0.0,
  });

現在

    const filter = new Filter({
        glProgram: GlProgram.from({
            fragment,
            vertex,
        }),
        resources: {
            timeUniforms: {
                uTime: { value: 0.0, type: 'f32' },
            },
        },
    });

**以前**: v7 の例 **現在**: v8 の例

コミュニティフィルター を使用している場合、`@pixi/filter-*` パッケージは v8 ではもはやメンテナンスされていないことに注意してください。ただし、`pixi-filters` パッケージからサブモジュールとして直接インポートできます.

*以前

import { AdjustmentFilter } from '@pixi/filter-adjustment';

*現在

import { AdjustmentFilter } from 'pixi-filters/adjustment';

---

ParticleContainer

`ParticleContainer` は v8 で以前よりもはるかに多くのパーティクルを許可するように作り直されました.注意すべき点がいくつかあります

`ParticleContainer` はもはやスプライトを子として受け入れません。代わりに、次のインターフェースに従う `Particle` クラス (または `IParticle` インターフェースを実装するオブジェクト) が必要です

export interface IParticle
{
    x: number;
    y: number;
    scaleX: number;
    scaleY: number;
    anchorX: number;
    anchorY: number;
    rotation: number;
    color: number;
    texture: Texture;
}

この変更の理由は、スプライトには、多数のパーティクルを扱う際には一般的に不要な多くの追加のプロパティとイベントが付属しているためです。このアプローチは、「スプライトがフィルターで動作しないのはなぜか」や「スプライトに子をネストできないのはなぜか」など、v7 で抱えていたあいまいさを明確に取り除きます.少し予測しやすいです。さらに、パーティクルの軽量な性質により、はるかに多くのパーティクルをレンダリングできます.

そのため、機能は失われません。API の調整だけで、パフォーマンスが大幅に向上します.

パーティクルは、技術的にはシーングラフの一部ではないため（パフォーマンス上の理由から）、ParticleContainer の children 配列には格納されません。代わりに、ParticleContainer クラスの一部である particleChildren と呼ばれるフラットリストに格納されます。追加の速度のためにこの配列を直接変更することも、addParticle および removeParticle メソッドを使用してパーティクルを管理することもできます。

もう1つの最適化は、ParticleContainer が独自のバウンズを計算しないことです。そうすることで、私たちが実現したパフォーマンスの向上を無効にしてしまうからです！代わりに、ParticleContainer を初期化するときに boundsArea を提供するのはあなた次第です。

---

以前

const container = new ParticleContainer();

for (let i = 0; i < 100000; i++) {
    const particle = new Sprite(texture);
    container.addChild(particle);
}

現在

const container = new ParticleContainer();

for (let i = 0; i < 100000; i++) {
    const particle = new Particle(texture);
    container.addParticle(particle);
}

バウンズエリアあり

const container = new ParticleContainer({
  boundsArea:new Rectangle(0,0,500,500)
});

その他の破壊的変更

• DisplayObject は削除されました。Container が、すべての PixiJS オブジェクトの基本クラスになりました。

• ノードにレンダリングロジックが含まれなくなったため、updateTransform は削除されました。

  多くの人がこの関数を使用して毎フレームカスタムロジックを実行していたことを認識しているため、この目的で使用できる新しい onRender 関数を追加しました。

  以前

  class MySprite extends Sprite {
      constructor() {
          super();
          this.updateTransform();
      }
  
      updateTransform() {
          super.updateTransform();
          // do custom logic
      }
  }

  現在

  class MySprite extends Sprite {
      constructor() {
          super();
          this.onRender = this._onRender.bind(this);
      }
  
      _onRender() {
          // do custom logic
      }
  }

• ミップマップ生成の変更

  • BaseTexture の mipmap プロパティの名前が autoGenerateMipmaps に変更されました。
  • RenderTextures のミップマップが調整され、開発者がミップマップの更新を担当するようになりました。ミップマップの生成はコストがかかる可能性があり、テクスチャを処理する新しいリアクティブな方法のため、必要がないときに誤ってミップマップを生成したくありません。

const myRenderTexture = RenderTexture.create({width:100, height:100, autoGenerateMipmaps:true});

// do some rendering..
renderer.render({target:myRenderTexture, container:scene});

// now refresh mipmaps when you are ready
myRenderTexture.source.updateMipmaps();

• PixiJS が内部的に物事を処理する新しい方法のため、スプライトはテクスチャの UV が変更された場合に通知されなくなりました。ベストプラクティスは、テクスチャを作成したら UV を変更しないことです。（テクスチャの作成と保存は安価です）
• 場合によっては、UV をアニメーション化する特別な手法を採用したい場合があります。この最後のインスタンスでは、スプライトの更新を担当します（新しい最適化により、これは保証されませんが、自動的に更新される可能性があることに注意してください）。ただし、ソースデータ（ビデオテクスチャなど）の更新は常にすぐに反映されます。

const texture = await Assets.load('bunny.png');
const sprite = new Sprite(texture);

texture.frame.width = texture.frame.width/2;
texture.update();

// guarantees the texture changes will be reflected on the sprite
sprite.onViewUpdate();


// alternatively you can hooke into the sprites event
texture.on('update', ()=>{sprite.onViewUpdate});

スプライトのテクスチャが変更されたときにイベントを追加および削除する行為は、特に多くのテクスチャを交換する場合（キーフレームテクスチャをたくさん交換するシューティングゲームを想像してください）、許容できないパフォーマンスの低下につながりました。そのため、この責任をユーザーに委ねています。

• 新しいコンテナカリングアプローチ

  このバージョンの PixiJS では、コンテナの cullable プロパティの動作を変更しました。以前は、レンダリングループ中にカリングが自動的に行われていました。しかし、このロジックを削除し、ユーザーがカリングのタイミングを制御できるようにしました。

  この変更に伴い、いくつかの新しいプロパティが追加されました。

  • cullable - コンテナをカリングできるかどうか
  • cullArea - コンテナのバウンズの代わりに使用されるカリングエリア
  • cullableChildren - コンテナの子をカリングできるかどうか。これは、大きなシーンの最適化に役立ちます

  現在

  const container = new Container();
  const view = new Rectangle(0, 0, 800, 600);
  
  container.cullable = true;
  container.cullArea = new Rectangle(0,0,400,400);
  container.cullableChildren = false;
  
  Culler.shared.cull(myContainer, view);
  renderer.render(myContainer);

  また、古い動作をシミュレートしたい場合に、毎フレーム Culler.shared.cull を自動的に呼び出すために使用できる CullerPlugin もあります。

  import {extensions, CullerPlugin} from 'pixi.js'
  extensions.add(CullerPlugin)

• いくつかのメッシュクラスの名前を変更しました

  • SimpleMesh -> MeshSimple に名前変更
  • SimplePlane -> MeshPlane に名前変更
  • SimpleRope -> MeshRope に名前変更

• Assets の非推奨は削除されました

  以前

  import { Assets } from 'pixi.js';
  
  Assets.add('bunny', 'bunny.png');

  現在

  import { Assets } from 'pixi.js';
  
  Assets.add({ alias: 'bunny', src: 'bunny.png' });

• settings オブジェクトは削除されました

  以前

  import { settings, BrowserAdapter } from 'pixi.js';
  
  settings.RESOLUTION = 1;
  settings.FAIL_IF_MAJOR_PERFORMANCE_CAVEAT = false;
  settings.ADAPTER = BrowserAdapter;

  現在

  import { AbstractRenderer, DOMAdapter, BrowserAdapter } from 'pixi.js';
  
  // Can also be passed into the renderer directly e.g `autoDetectRenderer({resolution: 1})`
  AbstractRenderer.defaultOptions.resolution = 1;
  
  // Can also be passed into the renderer directly e.g `autoDetectRenderer({failIfMajorPerformanceCaveat: false})`
  AbstractRenderer.defaultOptions.failIfMajorPerformanceCaveat = false;
  
  // See below for more information about changes to the adapter
  DOMAdapter.set(BrowserAdapter);

• アダプターと Web ワーカーの変更

  • settings.ADAPTER は削除され、DOMAdapter に置き換えられました

    • DOMAdapter は、アプリケーション全体のアダプターを設定するために使用できる静的クラスです
    • PixiJS には、BrowserAdapter と WebWorkerAdapter の 2 つのアダプターが組み込まれています
      • BrowserAdapter はデフォルトのアダプターであり、ブラウザで実行するときに使用されます
      • WebWorkerAdapter は、Web ワーカーで実行するときに使用されます

    以前

    import { settings, WebWorkerAdapter } from 'pixi.js';
    
    settings.ADAPTER = WebWorkerAdapter;
    settings.ADAPTER.createCanvas();

    現在

    import { DOMAdapter, WebWorkerAdapter } from 'pixi.js';
    
    DOMAdapter.set(WebWorkerAdapter);
    DOMAdapter.get().createCanvas();

• @Zyie によるアプリケーションタイプは、https://github.com/pixijs/pixijs/pull/9740 で view の代わりに Renderer を受け入れるようになりました

  これは、app.renderer を正しく入力できるようにするためです

  以前

  const app = new Application<HTMLCanvasElement>();

  現在

  // WebGL or WebGPU renderer
  const app = new Application<Renderer<HTMLCanvasElement>>();
  // WebGL specific renderer
  const app = new Application<WebGLRenderer<HTMLCanvasElement>>();
  // WebGPU specific renderer
  const app = new Application<WebGPURenderer<HTMLCanvasElement>>();

• Texture.from は、URL からテクスチャを読み込まなくなりました。

  Texture.from を使用する場合、CanvasSource/ImageSource/VideoSource などのソース、または HTMLImageElement/HTMLCanvasElement/HTMLVideoElement などのリソース、または Assets.load を介してロードされた文字列を渡す必要があります

  以前

  import { Texture } from 'pixi.js';
  
  const texture = Texture.from('https://i.imgur.com/IaUrttj.png');

  現在

  import { Assets, Texture } from 'pixi.js';
  
  await Assets.load('https://i.imgur.com/IaUrttj.png');
  const texture = Texture.from('https://i.imgur.com/IaUrttj.png');

• Ticker のコールバックは、デルタ時間の代わりに Ticker インスタンスを渡すようになりました。これは、使用される時間単位をより細かく制御できるようにするためです。

  以前

  Ticker.shared.add((dt)=> {
      bunny.rotation += dt
  });

  現在

  Ticker.shared.add((ticker)=> {
      bunny.rotation += ticker.deltaTime;
  });

• テキストパーサーの名前が変更されました

  • TextFormat -> bitmapFontTextParser
  • XMLStringFormat -> bitmapFontXMLStringParser
  • XMLFormat -> bitmapFontXMLParser

• デフォルトの eventMode は、auto ではなく passive になりました

• utils は削除されました。すべての関数は直接インポートとして使用できます。

  以前

  import { utils } from 'pixi.js';
  
  utils.isMobile.any();

  現在

  import { isMobile } from 'pixi.js';
  
  isMobile.any();

• container.getBounds() は、Rectangle オブジェクトの代わりに Bounds オブジェクトを返すようになりました。代わりに container.getBounds().rectangle を使用して四角形にアクセスできます。

  以前

  const bounds = container.getBounds();

  現在

  const bounds = container.getBounds().rectangle;

3. 非推奨の機能

PixiJS v7 の特定の機能は、v8 で非推奨になりました。引き続き機能しますが、新しい代替手段を使用するようにコードを更新することをお勧めします。置き換える対象の詳細については、非推奨の機能セクションを参照してください。

• リーフノードは子ノードを許可しなくなりました

  Containers のみが子を持つことができます。これは、Sprite、Mesh、Graphics などが子を持つことができなくなったことを意味します。

  古い動作を複製するには、Container を作成してリーフノードを追加します。

  以前

  const sprite = new Sprite();
  const spriteChild = new Sprite();
  sprite.addChild(spriteChild);

  現在

  const container = new Container();
  const sprite = new Sprite();
  const spriteChild = new Sprite();
  
  container.addChild(sprite);
  container.addChild(spriteChild);

• Application.view は Application.canvas に置き換えられました

  以前

  const app = new Application({ view: document.createElement('canvas') });
  document.body.appendChild(app.view);

  現在

  const app = new Application();
  await app.init({ view: document.createElement('canvas') });
  document.body.appendChild(app.canvas);

• NineSlicePlane は NineSliceSprite に名前変更されました

• SCALE_MODES は ScaleMode 文字列に置き換えられました

  • SCALE_MODES.NEAREST -> 'nearest',
  • SCALE_MODES.LINEAR -> 'linear',

• WRAP_MODES は WrapMode 文字列に置き換えられました

  • WRAP_MODES.CLAMP -> 'clamp-to-edge',
  • WRAP_MODES.REPEAT -> 'repeat',
  • WRAP_MODES.MIRRORED_REPEAT -> 'mirror-repeat',

• DRAW_MODES は Topology 文字列に置き換えられました

  • DRAW_MODES.POINTS -> 'point-list',
  • DRAW_MODES.LINES -> 'line-list',
  • DRAW_MODES.LINE_STRIP -> 'line-strip',
  • DRAW_MODES.TRIANGLES -> 'triangle-list',
  • DRAW_MODES.TRIANGLE_STRIP -> 'triangle-strip',

• コンストラクターは、複数の引数の代わりにオブジェクトを受け入れるように大幅に変更されました

  以前

  const blurFilter = new BlurFilter(8, 4, 1, 5);
  const displacementFilter = new DisplacementFilter(sprite, 5);
  const meshGeometry = new MeshGeometry(vertices, uvs, index);
  const mesh = new Mesh(geometry, shader, state, drawMode);
  const plane = new PlaneGeometry(width, height, segWidth, segHeight);
  const nineSlicePlane = new NineSlicePlane(texture, leftWidth, topHeight, rightWidth, bottomHeight);
  const tileSprite = new TileSprite(texture, width, height);
  const text = new Text('Hello World', style);
  const bitmapText = new BitmapText('Hello World', style);
  const htmlText = new HTMLText('Hello World', style);

  現在

  const blurFilter = new BlurFilter({
      blur: 8,
      quality: 4,
      resolution: 1,
      kernelSize: 5,
  });
  const displacementFilter = new DisplacementFilter({
      sprite,
      scale: 5,
  });
  const meshGeometry = new MeshGeometry({
      positions: vertices,
      uvs,
      indices: index,
      topology: 'triangle-list';
      shrinkBuffersToFit: boolean;
  });
  const mesh = new Mesh({
      geometry
      shader
      texture
  });
  const plane = new PlaneGeometry({
      width,
      height,
      verticesX: segWidth,
      verticesY: segHeight,
  });
  const nineSliceSprite = new NineSliceSprite({
      texture,
      leftWidth,
      topHeight,
      rightWidth,
      bottomHeight,
  });
  const tileSprite = new TileSprite({
      texture,
      width,
      height,
  });
  const text = new Text({
      text: 'Hello World',
      style,
  });
  const bitmapText = new BitmapText({
      text:'Hello World',
      style,
  });
  const htmlText = new HTMLText({
      text:'Hello World',
      style,
  });

• container.name は container.label になりました

4. リソース

• PixiJS v8 リリースノート
• PixiJS Discord
• PixiJS 問題