如何使用 Phaser 3 和 Webpack 正确加载图像和 spritesheet？

Question

我有一个带有 Webpack 和 Phaser 3 的 Vue 应用程序，我正在尝试在我的主场景中加载图像和精灵表。

import Phaser from 'phaser'

export class MainScene extends Phaser.Scene {
  constructor () {
    super({
      key: 'MainScene'
    })
  };

  preload () {
    this.load.image('sand', require('@/assets/sand.png'))
    this.load.spritesheet('dude', require('@/assets/dude.png'), { frameWidth: 32, frameHeight: 48 })
  };

  create () {
   this.add.tileSprite(0, 0, 800, 600, 'sand').setOrigin(0, 0)

   let player = this.physics.add.sprite(100, 450, 'dude')
   player.setCollideWorldBounds(true)
  }

  update () {
   // update
  }
}

这适用于沙子图像，但不适用于我从 Phaser 教程 here 下载的 spritesheet dude.png。我的浏览器控制台输出是

Local data URIs are not supported: dude

经过研究，我发现 this tutorial 在 Phaser 中使用数据 URI。使用该技术后，spritesheet 被加载，但我发现 Webpack 需要不同的图像，我无法弄清楚为什么。此外，不建议在将应用程序部署到服务器时使用大量数据 URI。

require('@/assets/sand.png') 解析为 "/static/img/sand.79c51a8.png"

require('@/assets/dude.png') 解析为 base64 字符串。

我的 Webpack conf 似乎有正确的加载器

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  options: {
   limit: 10000,
   name: utils.assetsPath('img/[name].[hash:7].[ext]')
}

有人知道为什么会这样吗？

[编辑]： Keeri 的评论帮助我发现沙子图像比花花公子图像大，甚至比 Webpack 配置中为 url-loader 设置的限制大得多。所以我将限制设置为 1 以始终回退到文件加载器，这似乎适用于每个图像。

定义 url-loader 然后跳过它感觉有点乱，但从我读到的内容来看，Phaser 无论如何都不想要图像 base64。所以也许最好的方法是从我的 Webpack 配置中删除 url-loader。

Answer 1

limit: 10000 sets the maximum size of a file in bytes，如果您的图像超过该大小，则使用默认 file-loader（文件路径）而不是 url-loader (base64)

如何使用 Phaser 3 和 Webpack 正确加载图像和 spritesheet？

How to load images and spritesheets with Phaser 3 and Webpack correctly?

phaser-framework

webpack

vue.js