Question

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

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正确加载图像和Spritesheets？

1 个答案: