Question

我有2个场景：“加载”和“菜单”，在加载场景中，我会加载图像，然后在菜单中显示它们。

加载场景代码：

import { CTS } from './../CTS.js';
import { MenuScene } from './MenuScene';

export class LoadScene extends Phaser.Scene
{
    constructor(){
        super({
            key: CTS.SCENES.LOAD
        })
    }

    preload() {
        this.load.image('logo', './../assets/logo.png');
        this.load.image('bg', './../assets/title_bg.jpg');
    }
    create() {
        this.scene.start(CTS.SCENES.MENU, 'Hello from loadScene');
    }
}

这里的菜单脚本：

import { CTS } from './../CTS.js';

export class MenuScene extends Phaser.Scene
{
    constructor(){
        super({
            key: CTS.SCENES.MENU
        })
    }

    init(data){
        console.log(data);
        console.log('I got it!');
    }
    preload(){

    }
    create() {
        this.add.image(0,0,'bg').setOrigin(0, 0);
        this.add.image(0,0,'logo').setOrigin(0, 0);
    }
}

我检查了路径和键，它们是正确的，chrome在运行时不会给出任何错误，但是在“源”选项卡中没有显示资产文件夹。我还尝试使用ps打开和保存图像以解决最终的格式问题。

这是我的main.js文件：

/** @type {import('./../../PHAZER/phaser-3.18.1/types/phaser')} */

import { LoadScene } from "./scenes/LoadScene.js";
import { MenuScene } from "./scenes/MenuScene.js";

let game = new Phaser.Game({
    width: 800,
    height: 600,
    scene: [
       LoadScene, MenuScene
    ]
});

And Heres sc of directories so you can see that paths are set the right way

编辑：我已将所有“ laod”更正为“ load”，但仍然无法正常工作

Answer 1

在您的LoadScene中添加以下内容：

this.load.image('logo', 'assets/logo.png');
this.load.image('bg', 'assets/title_bg.jpg');

现在可以使用吗？

Answer 2

绿色正方形，其中带有一行，表示纹理文件无法加载。如果网址有错误，您将在Chrome Dev Tools网络面板中将其视为404（我几乎保证您会看到它）。

如果URL正确，但是服务器配置不正确并且返回无效的图像数据，那么您将不会得到404，但是当您使用“开发工具”的源面板时，也不会看到该图像选择它。

另一个常见原因是，您尝试直接打开html文件而不是从文件中获取文件（例如WAMP或http-server）？因此，您会收到file://协议错误，导致相同的结果。

相位器3，图像显示为绿色方块

2 个答案: