[Phaser3] How to load assets under directories automatically

TL; DR

• There is no feature in default
• Use Webpack plugin phaser-assets-webpack-plugin

Loading in default

preload () {
  this.load.image('logo', 'img/logo.png')
  this.load.spritesheet('player', 'img/player.png', { frameWidth: 16, frameHeight: 32 })
}

This is okay if it is game has less assets, but it become difficult if the game is not so.

So I wanted to load assets under my assets directories automatically.

That is impossible in default because client side JS can not scan files of server.

So the files should be scanned with Node.js before build, and the assets data need to be defined in static into built JS.

Spritesheet

{ frameWidth: 16, frameHeight: 32 }

Also I don't like to define size of sprite of spritesheet in pixel.

The reason why the size should be defined in pixel is client side JS is only able to know the size after loaded.

I've made a WebpackPlugin to that

phaser-assets-webpack-plugin
https://github.com/laineus/tile-extrude-webpack-plugin

You just need to define directory structure, then the assets data can be imported like this.

import assets from 'assets'
conosle.log(assets)
// -> {
  image: [
    ['title', '/img/title.png']
  ],
  spritesheet: [
    ['player', '/img/player.png'. { frameWidth: 16, frameHeight: 16, startFrame: 0, endFrame: 3 }]
  ],
  audio: [
    ['bgm', ['/audio/bgm.m4a', '/audio/bgm.ogg']]
  ]
}

Then it will be reloaded automatically when added or removed files while webpack is watching.

Also if you load spritesheets, just define num of horizontal and vertical for each spritesheet into JSON file located same dir as assets.

[
  ["player.png", 3, 4]
]

Take a look GitHub to see usage.