从 JSON 文件加载 Phaser 资产的问题答案

【问题标题】：Phaser assets loading issue from JSON file从 JSON 文件加载 Phaser 资产的问题
【发布时间】：2014-03-09 00:45:21
【问题描述】：

我有以下用于 Phaser 游戏的代码。它只是用来通过使用 AJAX 从 JSON 文件加载信息来获得关卡的视觉概念。

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>hello phaser!</title>
        <script src="phaser.min.js"></script>
        <script src="jquery.min.js"></script>
    </head>
    <body>
    <div id="results"></div>
    <script type="text/javascript">



        var game = new Phaser.Game(1024, 768, Phaser.AUTO, '', { preload: preload, create: create,renderer:renderer});
        var background;

        function preload () 
        {

                game.load.image('bg','bg.png');
                game.load.image('mothership', 'bird.png');
                game.load.image('turret','turret.png');





        }

        function create () 
        {
            //game.add.sprite(31,725,"mothership");
            //game.add.sprite(100,100,"turret");
            //background=game.add.sprite(0,0,"bg");
            //background.scale.setTo(5,7);


        }

        function renderer()
        {

        }
        $.ajax({
                        url: "TestFile5.json",
                        dataType: 'json',
                        contentType:"application/json",
                        success: function(response) {
                            //here you can use the response
                                //response can be passed to what ever js file you need.


                                game.add.sprite(response.mothership.posx, response.mothership.posy, "mothership");

                                game.add.sprite(response.Turret0.posx, response.Turret0.posy, "turret");
                                game.add.sprite(response.Turret1.posx, response.Turret1.posy, "turret");
                                game.add.sprite(response.Turret2.posx, response.Turret2.posy, "turret");

                        },
                        error: function(response1){
                                alert('response error')
                        }
                    });






    </script>
</Body>
</html>

我已将此连同 JSON 文件和图像一起加载到我的在线服务器上，但它似乎没有使用 AJAX 回调中的 game.add.sprite() 函数加载图像。我得到带有占位符图像的屏幕。位置正确，但未加载图像。这可能是什么原因造成的，我该如何解决？

【问题讨论】：

标签： javascript ajax json phaser-framework

【解决方案1】：

检查浏览器中的开发工具面板（在 IE 中按 F12，在 Chrome 中按 ctrl+shift+j）并检查网络面板以 100% 确定资产确实已加载。如果图像加载失败，您还应该在控制台中看到一个条目，因为 Phaser 会在那里抛出警告。

另外值得一提的是 Phaser 可以加载 json 文件。因此，您可以以启动状态开始游戏，该状态加载包含所有位置数据的 json，解析它并为您的游戏状态做好准备，该状态可以使用其中的定位/纹理值。这样您就不会遇到任何潜在的范围问题（您很可能会在这里遇到问题）。

【讨论】：

您能否举一个 Phaser 加载图像的示例，该图像存储在 assets 文件夹中的 .json 文件中
我也检查了开发工具，它没有抛出任何警告或错误。所以我给出的代码是正确的
在“成功”函数中检查以确保图像已实际加载并在缓存中：game.cache.checkImageKey('turret')。如果为假，则可能发生了竞争条件（在预加载之前完成了 ajax）。如果属实，我仍然怀疑是范围问题。

【解决方案2】：

我在另一个论坛上找到了这个问题的解决方案，因为我遇到了同样的问题。 http://www.html5gamedevs.com/topic/1936-import-files-and-data-json-parser/.

基本上，我不得不使用 Phaser 的 game.load.text('assetList','path/to/file.json') 方法，然后使用 JSON.parse(game.cache.getText('assetList')); 并且一切都开始工作得很好。

【讨论】：