Security News
Fluent Assertions Faces Backlash After Abandoning Open Source Licensing
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
phaser-assets-webpack-plugin
Advanced tools
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.
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:
Key | Default | What is |
---|---|---|
patterns | Required | An 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:
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. |
callback | No | Callback function after loaded. Given arg that Array of the loaded data. |
// 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
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.
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.
I'm not sure if this will be working on other versions. Please make an issue or PR if need it.
FAQs
Load assets automatically for Phaser3
The npm package phaser-assets-webpack-plugin receives a total of 18 weekly downloads. As such, phaser-assets-webpack-plugin popularity was classified as not popular.
We found that phaser-assets-webpack-plugin demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.