change to file-loader for json files

v3.0.0

Author: Matt Colman

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## 3.0.0
+- change loading of spritesheet json files to expect a json url rather than a json object. (This requires the use of [file-loader](https://github.com/webpack-contrib/file-loader) for json files in your webpack config)
+This change was made to support other libraries such as dragonbones. I also think it makes more sense to lazy load json files rather than include them in the main bundle (especially if you're using dragonbones!).
+
 ## 2.1.0
 - support m4a and wav (thanks @BernsteinA)
 - allow loading multiple audio files and let browser choose the best (thanks @BernsteinA)

README.md

@@ -97,6 +97,64 @@ Create an assets directory with subdirectories for the asset types that you will
 /fonts (webfonts)
 /bitmap_fonts (png + xml)
 ```
+### Webpack config
+Expects all assets to be in the form of a url. The main gotcha is that webpack by default will bundle your spritesheet json files into the main bundle which is not what we want. So make sure you use file-loader for json files. Example config:
+```
+rules: [
+  {
+    test: /\.json$/,
+    use: 'file-loader',
+  },
+  {
+    test: /\.woff|\.woff2|\.svg|.eot|\.ttf/,
+    use: 'url-loader?prefix=font/&limit=10000&name=[name]-[hash].[ext]',
+  },
+  {
+    test: /\.mp3$/,
+    use: 'file-loader?hash=sha512&digest=hex&name=[name]-[hash].[ext]',
+  },
+  {
+    test: /\.(png)$/i,
+    use: [
+      {
+        loader: 'file-loader',
+        options: {
+          hash: 'sha512',
+          digest: 'hex',
+          name: '[name]-[hash].[ext]',
+        },
+      },
+      {
+        loader: 'image-webpack-loader',
+        options: {
+          progressive: true,
+          optipng: {
+            optimizationLevel: 7,
+          },
+          gifsicle: {
+            interlaced: false,
+          },
+        },
+      },
+    ],
+  },
+  {
+    test: /\.jpg$/,
+    use: [
+      {
+        loader: 'url-loader?hash=sha512&digest=hex&name=[name]-[hash].[ext]',
+        options: {
+          limit: 25000,
+        },
+      },
+    ],
+  },
+  {
+    test: /\.xml$/,
+    use: 'file-loader?hash=sha512&digest=hex&name=[name]-[hash].[ext]',
+  },
+]
+```
 
 ## Usage
 ### Basic

lib/AssetLoader.js

@@ -109,7 +109,7 @@ var AssetLoader = function (_Plugin) {
 
       if (!imageUrl) warn('spriteSheet image', key);
       if (!jsonUrl) warn('spriteSheet json', key);
-      this.game.load.atlasJSONArray(key, imageUrl, null, jsonUrl);
+      this.game.load.atlasJSONArray(key, imageUrl, jsonUrl);
     }
   }, {
     key: 'loadImage',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "phaser-manifest-loader",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "description": "Easily load assets into your Phaser game using a simple manifest",
   "author": "matt colman <[email protected]>",
   "main": "lib/index.js",

src/AssetLoader.js

@@ -39,23 +39,23 @@ export default class AssetLoader extends Plugin {
 
   loadAudio (key) {
     const urls = []
-    
+
     try {
       urls.push(this.req(`./audio/${key}.mp3`))
     } catch (e) {}
-    
+
     try {
       urls.push(this.req(`./audio/${key}.ogg`))
     } catch (e) {}
-    
+
     try {
       urls.push(this.req(`./audio/${key}.m4a`))
     } catch (e) {}
-    
+
     try {
       urls.push(this.req(`./audio/${key}.wav`))
     } catch (e) {}
-    
+
     if (urls.length === 0) {
       warn('audio', key)
     } else {
@@ -75,7 +75,7 @@ export default class AssetLoader extends Plugin {
 
     if (!imageUrl) warn('spriteSheet image', key)
     if (!jsonUrl) warn('spriteSheet json', key)
-    this.game.load.atlasJSONArray(key, imageUrl, null, jsonUrl)
+    this.game.load.atlasJSONArray(key, imageUrl, jsonUrl)
   }
 
   loadImage (key, assetPostfix) {