Added multi atlas support back in. Pack files can now load multi-atlas files too.

src/loader/LinkFile.js

@@ -91,6 +91,8 @@ var LinkFile = new Class({
          */
         this.failed = 0;
 
+        this.config = {};
+
         //  Link the files
         for (var i = 0; i < files.length; i++)
         {
@@ -103,6 +105,21 @@ var LinkFile = new Class({
         return (this.pending === 0 && this.failed === 0);
     },
 
+    addToLinkFile: function (file)
+    {
+        console.log('LinkFile - new file added: ', file.key);
+
+        this.files.push(file);
+
+        file.linkFile = this;
+
+        this.pending++;
+
+        this.complete = false;
+
+        return this;
+    },
+
     /**
      * Called by each File when it finishes loading.
      *

src/loader/filetypes/ImageFile.js

@@ -64,8 +64,6 @@ var ImageFile = new Class({
 
     onProcess: function ()
     {
-        console.log('onProcess', this.key);
-
         this.state = CONST.FILE_PROCESSING;
 
         this.data = new Image();

src/loader/filetypes/MultiAtlasFile.js

@@ -0,0 +1,209 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var Class = require('../../utils/Class');
+var FileTypesManager = require('../FileTypesManager');
+var GetFastValue = require('../../utils/object/GetFastValue');
+var ImageFile = require('./ImageFile.js');
+var IsPlainObject = require('../../utils/object/IsPlainObject');
+var JSONFile = require('./JSONFile.js');
+var LinkFile = require('../LinkFile.js');
+
+/**
+ * @classdesc
+ * A Multi Atlas File.
+ *
+ * @class MultiAtlasFile
+ * @extends Phaser.Loader.LinkFile
+ * @memberOf Phaser.Loader.FileTypes
+ * @constructor
+ * @since 3.7.0
+ *
+ * @param {string} key - The key of the file within the loader.
+ * @param {string} textureURL - The url to load the texture file from.
+ * @param {string} atlasURL - The url to load the atlas file from.
+ * @param {string} path - The path of the file.
+ * @param {XHRSettingsObject} [textureXhrSettings] - Optional texture file specific XHR settings.
+ * @param {XHRSettingsObject} [atlasXhrSettings] - Optional atlas file specific XHR settings.
+ */
+var MultiAtlasFile = new Class({
+
+    Extends: LinkFile,
+
+    initialize:
+
+    function MultiAtlasFile (loader, key, atlasURL, path, baseURL, atlasXhrSettings, textureXhrSettings)
+    {
+        if (IsPlainObject(key))
+        {
+            var config = key;
+
+            key = GetFastValue(config, 'key');
+            url = GetFastValue(config, 'url');
+            xhrSettings = GetFastValue(config, 'xhrSettings');
+            path = GetFastValue(config, 'path');
+            baseURL = GetFastValue(config, 'baseURL');
+            textureXhrSettings = GetFastValue(config, 'textureXhrSettings');
+        }
+
+        var data = new JSONFile(loader, key, url, xhrSettings);
+
+        LinkFile.call(this, loader, 'multiatlas', key, [ data ]);
+
+        this.config.path = path;
+        this.config.baseURL = baseURL;
+        this.config.textureXhrSettings = textureXhrSettings;
+    },
+
+    /**
+     * Called by each File when it finishes loading.
+     *
+     * @method Phaser.Loader.LinkFile#onFileComplete
+     * @since 3.7.0
+     *
+     * @param {Phaser.Loader.File} file - The File that has completed processing.
+     */
+    onFileComplete: function (file)
+    {
+        var index = this.files.indexOf(file);
+
+        if (index !== -1)
+        {
+            this.pending--;
+
+            if (file.type === 'json' && file.data.hasOwnProperty('textures'))
+            {
+                //  Inspect the data for the files to now load
+                var textures = file.data.textures;
+
+                var config = this.config;
+                var loader = this.loader;
+
+                var currentBaseURL = loader.baseURL;
+                var currentPath = loader.path;
+                var currentPrefix = loader.prefix;
+
+                var baseURL = GetFastValue(config, 'baseURL', currentBaseURL);
+                var path = GetFastValue(config, 'path', currentPath);
+                var prefix = GetFastValue(config, 'prefix', currentPrefix);
+                var textureXhrSettings = GetFastValue(config, 'textureXhrSettings');
+
+                loader.setBaseURL(baseURL);
+                loader.setPath(path);
+                loader.setPrefix(prefix);
+
+                for (var i = 0; i < textures.length; i++)
+                {
+                    //  "image": "texture-packer-multi-atlas-0.png",
+                    var textureURL = textures[i].image;
+
+                    var key = '_MA_' + textureURL;
+
+                    var image = new ImageFile(loader, key, textureURL, textureXhrSettings);
+
+                    this.addToLinkFile(image);
+
+                    loader.addFile(image);
+                }
+
+                //  Reset the loader settings
+                loader.setBaseURL(currentBaseURL);
+                loader.setPath(currentPath);
+                loader.setPrefix(currentPrefix);
+            }
+        }
+    },
+
+    addToCache: function ()
+    {
+        if (this.isReadyToProcess())
+        {
+            var fileJSON = this.files[0];
+
+            fileJSON.addToCache();
+
+            console.log(fileJSON.data);
+
+            var data = [];
+            var images = [];
+
+            for (var i = 1; i < this.files.length; i++)
+            {
+                var key = this.files[i].key.substr(4);
+                var image = this.files[i].data;
+
+                //  Now we need to find out which json entry this mapped to
+                for (var t = 0; t < fileJSON.data.textures.length; t++)
+                {
+                    var item = fileJSON.data.textures[t];
+
+                    if (item.image === key)
+                    {
+                        images.push(image);
+                        data.push(item);
+                        break;
+                    }
+                }
+            }
+
+            this.loader.textureManager.addAtlasJSONArray(this.key, images, data);
+
+            this.complete = true;
+
+            for (i = 0; i < this.files.length; i++)
+            {
+                this.files[i].pendingDestroy();
+            }
+        }
+    }
+
+});
+
+/**
+ * Adds a Multi Texture Atlas file to the current load queue.
+ *
+ * Note: This method will only be available if the Atlas JSON File type has been built into Phaser.
+ *
+ * The file is **not** loaded immediately after calling this method.
+ * Instead, the file is added to a queue within the Loader, which is processed automatically when the Loader starts.
+ *
+ * @method Phaser.Loader.LoaderPlugin#multiatlas
+ * @since 3.7.0
+ *
+ * @param {string} key - The key of the file within the loader.
+ * @param {string} atlasURL - The url to load the atlas file from.
+ * @param {XHRSettingsObject} [atlasXhrSettings] - Optional atlas file specific XHR settings.
+ *
+ * @return {Phaser.Loader.LoaderPlugin} The Loader.
+ */
+FileTypesManager.register('multiatlas', function (key, atlasURL, path, baseURL, atlasXhrSettings)
+{
+    var linkfile;
+
+    //  Supports an Object file definition in the key argument
+    //  Or an array of objects in the key argument
+    //  Or a single entry where all arguments have been defined
+
+    if (Array.isArray(key))
+    {
+        for (var i = 0; i < key.length; i++)
+        {
+            linkfile = new MultiAtlasFile(this, key[i]);
+
+            this.addFile(linkfile.files);
+        }
+    }
+    else
+    {
+        linkfile = new MultiAtlasFile(this, key, atlasURL, path, baseURL, atlasXhrSettings);
+
+        this.addFile(linkfile.files);
+    }
+
+    return this;
+});
+
+module.exports = MultiAtlasFile;

src/loader/filetypes/index.js

@@ -44,6 +44,7 @@ module.exports = {
     HTMLFile: require('./HTMLFile'),
     ImageFile: require('./ImageFile'),
     JSONFile: require('./JSONFile'),
+    MultiAtlasFile: require('./MultiAtlasFile'),
     PackFile: require('./PackFile'),
     PluginFile: require('./PluginFile'),
     ScriptFile: require('./ScriptFile'),

src/textures/Texture.js

@@ -27,7 +27,7 @@ var TextureSource = require('./TextureSource');
  *
  * @param {Phaser.Textures.TextureManager} manager - A reference to the Texture Manager this Texture belongs to.
  * @param {string} key - The unique string-based key of this Texture.
- * @param {(HTMLImageElement|HTMLCanvasElement)} source - The source that is used to create the texture. Usually an Image, but can also be a Canvas.
+ * @param {(HTMLImageElement[]|HTMLCanvasElement[])} source - An array of sources that are used to create the texture. Usually Images, but can also be a Canvas.
  * @param {number} [width] - The width of the Texture. This is optional and automatically derived from the source images.
  * @param {number} [height] - The height of the Texture. This is optional and automatically derived from the source images.
  */

src/textures/TextureManager.js

@@ -410,8 +410,8 @@ var TextureManager = new Class({
      * @since 3.0.0
      *
      * @param {string} key - The unique string-based key of the Texture.
-     * @param {HTMLImageElement} source - The source Image element.
-     * @param {object} data - The Texture Atlas data.
+     * @param {(HTMLImageElement|HTMLImageElement[])} source - The source Image element/s.
+     * @param {(object|object[])} data - The Texture Atlas data/s.
      *
      * @return {?Phaser.Textures.Texture} The Texture that was created, or `null` if the key is already in use.
      */
@@ -427,6 +427,7 @@ var TextureManager = new Class({
             {
                 var singleAtlasFile = (data.length === 1); // multi-pack with one atlas file for all images
 
+                //  !! Assumes the textures are in the same order in the source array as in the json data !!
                 for (var i = 0; i < texture.source.length; i++)
                 {
                     var atlasData = singleAtlasFile ? data[0] : data[i];