Add support for loading compressed textures

Author: goldfire

README.md

@@ -14,6 +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).
 
 ## Install
 
@@ -98,6 +99,16 @@ 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": "0.2.1",
+  "version": "1.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

@@ -42,7 +42,7 @@ export default class WebpackLoader extends Phaser.Plugin {
     return Promise.all([
       this._loadAssets(),
       this._loadFonts(),
-    ]);
+    ]).then(this._addSprites.bind(this));
   }
 
   /**
@@ -82,13 +82,33 @@ export default class WebpackLoader extends Phaser.Plugin {
     });
   }
 
+  /**
+   * 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);
+      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.
    * @param  {String} ext  File extension.
    */
   _loadImage(name, ext) {
-    const file = require(`assets/images/${name}${this.postfix}.${ext}`);
+    const dir = 'images/';
+    const file = require(`assets/${dir}${name}${this.postfix}.${ext}`);
     this.game.load.image(name, file);
   }
 
@@ -98,9 +118,29 @@ export default class WebpackLoader extends Phaser.Plugin {
    * @param  {String} ext  File extension.
    */
   _loadSprite(name, ext) {
-    const file = require(`assets/sprites/${name}${this.postfix}.${ext}`);
-    const data = require(`assets/sprites/${name}${this.postfix}.json`);
-    this.game.load.atlasJSONHash(name, file, null, data);
+    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);
   }
 
   /**
@@ -109,7 +149,8 @@ export default class WebpackLoader extends Phaser.Plugin {
    * @param  {String} ext  File extension.
    */
   _loadAudio(name, ext) {
-    const file = require(`assets/audio/${name}.${ext}`);
+    const dir = 'audio/';
+    const file = require(`assets/${dir}${name}.${ext}`);
     this.game.load.audio(name, file);
   }
 
@@ -119,8 +160,9 @@ export default class WebpackLoader extends Phaser.Plugin {
    * @param  {String} ext  File extension.
    */
   _loadBitmapFont(name, ext) {
-    const file = require(`assets/fonts/${name}${this.postfix}.${ext}`);
-    const data = require(`assets/fonts/${name}${this.postfix}.xml`);
+    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);
   }
 }