Fatal编程技术网
  • javascript/
  • Javascript 从JSON文件加载Phaser资产的问题

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

javascript ajax json

Javascript 从JSON文件加载Phaser资产的问题,javascript,ajax,json,phaser-framework,Javascript,Ajax,Json,Phaser Framework,我有一个相位器游戏的以下代码。它只是通过使用AJAX从JSON文件加载信息来获得一个级别的可视化概念 <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>hello phaser!</title> <script src="phaser.min.js"></script>

我有一个相位器游戏的以下代码。它只是通过使用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函数加载图像。我在屏幕上看到占位符图像。位置正确，但未加载图像。这可能是什么原因造成的，我如何修复它？

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

另外值得一提的是，Phaser可以加载json文件。因此，您可以从一个引导状态开始游戏，该状态加载包含所有位置数据的json，对其进行解析，并为您的游戏状态做好准备，该状态可以使用其中的定位/纹理值。那么你就不会有任何潜在的范围问题，你可能会在这里结束。

我在另一个论坛上找到了解决方案，因为我遇到了同样的问题

基本上，我必须使用Phaser的game.load.text'assetList'、'path/to/file.json'方法，然后是json.parsegame.cache.getText'assetList'；所有这些都开始工作得很好。

你们能举一个例子，说明Phaser加载了一个存储在资产文件夹中的.json文件中的图像吗？我还检查了开发工具，它并没有抛出任何警告或错误。所以我给出的代码在“成功”函数检查中是正确的，以确保图像已经实际加载并且在缓存：游戏。缓存。检查图像键“炮塔”。如果为false，则在预加载之前ajax完成时，可能发生了竞争条件。如果为真，我仍然怀疑存在范围问题。