如何修复不在 phaser.js 中加载的图像

Question

每当我尝试将图像加载到移相器时，它们总是在我的屏幕上显示为绿色框？

我不仅尝试了正常的根文件路径，而且还尝试了所有可以想象的文件路径，但它仍然无法正常工作？

Answer 1

我假设您已经设置了 Web 服务器。您是否查看了开发人员工具并检查是否有任何错误？ 在 Google Chrome 上，右键单击您的网页并点击检查。 导航到控制台选项卡并查找错误。 确保还记录 XMLHttpRequests，因为这些将指示对所述图像的请求何时已完成（只需单击记录 XMLHttpRequests 复选框）。

上述任何解决方案对您有用吗？ 对我来说，我使用了一个带有 Python 的简单 HTTP 服务器。 我正确引用了我的图像，并且正确托管了我的网络服务器。 使用开发人员工具时，没有任何错误消息。我把头撞在墙上好几个小时。 由于某种原因，Phaser API 无法从网页中分辨出本地目录 ( http://192.168.0.2:8080/ ) 是什么。

我通过为我的图像使用以下路径解决了我的问题：

'http://192.168.0.2:8080/assets/sky.png'

其中 192.168.0.2 是我托管服务器的本地 IP 地址，而 8080 是我用于通信的端口

除了为每个图像添加冗长的文件路径之外，您还可以结合已有的内容调用this.load.setBaseURL('http://192.168.0.2:8080')函数。

例如，请参见以下代码：

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 200 }
        }
    },
    scene: {
        
        preload: preload,
        create: create
    }
};
var game = new Phaser.Game(config);

function preload ()
{
    console.log('preload');
    this.load.setBaseURL('http://192.168.0.2:8080');
    this.load.image('bombP','bowmb.png');
    this.load.image('einMary','/bowmb.png');
}

function create ()
{
    console.log('create');
    this.add.image(126, 119, 'bombP');
    this.add.image(222,269,'einMary');
    //var s = game.add.sprite(80,0,'einMary');
    //s.rotation=0.219;
}

Answer 2

我应该首先检查以下两点：

• 检查图像是否具有正确的文件路径
• 检查您使用的“钥匙”是否正确