phaser-assets-loader v1.2.0

PhaserAssetsLoader

Watch your assets directories and generate json listed the assets data automatically for Phaser3.

Usage

Install

$ npm install phaser-assets-loader

Define config file

module.exports = {
  patterns: [
    { type: 'image', dir: '/img', rule: /^\w+\.png$/ },
    { type: 'audio', dir: '/audio', rule: /^\w+\.(m4a|ogg)$/ }
  ],
  documentRoot: './public',
  output: './src/assets.json'
}

Settings

Patterns

CLI

$ phaser-assets --config <path to config file> [--watch]

Script

const phaserAssetsLoader = require('phaser-assets-loader')
const assetsConfig = require('<path to config file>')

const { exportJson, watch } = phaserAssetsLoader(assetsConfig)
exportJson()
if ('if you want') {
  watch()
}

With Rollup or Vite

import { defineConfig } from 'vite'
import phaserAssetsRollupPlugin from 'phaser-assets-loader/plugins/rollupPlugin'

export default defineConfig({
  ..
  plugins: [
    phaserAssetsRollupPlugin({ patterns: [..] })
  ]
  ..
})

With Webpack

import PhaserAssetsWebpackPlugin from 'phaser-assets-loader/plugins/webpackPlugin'

module.exports = {
  ..
  plugins: [
    new PhaserAssetsWebpackPlugin({ patterns: [..] })
  ]
  ..
}

Use the exported json in Phaser3

An example of the exported 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.

import assets from './assets.json'

Object.keys(assets).forEach(methodName => {
  assets[methodName].forEach(args => scene.load[methodName](...args)
})

The json file will be regenerated automatically when added or removed files during watching.

Spritesheet setting

Just define num of horizontal and vertical for each spritesheet into JSON file located same dir as assets.

- img/
  - player.png
  - setting.json

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

The image will be spritesheet if the setting exsists.