Completely empty Tilemaps can now be created. This allows for dynamic map generation at runtime.

Loads of updates across most the Tilemap files. Not finished yet, still CSV loading to do and a multi-tileset issue to resolve, but it's a lot more flexible now.

Author: photonstorm

README.md

@@ -160,6 +160,7 @@ Updates:
 * ScaleManager has 2 new events: ScaleManager.enterFullScreen and ScaleManager.leaveFullScreen, so you can respond to fullscreen changes directly.
 * RandomDataGenerator.integerInRange(min, max) now includes both `min` and `max` within its range (#501)
 * Tween no longer copies all the object properties into the `_valuesStart` object on creation.
+* Completely empty Tilemaps can now be created. This allows for dynamic map generation at runtime.
 
 
 Bug Fixes:

examples/tilemaps/paint tiles.js

@@ -13,6 +13,7 @@ var layer;
 
 var marker;
 var currentTile;
+var cursors;
 
 function create() {
 
@@ -30,6 +31,8 @@ function create() {
     marker.lineStyle(2, 0x000000, 1);
     marker.drawRect(0, 0, 32, 32);
 
+    cursors = game.input.keyboard.createCursorKeys();
+
 }
 
 function update() {
@@ -52,11 +55,28 @@ function update() {
         }
     }
 
+    if (cursors.left.isDown)
+    {
+        game.camera.x -= 4;
+    }
+    else if (cursors.right.isDown)
+    {
+        game.camera.x += 4;
+    }
+
+    if (cursors.up.isDown)
+    {
+        game.camera.y -= 4;
+    }
+    else if (cursors.down.isDown)
+    {
+        game.camera.y += 4;
+    }
+
 }
 
 function render() {
 
-    game.debug.text('Left-click to paint. Shift + Left-click to select tile.', 32, 32, 'rgb(0,0,0)');
-    game.debug.text('Tile: ' + map.getTile(layer.getTileX(marker.x), layer.getTileY(marker.y)), 32, 48, 'rgb(0,0,0)');
+    game.debug.text('Left-click to paint. Shift + Left-click to select tile. Arrows to scroll.', 32, 32, '#efefef');
 
 }

examples/wip/tilemap blank.js

@@ -0,0 +1,68 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
+// var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });
+
+function preload() {
+
+    game.load.image('ground_1x1', 'assets/tilemaps/tiles/ground_1x1.png');
+
+}
+
+var map;
+var tileset;
+var layer;
+var cursors;
+
+function create() {
+
+    game.stage.backgroundColor = '#787878';
+
+    //  Creates a blank tilemap
+    map = game.add.tilemap();
+
+    //  Creates a layer and sets-up the map dimensions.
+    //  In this case the map is 30x30 tiles in size and the tiles are 32x32 pixels in size.
+    map.create('level1', 30, 30, 32, 32);
+
+    //  Add a Tileset image to the map
+    map.addTilesetImage('ground_1x1');
+    
+    map.putTile(4, 1, 1)
+    map.putTile(10, 2, 1)
+    map.putTile(10, 3, 1)
+    map.putTile(10, 4, 1)
+
+    //  Create a layer. This is where the map is rendered to.
+    layer = map.createLayer('level1');
+
+    // layer.resizeWorld();
+    // map.setCollisionBetween(1, 12);
+    // layer.debug = true;
+
+    cursors = game.input.keyboard.createCursorKeys();
+
+}
+
+function update() {
+
+    if (cursors.left.isDown)
+    {
+    }
+    else if (cursors.right.isDown)
+    {
+    }
+
+    if (cursors.up.isDown)
+    {
+    }
+    else if (cursors.down.isDown)
+    {
+    }
+
+}
+
+function render() {
+
+    game.debug.cameraInfo(game.camera, 32, 32);
+
+}

examples/wip/tween var.js

@@ -0,0 +1,39 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
+
+function preload() {
+
+    game.load.spritesheet('mummy', 'assets/sprites/metalslug_mummy37x45.png', 37, 45, 18);
+
+}
+
+var mummy;
+
+function create() {
+
+	game.stage.backgroundColor = 0x3d4d3d;
+
+    mummy = game.add.sprite(300, 300, 'mummy', 5);
+
+    var t = game.add.tween(mummy).to( { "x": 400, "y": 400 }, 5000, Phaser.Easing.Linear.None, true);
+
+    // var t = game.add.tween(mummy).to( { "scale.x": 4, "scale.y": 4 }, 5000, Phaser.Easing.Linear.None, true);
+
+    t.onComplete.add(tweenOver, this);
+
+}
+
+function tweenOver(a) {
+
+	console.log('over');
+	console.log(a);
+
+}
+
+function update() {
+
+}
+
+function render() {
+	
+}

src/gameobjects/GameObjectCreator.js

@@ -273,13 +273,12 @@ Phaser.GameObjectCreator.prototype = {
     * Creates a new Tilemap object.
     *
     * @method Phaser.GameObjectCreator#tilemap
-    * @param {string} key - Asset key for the JSON or CSV map data in the cache.
-    * @param {object|string} tilesets - An object mapping Cache.tileset keys with the tileset names in the JSON file. If a string is provided that will be used.
+    * @param {string} [key] - The key of the tilemap data as stored in the Cache. If you're creating a blank map don't pass anything for this parameter.
     * @return {Phaser.Tilemap} The newly created tilemap object.
     */
-    tilemap: function (key, tilesets) {
+    tilemap: function (key) {
 
-        return new Phaser.Tilemap(this.game, key, tilesets);
+        return new Phaser.Tilemap(this.game, key);
 
     },
 

src/gameobjects/GameObjectFactory.js

@@ -304,13 +304,12 @@ Phaser.GameObjectFactory.prototype = {
     * Creates a new Tilemap object.
     *
     * @method Phaser.GameObjectFactory#tilemap
-    * @param {string} key - Asset key for the JSON or CSV map data in the cache.
-    * @param {object|string} tilesets - An object mapping Cache.tileset keys with the tileset names in the JSON file. If a string is provided that will be used.
+    * @param {string} [key] - The key of the tilemap data as stored in the Cache. If you're creating a blank map don't pass anything for this parameter.
     * @return {Phaser.Tilemap} The newly created tilemap object.
     */
-    tilemap: function (key, tilesets) {
+    tilemap: function (key) {
 
-        return new Phaser.Tilemap(this.game, key, tilesets);
+        return new Phaser.Tilemap(this.game, key);
 
     },
 

src/physics/World.js

@@ -367,7 +367,10 @@ Phaser.Physics.World.prototype = {
 
         if (this.bounds !== null)
         {
-            this.world.removeBody(this.bounds);
+            if (this.bounds.world)
+            {
+                this.world.removeBody(this.bounds);
+            }
 
             var i = this.bounds.shapes.length;
 

src/tilemap/Tilemap.js

@@ -11,7 +11,7 @@
 * @class Phaser.Tilemap
 * @constructor
 * @param {Phaser.Game} game - Game reference to the currently running game.
-* @param {string} [key] - The key of the tilemap data as stored in the Cache.
+* @param {string} [key] - The key of the tilemap data as stored in the Cache. If you're creating a blank map don't pass anything for this parameter.
 */
 Phaser.Tilemap = function (game, key) {
 
@@ -155,37 +155,52 @@ Phaser.Tilemap.prototype = {
     * Creates an empty map of the given dimensions.
     *
     * @method Phaser.Tilemap#create
-    * @param {string} name - The name of the map (mostly used for debugging)
+    * @param {string} name - The name of the default layer of the map
     * @param {number} width - The width of the map in tiles.
     * @param {number} height - The height of the map in tiles.
+    * @param {number} tileWidth - The width of the tiles the map uses for calculations.
+    * @param {number} tileHeight - The height of the tiles the map uses for calculations.
     */
-    create: function (name, width, height) {
+    create: function (name, width, height, tileWidth, tileHeight) {
 
-        var data = [];
+        this.width = width;
+        this.height = height;
+        this.tileWidth = tileWidth;
+        this.tileHeight = tileHeight;
+        this.widthInPixels = width * tileWidth;
+        this.heightInPixels = height * tileHeight;
+
+        var row;
+        var output = [];
 
         for (var y = 0; y < height; y++)
         {
-            data[y] = [];
+            row = [];
 
             for (var x = 0; x < width; x++)
             {
-                data[y][x] = 0;
+                row.push(null);
             }
+
+            output.push(row);
         }
 
         this.layers.push({
 
             name: name,
+            x: 0,
+            y: 0,
             width: width,
             height: height,
+            widthInPixels: this.widthInPixels,
+            heightInPixels: this.heightInPixels,
             alpha: 1,
             visible: true,
-            tileMargin: 0,
-            tileSpacing: 0,
-            format: Phaser.Tilemap.CSV,
-            data: data,
+            properties: {},
             indexes: [],
-			dirty: true
+            callbacks: [],
+            bodies: [],
+            data: output
 
         });
 
@@ -200,8 +215,17 @@ Phaser.Tilemap.prototype = {
     * @method Phaser.Tilemap#addTilesetImage
     * @param {string} tileset - The name of the tileset as specified in the map data.
     * @param {string} [key] - The key of the Phaser.Cache image used for this tileset. If not specified it will look for an image with a key matching the tileset parameter.
+    * @param {number} [tileWidth] - The width of the tiles in the Tileset Image. If not given it will default to the map.tileWidth value.
+    * @param {number} [tileHeight] - The height of the tiles in the Tileset Image. If not given it will default to the map.tileHeight value.
+    * @param {number} [tileMargin=0] - The width of the tiles in the Tileset Image. If not given it will default to the map.tileWidth value.
+    * @param {number} [tileSpacing=0] - The height of the tiles in the Tileset Image. If not given it will default to the map.tileHeight value.
     */
-    addTilesetImage: function (tileset, key) {
+    addTilesetImage: function (tileset, key, tileWidth, tileHeight, tileMargin, tileSpacing) {
+
+        if (typeof tileWidth === 'undefined') { tileWidth = this.tileWidth; }
+        if (typeof tileHeight === 'undefined') { tileHeight = this.tileHeight; }
+        if (typeof tileMargin === 'undefined') { tileMargin = 0; }
+        if (typeof tileSpacing === 'undefined') { tileSpacing = 0; }
 
         if (typeof key === 'undefined')
         {
@@ -222,10 +246,17 @@ Phaser.Tilemap.prototype = {
 
         if (this.tilesets[tileset])
         {
-            this.tilesets[tileset].image = this.game.cache.getImage(key);
-
+            this.tilesets[tileset].setImage(this.game.cache.getImage(key));
             return true;
         }
+        else
+        {
+            var newSet = new Phaser.Tileset(key, 0, tileWidth, tileHeight, tileMargin, tileSpacing, {});
+
+            newSet.setImage(this.game.cache.getImage(key));
+
+            this.tilesets.push(newSet);
+        }
 
         return false;
 
@@ -920,6 +951,12 @@ Phaser.Tilemap.prototype = {
 
     },
 
+    hasTile: function (x, y, layer) {
+
+        return (this.layers[layer].data[y] !== null && this.layers[layer].data[y][x] !== null);
+
+    },
+
     /**
     * Puts a tile of the given index value at the coordinate specified.
     *
@@ -937,14 +974,30 @@ Phaser.Tilemap.prototype = {
         {
             if (tile instanceof Phaser.Tile)
             {
-                this.layers[layer].data[y][x].copy(tile);
+                if (this.hasTile(x, y, layer))
+                {
+                    this.layers[layer].data[y][x].copy(tile);
+                }
+                else
+                {
+                    //Phaser.Tile = function (layer, index, x, y, width, height) {
+                    this.layers[layer].data[y][x] = new Phaser.Tile(layer, tile.index, x, y, tile.width, tile.height);
+                }
             }
             else
             {
-                this.layers[layer].data[y][x].index = tile;
+                if (this.hasTile(x, y, layer))
+                {
+                    this.layers[layer].data[y][x].index = tile;
+                }
+                else
+                {
+                    this.layers[layer].data[y][x] = new Phaser.Tile(layer, tile, x, y, this.tileWidth, this.tileHeight);
+                }
             }
 
 			this.layers[layer].dirty = true;
+
             this.calculateFaces(layer);
         }