Github Issue phaserjs#101 fixed. Plus more Tilemap updates.

Author: photonstorm

README.md

@@ -114,6 +114,8 @@ Version 1.0.7 (in progress in the dev branch)
 * Added killOnComplete parameter to Animation.play. Really useful in situations where you want a Sprite to animate once then kill itself on complete, like an explosion effect.
 * Added Sprite.loadTexture(key, frame) which allows you to load a new texture set into an existing sprite rather than having to create a new sprite.
 * Tweens .to will now always return the parent (thanks powerfear)
+* You can now pass a PIXI.Texture to Sprite (you also need to pass a Phaser.Frame as the frame parameter) but this is useful for Sprites sharing joint canvases.
+* Fixed Issue #101 (Mouse Button 0 is not recognised, thanks rezoner)
 
 
 * TODO: look at Sprite.crop (http://www.html5gamedevs.com/topic/1617-error-in-spritecrop/)

examples/tilemaps/wip1.php

@@ -17,6 +17,7 @@ function preload() {
 
     var layer;
     var cursors;
+    var sprite2;
 
     function create() {
 
@@ -36,16 +37,22 @@ function create() {
             '#bcbcbc', '#bcbcbc'
         ];
 
-        map.dump();
+        // map.dump();
 
-        layer = new Phaser.TilemapLayer(game, 200, 200, 320, 200);
+        // 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);
+        // layer.sprite.anchor.setTo(0.5, 0.5);
 
         game.world.add(layer.sprite);
 
+        // layer.sprite.scale.setTo(2, 2);
+
+        game.add.sprite(320, 0, layer.texture, layer.frame);
+        game.add.sprite(0, 200, layer.texture, layer.frame);
+        game.add.sprite(320, 200, layer.texture, layer.frame);
 
         cursors = game.input.keyboard.createCursorKeys();
     }

src/input/Pointer.js

@@ -247,7 +247,7 @@ Phaser.Pointer.prototype = {
         this.identifier = event.identifier;
         this.target = event.target;
 
-        if (event.button)
+        if (typeof event.button !== 'undefined')
         {
             this.button = event.button;
         }
@@ -351,7 +351,7 @@ Phaser.Pointer.prototype = {
             return;
         }
 
-        if (event.button)
+        if (typeof event.button !== 'undefined')
         {
             this.button = event.button;
         }
@@ -430,8 +430,6 @@ Phaser.Pointer.prototype = {
 
         if (this._highestRenderObject == null)
         {
-            // console.log("HRO null");
-
             //  The pointer isn't currently over anything, check if we've got a lingering previous target
             if (this.targetObject)
             {

src/tilemap/TilemapLayer.js

@@ -30,7 +30,6 @@ Phaser.TilemapLayer = function (game, x, y, renderWidth, renderHeight, mapData,
 	*/
     this.texture = new PIXI.Texture(this.baseTexture);
 
-    //  index, x, y, width, height, name, uuid
     this.frame = new Phaser.Frame(0, 0, 0, renderWidth, renderHeight, 'tilemaplayer', game.rnd.uuid());
 
 	/**
@@ -47,8 +46,20 @@ Phaser.TilemapLayer = function (game, x, y, renderWidth, renderHeight, mapData,
     this.tileWidth = 0;
     this.tileHeight = 0;
 
-    this.widthInTiles = 0;
-    this.heightInTiles = 0;
+    /**
+    * Read-only variable, do NOT recommend changing after the map is loaded!
+    * @property {number} widthInPixels
+    * @default
+    */
+    this.widthInPixels = 0;
+
+    /**
+    * Read-only variable, do NOT recommend changing after the map is loaded!
+    * @property {number} heightInPixels
+    * @default
+    */
+    this.heightInPixels = 0;
+
 
     this.renderWidth = renderWidth;
     this.renderHeight = renderHeight;
@@ -143,15 +154,7 @@ Phaser.TilemapLayer.prototype = {
         this.tilemap = tilemap;
         this.layer = this.tilemap.layers[layerID];
 
-        if (this._maxX > this.layer.width)
-        {
-            this._maxX = this.layer.width;
-        }
-
-        if (this._maxY > this.layer.height)
-        {
-            this._maxY = this.layer.height;
-        }
+        this.updateMax();
 
     },
 
@@ -161,49 +164,39 @@ Phaser.TilemapLayer.prototype = {
         this.tileWidth = this.tileset.tileWidth;
         this.tileHeight = this.tileset.tileHeight;
 
-        //  This don't need to be calculated every frame!
-        this._maxX = this.game.math.ceil(this.canvas.width / this.tileWidth) + 1;
-        this._maxY = this.game.math.ceil(this.canvas.height / this.tileHeight) + 1;
-
+        this.updateMax();
     },
 
-    render: function () {
+    updateMax: function () {
 
-        if (this.visible == false || this.dirty == false)
-        {
-            return;
-        }
+        this._maxX = this.game.math.ceil(this.canvas.width / this.tileWidth) + 1;
+        this._maxY = this.game.math.ceil(this.canvas.height / this.tileHeight) + 1;
 
-        //  Work out how many tiles we can fit into our canvas and round it up for the edges
-        // this._maxX = this.game.math.ceil(this.canvas.width / this.tileWidth) + 1;
-        // this._maxY = this.game.math.ceil(this.canvas.height / this.tileHeight) + 1;
+        if (this.layer)
+        {
+            if (this._maxX > this.layer.width)
+            {
+                this._maxX = this.layer.width;
+            }
 
-        //  And now work out where in the tilemap the camera actually is
-        this._startX = this.game.math.floor(this._x / this.tileWidth);
-        this._startY = this.game.math.floor(this._y / this.tileHeight);
+            if (this._maxY > this.layer.height)
+            {
+                this._maxY = this.layer.height;
+            }
 
-        //  Tilemap bounds check
-        if (this._startX < 0)
-        {
-            this._startX = 0;
+            this.widthInPixels = this.layer.width * this.tileWidth;
+            this.heightInPixels = this.layer.height * this.tileHeight;
         }
 
-        if (this._startY < 0)
-        {
-            this._startY = 0;
-        }
+    },
 
-        if (this._startX + this._maxX > this.layer.width)
-        {
-            this._startX = this.layer.width - this._maxX;
-        }
+    render: function () {
 
-        if (this._startY + this._maxY > this.layer.height)
+        if (this.visible == false || this.dirty == false)
         {
-            this._startY = this.layer.height - this._maxY;
+            return;
         }
 
-        //  Finally get the offset to avoid the blocky movement
         this._dx = -(this._x - (this._startX * this.tileWidth));
         this._dy = -(this._y - (this._startY * this.tileHeight));
 
@@ -282,9 +275,27 @@ Object.defineProperty(Phaser.TilemapLayer.prototype, "x", {
 
     set: function (value) {
 
-        if (value !== this._x)
+        if (value !== this._x && value >= 0)
         {
             this._x = value;
+
+            if (this._x > (this.widthInPixels - this.renderWidth))
+            {
+                this._x = this.widthInPixels - this.renderWidth;
+            }
+
+            this._startX = this.game.math.floor(this._x / this.tileWidth);
+
+            if (this._startX < 0)
+            {
+                this._startX = 0;
+            }
+
+            if (this._startX + this._maxX > this.layer.width)
+            {
+                this._startX = this.layer.width - this._maxX;
+            }
+
             this.dirty = true;
         }
 
@@ -300,9 +311,27 @@ Object.defineProperty(Phaser.TilemapLayer.prototype, "y", {
 
     set: function (value) {
 
-        if (value !== this._y)
+        if (value !== this._y && value >= 0)
         {
             this._y = value;
+
+            if (this._y > (this.heightInPixels - this.renderHeight))
+            {
+                this._y = this.heightInPixels - this.renderHeight;
+            }
+
+            this._startY = this.game.math.floor(this._y / this.tileHeight);
+
+            if (this._startY < 0)
+            {
+                this._startY = 0;
+            }
+
+            if (this._startY + this._maxY > this.layer.height)
+            {
+                this._startY = this.layer.height - this._maxY;
+            }
+
             this.dirty = true;
         }