如何使用 Phaser 3 和 Webpack 正确加载图像和精灵表？答案

【问题标题】：How to load images and spritesheets with Phaser 3 and Webpack correctly?如何使用 Phaser 3 和 Webpack 正确加载图像和精灵表？
【发布时间】：2020-01-21 07:07:29
【问题描述】：

我有一个带有 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。使用该技术后，精灵表被加载，但我发现 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 的评论帮助我发现 sand 图像比 dud 图像大，甚至比 Webpack 配置中为 url-loader 设置的限制还要大。所以我将限制设置为 1 以始终回退到文件加载器，这似乎适用于每个图像。

定义 url-loader 然后跳过它感觉有点被黑客攻击，但根据我的阅读，Phaser 无论如何都不想要图像 base64。所以也许最好的方法是从我的 Webpack 配置中删除 url-loader。

【问题讨论】：

标签： vue.js webpack phaser-framework

【解决方案1】：

limit: 10000sets the maximum size of a file in bytes，如果你的图片超过那个大小，那么使用默认的file-loader（文件路径）而不是url-loader（base64）

【讨论】：

将限制设置为 false 或将其删除（完全不设置限制）使我无法导入之前工作正常的沙子图像。但是这个提示帮助我发现沙子图像比花花公子图像大，甚至比极限大得多。所以我将限制设置为 1 以始终回退到文件加载器，这似乎适用于每个图像。定义 url-loader 然后跳过它感觉有点被黑客攻击，但从我读过的内容来看，Phaser 无论如何都不想要 base64。所以也许最好的方法是从我的 Webpack 配置中删除 url-loader。
如果您希望通过单独的 GET 请求（推荐通过 base64）下载资产，那么可以使用 file-loader 而不是 url-loader
很高兴帮助 ^^ 如果您的问题已得到解决，请随时将此标记为“已接受”的答案