Phaser 3：为什么没有图像显示？

Question

好的，我是这个领域的新手，但我正在尝试在我的 Phaser 游戏中显示背景图片

FYI I'M RUNNING ON A LIVE SERVER

var config = {
    width:800,
    height:600,
    backgroundColor: 0x000000
}

var game = new Phaser.Game(config);

function preload()
{
    this.load.image('sky', 'bg.png');
}

function create() 
{
    this.add.image(400, 300, 'sky');
}

function update()
{

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.22.0/phaser.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Io Game</title>
    <script src="phaser.min.js"></script>
    <script src="game.js"></script>

</head>
<body>

</body>
</html>

它只是显示一个空白的黑屏。控制台没有错误任何 tips/problems?

Answer 1

我之前已经参与过这个项目。 function preload() 在您的案例中存在问题。 文件路径 中有错误。相应地放置您的文件。

正确代码：

function preload ()
{
    this.load.image('sky', 'assets/sky.png');
    this.load.image('ground', 'assets/platform.png');
    this.load.image('star', 'assets/star.png');
    this.load.image('bomb', 'assets/bomb.png');
    this.load.spritesheet('dude', 
        'assets/dude.png',
        { frameWidth: 32, frameHeight: 48 }
    );
}

Answer 2

以上解决方案对您有用吗？对我来说，我使用了带有 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;
}

Phaser 3：为什么没有图像显示？

Phaser 3 : Why are there no images showing?

html

javascript

phaser-framework