javascript - 为什么我在使用 game.load 时得到 "undefined"对应 "load"？ (Vue + 移相器)

Question

我用 Vue + Phaser 开始了新项目，但是当我尝试加载 Assets 时，this.game.load.image 中的“load”和“add”返回“undefined”。我尝试从 JS 文件导入预加载函数，但我遇到了同样的错误。如果我在没有 Vue 的情况下测试它，我的 Phaser 代码不会返回错误，它是正常的。

游戏.vue:

import Phaser from 'phaser'
export default {
name: 'Game',
data: () => ({
    game: null,
    sprites: {}
}),
mounted () {
    const self = this
    if (this.game == null) {
        this.game = new Phaser.Game({
            type: Phaser.AUTO,
            width: window.innerWidth,
            height: window.innerHeight,
            antialias: true,
            parent: this.$el,
            physics: {
                default: 'arcade',
                arcade: {
                    gravity: { 
                        y: 300 
                    },
                    debug: false
                }
            },
            scene: {
                preload: function preload() {
                    self.preload(this)
                },
                create: function create() {
                    self.create(this)
                },
                update: function update() {
                    self.update(this)
                },
                render: function render() {
                    self.render(this)
                }
            }
        })
    }
},
methods: {
    preload () {
        this.game.load.setBaseURL('http://labs.phaser.io')

        this.game.load.image('sky', 'src/games/firstgame/assets/sky.png')
        this.game.load.image('ground', 'src/games/firstgame/assets/platform.png')
        this.game.load.spritesheet('dude', 'src/games/firstgame/assets/dude.png', { frameWidth: 32, frameHeight: 48 })
        this.game.load.spritesheet('monster', 'src/games/firstgame/assets/dude.png', { frameWidth: 32, frameHeight: 48 })
    },
    create (phaser) {
        let self = this
        console.log(self, phaser, this.game)
        this.game.add.image(0, 0, 'sky').setOrigin(0,0).setScale(4);
    },
    listener (e) {
        console.log('listener', e)
    },
    update () {

    },
}
}

对不起我的英语错误

Answer 1

我猜你正在使用 Webpack/Vue-CLI？

如果是这种情况，请将这些 Assets 作为模块导入并在加载程序调用中引用导入。

import sky from 'src/games/firstgame/assets/sky.png'

// in your preload method:
this.game.load.image('sky', sky)

这是必要的，因为 Webpack 需要将源文件夹中图像的路径替换为构建输出目录中图像的路径。

https://webpack.js.org/guides/asset-management#loading-images

此外，请查看我的 Vue/Phaser Webpack 模板，它为您准备好了一切。

https://github.com/Sun0fABeach/vue-phaser3