Load assets automatically for Phaser3
npm install phaser-assets-loader


Watch your assets directories and generate json listed the assets data automatically for Phaser3.
```
$ npm install phaser-assets-loader
`js`
module.exports = {
patterns: [
{ type: 'image', dir: '/img', rule: /^\w+\.png$/ },
{ type: 'audio', dir: '/audio', rule: /^\w+\.(m4a|ogg)$/ }
],
documentRoot: './public',
output: './src/assets.json'
}
|Key|Default|What is|
|---|---|---|
|patterns|Required|An Array of assets settings|
|documentRoot|'public'|The path to the document root directory.|'assets.json'
|output||The path to the json file to output.|'spritesheets.json'
|spriteSheetSettingsFileName||The name of settings file for spritesheet.|
|Key|Required|What is|
|---|---|---|
|type|Yes|Method name for Phaser::Loader. image will be spritesheet automatically when it is.|/
|prefix|No|Prefix for the assets key name.|
|dir|Yes|Assets directory from document root. It can be started with or ./.|
|rule|Yes|Name pattern of files to be assets.|
``
$ phaser-assets --config
`js
const phaserAssetsLoader = require('phaser-assets-loader')
const assetsConfig = require('
const { exportJson, watch } = phaserAssetsLoader(assetsConfig)
exportJson()
if ('if you want') {
watch()
}
`
`js
import { defineConfig } from 'vite'
import phaserAssetsRollupPlugin from 'phaser-assets-loader/plugins/rollupPlugin'
export default defineConfig({
..
plugins: [
phaserAssetsRollupPlugin({ patterns: [..] })
]
..
})
`
`js
import PhaserAssetsWebpackPlugin from 'phaser-assets-loader/plugins/webpackPlugin'
module.exports = {
..
plugins: [
new PhaserAssetsWebpackPlugin({ patterns: [..] })
]
..
}
`
An example of the exported json.
`json`
{
"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"]]
]
}
The key names based on each file name. ( player.png => [prefix]player )
The Data can be imported and used for Phaser::Loader as is.
`js`
import assets from './assets.json'
`js`
Object.keys(assets).forEach(methodName => {
assets[methodName].forEach(args => scene.loadmethodName
})
The json file will be regenerated automatically when added or removed files during watching.
Just define num of horizontal and vertical for each spritesheet into JSON file located same dir as assets.
``
- img/
- player.png
- setting.json
`json`
[
["player.png", 3, 1]
]
The image will be spritesheet` if the setting exsists.