Phaser Manifest Loader
(for webpack users)
TL;DR Take me to the code!
If you’re like me and you love Phaser and Webpack, then this package should come in handy. I’ll also note that Phaser 3 uses Webpack 2 which is very exciting!
Webpack loaders mean that my assets (images, audio etc) all get compressed and fingerprinted at build time, so I never have to be concerned with users seeing an old cached version of an image, or even worse a cached json file for a spritesheet!
The problem I ran into was that loading assets became very tedious. I was repeating myself so often.
import creatureImage from '../assets/spritesheets/creature.png' import creatureJson from '../assets/spritesheets/creature.json' preload() {
this.game.load.atlasJSONArray('creature', creatureImage, null, creatureJson)
} create() {
this.game.add.sprite(0, 0, 'creature')
}
Can you see the pattern? How many times did I write ‘creature’ just to get a creature on screen! (answer: 8)
If you follow these simple conventions life becomes much simpler:
1. The name of your asset will become the asset key in the Phaser cache minus the path and the file type suffix.
2. Files of certain types belong in certain directories. e.g. images go in the images folder.
That’s it! Now we can use Phaser Manifest Loader!
Simply drop your creature spritesheet files into the spritesheets directory and update your manifest like so:
const manifest = [
spritesheets: [
'creature'
]
]No, it’s not magic, there is some basic initial setup to do to get this working, but it saves a lot of time in the end!
Originally published at blog.mattcolman.com on January 25, 2017.
