Как правильно загружать изображения и спрайт-листы с помощью Phaser 3 и Webpack? - PullRequest
Новая
       14

Как правильно загружать изображения и спрайт-листы с помощью Phaser 3 и Webpack?

3 голосов
/ 20 сентября 2019

У меня есть приложение Vue с Webpack и Phaser 3, и я пытаюсь загрузить изображения и спрайт-листы в моей основной сцене. 

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
  }
}

Это прекрасно работает для изображения с песком, но не для чувака спрайт-листов.png, который я скачал из руководства Phaser здесь .Мой вывод на консоль браузера 

Local data URIs are not supported: dude

После исследования я обнаружил этот урок для использования URI данных в Phaser.После использования этой методики загружается таблица спрайтов, но я обнаружил, что Webpack требует оба изображения по-разному, и я не могу понять, почему.Также не рекомендуется использовать большое количество URI данных при развертывании приложения на сервере.

require ('@ / assets / sand.png') разрешает "/static/img/sand.79c51a8.png"

require ('@ / assets / dude.png') преобразуется в строку base64.

Кажется, что в моем веб-пакете есть правильный загрузчик 

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

Кто-нибудь знает, почему это происходит?

[РЕДАКТИРОВАТЬ]: Комментарий Кеери помог мне узнать, что изображение с песком больше, чем изображение чувака, и даже намного больше, чем предел, установленный для загрузчика URL-адресов в конфигурации Webpack.Поэтому я установил ограничение на 1, чтобы всегда возвращаться к загрузчику файлов, который, кажется, работает нормально для каждого изображения.

Это выглядит немного взломанным, чтобы определить url-загрузчик и затем пропустить его, но изчто я прочитал, Phaser в любом случае не хочет изображений base64.Так что, возможно, лучший способ - удалить url-загрузчик из моей конфигурации Webpack.

1 Ответ

2 голосов
/ 25 сентября 2019

limit: 10000 устанавливает максимальный размер файла в байтах , если ваше изображение превышает этот размер, тогда используется file-loader (путь к файлу) по умолчанию, а не url-loader (base64)

...