Phaser缓存加载问题

Question

我正在使用移相器制作游戏.我正在加载背景图像,其信息(文件位置)存储在JSON文件中.当我尝试加载它时,背景是黑色和空的,在控制台中我得到:

Phaser.Cache.getImage:在Cache中找不到键"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.*函数内的API 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文件足够快,以便在create()调用Phaser的方法时准备就绪.在这种情况下,一切都按预期工作.如果$.getJSON()速度不够快,create()将在加载JSON文件之前调用,从而导致错误.