Tilemap painting example and other smaller updates.

README.md

@@ -124,6 +124,9 @@ Version 1.0.7 (in progress in the dev branch)
 * Fixed Rectangle.union (thanks andron77)
 * Debug.renderSpriteBody updated to use a the new Sprite.Body.screenX/Y properties.
 * Added Text.destroy() and BitmapText.destroy(), also updated Group.remove to make it more bullet-proof when an element doesn't have any events.
+* Added Phaser.Utils.shuffle to shuffle an array.
+* Added Graphics.destroy, x, y and updated angle functions.
+
 
 
 

examples/tilemaps/paint tiles.php

@@ -0,0 +1,73 @@
+<?php
+    $title = "Painting Tiles";
+    require('../head.php');
+?>
+
+<script type="text/javascript">
+
+    var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update, render: render });
+
+    function preload() {
+
+        game.load.tilemap('desert', 'assets/maps/desert.json', null, Phaser.Tilemap.TILED_JSON);
+        game.load.tileset('tiles', 'assets/tiles/tmw_desert_spacing.png', 32, 32, -1, 1, 1);
+
+    }
+
+    var map;
+    var tileset;
+    var layer;
+
+    var marker;
+    var currentTile = 0;
+
+    function create() {
+
+        map = game.add.tilemap('desert');
+
+        tileset = game.add.tileset('tiles');
+        
+        layer = game.add.tilemapLayer(0, 0, 800, 600, tileset, map, 0);
+ 
+        layer.resizeWorld();
+
+        marker = game.add.graphics();
+        marker.lineStyle(2, 0x000000, 1);
+        marker.drawRect(0, 0, 32, 32);
+
+    }
+
+    function update() {
+
+        marker.x = layer.getTileX(game.input.activePointer.worldX) * 32;
+        marker.y = layer.getTileY(game.input.activePointer.worldY) * 32;
+
+        if (game.input.mousePointer.isDown)
+        {
+            if (game.input.keyboard.isDown(Phaser.Keyboard.SHIFT))
+            {
+                currentTile = map.getTile(layer.getTileX(marker.x), layer.getTileY(marker.y));
+            }
+            else
+            {
+                if (map.getTile(layer.getTileX(marker.x), layer.getTileY(marker.y)) != currentTile)
+                {
+                    map.putTile(currentTile, layer.getTileX(marker.x), layer.getTileY(marker.y))
+                }
+            }
+        }
+
+    }
+
+    function render() {
+
+        game.debug.renderText('Left-click to paint. Shift + Left-click to select tile.', 32, 32, 'rgb(0,0,0)');
+        game.debug.renderText('Tile: ' + map.getTile(layer.getTileX(marker.x), layer.getTileY(marker.y)), 32, 48, 'rgb(0,0,0)');
+
+    }
+
+</script>
+
+<?php
+    require('../foot.php');
+?>

examples/tilemaps/randomise tiles.php

@@ -50,7 +50,7 @@
 
         //  You can also pass in x, y, width, height values to control the area in which the replace happens
 
-        map.random(layer.getTileX(sprite.x), layer.getTileY(sprite.y), 6, 6);
+        map.shuffle(layer.getTileX(sprite.x), layer.getTileY(sprite.y), 6, 6);
 
     }
 

src/gameobjects/Graphics.js

@@ -17,6 +17,8 @@
 */
 Phaser.Graphics = function (game, x, y) {
 
+    this.game = game;
+
     PIXI.Graphics.call(this);
 
     /**
@@ -28,18 +30,59 @@ Phaser.Graphics = function (game, x, y) {
 
 Phaser.Graphics.prototype = Object.create(PIXI.Graphics.prototype);
 Phaser.Graphics.prototype.constructor = Phaser.Graphics;
-Phaser.Graphics.prototype = Phaser.Utils.extend(true, Phaser.Graphics.prototype, Phaser.Sprite.prototype);
 
 //  Add our own custom methods
 
+/**
+* Description.
+* 
+* @method Phaser.Sprite.prototype.destroy
+*/
+Phaser.Graphics.prototype.destroy = function() {
+
+    this.clear();
+
+    if (this.group)
+    {
+        this.group.remove(this);
+    }
+
+    this.game = null;
+
+}
+
 Object.defineProperty(Phaser.Graphics.prototype, 'angle', {
 
     get: function() {
-        return Phaser.Math.radToDeg(this.rotation);
+        return Phaser.Math.wrapAngle(Phaser.Math.radToDeg(this.rotation));
     },
 
     set: function(value) {
-        this.rotation = Phaser.Math.degToRad(value);
+        this.rotation = Phaser.Math.degToRad(Phaser.Math.wrapAngle(value));
+    }
+
+});
+
+Object.defineProperty(Phaser.Graphics.prototype, 'x', {
+
+    get: function() {
+        return this.position.x;
+    },
+
+    set: function(value) {
+        this.position.x = value;
+    }
+
+});
+
+Object.defineProperty(Phaser.Graphics.prototype, 'y', {
+
+    get: function() {
+        return this.position.y;
+    },
+
+    set: function(value) {
+        this.position.y = value;
     }
 
 });

src/tilemap/Tilemap.js

@@ -15,6 +15,7 @@ Phaser.Tilemap = function (game, key) {
     	this.key = key;
 
 		this.layers = game.cache.getTilemapData(key).layers;
+        this.calculateIndexes();
     }
     else
     {
@@ -62,7 +63,8 @@ Phaser.Tilemap.prototype = {
 			tileMargin: 0, 
 			tileSpacing: 0,
 			format: Phaser.Tilemap.CSV,
-			data: data
+			data: data,
+            indexes: []
 
         });
 
@@ -70,6 +72,28 @@ Phaser.Tilemap.prototype = {
 
     },
 
+    calculateIndexes: function () {
+
+        for (var layer = 0; layer < this.layers.length; layer++)
+        {
+            this.layers[layer].indexes = [];
+
+            for (var y = 0; y < this.layers[layer].height ; y++)
+            {
+                for (var x = 0; x < this.layers[layer].width; x++)
+                {
+                    var idx = this.layers[layer].data[y][x];
+
+                    if (this.layers[layer].indexes.indexOf(idx) === -1)
+                    {
+                        this.layers[layer].indexes.push(idx);
+                    }
+                }
+            }
+        }
+
+    },
+
     setLayer: function (layer) {
 
     	if (this.layers[layer])
@@ -86,7 +110,9 @@ Phaser.Tilemap.prototype = {
     * @param {number} y - Y position of this tile.
     * @param {number} index - The index of this tile type in the core map data.
     */
-    putTile: function (x, y, index) {
+    putTile: function (index, x, y, layer) {
+
+        if (typeof layer === "undefined") { layer = this.currentLayer; }
 
     	if (x >= 0 && x < this.layers[this.currentLayer].width && y >= 0 && y < this.layers[this.currentLayer].height)
     	{
@@ -97,6 +123,31 @@ Phaser.Tilemap.prototype = {
 
     },
 
+    getTile: function (x, y, layer) {
+
+        if (typeof layer === "undefined") { layer = this.currentLayer; }
+
+        if (x >= 0 && x < this.layers[this.currentLayer].width && y >= 0 && y < this.layers[this.currentLayer].height)
+        {
+            return this.layers[this.currentLayer].data[y][x];
+        }
+
+    },
+
+    getTileWorldXY: function (x, y, tileWidth, tileHeight, layer) {
+
+        if (typeof layer === "undefined") { layer = this.currentLayer; }
+
+        x = this.game.math.snapToFloor(x, tileWidth) / tileWidth;
+        y = this.game.math.snapToFloor(y, tileHeight) / tileHeight;
+
+        if (x >= 0 && x < this.layers[this.currentLayer].width && y >= 0 && y < this.layers[this.currentLayer].height)
+        {
+            return this.layers[this.currentLayer].data[y][x];
+        }
+
+    },
+
     /**
     * Set a specific tile with its x and y in tiles.
     * @method putTileWorldXY
@@ -104,10 +155,10 @@ Phaser.Tilemap.prototype = {
     * @param {number} y - Y position of this tile in world coordinates.
     * @param {number} index - The index of this tile type in the core map data.
     */
-    putTileWorldXY: function (x, y, index) {
+    putTileWorldXY: function (index, x, y, tileWidth, tileHeight, layer) {
 
-        x = this.game.math.snapToFloor(x, this.tileWidth) / this.tileWidth;
+        x = this.game.math.snapToFloor(x, tileWidth) / tileWidth;
-        y = this.game.math.snapToFloor(y, this.tileHeight) / this.tileHeight;
+        y = this.game.math.snapToFloor(y, tileHeight) / tileHeight;
 
         if (x >= 0 && x < this.layers[this.currentLayer].width && y >= 0 && y < this.layers[this.currentLayer].height)
         {
@@ -119,7 +170,7 @@ Phaser.Tilemap.prototype = {
     },
 
     //  Values are in TILEs, not pixels.
-    getTiles: function (x, y, width, height, layer) {
+    copy: function (x, y, width, height, layer) {
 
         if (typeof layer === "undefined") { layer = this.currentLayer; }
 
@@ -170,7 +221,7 @@ Phaser.Tilemap.prototype = {
 
     },
 
-    putTiles: function (x, y, tileblock, layer) {
+    paste: function (x, y, tileblock, layer) {
 
         if (typeof x === "undefined") { x = 0; }
         if (typeof y === "undefined") { y = 0; }
@@ -206,7 +257,7 @@ Phaser.Tilemap.prototype = {
     */
     swap: function (tileA, tileB, x, y, width, height, layer) {
 
-        this.getTiles(x, y, width, height, layer);
+        this.copy(x, y, width, height, layer);
 
         if (this._results.length < 2)
         {
@@ -218,7 +269,7 @@ Phaser.Tilemap.prototype = {
 
         this._results.forEach(this.swapHandler, this);
 
-        this.putTiles(x, y, this._results);
+        this.paste(x, y, this._results);
 
     },
 
@@ -247,7 +298,7 @@ Phaser.Tilemap.prototype = {
     */
     forEach: function (callback, context, x, y, width, height, layer) {
 
-        this.getTiles(x, y, width, height, layer);
+        this.copy(x, y, width, height, layer);
 
         if (this._results.length < 2)
         {
@@ -256,7 +307,7 @@ Phaser.Tilemap.prototype = {
 
         this._results.forEach(callback, context);
 
-        this.putTiles(x, y, this._results);
+        this.paste(x, y, this._results);
 
     },
 
@@ -272,7 +323,7 @@ Phaser.Tilemap.prototype = {
     */
     replace: function (tileA, tileB, x, y, width, height, layer) {
 
-        this.getTiles(x, y, width, height, layer);
+        this.copy(x, y, width, height, layer);
 
         if (this._results.length < 2)
         {
@@ -287,13 +338,13 @@ Phaser.Tilemap.prototype = {
             }
         }
 
-        this.putTiles(x, y, this._results);
+        this.paste(x, y, this._results);
 
     },
 
     /**
-    * Randomises a set of tiles in a given area.
+    * Randomises a set of tiles in a given area. It will only randomise the tiles in that area, so if they're all the same nothing will appear to have changed!
-    * @method replace
+    * @method random
     * @param {number} tileA - First tile index.
     * @param {number} tileB - Second tile index.
     * @param {number} [x] - specify a Rectangle of tiles to operate. The x position in tiles of Rectangle's left-top corner.
@@ -303,19 +354,64 @@ Phaser.Tilemap.prototype = {
     */
     random: function (x, y, width, height, layer) {
 
-        this.getTiles(x, y, width, height, layer);
+        if (typeof layer === "undefined") { layer = this.currentLayer; }
+
+        this.copy(x, y, width, height, layer);
 
         if (this._results.length < 2)
         {
             return;
         }
 
-        for (var i = 1; i < this._results.length; i++)
+        var indexes = [];
+
+        for (var t = 1; t < this._results.length; t++)
         {
-            this._results[i].index = this.game.rnd.integerInRange(0, this.layers[layer].tileset.total);
+            var idx = this._results[t].index;
+
+            if (indexes.indexOf(idx) === -1)
+            {
+                indexes.push(idx);
+            }
         }
 
-        this.putTiles(x, y, this._results);
+        for (var i = 1; i < this._results.length; i++)
+        {
+            this._results[i].index = this.game.rnd.pick(indexes);
+        }
+
+        this.paste(x, y, this._results);
+
+    },
+
+    /**
+    * Randomises a set of tiles in a given area. It will only randomise the tiles in that area, so if they're all the same nothing will appear to have changed!
+    * @method random
+    * @param {number} tileA - First tile index.
+    * @param {number} tileB - Second tile index.
+    * @param {number} [x] - specify a Rectangle of tiles to operate. The x position in tiles of Rectangle's left-top corner.
+    * @param {number} [y] - specify a Rectangle of tiles to operate. The y position in tiles of Rectangle's left-top corner.
+    * @param {number} [width] - specify a Rectangle of tiles to operate. The width in tiles.
+    * @param {number} [height] - specify a Rectangle of tiles to operate. The height in tiles.
+    */
+    shuffle: function (x, y, width, height, layer) {
+
+        if (typeof layer === "undefined") { layer = this.currentLayer; }
+
+        this.copy(x, y, width, height, layer);
+
+        if (this._results.length < 2)
+        {
+            return;
+        }
+
+        var header = this._results.shift();
+
+        Phaser.Utils.shuffle(this._results);
+
+        this._results.unshift(header);
+
+        this.paste(x, y, this._results);
 
     },
 
@@ -330,7 +426,7 @@ Phaser.Tilemap.prototype = {
     */
     fill: function (index, x, y, width, height, layer) {
 
-        this.getTiles(x, y, width, height, layer);
+        this.copy(x, y, width, height, layer);
 
         if (this._results.length < 2)
         {
@@ -342,7 +438,7 @@ Phaser.Tilemap.prototype = {
             this._results[i].index = index;
         }
 
-        this.putTiles(x, y, this._results);
+        this.paste(x, y, this._results);
 
     },
 

src/tilemap/TilemapParser.js

@@ -109,7 +109,7 @@ Phaser.TilemapParser = {
             }
 	    }
 
-	    return [{ name: 'csv', width: width, height: height, alpha: 1, visible: true, tileMargin: 0, tileSpacing: 0, data: output }];
+	    return [{ name: 'csv', width: width, height: height, alpha: 1, visible: true, indexes: [], tileMargin: 0, tileSpacing: 0, data: output }];
 
 	},
 
@@ -142,6 +142,7 @@ Phaser.TilemapParser = {
 		        height: json.layers[i].height,
 		        alpha: json.layers[i].opacity,
 		        visible: json.layers[i].visible,
+		        indexes: [],
 
 		        tileMargin: json.tilesets[0].margin,
 		        tileSpacing: json.tilesets[0].spacing,

src/utils/Utils.js

@@ -10,6 +10,20 @@
 */
 Phaser.Utils = {
 	
+	shuffle: function (array) {
+
+	    for (var i = array.length - 1; i > 0; i--)
+	    {
+	        var j = Math.floor(Math.random() * (i + 1));
+	        var temp = array[i];
+	        array[i] = array[j];
+	        array[j] = temp;
+	    }
+
+	    return array;
+	    
+	},
+
 	/**
 	* Javascript string pad http://www.webtoolkit.info/.
 	* pad = the string to pad it out with (defaults to a space)<br>