Initial commit

Author: goldfire

.gitignore

@@ -0,0 +1 @@
+node_modules/

README.md

@@ -1,2 +1,107 @@
-# phaser-asset-loader
-Asset loader for Phaser + Webpack.
+<p align="center">
+  <img src="https://s3.amazonaws.com/howler.js/phaser-webpack-loader.png" alt="Phaser Webpack Loader">
+</p>
+
+# Phaser Webpack Loader
+Instead of manually calling `game.load.image`, `game.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.
+
+View sample usage in this [Phaser ES6 Boilerplate](https://github.com/goldfire/phaser-boilerplate).
+
+## Features
+
+* Load all game assets in parallel.
+* Load images, spritesheets, atlases, audio, bitmap fonts and web fonts.
+* Integrated with Webpack for automatic cache-busting.
+* Supports all filetypes.
+
+## Install
+
+Install the plugin through NPM (or Yarn):
+
+```
+npm install phaser-webpack-loader --save
+```
+
+Then create your manifest file and add the plugin as outlined below.
+
+## Manifest File (AssetManifest.js)
+
+```javascript
+const AssetManifest = {
+  baseDir: 'src/assets/',
+  images: [
+    'image001.png',
+    'image002.jpg',
+    '...',
+  ],
+  spritesheets: [
+    'sprite001.png',
+    'sprite002.png',
+    '...',
+  ],
+  audio: [
+    'audio001.webm',
+    'audio002.mp3',
+    '...',
+  ],
+  bitmapFonts: [
+    'font001.png',
+    'font002.png',
+    '...',
+  ],
+  fonts: {
+    google: {
+      families: [
+        'Open Sans:300,700',
+      ],
+    },
+  },
+};
+
+export default AssetManifest;
+```
+
+## Running Plugin (Preload.js)
+
+In your preload state, add the plugin. It uses promises, which makes it flexible to move to the next step when ready.
+
+```javascript
+import WebpackLoader from 'phaser-webpack-loader';
+import AssetManifest from '../AssetManifest';
+
+export default class Preload extends Phaser.State {
+  create() {
+    this.game.plugins.add(WebpackLoader, AssetManifest)
+      .load()
+      .then(() => {
+        this.game.state.start('Main');
+      });
+  }
+}
+```
+
+## Loading Fonts
+
+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.
+
+## Loading Sprites/Atlases
+
+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.
+
+## Directory Structure
+
+You can specify whatever base directory you would like in the manifest file, but then each asset type should go as follows:
+
+```
+assets/
+├── images/
+├── sprites/
+├── audio/
+└── fonts/
+```
+
+### License
+
+Copyright (c) 2017 [James Simpson](https://twitter.com/GoldFireStudios) and [GoldFire Studios, Inc.](http://goldfirestudios.com)
+
+Released under the [MIT License](https://github.com/goldfire/phaser-webpack-loader/blob/master/LICENSE.md).

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "phaser-webpack-loader",
+  "version": "0.1.0",
+  "author": "GoldFire Studios, Inc. (http://goldfirestudios.com)",
+  "description": "Asset loader for Phaser + Webpack.",
+  "author": "James Simpson <james@goldfirestudios.com> (http://goldfirestudios.com)",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/goldfire/phaser-webpack-loader.git"
+  },
+  "main": "src/index.js",
+  "scripts": {
+    "release": "VERSION=`printf 'v' && node -e 'console.log(require(\"./package.json\").version)'` && git tag $VERSION && git push && git push origin $VERSION && npm publish"
+  },
+  "dependencies": {
+    "webfontloader": "^1.6.27"
+  },
+  "engines": {
+    "node": ">=4.0.0"
+  },
+  "keywords": [
+    "phaser",
+    "assets",
+    "loader",
+    "webpack",
+    "asset loader",
+    "manifest"
+  ]
+}

src/index.js

@@ -0,0 +1,129 @@
+import Phaser from 'phaser';
+import WebFont from 'webfontloader';
+
+/**
+ * Phaser Webpack Loader plugin for Phaser.
+ */
+export default class WebpackLoader extends Phaser.Plugin {
+  /**
+   * Initialize the load plugin.
+   * @param  {Object} manifest Your asset manifest file contents.
+   * @param  {String} postfix  (optional) Postfix to append to assets.
+   */
+  init(manifest, postfix = '') {
+    // Pull the base directory out of the manifest.
+    this.baseDir = manifest.baseDir || 'assets/';
+
+    // Pull the font values out of the manifest.
+    this.fonts = manifest.fonts || {};
+
+    // Pull the asset values out of the manifest.
+    this.assets = {
+      images: manifest.images || [],
+      sprites: manifest.sprites || [],
+      audio: manifest.audio || [],
+      bitmapFonts: manifest.bitmapFonts || [],
+    };
+
+    // Define the loaders for the different asset types.
+    this.loaders = {
+      images: this._loadImage,
+      sprites: this._loadSprite,
+      audio: this._loadAudio,
+      bitmapFonts: this._loadBitmapFont,
+    };
+
+    // Define the postfix string to apply to image assets (ex: @2x).
+    this.postfix = postfix;
+  }
+
+  /**
+   * Begins loading of all assets.
+   * @return {Promise} Returns when loading is complete.
+   */
+  load() {
+    return Promise.all([
+      this._loadAssets(),
+      this._loadFonts(),
+    ]);
+  }
+
+  /**
+   * Load all assets in parallel.
+   * @return {Promise} Returns when assets are loaded.
+   */
+  _loadAssets() {
+    return new Promise((resolve) => {
+      // Loop through all of the asset types and begin loading.
+      Object.keys(this.assets).forEach((key) => {
+        // Loop through each asset of this type.
+        this.assets[key].forEach((asset) => {
+          const assetData = asset.split('.');
+          this.loaders[key](assetData[0], assetData[1]);
+        });
+      });
+
+      // Once everything has loaded, resolve the promise.
+      this.game.load.onLoadComplete.addOnce(() => {
+        resolve();
+      });
+
+      // Start the loading of the assets.
+      this.game.load.start();
+    });
+  }
+
+  /**
+   * Loads all defined web fonts using webfontloader.
+   * @return {Promise} Returns when fonts are ready to use.
+   */
+  _loadFonts() {
+    return new Promise((resolve) => {
+      WebFont.load(Object.assign({}, this.fonts, {
+        active: resolve,
+      }));
+    });
+  }
+
+  /**
+   * Load an image.
+   * @param  {String} name Name of the file.
+   * @param  {String} ext  File extension.
+   */
+  _loadImage(name, ext) {
+    const file = require(`${this.baseDir}images/${name}${this.postfix}.${ext}`);
+    this.game.load.image(name, file);
+  }
+
+  /**
+   * Load a spritesheet.
+   * @param  {String} name Name of the file.
+   * @param  {String} ext  File extension.
+   */
+  _loadSprite(name, ext) {
+    const file = require(`${this.baseDir}sprites/${name}${this.postfix}.${ext}`);
+    const data = require(`${this.baseDir}sprites/${name}${this.postfix}.json`);
+    this.game.load.atlasJSONHash(name, file, null, data);
+  }
+
+  /**
+   * Load an audio file.
+   * @param  {String} name Name of the file.
+   * @param  {String} ext  File extension.
+   */
+  _loadAudio(name, ext) {
+    const file = require(`${this.baseDir}audio/${name}.${ext}`);
+    this.game.load.audio(name, file);
+  }
+
+  /**
+   * Load a bitmap font.
+   * @param  {String} name Name of the file.
+   * @param  {String} ext  File extension.
+   */
+  _loadBitmapFont(name, ext) {
+    const file = require(`${this.baseDir}fonts/${name}${this.postfix}.${ext}`);
+    const data = require(`${this.baseDir}fonts/${name}${this.postfix}.xml`);
+    this.game.load.bitmapFont(name, file, data);
+  }
+}