Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

phaser-assets-webpack-plugin

Package Overview
Dependencies
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

phaser-assets-webpack-plugin

Load assets automatically for Phaser3

  • 2.2.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
21
increased by600%
Maintainers
1
Weekly downloads
 
Created
Source

PhaserAssetsWebpackPlugin

Phaser 3.x npm license

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:

KeyDefaultWhat is
patternsRequiredAn Array of assets settings
documentRoot'public'The path to the document root directory.
output'assets.json'The path to the json file to output.
spriteSheetSettingsFileName'settings.json'The name of settings file for spritesheet.

Patterns:

KeyRequiredWhat is
typeYesMethod name for Phaser::Loader. image will be spritesheet automatically when it is.
prefixNoPrefix for the assets key name.
dirYesAssets directory from document root. It can be started with / or ./.
ruleYesName pattern of files to be assets.
callbackNoCallback function after loaded. Given arg that Array of the loaded data.

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

FAQs

Package last updated on 10 Sep 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc