为什么在使用game.load时得到“ load”的“ undefined”？ （Vue +移相器）

Question

我从Vue + Phaser开始了新项目，但是当我尝试加载资产时，this.game.load.image中的“ load”和“ add”返回“ undefined”。 由于JS文件，我尝试导入preload函数，但是出现相同的错误。 如果我在没有Vue的情况下对其进行测试，则我的Phaser代码不会返回错误，它是功能性的。

Game.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吗？

在这种情况下，请将这些资产作为模块导入，并在加载程序调用中引用导入。

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