phaser-assets-webpack-plugin v2.2.1

PhaserAssetsWebpackPlugin

A Webpack plugin to load assets automatically for Phaser3. It watches the directories along your setting and exports a json file that listed the assets information.

Usage

Install:

$ npm install phaser-assets-webpack-plugin

Define into webpack.config.js:

const PhaserAssetsWebpackPlugin = require('phaser-assets-webpack-plugin')
// ...
{
  entry: {
    ...
  },
  output: {
    ...
  },
  plugins: [
    new PhaserAssetsWebpackPlugin({
      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

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

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

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 while webpack is 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 is exsists.

Requirements

• Webpack5

I'm not sure if this will be working on other versions. Please make an issue or PR if need it.

Examples Projects that using this plugin

• phavuer-example
• phavuer-rpg-example
• unsung-kingdom