Phaser缓存加载问题

Question

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

Phaser.Cache.getImage: Key "background0" not found in Cache.

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

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

Answer 2

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() 不够快时，将在加载 JSON 文件之前调用 create()，从而导致错误。

Phaser缓存加载问题

Phaser cache loading problems

javascript

phaser-framework