setPreloadSprite不起作用，导致图像无法显示

Question

我不明白为什么这段代码不起作用。我将图像加载到引导状态，将精灵添加到预加载器状态，但setPreloadSprite最终使图像甚至不显示。

这是我的小提琴：http://jsfiddle.net/J5fUE/115/

我做错了什么？ Phaser 2.2.1

另外，我计划有两种不同的加载图像。有多个精灵/图像可以setPreloadSprite吗？

var game = new Phaser.Game(500, 500, Phaser.CANVAS, 'game_div');
var gameStates ={};
var hello;

gameStates.booter = function(){};
gameStates.booter.prototype = {
    preload: function(){
        game.world.setBounds(0,0,500,500)
       game.load.image('hello', 'https://s3.amazonaws.com/uploads-1969f46zwpmbh5cm3kr2/hello.png'); 
    },
    create: function(){        
        game.state.start('preloader'); 
    }
}

gameStates.preloader = function(){};
gameStates.preloader.prototype ={
    preload: function(){
        hello = game.add.sprite(150, 150, 'hello');
        game.load.setPreloadSprite(hello);
    },
    create: function(){
    }
}

// Add and start the 'main' state to start the game
game.state.add('booter', gameStates.booter);  
game.state.add('preloader',gameStates.preloader);  
game.state.start('booter');

Answer 1

我可以看到你的代码/ jsfiddle没有错。它没有出现的原因是你没有加载任何东西。如果我将一堆加载调用添加到Preloader预加载方法中，那么它会在加载时正常填充。

Answer 2

另一个原因是所有资产都来自缓存。

您可以转到Chrome Developer Tool > Network来验证是否属于这种情况。如果您的资产来自缓存，它们将显示＆＃34;来自缓存＆＃34;在“大小”列中。

我看到我的进度条所做的是检查＆＃34;禁用缓存＆＃34;选项并刷新页面。这将确保从其源加载所有资产并触发进度条。