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

【问题标题】：Phaser 3 : Why are there no images showing?Phaser 3：为什么没有图像显示？
【发布时间】：2020-07-09 07:36:23
【问题描述】：

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

仅供参考，我正在实时服务器上运行

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>

它只是显示一个空白的黑屏。控制台中没有错误有什么提示/问题吗？

【问题讨论】：

这个库会自动调用这些函数吗？
我相信是的。根据 Phaser 官方网站，该库会自动调用这些函数
scene 数组 phaser.io/tutorials/making-your-first-phaser-3-game/part1 怎么样？
我认为 Phaser 应该用在服务器上。它给出了一个错误：“CORS 策略已阻止从源‘null’访问‘file:///C:/Users/TechHope/Desktop/Codaya/highlighter/p.png’处的 XMLHttpRequest：跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。"

标签： javascript html phaser

【解决方案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 }
    );
}

【讨论】：