时间戳

首页 > 解决方案 > 如何修复不在 phaser.js 中加载的图像

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

问题描述

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

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

在此处输入图像描述

标签： javascripthtmlphaser-framework

解决方案

我假设您已经设置了 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;
}

推荐阅读