More tilemap tweaks.

examples/tilemaps/wip1.php

@@ -23,8 +23,29 @@
 
         game.stage.backgroundColor = '#3d3d3d';
 
+        //  A Tilemap object just holds the data needed to describe the map (i.e. the json exported from Tiled, or the CSV exported from elsewhere).
+        //  You can add your own data or manipulate the data (swap tiles around, etc) but in order to display it you need to create a TilemapLayer.
         var map = new Phaser.Tilemap(game, 'level3');
 
+        var tileset = game.cache.getTileset('tiles');
+
+        //  A TilemapLayer consists of an x,y coordinate (position), a width and height, a Tileset and a Tilemap which it uses for map data.
+        //  The x/y coordinates are in World space and you can place the tilemap layer anywhere in the world.
+        //  The width/height is the rendered size of the layer in pixels, not the size of the map data itself.
+
+        //  This one gives tileset as a string, the other an object
+        // layer = new Phaser.TilemapLayer(game, 0, 0, 640, 400, 'tiles', map, 0);
+        layer = new Phaser.TilemapLayer(game, 0, 0, 640, 400, tileset, map, 0);
+
+        //  To set tiles for collision you need to modify the Tileset, which is a property of the layer
+        
+
+        //  Collision is based on the layer.x/y value
+
+        // layer.sprite.anchor.setTo(0.5, 0.5);
+ 
+        game.world.add(layer.sprite);
+
         //  This is a bit nuts, ought to find a way to automate it, but it looks cool :)
         map.debugMap = [ '#000000', 
             '#e40058', '#e40058', '#e40058', '#80d010', '#bcbcbc', '#e40058', '#000000', '#0070ec', '#bcbcbc', '#bcbcbc', '#bcbcbc',
@@ -39,15 +60,6 @@
 
         // map.dump();
 
-        // layer = new Phaser.TilemapLayer(game, 0, 0, 640, 400);
-        layer = new Phaser.TilemapLayer(game, 0, 0, 320, 200);
-        layer.updateTileset('tiles');
-        layer.updateMapData(map, 0);
-
-        // layer.sprite.anchor.setTo(0.5, 0.5);
-
-        game.world.add(layer.sprite);
-
         // layer.sprite.scale.setTo(2, 2);
 
         //  Works a treat :)
@@ -55,6 +67,9 @@
         // game.add.sprite(0, 200, layer.texture, layer.frame);
         // game.add.sprite(320, 200, layer.texture, layer.frame);
 
+        // game.world.setBounds(0, 0, 2000, 2000);
+        // game.camera.x = 400;
+
         cursors = game.input.keyboard.createCursorKeys();
     }
 

src/input/Keyboard.js

@@ -303,8 +303,21 @@ Phaser.Keyboard.prototype = {
             this._hotkeys[event.keyCode].processKeyUp(event);
         }
 
+        if (this._keys[event.keyCode])
+        {
             this._keys[event.keyCode].isDown = false;
             this._keys[event.keyCode].timeUp = this.game.time.now;
+        }
+        else
+        {
+            //  Not used this key before, so register it
+            this._keys[event.keyCode] = {
+                isDown: false,
+                timeDown: this.game.time.now,
+                timeUp: this.game.time.now,
+                duration: 0
+            };
+        }
 
     },
 

src/physics/arcade/Body.js

@@ -65,6 +65,9 @@ Phaser.Physics.Arcade.Body = function (sprite) {
     this.overlapX = 0;
     this.overlapY = 0;
 
+    this.hullX = new Phaser.Rectangle();
+    this.hullY = new Phaser.Rectangle();
+
     //	If a body is overlapping with another body, but neither of them are moving (maybe they spawned on-top of each other?) this is set to true
     this.embedded = false;
 
@@ -105,8 +108,6 @@ Phaser.Physics.Arcade.Body.prototype = {
 
 	    this.embedded = false;
 
-		// this.preX = (this.sprite.localTransform[2] - (this.sprite.anchor.x * this.width)) + this.offset.x;
-		// this.preY = (this.sprite.localTransform[5] - (this.sprite.anchor.y * this.height)) + this.offset.y;
 		this.preX = (this.sprite.worldTransform[2] - (this.sprite.anchor.x * this.width)) + this.offset.x;
 		this.preY = (this.sprite.worldTransform[5] - (this.sprite.anchor.y * this.height)) + this.offset.y;
 		this.preRotation = this.sprite.angle;
@@ -123,6 +124,8 @@ Phaser.Physics.Arcade.Body.prototype = {
 			{
 				this.checkWorldBounds();
 			}
+
+			this.updateHulls();
 		}
 
 		if (this.skipQuadTree == false && this.allowCollision.none == false && this.sprite.visible && this.sprite.alive)
@@ -174,6 +177,13 @@ Phaser.Physics.Arcade.Body.prototype = {
 
 	},
 
+	updateHulls: function () {
+
+		this.hullX.setTo(this.x, this.preY, this.width, this.height);
+		this.hullY.setTo(this.preX, this.y, this.width, this.height);
+
+	},
+
 	checkWorldBounds: function () {
 
 		if (this.x < this.game.world.bounds.x)
@@ -223,21 +233,16 @@ Phaser.Physics.Arcade.Body.prototype = {
 	    this.angularVelocity = 0;
 	    this.angularAcceleration = 0;
 
-		// this.preX = (this.sprite.localTransform[2] - (this.sprite.anchor.x * this.width)) + this.offset.x;
-		// this.preY = (this.sprite.localTransform[5] - (this.sprite.anchor.y * this.height)) + this.offset.y;
 		this.preX = (this.sprite.worldTransform[2] - (this.sprite.anchor.x * this.width)) + this.offset.x;
 		this.preY = (this.sprite.worldTransform[5] - (this.sprite.anchor.y * this.height)) + this.offset.y;
 		this.preRotation = this.sprite.angle;
 
-		// this.x = (this.sprite.localTransform[2] - (this.sprite.anchor.x * this.width)) + this.offset.x;
+		this.x = this.preX;
-		// this.y = (this.sprite.localTransform[5] - (this.sprite.anchor.y * this.height)) + this.offset.y;
+		this.y = this.preY;
-		this.x = (this.sprite.worldTransform[2] - (this.sprite.anchor.x * this.width)) + this.offset.x;
+		this.rotation = this.preRotation;
-		this.y = (this.sprite.worldTransform[5] - (this.sprite.anchor.y * this.height)) + this.offset.y;
-		this.rotation = this.sprite.angle;
 
 	},
 
-	//	Basically Math.abs
     deltaAbsX: function () {
         return (this.deltaX() > 0 ? this.deltaX() : -this.deltaX());
     },

src/tilemap/Tile.js

@@ -125,17 +125,8 @@ Phaser.Tile.prototype = {
     * @param {boolean}   separateX - Separate at x-axis.
     * @param {boolean}   separateY - Separate at y-axis.
     */
-    setCollision: function (left, right, up, down, reset, separateX, separateY) {
+    setCollision: function (left, right, up, down) {
 
-        if (reset)
-        {
-            this.resetCollision();
-        }
-
-        this.separateX = separateX;
-        this.separateY = separateY;
-
-        this.collideNone = true;
         this.collideLeft = left;
         this.collideRight = right;
         this.collideUp = up;
@@ -145,6 +136,10 @@ Phaser.Tile.prototype = {
         {
             this.collideNone = false;
         }
+        else
+        {
+            this.collideNone = true;
+        }
 
     },
 

src/tilemap/TilemapLayer.js

@@ -1,5 +1,5 @@
-
+//  Maybe should extend Sprite?
-Phaser.TilemapLayer = function (game, x, y, renderWidth, renderHeight, mapData, tileset) {
+Phaser.TilemapLayer = function (game, x, y, renderWidth, renderHeight, tileset, tilemap, layer) {
 
 	/**
 	* @property {Phaser.Game} game - Description.
@@ -38,6 +38,7 @@ Phaser.TilemapLayer = function (game, x, y, renderWidth, renderHeight, mapData,
 	*/
     this.sprite = new Phaser.Sprite(this.game, x, y, this.texture, this.frame);
 
+
     /**
     * @property {Description} tileset - Description.
     */
@@ -136,8 +137,8 @@ Phaser.TilemapLayer = function (game, x, y, renderWidth, renderHeight, mapData,
     */
     this._startY = 0;
 
-    this.tilemap;
+    this.tilemap = null;
-    this.layer;
+    this.layer = null;
 
     this._x = 0;
     this._y = 0;
@@ -145,26 +146,48 @@ Phaser.TilemapLayer = function (game, x, y, renderWidth, renderHeight, mapData,
     this._prevY = 0;
     this.dirty = true;
 
+    if (tileset instanceof Phaser.Tileset || typeof tileset === 'string')
+    {
+        this.updateTileset(tileset);
+    }
+
+    if (tilemap instanceof Phaser.Tilemap)
+    {
+        this.updateMapData(tilemap, layer);
+    }
+
 };
 
 Phaser.TilemapLayer.prototype = {
 
-    updateMapData: function (tilemap, layerID) {
+    updateTileset: function (tileset) {
 
-        this.tilemap = tilemap;
+        if (tileset instanceof Phaser.Tileset)
-        this.layer = this.tilemap.layers[layerID];
+        {
+            this.tileset = tileset;
+        }
+        else if (typeof tileset === 'string')
+        {
+            this.tileset = this.game.cache.getTileset('tiles');;
+        }
 
+        this.tileWidth = this.tileset.tileWidth;
+        this.tileHeight = this.tileset.tileHeight;
         this.updateMax();
 
     },
 
-    updateTileset: function (tileset) {
+    updateMapData: function (tilemap, layer) {
 
-        this.tileset = this.game.cache.getTileset(tileset);
+        if (typeof layer === 'undefined')
-        this.tileWidth = this.tileset.tileWidth;
+        {
-        this.tileHeight = this.tileset.tileHeight;
+            layer = 0;
+        }
 
+        this.tilemap = tilemap;
+        this.layer = this.tilemap.layers[layer];
         this.updateMax();
+
     },
 
     updateMax: function () {
@@ -188,11 +211,13 @@ Phaser.TilemapLayer.prototype = {
             this.heightInPixels = this.layer.height * this.tileHeight;
         }
 
+        this.dirty = true;
+
     },
 
     render: function () {
 
-        if (this.visible == false || this.dirty == false)
+        if (!this.dirty || !this.tileset || !this.tilemap || !this.sprite.visible)
         {
             return;
         }
@@ -230,8 +255,8 @@ Phaser.TilemapLayer.prototype = {
                         tile.y,
                         this.tileWidth,
                         this.tileHeight,
-                        this._tx,
+                        Math.floor(this._tx),
-                        this._ty,
+                        Math.floor(this._ty),
                         this.tileWidth,
                         this.tileHeight
                     );