v2.0.0 - Support Phaser 3

Author: goldfire

README.md

@@ -1,11 +1,11 @@
 <p align="center">
-  <img src="https://s3.amazonaws.com/howler.js/phaser-webpack-loader.png" alt="Phaser Webpack Loader">
+  <img src="https://s3.amazonaws.com/howler.js/phaser-webpack-loader2.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.
+# Phaser 3 Webpack Loader
+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.
 
-View sample usage in this [Phaser ES6 Boilerplate](https://github.com/goldfire/phaser-boilerplate).
+**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).
 
 ## Features
 
@@ -14,8 +14,7 @@ View sample usage in this [Phaser ES6 Boilerplate](https://github.com/goldfire/p
 * Integrated with Webpack for automatic cache-busting.
 * Supports all filetypes.
 * Supports asset postfix for retina support ('@2x', '@3x', etc).
-* Supports automatic loading of compressed textures (PVRTC, S3TC, ETC1).
-* Optional callback to track each file load (including fonts).
+* Custom event to track each file load (including fonts).
 
 ## Install
 
@@ -71,37 +70,32 @@ In your preload state, add the plugin. It uses promises, which makes it flexible
 import WebpackLoader from 'phaser-webpack-loader';
 import AssetManifest from '../AssetManifest';
 
-export default class Preload extends Phaser.State {
+export default class Preload extends Phaser.Scene {
+  preload() {
+    this.load.scenePlugin('WebpackLoader', WebpackLoader, 'loader', 'loader');
+  }
+
   create() {
-    this.game.plugins.add(WebpackLoader, AssetManifest)
-      .load()
-      .then(() => {
-        this.game.state.start('Main');
-      });
+    this.loader.start(AssetManifest);
+    this.loader.load().then(() => {
+      // Done loading!
+    });
   }
 }
 ```
 
 If you want to load high DPI assets, you can pass an optional postfix string:
 
 ```javascript
-this.game.plugins.add(WebpackLoader, AssetManifest, '@2x')
-  .load()
-  .then(() => {
-    this.game.state.start('Main');
-  });
+this.loader.start(AssetManifest, '@2x');
 ```
 
 If you want to know when each file is loaded, use the optional callback:
 
 ```javascript
-this.game.plugins.add(WebpackLoader, AssetManifest, '@2x', () => {
-  console.log('File loaded!');
-})
-  .load()
-  .then(() => {
-    this.game.state.start('Main');
-  });
+this.loader.systems.events.on('load', (file) => {
+  console.log('File loaded!', file);
+});
 ```
 
 ## Loading Fonts
@@ -112,16 +106,6 @@ The font loader uses [Web Font Loader](https://github.com/typekit/webfontloader)
 
 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.
 
-## Loading Compressed Textures (Phaser-CE 2.7.7+)
-
-[Compressed textures](https://phaser.io/tutorials/advanced-rendering-tutorial/part6) can be great to lower memory usage, especially on mobile devices; however, it isn't necessarily straight-forward how to load these (especially for atlas files). This loader makes it as simple as putting the files in your directory, so long as they match the naming conventions:
-
-#### PVRTC `texture.pvrtc.pvr` & `texture.pvrtc.json`
-#### S3TC `texture.s3tc.pvr` & `texture.s3tc.json`
-#### ETC1 `texture.etc1.pkm` & `texture.etc1.json`
-
-Simply include any or all of these files alongside the `PNG` equivalent and if one of them is compatible with the current browser/hardware it will be loaded and used (falling back to the `PNG` file).
-
 ## Directory Structure
 
 Specify the base directory in your Webpack config:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "phaser-webpack-loader",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "author": "GoldFire Studios, Inc. (http://goldfirestudios.com)",
   "description": "Asset loader for Phaser + Webpack.",
   "author": "James Simpson <[email protected]> (http://goldfirestudios.com)",

src/index.js

@@ -1,20 +1,24 @@
-import Phaser from 'phaser';
 import WebFont from 'webfontloader';
 
 /**
  * Phaser Webpack Loader plugin for Phaser.
  */
-export default class WebpackLoader extends Phaser.Plugin {
+export default class WebpackLoader extends Phaser.Plugins.ScenePlugin {
   /**
-   * Initialize the load plugin.
+   * Setup the plugin.
+   * @param  {Object} scene         Reference to scene owner.
+   * @param  {Object} pluginManager Scene's plugin manager.
+   */
+  constructor(scene, pluginManager) {
+    super(scene, pluginManager);
+  }
+
+  /**
+   * Start the loader plugin.
    * @param  {Object} manifest          Your asset manifest file contents.
    * @param  {String} postfix           (optional) Postfix to append to assets.
-   * @param  {Function} assetLoadCallback Callback to fire when each file has loaded.
    */
-  init(manifest, postfix = '', assetLoadCallback) {
-    // Define the asset load callback.
-    this._assetLoadCallback = assetLoadCallback || (() => {});
-
+  start(manifest, postfix = '') {
     // Pull the font values out of the manifest.
     this.fonts = manifest.fonts || {};
 
@@ -46,7 +50,15 @@ export default class WebpackLoader extends Phaser.Plugin {
     return Promise.all([
       this._loadAssets(),
       this._loadFonts(),
-    ]).then(this._addSprites.bind(this));
+    ]);
+  }
+
+  /**
+   * Emit load event for each file that loads.
+   * @param  {Object} file Reference to file that has loaded.
+   */
+  _emitLoad(file) {
+    this.systems.events.emit('load', file);
   }
 
   /**
@@ -64,17 +76,17 @@ export default class WebpackLoader extends Phaser.Plugin {
         });
       });
 
-      // Setup listener for each asset loading.
-      this.game.load.onFileComplete.add(this._assetLoadCallback);
+      // Emit load event on each file.
+      this.scene.load.on('load', this._emitLoad, this);
 
       // Once everything has loaded, resolve the promise.
-      this.game.load.onLoadComplete.addOnce(() => {
-        this.game.load.onFileComplete.remove(this._assetLoadCallback);
+      this.scene.load.once('complete', () => {
+        this.scene.load.off('load', this._emitLoad);
         resolve();
       });
 
       // Start the loading of the assets.
-      this.game.load.start();
+      this.scene.load.start();
     });
   }
 
@@ -90,35 +102,13 @@ export default class WebpackLoader extends Phaser.Plugin {
     return new Promise((resolve) => {
       WebFont.load(Object.assign({}, this.fonts, {
         active: () => {
-          this._assetLoadCallback();
+          this.systems.events.emit('load');
           resolve();
         },
       }));
     });
   }
 
-  /**
-   * Create the texture atlases once the image data has loaded.
-   * This is required in order to load compressed textures as an atlas.
-   */
-  _addSprites() {
-    this.assets.sprites.forEach((asset) => {
-      // Get the image/data for the sprite atlas.
-      const dir = 'sprites/';
-      const name = asset.split('.')[0];
-      const image = this.game.cache.getItem(name, Phaser.Cache.IMAGE);
-
-      if (image) {
-        const compression = image.data.compressionAlgorithm;
-        const format = compression ? `.${compression.toLowerCase()}` : '';
-        const data = require(`assets/${dir}${name}${this.postfix}${format}.json`);
-
-        // Add the sprite atlas to the cache.
-        this.game.cache.addTextureAtlas(name, null, image.data, data, Phaser.Loader.TEXTURE_ATLAS_JSON_HASH);
-      }
-    });
-  }
-
   /**
    * Load an image.
    * @param  {String} name Name of the file.
@@ -127,7 +117,7 @@ export default class WebpackLoader extends Phaser.Plugin {
   _loadImage(name, ext) {
     const dir = 'images/';
     const file = require(`assets/${dir}${name}${this.postfix}.${ext}`);
-    this.game.load.image(name, file);
+    this.scene.load.image(name, file);
   }
 
   /**
@@ -137,28 +127,9 @@ export default class WebpackLoader extends Phaser.Plugin {
    */
   _loadSprite(name, ext) {
     const dir = 'sprites/';
-
-    // Determine which formats are available.
-    const formats = {};
-
-    try {
-      formats.truecolor = require(`assets/${dir}${name}${this.postfix}.${ext}`);
-    } catch (e) {}
-
-    try {
-      formats.pvrtc = require(`assets/${dir}${name}${this.postfix}.pvrtc.pvr`);
-    } catch (e) {}
-
-    try {
-      formats.s3tc = require(`assets/${dir}${name}${this.postfix}.s3tc.pvr`);
-    } catch (e) {}
-
-    try {
-      formats.etc1 = require(`assets/${dir}${name}${this.postfix}.etc1.pkm`);
-    } catch (e) {}
-
-    // Load the format that works on this platform.
-    this.game.load.image(name, formats);
+    const file = require(`assets/${dir}${name}${this.postfix}.${ext}`);
+    const data = require(`assets/${dir}${name}${this.postfix}.json`);
+    this.scene.load.atlas(name, file, data);
   }
 
   /**
@@ -169,7 +140,7 @@ export default class WebpackLoader extends Phaser.Plugin {
   _loadAudio(name, ext) {
     const dir = 'audio/';
     const file = require(`assets/${dir}${name}.${ext}`);
-    this.game.load.audio(name, file);
+    this.scene.load.audio(name, file);
   }
 
   /**
@@ -181,6 +152,6 @@ export default class WebpackLoader extends Phaser.Plugin {
     const dir = 'fonts/';
     const file = require(`assets/${dir}${name}${this.postfix}.${ext}`);
     const data = require(`assets/${dir}${name}${this.postfix}.xml`);
-    this.game.load.bitmapFont(name, file, data);
+    this.scene.load.bitmapFont(name, file, data);
   }
 }