Merge pull request phaserjs#1879 from asyed94/dev

Implemented Tiled Image Collection support.

Author: photonstorm

src/tilemap/ImageCollection.js

@@ -0,0 +1,133 @@
+/**
+* @author       Richard Davey <rich@photonstorm.com>
+* @copyright    2015 Photon Storm Ltd.
+* @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+*/
+
+/**
+* An Image Collection is a special tileset containing mulitple images, with no slicing into each image.
+*
+* Image Collections are normally created automatically when Tiled data is loaded.
+*
+* @class Phaser.ImageCollection
+* @constructor
+* @param {string} name - The name of the image collection in the map data.
+* @param {integer} firstgid - The first image index this image collection contains.
+* @param {integer} [width=32] - Width of widest image (in pixels).
+* @param {integer} [height=32] - Height of tallest image (in pixels).
+* @param {integer} [margin=0] - The margin around all images in the collection (in pixels).
+* @param {integer} [spacing=0] - The spacing between each image in the collection (in pixels).
+* @param {object} [properties={}] - Custom Image Collection properties.
+*/
+Phaser.ImageCollection = function (name, firstgid, width, height, margin, spacing, properties) {
+
+    if (typeof width === 'undefined' || width <= 0) { width = 32; }
+    if (typeof height === 'undefined' || height <= 0) { height = 32; }
+    if (typeof margin === 'undefined') { margin = 0; }
+    if (typeof spacing === 'undefined') { spacing = 0; }
+
+    /**
+    * The name of the Image Collection.
+    * @property {string} name
+    */
+    this.name = name;
+
+    /**
+    * The Tiled firstgid value.
+    * This is the starting index of the first image index this Image Collection contains.
+    * @property {integer} firstgid
+    */
+    this.firstgid = firstgid | 0;
+
+    /**
+    * The width of the widest image (in pixels).
+    * @property {integer} imageWidth
+    * @readonly
+    */
+    this.imageWidth = width | 0;
+
+    /**
+    * The height of the tallest image (in pixels).
+    * @property {integer} imageHeight
+    * @readonly
+    */
+    this.imageHeight = height | 0;
+
+    /**
+    * The margin around the images in the collection (in pixels).
+    * Use `setSpacing` to change.
+    * @property {integer} imageMarge
+    * @readonly
+    */
+    // Modified internally
+    this.imageMargin = margin | 0;
+
+    /**
+    * The spacing between each image in the collection (in pixels).
+    * Use `setSpacing` to change.
+    * @property {integer} imageSpacing
+    * @readonly
+    */
+    this.imageSpacing = spacing | 0;
+
+    /**
+    * Image Collection-specific properties that are typically defined in the Tiled editor.
+    * @property {object} properties
+    */
+    this.properties = properties || {};
+
+    /**
+    * The cached images that are a part of this collection.
+    * @property {?object} images
+    * @readonly
+    */
+    // Modified internally
+    this.images = [];
+
+    /**
+    * The total number of images in the image collection.
+    * @property {integer} total
+    * @readonly
+    */
+    // Modified internally
+    this.total = 0;
+};
+
+Phaser.ImageCollection.prototype = {
+    /**
+    * Returns true if and only if this image collection contains the given image index.
+    *
+    * @method Phaser.ImageCollection#containsImageIndex
+    * @public
+    * @return {boolean} True if this Image Collection contains the given index.
+    */
+    containsImageIndex: function (imageIndex) {
+
+        return (
+            imageIndex >= this.firstgid &&
+            imageIndex < (this.firstgid + this.total)
+        );
+
+    },
+
+    /**
+    * Add an image to this Image Collection.
+    *
+    * @method Phaser.ImageCollection#addImage
+    * @public
+    * @param {string} image - The the key of the image in the Image Collection and in the cache.
+    * @param {integer} gid - The gid of the image in the Image Collection.
+    */
+    addImage: function (gid, image) {
+        var newImage = {
+            gid: gid,
+            image: image
+        };
+
+        this.images.push(newImage);
+        this.total ++;
+    }
+};
+
+
+Phaser.ImageCollection.prototype.constructor = Phaser.ImageCollection;

src/tilemap/Tilemap.js

@@ -100,6 +100,11 @@ Phaser.Tilemap = function (game, key, tileWidth, tileHeight, width, height) {
     * @property {array} tilesets - An array of Tilesets.
     */
     this.tilesets = data.tilesets;
+    
+    /**
+    * @property {array} imagecollections - An array of Image Collections.
+    */
+    this.imagecollections = data.imagecollections;
 
     /**
     * @property {array} tiles - The super array of Tiles.

src/tilemap/TilemapParser.js

@@ -376,8 +376,9 @@ Phaser.TilemapParser = {
 
         map.images = images;
 
-        //  Tilesets
+        //  Tilesets & Image Collections
         var tilesets = [];
+        var imagecollections = [];
 
         for (var i = 0; i < json.tilesets.length; i++)
         {
@@ -400,13 +401,22 @@ Phaser.TilemapParser = {
             }
             else
             {
-                // TODO: Handle Tileset Image Collections (multiple images in a tileset, no slicing into each image)
-                console.warn("Phaser.TilemapParser - Image Collection Tilesets are not support");
+                var newCollection = new Phaser.ImageCollection(set.name, set.firstgid, set.tilewidth, set.tileheight, set.margin, set.spacing, set.properties);
+                
+                for (var i in set.tiles)
+                {
+                    var image = set.tiles[i].image;
+                    var gid = set.firstgid + parseInt(i, 10);
+                    newCollection.addImage(gid, image);
+                }
+
+                imagecollections.push(newCollection);
             }
 
         }
 
         map.tilesets = tilesets;
+        map.imagecollections = imagecollections;
 
         //  Objects & Collision Data (polylines, etc)
         var objects = {};