Question

我想在多个场景中重用资产，但出现此错误：

Texture key already in use

这是相关的代码。请注意，我想在两个场景中使用相同的Spritesheet。我该怎么办却没有收到此错误？

class InventoryScene extends Phaser.Scene {
    constructor() {
        super({ key: 'InventoryScene', active: true });
    }
    preload() {
        this.load.spritesheet('sheet1', 'assets/sheet1.png', 
            { frameWidth: 16, frameHeight: 16 });
    }
    create() {
        this.add.sprite(this.game.canvas.width * .50, 
                this.game.canvas.height * .50, 'sheet1')
            .setFrame(0)
            .setInteractive()
            .on('pointerdown', () => this.zoomIn())
            .setScale(6);
    }
}
class GameScene extends Phaser.Scene {
    constructor() {
        super({ key: 'GameScene', active: true });
    }
    preload() {
        this.load.spritesheet('sheet1', 'assets/sheet1.png', 
            { frameWidth: 16, frameHeight: 16 });
    }
    create() {
        this.add.sprite(this.game.canvas.width * .50, this
                .game.canvas.height * .50, 'sheet1')
            .setFrame(0)
            .setVisible(false);
    }
}

这是我的游戏配置：

var config = {
    ...
    // Order here matters.  The first scene is listed last.
    scene: [DebugScene, InventoryScene, GameScene, HowToPlayScene, TitleScene]
};

然后我使用this.scene.bringToTop('HowToPlayScene')激活一个场景。

PS：我正在使用Phaser 3

Answer 1

我使用Phaser v3.17为您创建了修改后的示例。

复制复制下面的代码，并替换页面中存在的代码。点击屏幕顶部的“运行代码”按钮，可能需要等待5-10秒： https://labs.phaser.io/edit.html?src=src/scenes/changing%20scene.js

场景将通过单击第一个场景和其他循环场景来更改。注意仅在第一个场景中加载的“面部”和“球”精灵表以及this.scene.start（'sceneB'）;

var SceneA = new Phaser.Class({

    Extends: Phaser.Scene,

    initialize:

    function SceneA() {
        Phaser.Scene.call(this, { key: 'sceneA' });
    },

    preload: function () {
        this.load.image('face', 'assets/pics/bw-face.png');
        this.load.spritesheet('balls', 'assets/sprites/balls.png', { frameWidth: 17, frameHeight: 17 });
    },

    create: function () {
        this.add.sprite(400, 300, 'face').setAlpha(0.2);
        this.add.sprite(400, 300, 'balls', 3);
        this.input.once('pointerdown', function () {

            console.log('From SceneA to SceneB');

            this.scene.start('sceneB');

        }, this);
    }

});

var SceneB = new Phaser.Class({

    Extends: Phaser.Scene,

    initialize:

    function SceneB() {
        Phaser.Scene.call(this, { key: 'sceneB' });
    },

    preload: function () {
        this.load.image('arrow', 'assets/sprites/longarrow.png');
    },

    create: function () {

        this.add.sprite(400, 300, 'face').setAlpha(1);
        this.arrow = this.add.sprite(400, 300, 'arrow').setOrigin(0, 0.5);
        this.add.sprite(400, 300, 'balls', 3);
        this.input.once('pointerdown', function (event) {

            console.log('From SceneB to SceneC');

            this.scene.start('sceneC');

        }, this);
    },

    update: function (time, delta) {
        this.arrow.rotation += 0.01;
    }

});

var SceneC = new Phaser.Class({

    Extends: Phaser.Scene,

    initialize:

    function SceneC() {
        Phaser.Scene.call(this, { key: 'sceneC' });
    },

    preload: function () {
        this.load.image('mech', 'assets/pics/titan-mech.png');
    },

    create: function () {
        this.add.sprite(Phaser.Math.Between(0, 800), 300, 'mech');
        this.add.sprite(400, 300, 'balls', 3);
        this.input.once('pointerdown', function (event) {

            console.log('From SceneC to SceneA');

            this.scene.start('sceneA');

        }, this);
    }

});

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#000000',
    parent: 'phaser-example',
    scene: [SceneA, SceneB, SceneC]
};

var game = new Phaser.Game(config);

如何在多个场景中重用资产

1 个答案: