【Pixi.js】ver4と最新版の書き方が違いすぎて諦めた話

はじめに
Pixi.jsのver4と最新版(ver8)の記載の違い
まとめ

はじめに

引き続きPixi.jsでゲームを作っています。

忘れやすいので学んだことを記録しようと思ったのですが、いま触っているもの(ver4)と、最新版(ver8)では記述の仕方が全然違う！
これでは最新版を使っている他の人の役には立てなそうです。
まぁいっか！自分に向けて書こう。

ということで、Pixi.jsのバージョンによる記載の違いについてのメモです。

Pixi.jsのver4と最新版(ver8)の記載の違い

いま触っているもの(ver4)

5円玉を表示するサンプル(ver4)

上記のリンクにPixi.jsのver4で5円玉のpngファイルを表示するスクリプトを書きました。
ソースは下記のとおりです。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Asepriteアニメーション Pixi.js</title>
    <script src="../../pixi.min.js"></script>
</head>

<body style="margin: 0; overflow: hidden;">
    <script>
        // Pixi.jsのアプリケーションを作成
        const app = new PIXI.Application({
            width: 360,
            height: 548,
            backgroundColor: 0xcccccc,  // 背景色を設定
        })
        // appをbodyに追加
        document.body.appendChild(app.view);

        // loaderでファイルを読み込む
        PIXI.loader
            .add('goen', 'goen.png')
            .load(onAssetsLoaded);          // ロード後に実行される処理

        // ロード後に実行される処理
        function onAssetsLoaded(loader, resources) {
            // スプライトを定義
            const spriteG = PIXI.Sprite.from(resources.goen.texture);
            spriteG.anchor.set(0.5);            // 中心位置
            spriteG.x = app.screen.width / 2;   // x座標：画面サイズ横の半分
            spriteG.y = app.screen.height / 2;  // y座標：画面サイズ縦の半分
            spriteG.scale.x = 4;                  // 画像を横幅4倍の大きさで表示
            spriteG.scale.y = 4;                  // 画像を縦幅4倍の大きさで表示
            app.stage.addChild(spriteG);        // 画面に表示
        }

    </script>
</body>

</html>

最新版(ver8)

5円玉を表示するサンプル(ver8)

上記のリンクにPixi.jsのver8で5円玉のpngファイルを表示するスクリプトを書きました。
見た目はさきほどのver4と全く一緒ですよね。
そしてソースは下記のとおりです。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Asepriteアニメーション Pixi.js</title>
    <script src="./v8/pixi.min.js"></script>
</head>

<body style="margin: 0; overflow: hidden;">
    <script>
        // Pixi.jsのアプリケーションを作成
        const app = new PIXI.Application()
        app
            // 最初に初期化をする必要があるみたい
            .init({
                width: 360,
                height: 548,
                backgroundColor: 0xcccccc,  // 背景色を設定
            })
            // 初期化完了後にappをbodyに追加しないとエラーになる
            .then(async () => {
                // canvas要素をbodyに追加
                document.body.appendChild(app.view);

                // loaderではなくAssetsでファイルを読み込む
                await PIXI.Assets.add({ alias: 'goen', src: 'goen.png' });

                // Assetsのロードをして変数に入れる
                const texturesPromise = PIXI.Assets.load(['goen']);

                // ロードが完了したら中の処理を実行する
                texturesPromise.then((textures) => {
                    // スプライトを定義
                    const spriteG = PIXI.Sprite.from(textures.goen);

                    spriteG.anchor.set(0.5);            // 中心位置
                    spriteG.x = app.screen.width / 2;   // x座標：画面サイズ横の半分
                    spriteG.y = app.screen.height / 2;  // y座標：画面サイズ縦の半分
                    spriteG.scale = 4;                  // 画像を4倍の大きさで表示(scale.x, scale.yはなくなったっぽい？)
                    app.stage.addChild(spriteG);        // 画面に表示
                });

            });

    </script>
</body>

</html>

ざっくり違い

全然違う！別のライブラリを使っているかのように違う。

最初のbodyにcanvasを追加する記載から違うため、ver4用に作ったスクリプトを最新版(ver8)のPixi.jsで動かそうとすると、下記のようなエラーがでます。
＞Uncaught TypeError: Cannot read properties of undefined (reading 'canvas')

最新版では定義したappに対して、「.init({})」内にサイズや背景色を記載してから、「.then(async()=>{})」で初期化完了後にbodyにcanvasを追加する必要があります。

        // Pixi.jsのアプリケーションを作成
        const app = new PIXI.Application()
        // appについて
        app
            // 最初に初期化をする必要があるみたい
            .init({
                width: 360,
                height: 548,
                backgroundColor: 0xcccccc,  // 背景色を設定
            })
            // 初期化完了後にappをbodyに追加しないとエラーになる
            .then(async () => {
                // canvas要素をbodyに追加
                document.body.appendChild(app.view);
            });

画像を表示するのも、ファイルをロードする処理が別物になりました。

ver4では「PIXI.loader」の「.add(‘goen’, ‘goen.png’)」でファイルを読み込み、読み込み完了後に実行する処理を「.load(onAssetsLoaded)」のように記載していました。

ver8では「PIXI.Assets」の「.add({ alias: ‘goen’, src: ‘goen.png’ })」でファイルを読み込み、読み込み完了後に実行される処理は「.load([‘goen’]).then((textures) => { //ここに記載})」みたいに記載するみたいです。
（また、前段の処理のasync()内に記載しているため、PIXI.Assetsを読み込む際にawaitをつけないとエラーになるとか。罠が多い。）

               // loaderではなくAssetsでファイルを読み込む
                await PIXI.Assets.add({ alias: 'goen', src: 'goen.png' });

                // Assetsのロードをして変数に入れる
                const texturesPromise = PIXI.Assets.load(['goen']);

                // ロードが完了したら中の処理を実行する
                texturesPromise.then((textures) => {
                    // スプライトを定義
                    const spriteG = PIXI.Sprite.from(textures.goen);

                    spriteG.anchor.set(0.5);            // 中心位置
                    spriteG.x = app.screen.width / 2;   // x座標：画面サイズ横の半分
                    spriteG.y = app.screen.height / 2;  // y座標：画面サイズ縦の半分
                    spriteG.scale = 4;                  // 画像を4倍の大きさで表示(scale.x, scale.yはなくなったっぽい？)
                    app.stage.addChild(spriteG);        // 画面に表示
                });

また、スプライトの定義についても微妙に違いがあります。
画像を拡大する場合、ver4ではscale.xとscale.yで縦・横それぞれの倍率を記載して設定していましたが、ver8ではscaleで縦・横の倍率を一度に記載して設定するみたいです。逆に縦だけ何倍とかできなくなったのかしら。やり方が分からなかった。