Question

我正在使用移相器制作游戏。我正在加载背景图像，其信息（文件位置）存储在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，图像等）是使用game.load.*函数中的preload 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()，从而导致错误。

Answer 2

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

Phaser缓存加载问题

2 个答案: