Phaser 缓存加载问题

Question

我正在使用 Phaser 制作游戏。我正在加载背景图像，其信息（文件位置）存储在 JSON 文件中。当我尝试加载它时，背景是黑色和空的，在控制台中我得到：

Phaser.Cache.getImage：在缓存中找不到键“background0”。

这是我的代码中的相关摘录：

function create() {

    //>Load JSON file and background images found inside the file
    $.getJSON("levels.json", function(json) {
        for (var i = 0; i < json.levels.length; i++) {
            game.load.image('background' + i.toString(), json.levels[i].background);
        }
        game.load.start();
   });

    back_layer = game.add.group();
    var i = 0;
    var level_finished = 0;

    $.getJSON("levels.json", function(json) {
        if (i < json.levels.length) {
            console.log("Level " + (i + 1).toString());
            var current_background = back_layer.create(0, 0, 'background' + i.toString());

            check = setInterval(function() {
                if (level_finished == 1) {
                    i++;
                    current_background.destroy();
                    clearInterval(check);
                }
            }, 500)
        }
    });
}

这是 JSON 文件：

{"levels":[
    {
        "background": "assets/img/Back.png",
        "portals": [
            {
                "locationX": 400,
                "locationY": 450,
                "toX": 100,
                "toY": 200,
                "spinSpeed": 1
            },
            {
                "locationX": 50,
                "locationY": 200,
                "toX": 100,
                "toY": 450,
                "spinSpeed": 2
            }
        ]
    }
]}

用Chrome、Firefox、Opera测试，每次打开页面，好像都是随机报错，或者加载后台运行正常。我正在使用 WAMP 在本地托管页面。

Answer 1

Phaser 加载资产（JSON、图像等）的方式是使用 preload 函数（或您为此指定的函数）中的 game.load.* API。在你的情况下，代码应该是：

// Use your game instance here
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create });

function preload() {
    // Load JSON file describing the level
    game.load.json('levels', 'levels.json');
}

// The function below will be automatically invoked by Phaser when
// the assets in the preload() function finished loading
function create() {
    var json = game.cache.getJSON('levels');

    // Enque the load of the background images found inside the level file
    for (var i = 0; i < json.levels.length; i++) {
        game.load.image('background' + i.toString(), json.levels[i].background);
    }

    // Specify loadComplete() as a callback to be called when all assets finished loading
    game.load.onLoadComplete.add(loadComplete, this);

    // Load the newly enqued assets
    game.load.start();
}

// The function below will be automatically invoked by Phaser when
// the assets in the create() function finished loading
function loadComplete() {
    var json = game.cache.getJSON('levels');

    back_layer = game.add.group();
    var i = 0;
    var level_finished = 0;

    if (i < json.levels.length) {
        console.log("Level " + (i + 1).toString());
        var current_background = back_layer.create(0, 0, 'background' + i.toString());

        check = setInterval(function() {
            if (level_finished == 1) {
                i++;
                current_background.destroy();
                clearInterval(check);
            }
        }, 500)
    }
}

您有随机行为的原因（有时可以正常工作，有时不能）是因为您使用 jQuery ($.getJSON()) 而不是 Phaser 内置系统来加载 JSON 文件。

由于 jQuery 与 Phaser 无关，它们不同步（在调用期间也不排序）。因此，有时$.getJSON() 会以足够快的速度加载 JSON 文件，以便在调用 Phaser 的 create() 方法时做好准备。在这种情况下，一切都按预期工作。当$.getJSON() 不够快时，create() 将在 JSON 文件加载之前被调用，从而导致错误。

Answer 2

在 Phaser 中加载资产是异步的，如果您在请求加载某些内容后立即尝试访问某些内容，则会以这种方式失败。将预加载逻辑移动到 preload()（Phaser.State 的另一种方法，就像 create()） - Phaser 将确保在调用您的 create() 方法时，preload() 中请求的所有内容都将被加载。