Question

我有以下代码用于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()函数加载图像。我得到了占位符图像的屏幕。位置正确但图像未加载。可能导致这种情况的原因，我该如何解决？

Answer 1

检查浏览器中的“开发工具”面板（IE中的F12，Chrome中的ctrl + shift + j），然后选中“网络”面板，确保资产确实已加载。如果图像加载失败，你也应该在控制台中看到一个条目，因为Phaser会在那里发出警告。

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

Answer 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'));并且所有方法都开始运行良好。

Phaser资产从JSON文件加载问题

2 个答案: