Added Multi Atlas loader support and fixed issue with Set.each iteration.

Author: photonstorm

v3/src/checksum.js

@@ -1,4 +1,4 @@
 var CHECKSUM = {
-build: 'e17829d0-bc6b-11e6-a3c1-a55832c87262'
+build: '40d2cba0-bd62-11e6-be28-f17d7d3d6a73'
 };
 module.exports = CHECKSUM;

v3/src/loader/BaseLoader.js

@@ -23,7 +23,7 @@ var BaseLoader = function ()
 
     //  Read from Game / State Config
     this.enableParallel = true;
-    this.maxParallelDownloads = 8;
+    this.maxParallelDownloads = 4;
 
     //  xhr specific global settings (can be overridden on a per-file basis)
     this.xhr = XHRSettings();
@@ -86,7 +86,7 @@ BaseLoader.prototype = {
 
     start: function ()
     {
-        // console.log('BaseLoader start. Files to load:', this.list.size);
+        console.log('BaseLoader start. Files to load:', this.list.size);
 
         if (!this.isReady())
         {
@@ -107,6 +107,8 @@ BaseLoader.prototype = {
             this.inflight.clear();
             this.queue.clear();
 
+            this.queue.debug = true;
+
             this.updateProgress();
 
             this.processLoadQueue();
@@ -120,16 +122,16 @@ BaseLoader.prototype = {
 
     processLoadQueue: function ()
     {
-        // console.log('BaseLoader processLoadQueue', this.list.size);
+        // console.log('======== BaseLoader processLoadQueue');
+        // console.log('List size', this.list.size);
+        // console.log(this.inflight.size, 'items still in flight. Can load another', (this.maxParallelDownloads - this.inflight.size));
 
         var _this = this;
 
         this.list.each(function (file)
         {
             if (file.state === CONST.FILE_PENDING && _this.inflight.size < _this.maxParallelDownloads)
             {
-                // console.log('ADDED TO QUEUE:', file.key);
-
                 _this.inflight.add(file);
 
                 _this.list.delete(file);
@@ -144,7 +146,6 @@ BaseLoader.prototype = {
             }
 
         });
-
     },
 
     //  private
@@ -193,36 +194,27 @@ BaseLoader.prototype = {
 
     finishedLoading: function ()
     {
-        // console.log('BaseLoader.finishedLoading PROCESSING', this.queue.size, 'files');
+        // console.log('---> BaseLoader.finishedLoading PROCESSING', this.queue.size, 'files');
 
         this._state = CONST.LOADER_PROCESSING;
 
-        var storage = this.storage;
-
-        storage.clear();
+        this.storage.clear();
 
         var _this = this;
 
         this.queue.each(function (file)
         {
+            // console.log('%c Calling process on ' + file.key, 'color: #000000; background: #ffff00;');
+
             file.onProcess(_this.processUpdate.bind(_this));
         });
     },
 
-    removeFromQueue: function (file)
-    {
-        this.queue.delete(file);
-
-        if (this.queue.size === 0 && this._state === CONST.LOADER_PROCESSING)
-        {
-            //  We've processed all the files we loaded
-            this.processComplete();
-        }
-    },
-
     //  Called automatically by the File when it has finished processing
     processUpdate: function (file)
     {
+        // console.log('-> processUpdate', file.key, file.state);
+
         //  This file has failed to load, so move it to the failed Set
         if (file.state === CONST.FILE_ERRORED)
         {
@@ -256,18 +248,30 @@ BaseLoader.prototype = {
         else
         {
             this.storage.add(file);
+
             this.removeFromQueue(file);
         }
     },
 
+    removeFromQueue: function (file)
+    {
+        this.queue.delete(file);
+
+        if (this.queue.size === 0 && this._state === CONST.LOADER_PROCESSING)
+        {
+            //  We've processed all the files we loaded
+            this.processComplete();
+        }
+    },
+
     processComplete: function ()
     {
+        console.log('Loader Complete. Loaded:', this.storage.size, 'Failed:', this.failed.size);
+
         this.list.clear();
         this.inflight.clear();
         this.queue.clear();
 
-        console.log('Loader Complete. Loaded:', this.storage.size, 'Failed:', this.failed.size);
-
         if (this.processCallback)
         {
             this.processCallback();

v3/src/loader/File.js

@@ -86,10 +86,9 @@ File.prototype = {
     {
         this.state = CONST.FILE_PROCESSING;
 
-        //  If overridden by another class, it must call the callback when finished, then onComplete
-        callback(this);
-
         this.onComplete();
+
+        callback(this);
     },
 
     onComplete: function ()
@@ -123,7 +122,14 @@ File.prototype = {
 
         this.src = GetURL(this, baseURL);
 
-        this.xhrLoader = XHRLoader(this, globalXHR);
+        if (this.src.indexOf('data:') === 0)
+        {
+            console.log('Local data URI');
+        }
+        else
+        {
+            this.xhrLoader = XHRLoader(this, globalXHR);
+        }
     }
 };
 

v3/src/loader/GetURL.js

@@ -11,7 +11,7 @@ var GetURL = function (file, baseURL)
     }
     else
     {
-        return baseURL + file.path + file.url;
+        return baseURL + file.url;
     }
 };
 

v3/src/state/systems/Loader.js

@@ -1,7 +1,9 @@
 var CONST = require('../../loader/const');
 var BaseLoader = require('../../loader/BaseLoader');
-var ImageLoader = require('../../loader/filetypes/ImageFile');
+var ImageFile = require('../../loader/filetypes/ImageFile');
+var JSONFile = require('../../loader/filetypes/JSONFile');
 var AtlasJSONFile = require('../../loader/filetypes/AtlasJSONFile');
+var NumberArray = require('../../utils/array/NumberArray');
 
 var Loader = function (state)
 {
@@ -12,14 +14,25 @@ var Loader = function (state)
     * @protected
     */
     this.state = state;
+
+    this._multilist = {};
 };
 
 Loader.prototype = Object.create(BaseLoader.prototype);
 Loader.prototype.constructor = Loader;
 
 Loader.prototype.image = function (key, url)
 {
-    var file = new ImageLoader(key, url, this.path);
+    var file = new ImageFile(key, url, this.path);
+
+    this.addFile(file);
+
+    return this;
+};
+
+Loader.prototype.json = function (key, url)
+{
+    var file = new JSONFile(key, url, this.path);
 
     this.addFile(file);
 
@@ -35,24 +48,14 @@ Loader.prototype.atlas = function (key, textureURL, atlasURL)
     return this;
 };
 
-/**
- * @method Phaser.Loader#multiatlas
- * @param {string} key - Unique asset key of the texture atlas file.
- * @param {array|integer} textureURLs - An array of PNG files, or an integer.
- * @param {array} [atlasURLs] -  An array of JSON files.
- * @param {number} [format] - The format of the data. Can be Phaser.Loader.TEXTURE_ATLAS_JSON_ARRAY (the default), Phaser.Loader.TEXTURE_ATLAS_JSON_HASH or Phaser.Loader.TEXTURE_ATLAS_XML_STARLING.
- * @return {Phaser.Loader} This Loader instance.
- */
-Loader.prototype.multiatlas = function (key, textureURLs, atlasURLs, format)
+Loader.prototype.multiatlas = function (key, textureURLs, atlasURLs)
 {
-    if (format === undefined) { format = CONST.TEXTURE_ATLAS_JSON_ARRAY; }
-
     if (typeof textureURLs === 'number')
     {
         var total = textureURLs;
 
-        textureURLs = Phaser.ArrayUtils.numberArray(0, total, key + '-', '.png');
-        atlasURLs = Phaser.ArrayUtils.numberArray(0, total, key + '-', '.json');
+        textureURLs = NumberArray(0, total, key + '-', '.png');
+        atlasURLs = NumberArray(0, total, key + '-', '.json');
     }
     else
     {
@@ -69,37 +72,31 @@ Loader.prototype.multiatlas = function (key, textureURLs, atlasURLs, format)
 
     var i = 0;
     var multiKey;
-    var imgs = [];
-    var data = [];
+
+    this._multilist[key] = [];
 
     for (i = 0; i < textureURLs.length; i++)
     {
-        //  TODO - Add support for compressed textures
-        multiKey = '_MA_' + key + '_' + i.toString();
+        multiKey = '_MA_IMG_' + key + '_' + i.toString();
 
-        imgs.push(multiKey);
+        this.addFile(new ImageFile(multiKey, textureURLs[i], this.path));
 
-        this.addToFileList('image', multiKey, textureURLs[i], { multiatlas: true });
+        this._multilist[key].push(multiKey);
     }
 
     for (i = 0; i < atlasURLs.length; i++)
     {
-        multiKey = '_MA_' + key + '_' + i.toString();
+        multiKey = '_MA_JSON_' + key + '_' + i.toString();
 
-        data.push(multiKey);
+        this.addFile(new JSONFile(multiKey, atlasURLs[i], this.path));
 
-        //   Check if this can support XML as well?
-        this.addToFileList('json', multiKey, atlasURLs[i], { multiatlas: true });
+        this._multilist[key].push(multiKey);
     }
-
-    this._multilist.push({ key: key, images: imgs, data: data, format: format });
-
-
 };
 
+//  The Loader has finished
 Loader.prototype.processCallback = function ()
 {
-    //  All of the files have loaded. Now to put them into the Cache.
     if (this.storage.size === 0)
     {
         return;
@@ -108,6 +105,52 @@ Loader.prototype.processCallback = function ()
     //  The global Texture Manager
     var textures = this.state.sys.textures;
 
+    //  Process multiatlas groups first
+
+    var file;
+
+    for (var key in this._multilist)
+    {
+        var data = [];
+        var images = [];
+        var keys = this._multilist[key];
+
+        for (var i = 0; i < keys.length; i++)
+        {
+            file = this.storage.get('key', keys[i]);
+
+            if (file)
+            {
+                if (file.type === 'image')
+                {
+                    images.push(file.data);
+                }
+                else if (file.type === 'json')
+                {
+                    data.push(file.data);
+                }
+
+                this.storage.delete(file);
+            }
+        }
+
+        //  Do we have everything needed?
+        if (images.length + data.length === keys.length)
+        {
+            //  Yup, add them to the Texture Manager
+
+            //  Is the data JSON Hash or JSON Array?
+            if (Array.isArray(data[0].frames))
+            {
+                textures.addAtlasJSONArray(key, images, data);
+            }
+            else
+            {
+                textures.addAtlasJSONHash(key, images, data);
+            }
+        }
+    }
+
     this.storage.each(function (file)
     {
         if (file.type === 'image')
@@ -128,6 +171,10 @@ Loader.prototype.processCallback = function ()
                 textures.addAtlas(fileB.key, fileB.data, fileA.data);
             }
         }
+        else if (file.type === 'json')
+        {
+            // console.dir(file.data);
+        }
     });
 
     this.storage.clear();

v3/src/structs/Set.js

@@ -25,11 +25,40 @@ Set.prototype = {
         }
     },
 
-    each: function (callback)
+    dump: function ()
+    {
+        console.group('Set');
+
+        for (var i = 0; i < this.values.length; i++)
+        {
+            var entry = this.values[i];
+            console.log(entry);
+        }
+
+        console.groupEnd();
+    },
+
+    get: function (property, value)
     {
         for (var i = 0; i < this.values.length; i++)
         {
-            if (callback(this.values[i]) === false)
+            var entry = this.values[i];
+
+            if (entry[property] === value)
+            {
+                return entry;
+            }
+        }
+    },
+
+    each: function (callback)
+    {
+        //  Because it's highly likely the callback may modify the Set
+        var temp = this.values.slice();
+
+        for (var i = 0; i < temp.length; i++)
+        {
+            if (callback(temp[i]) === false)
             {
                 break;
             }