├── .gitignore
├── LICENSE
├── README.md
├── package.json
└── src
└── index.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 James Simpson
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | 
3 |
4 |
5 | # Phaser 3 Webpack Loader
6 | Instead of manually calling `scene.load.image`, `scene.load.audio`, etc for every asset in your game (and then dealing with caching issues), phaser-webpack-loader lets you define all assets in a simple manifest file and handles the rest for you.
7 |
8 | **NOTE:** This plugin now only supports Phaser 3 and later. If you need support for Phaser 2, [use v1.1.0](https://github.com/goldfire/phaser-webpack-loader/tree/d3c9683e6a5ba9541ec0b0cd11c89fb824ff45b6).
9 |
10 | ## Features
11 |
12 | * Load all game assets in parallel.
13 | * Load images, spritesheets, atlases, audio, bitmap fonts and web fonts.
14 | * Integrated with Webpack for automatic cache-busting.
15 | * Supports all filetypes.
16 | * Supports asset postfix for retina support ('@2x', '@3x', etc).
17 | * Custom event to track each file load (including fonts).
18 |
19 | ## Install
20 |
21 | Install the plugin through NPM (or Yarn):
22 |
23 | ```
24 | npm install phaser-webpack-loader --save
25 | ```
26 |
27 | Then create your manifest file and add the plugin as outlined below.
28 |
29 | ## Manifest File (AssetManifest.js)
30 |
31 | ```javascript
32 | const AssetManifest = {
33 | images: [
34 | 'image001.png',
35 | 'image002.jpg',
36 | '...',
37 | ],
38 | sprites: [
39 | 'sprite001.png',
40 | 'sprite002.png',
41 | '...',
42 | ],
43 | audio: [
44 | 'audio001.webm',
45 | 'audio002.mp3',
46 | '...',
47 | ],
48 | bitmapFonts: [
49 | 'font001.png',
50 | 'font002.png',
51 | '...',
52 | ],
53 | fonts: {
54 | google: {
55 | families: [
56 | 'Open Sans:300,700',
57 | ],
58 | },
59 | },
60 | };
61 |
62 | export default AssetManifest;
63 | ```
64 |
65 | ## Running Plugin (Preload.js)
66 |
67 | In your preload state, add the plugin. It uses promises, which makes it flexible to move to the next step when ready.
68 |
69 | ```javascript
70 | import WebpackLoader from 'phaser-webpack-loader';
71 | import AssetManifest from '../AssetManifest';
72 |
73 | export default class Preload extends Phaser.Scene {
74 | preload() {
75 | this.load.scenePlugin('WebpackLoader', WebpackLoader, 'loader', 'loader');
76 | }
77 |
78 | create() {
79 | this.loader.start(AssetManifest);
80 | this.loader.load().then(() => {
81 | // Done loading!
82 | });
83 | }
84 | }
85 | ```
86 |
87 | If you want to load high DPI assets, you can pass an optional postfix string:
88 |
89 | ```javascript
90 | this.loader.start(AssetManifest, '@2x');
91 | ```
92 |
93 | If you want to know when each file is loaded, use the optional callback:
94 |
95 | ```javascript
96 | this.loader.systems.events.on('load', (file) => {
97 | console.log('File loaded!', file);
98 | });
99 | ```
100 |
101 | ## Loading Fonts
102 |
103 | The font loader uses [Web Font Loader](https://github.com/typekit/webfontloader), which supports loading web fonts from all major providers. Simply provide their standard configuration object in your manifest.
104 |
105 | ## Loading Sprites/Atlases
106 |
107 | All sprite/atlas files are loaded as JSON hashes (which can be output using [TexturePacker](https://www.codeandweb.com/texturepacker), [Shoebox](http://renderhjs.net/shoebox/) and others). All you have to specify in the manifest is the image filename, but you'll also need to include the JSON hash file alongside it, which will automatically get loaded and used.
108 |
109 | ## Directory Structure
110 |
111 | Specify the base directory in your Webpack config:
112 |
113 | ```
114 | resolve: {
115 | alias: {
116 | assets: path.join(__dirname, '../src/assets'),
117 | },
118 | },
119 | ```
120 |
121 | Then, place your assets in the following sub-directories:
122 |
123 | ```
124 | assets/
125 | ├── images/
126 | ├── sprites/
127 | ├── audio/
128 | └── fonts/
129 | ```
130 |
131 | ## ES6 Building
132 |
133 | This plugin is not pre-compiled to ES5, so you'll want to make sure your Webpack config rules are setup to not exclude it:
134 |
135 | ```javascript
136 | module: {
137 | rules: [
138 | {
139 | test: /\.js$/,
140 | loader: '...',
141 | exclude: /node_modules\/(?!phaser-webpack-loader)/,
142 | },
143 | ],
144 | ...
145 | },
146 | ```
147 |
148 | ### License
149 |
150 | Copyright (c) 2018 [James Simpson](https://twitter.com/GoldFireStudios) and [GoldFire Studios, Inc.](http://goldfirestudios.com)
151 |
152 | Released under the [MIT License](https://github.com/goldfire/phaser-webpack-loader/blob/master/LICENSE.md).
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "phaser-webpack-loader",
3 | "version": "2.0.0",
4 | "author": "GoldFire Studios, Inc. (http://goldfirestudios.com)",
5 | "description": "Asset loader for Phaser + Webpack.",
6 | "author": "James Simpson (http://goldfirestudios.com)",
7 | "repository": {
8 | "type": "git",
9 | "url": "git://github.com/goldfire/phaser-webpack-loader.git"
10 | },
11 | "main": "src/index.js",
12 | "scripts": {
13 | "release": "VERSION=`printf 'v' && node -e 'console.log(require(\"./package.json\").version)'` && git tag $VERSION && git push && git push origin $VERSION && npm publish"
14 | },
15 | "dependencies": {
16 | "webfontloader": "^1.6.28"
17 | },
18 | "engines": {
19 | "node": ">=4.0.0"
20 | },
21 | "keywords": [
22 | "phaser",
23 | "assets",
24 | "loader",
25 | "webpack",
26 | "asset loader",
27 | "manifest"
28 | ]
29 | }
30 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import WebFont from 'webfontloader';
2 |
3 | /**
4 | * Phaser Webpack Loader plugin for Phaser.
5 | */
6 | export default class WebpackLoader extends Phaser.Plugins.ScenePlugin {
7 | /**
8 | * Setup the plugin.
9 | * @param {Object} scene Reference to scene owner.
10 | * @param {Object} pluginManager Scene's plugin manager.
11 | */
12 | constructor(scene, pluginManager) {
13 | super(scene, pluginManager);
14 | }
15 |
16 | /**
17 | * Start the loader plugin.
18 | * @param {Object} manifest Your asset manifest file contents.
19 | * @param {String} postfix (optional) Postfix to append to assets.
20 | */
21 | start(manifest, postfix = '') {
22 | // Pull the font values out of the manifest.
23 | this.fonts = manifest.fonts || {};
24 |
25 | // Pull the asset values out of the manifest.
26 | this.assets = {
27 | images: manifest.images || [],
28 | sprites: manifest.sprites || [],
29 | audio: manifest.audio || [],
30 | bitmapFonts: manifest.bitmapFonts || [],
31 | };
32 |
33 | // Define the loaders for the different asset types.
34 | this.loaders = {
35 | images: this._loadImage,
36 | sprites: this._loadSprite,
37 | audio: this._loadAudio,
38 | bitmapFonts: this._loadBitmapFont,
39 | };
40 |
41 | // Define the postfix string to apply to image assets (ex: @2x).
42 | this.postfix = postfix;
43 | }
44 |
45 | /**
46 | * Begins loading of all assets.
47 | * @return {Promise} Returns when loading is complete.
48 | */
49 | load() {
50 | return Promise.all([
51 | this._loadAssets(),
52 | this._loadFonts(),
53 | ]);
54 | }
55 |
56 | /**
57 | * Emit load event for each file that loads.
58 | * @param {Object} file Reference to file that has loaded.
59 | */
60 | _emitLoad(file) {
61 | this.systems.events.emit('load', file);
62 | }
63 |
64 | /**
65 | * Load all assets in parallel.
66 | * @return {Promise} Returns when assets are loaded.
67 | */
68 | _loadAssets() {
69 | return new Promise((resolve) => {
70 | // Loop through all of the asset types and begin loading.
71 | Object.keys(this.assets).forEach((key) => {
72 | // Loop through each asset of this type.
73 | this.assets[key].forEach((asset) => {
74 | const assetData = asset.split('.');
75 | this.loaders[key].call(this, assetData[0], assetData[1]);
76 | });
77 | });
78 |
79 | // Emit load event on each file.
80 | this.scene.load.on('load', this._emitLoad, this);
81 |
82 | // Once everything has loaded, resolve the promise.
83 | this.scene.load.once('complete', () => {
84 | this.scene.load.off('load', this._emitLoad);
85 | resolve();
86 | });
87 |
88 | // Start the loading of the assets.
89 | this.scene.load.start();
90 | });
91 | }
92 |
93 | /**
94 | * Loads all defined web fonts using webfontloader.
95 | * @return {Promise} Returns when fonts are ready to use.
96 | */
97 | _loadFonts() {
98 | if (Object.keys(this.fonts).length === 0) {
99 | return Promise.resolve();
100 | }
101 |
102 | return new Promise((resolve) => {
103 | WebFont.load(Object.assign({}, this.fonts, {
104 | active: () => {
105 | this.systems.events.emit('load');
106 | resolve();
107 | },
108 | }));
109 | });
110 | }
111 |
112 | /**
113 | * Load an image.
114 | * @param {String} name Name of the file.
115 | * @param {String} ext File extension.
116 | */
117 | _loadImage(name, ext) {
118 | const dir = 'images/';
119 | const file = require(`assets/${dir}${name}${this.postfix}.${ext}`);
120 | this.scene.load.image(name, file);
121 | }
122 |
123 | /**
124 | * Load a spritesheet.
125 | * @param {String} name Name of the file.
126 | * @param {String} ext File extension.
127 | */
128 | _loadSprite(name, ext) {
129 | const dir = 'sprites/';
130 | const file = require(`assets/${dir}${name}${this.postfix}.${ext}`);
131 | const data = require(`assets/${dir}${name}${this.postfix}.json`);
132 | this.scene.load.atlas(name, file, data);
133 | }
134 |
135 | /**
136 | * Load an audio file.
137 | * @param {String} name Name of the file.
138 | * @param {String} ext File extension.
139 | */
140 | _loadAudio(name, ext) {
141 | const dir = 'audio/';
142 | const file = require(`assets/${dir}${name}.${ext}`);
143 | this.scene.load.audio(name, file);
144 | }
145 |
146 | /**
147 | * Load a bitmap font.
148 | * @param {String} name Name of the file.
149 | * @param {String} ext File extension.
150 | */
151 | _loadBitmapFont(name, ext) {
152 | const dir = 'fonts/';
153 | const file = require(`assets/${dir}${name}${this.postfix}.${ext}`);
154 | const data = require(`assets/${dir}${name}${this.postfix}.xml`);
155 | this.scene.load.bitmapFont(name, file, data);
156 | }
157 | }
158 |
--------------------------------------------------------------------------------