Tilemap painting example and other smaller updates.

Author: photonstorm

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 @@ function randomiseTiles() {
 
         //  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(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.rotation = Phaser.Math.degToRad(value);
+        this.position.y = value;
     }
 
 });