From 886618c05605292a1036cc80d8074728a044d750 Mon Sep 17 00:00:00 2001 From: photonstorm Date: Fri, 6 Dec 2013 04:34:27 +0000 Subject: [PATCH] Tilemap collision fixed, regardless of rotation, number of overlapping tiles and speed (to a point anyway). Maps also don't crash if they are smaller than the render area. Layers can be positioned successfully anywhere in camera but collision isn't yet offset for this. --- examples/wip/tilemap.js | 100 +++++++--- src/core/Camera.js | 8 +- src/core/World.js | 14 +- src/gameobjects/Sprite.js | 2 - src/physics/arcade/ArcadePhysics.js | 272 +++------------------------- src/tilemap/TilemapLayer.js | 62 +++++-- src/utils/Debug.js | 15 +- 7 files changed, 175 insertions(+), 298 deletions(-) diff --git a/examples/wip/tilemap.js b/examples/wip/tilemap.js index 75847531..9cbb2036 100644 --- a/examples/wip/tilemap.js +++ b/examples/wip/tilemap.js @@ -5,17 +5,18 @@ function preload() { game.load.tilemap('map', 'assets/maps/newtest.json', null, Phaser.Tilemap.TILED_JSON); game.load.tileset('tiles', 'assets/maps/ground_1x1.png', 32, 32); - // game.load.image('phaser', 'assets/sprites/phaser-ship.png'); + game.load.image('phaser', 'assets/sprites/phaser-ship.png'); // game.load.image('phaser', 'assets/sprites/mushroom2.png'); // game.load.image('phaser', 'assets/sprites/wabbit.png'); // game.load.image('phaser', 'assets/sprites/arrow.png'); - game.load.image('phaser', 'assets/sprites/darkwing_crazy.png'); + // game.load.image('phaser', 'assets/sprites/darkwing_crazy.png'); } var cursors; var map; var layer; +var layer2; var sprite; function create() { @@ -28,48 +29,63 @@ function create() { // Phaser.TilemapLayer = function (game, x, y, renderWidth, renderHeight, tileset, tilemap, layer) { - layer = game.add.tilemapLayer(0, 0, 800, 600, null, map, 0); + // layer = game.add.tilemapLayer(0, 0, 800, 600, null, map, 0); + layer = game.add.tilemapLayer(0, 0, 400, 600, null, map, 0); + + // layer2 = game.add.tilemapLayer(0, 0, 400, 600, null, map, 0); + layer.cameraOffset.x = 400; // tileset = game.add.tileset('tilesNes'); // layer = game.add.tilemapLayer(0, 0, map.layers[0].width*tilesetNes.tileWidth, 600, tileset, map, 0); - // disable this and you can place anywhere, but will almost certainly screw collision - // layer.fixedToCamera=false; - // this screws something up - not quite sure what, but needs investigating! - // layer.resizeWorld(); + layer.resizeWorld(); - sprite = game.add.sprite(200, 420, 'phaser'); + sprite = game.add.sprite(260, 100, 'phaser'); sprite.anchor.setTo(0.5, 0.5); - sprite.angle = 35; - // game.camera.follow(sprite); + // We'll set a lower max angular velocity here to keep it from going totally nuts + sprite.body.maxAngular = 500; + + // Apply a drag otherwise the sprite will just spin and never slow down + sprite.body.angularDrag = 50; + + // sprite.body.drag.x = 50; + // sprite.body.drag.y = 20; + + // sprite.body.velocity.x = 50; + + sprite.body.bounce.x = 0.8; + sprite.body.bounce.y = 0.8; + + // sprite.angle = 35; + + game.camera.follow(sprite); + + game.input.onDown.add(getIt, this); cursors = game.input.keyboard.createCursorKeys(); - game.input.onDown.add(dump, this); - - } -function dump() { +function getIt() { - console.log(sprite.bounds); - console.log(sprite.body.hull); - console.log('wy', sprite.world.y); + console.log('cam', game.camera.bounds); + console.log('w', game.world.bounds); + // console.log(layer.getTiles(sprite.body.x, sprite.body.y, sprite.body.width, sprite.body.height, true, true)); } function update() { - /* +/* if (cursors.left.isDown) { - layer.scrollX -= 4; + game.camera.x -= 1; } else if (cursors.right.isDown) { - layer.scrollX += 4; + game.camera.x += 1; } if (cursors.up.isDown) @@ -80,10 +96,42 @@ function update() { { layer.scrollY += 4; } - */ - +*/ game.physics.collide(sprite, layer); + sprite.body.velocity.x = 0; + sprite.body.velocity.y = 0; + sprite.body.angularVelocity = 0; + + // sprite.body.acceleration.x = 0; + // sprite.body.angularAcceleration = 0; + + if (cursors.left.isDown) + { + // sprite.body.acceleration.x = -200; + sprite.body.angularVelocity = -300; + // sprite.body.angularAcceleration -= 200; + } + else if (cursors.right.isDown) + { + // sprite.body.acceleration.x = 200; + sprite.body.angularVelocity = 300; + // sprite.body.angularAcceleration += 200; + } + + if (cursors.up.isDown) + { + game.physics.velocityFromAngle(sprite.angle, 300, sprite.body.velocity); + } + else + { + // game.physics.velocityFromAngle(sprite.angle, sprite.body.velocity, sprite.body.velocity); + } + + + + + /* sprite.body.velocity.x = 0; sprite.body.velocity.y = 0; @@ -108,6 +156,7 @@ function update() { sprite.body.velocity.x = 900; // sprite.scale.x = 1; } + */ } @@ -117,7 +166,10 @@ function render() { // game.debug.renderSpriteBody(sprite); game.debug.renderSpriteBounds(sprite); - game.debug.renderText(sprite.x, 32, 32); - game.debug.renderText(sprite.y, 32, 48); + // game.debug.renderText(sprite.x, 32, 32); + // game.debug.renderText(sprite.y, 32, 48); + + game.debug.renderText(layer.scrollX, 32, 32); + game.debug.renderText(layer.scrollY, 32, 48); } \ No newline at end of file diff --git a/src/core/Camera.js b/src/core/Camera.js index c4181726..98b3449e 100644 --- a/src/core/Camera.js +++ b/src/core/Camera.js @@ -207,28 +207,28 @@ Phaser.Camera.prototype = { if (this.deadzone) { - this._edge = this.target.x - this.deadzone.x; + this._edge = this.target.bounds.x - this.deadzone.x; if (this.view.x > this._edge) { this.view.x = this._edge; } - this._edge = this.target.x + this.target.width - this.deadzone.x - this.deadzone.width; + this._edge = this.target.bounds.right - this.deadzone.x - this.deadzone.width; if (this.view.x < this._edge) { this.view.x = this._edge; } - this._edge = this.target.y - this.deadzone.y; + this._edge = this.target.bounds.y - this.deadzone.y; if (this.view.y > this._edge) { this.view.y = this._edge; } - this._edge = this.target.y + this.target.height - this.deadzone.y - this.deadzone.height; + this._edge = this.target.bounds.bottom - this.deadzone.y - this.deadzone.height; if (this.view.y < this._edge) { diff --git a/src/core/World.js b/src/core/World.js index 9eadf09e..8ad6e8c7 100644 --- a/src/core/World.js +++ b/src/core/World.js @@ -130,7 +130,7 @@ Phaser.World.prototype.postUpdate = function () { /** * Updates the size of this world. Note that this doesn't modify the world x/y coordinates, just the width and height. -* If you need to adjust the bounds of the world +* * @method Phaser.World#setBounds * @param {number} x - Top left most corner of the world. * @param {number} y - Top left most corner of the world. @@ -139,10 +139,22 @@ Phaser.World.prototype.postUpdate = function () { */ Phaser.World.prototype.setBounds = function (x, y, width, height) { + if (width < this.game.width) + { + width = this.game.width; + } + + if (height < this.game.height) + { + height = this.game.height; + } + this.bounds.setTo(x, y, width, height); if (this.camera.bounds) { + // The Camera can never be smaller than the game size + this.camera.bounds.setTo(x, y, width, height); } diff --git a/src/gameobjects/Sprite.js b/src/gameobjects/Sprite.js index 27b4d79f..de08e4c2 100644 --- a/src/gameobjects/Sprite.js +++ b/src/gameobjects/Sprite.js @@ -680,8 +680,6 @@ Phaser.Sprite.prototype.postUpdate = function() { if (this.body) { this.body.postUpdate(); - this.x = Math.round(this.x); - this.y = Math.round(this.y); } if (this.fixedToCamera) diff --git a/src/physics/arcade/ArcadePhysics.js b/src/physics/arcade/ArcadePhysics.js index c80fd100..5bb4fbfa 100644 --- a/src/physics/arcade/ArcadePhysics.js +++ b/src/physics/arcade/ArcadePhysics.js @@ -990,20 +990,12 @@ Phaser.Physics.Arcade.prototype = { }, /** - * The core separation function to separate a physics body and a tile. - * @method Phaser.Physics.Arcade#separateTile + * The core separation function to separate a physics body and an array of tiles. + * @method Phaser.Physics.Arcade#separateTiles * @param {Phaser.Physics.Arcade.Body} body1 - The Body object to separate. * @param {Phaser.Tile} tile - The tile to collide against. * @returns {boolean} Returns true if the bodies were separated, otherwise false. */ - XseparateTile: function (body, tile) { - - this._result = (this.separateTileX(body, tile, true) || this.separateTileY(body, tile, true)); - - return this._result; - - }, - separateTiles: function (body, tiles) { // Can't separate two immovable objects (tiles are always immovable) @@ -1018,8 +1010,6 @@ Phaser.Physics.Arcade.prototype = { var tile; var localOverlapX = 0; var localOverlapY = 0; - var maxOverlapX = Math.round(tiles[0].width / 2); - var maxOverlapY = Math.round(tiles[0].height / 2); for (var i = 0; i < tiles.length; i++) { @@ -1032,14 +1022,9 @@ Phaser.Physics.Arcade.prototype = { // LEFT localOverlapX = body.x - tile.right; - if (localOverlapX < -maxOverlapX) - { - localOverlapX = 0; - } - if (localOverlapX >= body.deltaX()) { - console.log('m left overlapX', localOverlapX, body.deltaX(), this.game.time.physicsElapsed); + console.log('m left overlapX', localOverlapX, body.deltaX()); // use touching instead of blocked? body.blocked.left = true; body.touching.left = true; @@ -1051,15 +1036,10 @@ Phaser.Physics.Arcade.prototype = { // RIGHT localOverlapX = body.right - tile.x; - if (localOverlapX > maxOverlapX) - { - localOverlapX = 0; - } - // Distance check if (localOverlapX <= body.deltaX()) { - console.log('m right overlapX', localOverlapX, body.deltaX(), this.game.time.physicsElapsed); + console.log('m right overlapX', localOverlapX, body.deltaX()); body.blocked.right = true; body.touching.right = true; body.touching.none = false; @@ -1071,16 +1051,10 @@ Phaser.Physics.Arcade.prototype = { // UP localOverlapY = body.y - tile.bottom; - // negatives - if (localOverlapY < -maxOverlapY) - { - localOverlapY = 0; - } - // Distance check if (localOverlapY >= body.deltaY()) { - console.log('m up overlapY', localOverlapY, body.deltaY(), this.game.time.physicsElapsed); + console.log('m up overlapY', localOverlapY, body.deltaY()); body.blocked.up = true; body.touching.up = true; body.touching.none = false; @@ -1091,14 +1065,9 @@ Phaser.Physics.Arcade.prototype = { // DOWN localOverlapY = body.bottom - tile.y; - if (localOverlapY > maxOverlapY) - { - localOverlapY = 0; - } - if (localOverlapY <= body.deltaY()) { - console.log('m down overlapY', localOverlapY, body.deltaY(), this.game.time.physicsElapsed); + console.log('m down overlapY', localOverlapY, body.deltaY()); body.blocked.down = true; body.touching.down = true; body.touching.none = false; @@ -1122,7 +1091,8 @@ Phaser.Physics.Arcade.prototype = { return false; } - if (body.overlapX !== 0) + // if (body.overlapX !== 0) + if (body.touching.left || body.touching.right) { body.x -= body.overlapX; body.preX -= body.overlapX; @@ -1137,7 +1107,8 @@ Phaser.Physics.Arcade.prototype = { } } - if (body.overlapY !== 0) + // if (body.overlapY !== 0) + if (body.touching.up || body.touching.down) { body.y -= body.overlapY; body.preY -= body.overlapY; @@ -1154,9 +1125,15 @@ Phaser.Physics.Arcade.prototype = { return true; - }, + /** + * The core separation function to separate a physics body and a tile. + * @method Phaser.Physics.Arcade#separateTile + * @param {Phaser.Physics.Arcade.Body} body1 - The Body object to separate. + * @param {Phaser.Tile} tile - The tile to collide against. + * @returns {boolean} Returns true if the bodies were separated, otherwise false. + */ separateTile: function (body, tile) { // Can't separate two immovable objects (tiles are always immovable) @@ -1168,9 +1145,6 @@ Phaser.Physics.Arcade.prototype = { return false; } - var maxOverlapX = Math.round(tile.width / 2); - var maxOverlapY = Math.round(tile.height / 2); - // use body var instead body.overlapX = 0; body.overlapY = 0; @@ -1187,14 +1161,9 @@ Phaser.Physics.Arcade.prototype = { // LEFT body.overlapX = body.x - tile.right; - if (body.overlapX < -maxOverlapX) - { - body.overlapX = 0; - } - if (body.overlapX >= body.deltaX()) { - console.log('left overlapX', body.overlapX, body.deltaX(), this.game.time.physicsElapsed); + console.log('left overlapX', body.overlapX, body.deltaX()); // use touching instead of blocked? body.blocked.left = true; body.touching.left = true; @@ -1206,15 +1175,10 @@ Phaser.Physics.Arcade.prototype = { // RIGHT body.overlapX = body.right - tile.x; - if (body.overlapX > maxOverlapX) - { - body.overlapX = 0; - } - // Distance check if (body.overlapX <= body.deltaX()) { - console.log('right overlapX', body.overlapX, body.deltaX(), this.game.time.physicsElapsed); + console.log('right overlapX', body.overlapX, body.deltaX()); body.blocked.right = true; body.touching.right = true; body.touching.none = false; @@ -1226,15 +1190,10 @@ Phaser.Physics.Arcade.prototype = { // UP body.overlapY = body.y - tile.bottom; - if (body.overlapY < -maxOverlapY) - { - body.overlapY = 0; - } - // Distance check if (body.overlapY >= body.deltaY()) { - console.log('up overlapY', body.overlapY, body.deltaY(), this.game.time.physicsElapsed); + console.log('up overlapY', body.overlapY, body.deltaY()); body.blocked.up = true; body.touching.up = true; body.touching.none = false; @@ -1245,14 +1204,9 @@ Phaser.Physics.Arcade.prototype = { // DOWN body.overlapY = body.bottom - tile.y; - if (body.overlapY > maxOverlapY) - { - body.overlapY = 0; - } - if (body.overlapY <= body.deltaY()) { - console.log('down overlapY', body.overlapY, body.deltaY(), this.game.time.physicsElapsed); + console.log('down overlapY', body.overlapY, body.deltaY()); body.blocked.down = true; body.touching.down = true; body.touching.none = false; @@ -1266,7 +1220,8 @@ Phaser.Physics.Arcade.prototype = { return false; } - if (body.overlapX !== 0) + // if (body.overlapX !== 0) + if (body.touching.left || body.touching.right) { body.x -= body.overlapX; body.preX -= body.overlapX; @@ -1281,7 +1236,8 @@ Phaser.Physics.Arcade.prototype = { } } - if (body.overlapY !== 0) + // if (body.overlapY !== 0) + if (body.touching.up || body.touching.down) { body.y -= body.overlapY; body.preY -= body.overlapY; @@ -1300,182 +1256,6 @@ Phaser.Physics.Arcade.prototype = { }, - /** - * The core separation function to separate a physics body and a tile on the x axis. - * @method Phaser.Physics.Arcade#separateTileX - * @param {Phaser.Physics.Arcade.Body} body1 - The Body object to separate. - * @param {Phaser.Tile} tile - The tile to collide against. - * @returns {boolean} Returns true if the bodies were separated, otherwise false. - */ - separateTileX: function (body, tile, separate) { - - // Can't separate two immovable objects (tiles are always immovable) - if (body.immovable || body.deltaX() === 0 || Phaser.Rectangle.intersects(body.hullX, tile) === false) - { - return false; - } - - this._overlap = 0; - - // The hulls overlap, let's process it - // this._maxOverlap = body.deltaAbsX() + this.OVERLAP_BIAS; - - if (body.deltaX() < 0) - { - // Moving left - this._overlap = tile.right - body.hullX.x; - - // if ((this._overlap > this._maxOverlap) || body.allowCollision.left === false || tile.tile.collideRight === false) - if (body.allowCollision.left === false || tile.tile.collideRight === false) - { - this._overlap = 0; - } - else - { - body.touching.left = true; - } - } - else - { - // Moving right - this._overlap = body.hullX.right - tile.x; - - // if ((this._overlap > this._maxOverlap) || body.allowCollision.right === false || tile.tile.collideLeft === false) - if (body.allowCollision.right === false || tile.tile.collideLeft === false) - { - this._overlap = 0; - } - else - { - body.touching.right = true; - } - } - - // Then adjust their positions and velocities accordingly (if there was any overlap) - if (this._overlap !== 0) - { - if (separate) - { - // console.log('dx1', body.x); - - if (body.deltaX() < 0) - { - body.x = body.x + this._overlap; - } - else - { - body.x = body.x - this._overlap; - } - - // console.log('dx2', body.x, this._overlap); - - if (body.bounce.x === 0) - { - body.velocity.x = 0; - } - else - { - body.velocity.x = -body.velocity.x * body.bounce.x; - } - - body.updateHulls(false); - } - - return true; - } - else - { - return false; - } - - }, - - /** - * The core separation function to separate a physics body and a tile on the x axis. - * @method Phaser.Physics.Arcade#separateTileY - * @param {Phaser.Physics.Arcade.Body} body1 - The Body object to separate. - * @param {Phaser.Tile} tile - The tile to collide against. - * @returns {boolean} Returns true if the bodies were separated, otherwise false. - */ - separateTileY: function (body, tile, separate) { - - // Can't separate two immovable objects (tiles are always immovable) - if (body.immovable || body.deltaY() === 0 || Phaser.Rectangle.intersects(body.hullY, tile) === false) - { - return false; - } - - this._overlap = 0; - - // The hulls overlap, let's process it - // this._maxOverlap = body.deltaAbsY() + this.OVERLAP_BIAS; - - if (body.deltaY() < 0) - { - // Moving up - this._overlap = tile.bottom - body.hullY.y; - - // if ((this._overlap > this._maxOverlap) || body.allowCollision.up === false || tile.tile.collideDown === false) - if (body.allowCollision.up === false || tile.tile.collideDown === false) - { - this._overlap = 0; - } - else - { - body.touching.up = true; - } - } - else - { - // Moving down - this._overlap = body.hullY.bottom - tile.y; - - // if ((this._overlap > this._maxOverlap) || body.allowCollision.down === false || tile.tile.collideUp === false) - if (body.allowCollision.down === false || tile.tile.collideUp === false) - { - this._overlap = 0; - } - else - { - body.touching.down = true; - } - } - - // Then adjust their positions and velocities accordingly (if there was any overlap) - if (this._overlap !== 0) - { - if (separate) - { - if (body.deltaY() < 0) - { - body.y = body.y + this._overlap; - } - else - { - body.y = body.y - this._overlap; - } - - if (body.bounce.y === 0) - { - body.velocity.y = 0; - } - else - { - body.velocity.y = -body.velocity.y * body.bounce.y; - } - - body.updateHulls(false); - } - - return true; - } - else - { - return false; - } - - }, - /** * Move the given display object towards the destination object at a steady velocity. * If you specify a maxTime then it will adjust the speed (over-writing what you set) so it arrives at the destination in that number of seconds. @@ -1622,7 +1402,7 @@ Phaser.Physics.Arcade.prototype = { /** * Given the rotation (in radians) and speed calculate the acceleration and return it as a Point object, or set it to the given point object. - * One way to use this is: velocityFromRotation(rotation, 200, sprite.velocity) which will set the values directly to the sprites velocity and not create a new Point object. + * One way to use this is: accelerationFromRotation(rotation, 200, sprite.acceleration) which will set the values directly to the sprites acceleration and not create a new Point object. * * @method Phaser.Physics.Arcade#accelerationFromRotation * @param {number} rotation - The angle in radians. diff --git a/src/tilemap/TilemapLayer.js b/src/tilemap/TilemapLayer.js index 1b21bb5b..87dacc31 100644 --- a/src/tilemap/TilemapLayer.js +++ b/src/tilemap/TilemapLayer.js @@ -288,7 +288,7 @@ Phaser.TilemapLayer.prototype.postUpdate = function () { Phaser.Sprite.prototype.postUpdate.call(this); - // Stops you being able to scroll the camera if it's not following a sprite + // Stops you being able to auto-scroll the camera if it's not following a sprite this.scrollX = this.game.camera.x * this.scrollFactorX; this.scrollY = this.game.camera.y * this.scrollFactorY; @@ -513,7 +513,7 @@ Phaser.TilemapLayer.prototype.getTileXY = function (x, y, point) { * @param {boolean} [collides=false] - If true only return tiles that collide on one or more faces. * @return {array} Array with tiles informations (each contains x, y, and the tile). */ -Phaser.TilemapLayer.prototype.getTiles = function (x, y, width, height, collides) { +Phaser.TilemapLayer.prototype.getTiles = function (x, y, width, height, collides, debug) { if (this.tilemap === null) { @@ -522,6 +522,7 @@ Phaser.TilemapLayer.prototype.getTiles = function (x, y, width, height, collides // Should we only get tiles that have at least one of their collision flags set? (true = yes, false = no just get them all) if (typeof collides === 'undefined') { collides = false; } + if (typeof debug === 'undefined') { debug = false; } // Cap the values @@ -549,7 +550,12 @@ Phaser.TilemapLayer.prototype.getTiles = function (x, y, width, height, collides height = this.heightInPixels; } - this.context.fillStyle = 'rgba(255,0,255,0.5)'; + if (debug) + { + console.log('x', x, 'y', y, 'w', width, 'h', height); + } + + // this.context.fillStyle = 'rgba(255,0,255,0.5)'; // this.context.fillRect(x, y, width, height); var tileWidth = this.tileWidth * this.scale.x; @@ -561,7 +567,12 @@ Phaser.TilemapLayer.prototype.getTiles = function (x, y, width, height, collides this._tw = (this.game.math.snapToCeil(width, tileWidth) + tileWidth) / tileWidth; this._th = (this.game.math.snapToCeil(height, tileHeight) + tileHeight) / tileHeight; - this.context.fillRect(this._tx * tileWidth, this._ty * tileHeight, this._tw * tileWidth, this._th * tileHeight); + if (debug) + { + console.log('tx', this._tx, 'ty', this._ty, 'tw', this._tw, 'th', this._th); + } + + // this.context.fillRect(this._tx * tileWidth, this._ty * tileHeight, this._tw * tileWidth, this._th * tileHeight); // This should apply the layer x/y here this._results.length = 0; @@ -571,19 +582,34 @@ Phaser.TilemapLayer.prototype.getTiles = function (x, y, width, height, collides var sx = 0; var sy = 0; - this.context.fillStyle = 'rgba(255,0,0,0.5)'; - this.context.strokeStyle = 'rgba(0,0,0,1)'; + this.context.fillStyle = 'rgba(255,0,0,1)'; + // this.context.strokeStyle = 'rgba(0,0,0,1)'; for (var wy = this._ty; wy < this._ty + this._th; wy++) { + if (debug) + { + console.log('wy', wy); + } + for (var wx = this._tx; wx < this._tx + this._tw; wx++) { + if (debug) + { + console.log('wx', wx); + } + if (this.layer.data[wy] && this.layer.data[wy][wx]) { // Could combine // _index = this.layer.data[wy][wx] - 1; // _tile = this.tileset.getTile(_index); _tile = this.layer.data[wy][wx]; + + if (debug) + { + console.log('tile', _tile); + } if (_tile) { @@ -595,8 +621,13 @@ Phaser.TilemapLayer.prototype.getTiles = function (x, y, width, height, collides if (collides === false || (collides && _tile.collides)) { - this.context.fillRect(_tile.x * this.tileWidth, _tile.y * this.tileHeight, this.tileWidth, this.tileHeight); - this.context.strokeRect(_tile.x * this.tileWidth, _tile.y * this.tileHeight, this.tileWidth, this.tileHeight); + if (debug) + { + this.context.fillRect(_tile.x * this.tileWidth, _tile.y * this.tileHeight, this.tileWidth, this.tileHeight); + } + + + // this.context.strokeRect(_tile.x * this.tileWidth, _tile.y * this.tileHeight, this.tileWidth, this.tileHeight); // convert tile coordinates back to camera space for return var _wx = this._unfixX(wx * sx) / this.tileWidth; @@ -653,6 +684,8 @@ Phaser.TilemapLayer.prototype.updateMax = function () { this.dirty = true; + console.log('updateMax', this._maxX, this._maxY, 'px', this.widthInPixels, this.heightInPixels, 'rwh', this.width, this.height); + } /** @@ -686,9 +719,9 @@ Phaser.TilemapLayer.prototype.render = function () { this._tx = this._dx; this._ty = this._dy; - // this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); - // this.context.fillStyle = '#000000'; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + this.context.fillStyle = '#000000'; + this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.strokeStyle = '#00ff00'; @@ -834,16 +867,15 @@ Object.defineProperty(Phaser.TilemapLayer.prototype, "scrollX", { set: function (value) { - if (value !== this._x && value >= 0 && this.layer) + if (value !== this._x && value >= 0 && this.layer && this.widthInPixels > this.renderWidth) { 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) @@ -875,7 +907,7 @@ Object.defineProperty(Phaser.TilemapLayer.prototype, "scrollY", { set: function (value) { - if (value !== this._y && value >= 0 && this.layer) + if (value !== this._y && value >= 0 && this.layer && this.heightInPixels > this.renderHeight) { this._y = value; diff --git a/src/utils/Debug.js b/src/utils/Debug.js index edcaefe8..1b8ed27a 100644 --- a/src/utils/Debug.js +++ b/src/utils/Debug.js @@ -636,8 +636,11 @@ Phaser.Utils.Debug.prototype = { this.start(0, 0, color); - // this.context.fillStyle = color; - // this.context.fillRect(sprite.body.screenX, sprite.body.screenY, sprite.body.width, sprite.body.height); + this.context.fillStyle = color; + this.context.fillRect(sprite.body.screenX, sprite.body.screenY, sprite.body.width, sprite.body.height); + + this.stop(); + this.start(0, 0, color); this.context.beginPath(); this.context.strokeStyle = '#000000'; @@ -699,11 +702,11 @@ Phaser.Utils.Debug.prototype = { } else { - // this.context.strokeStyle = color; - // this.context.strokeRect(sprite.bounds.x, sprite.bounds.y, sprite.bounds.width, sprite.bounds.height); - // this.context.strokeRect(sprite.body.x, sprite.body.y, sprite.body.width, sprite.body.height); + this.context.strokeStyle = color; + this.context.strokeRect(sprite.bounds.x, sprite.bounds.y, sprite.bounds.width, sprite.bounds.height); + this.context.strokeRect(sprite.body.x, sprite.body.y, sprite.body.width, sprite.body.height); // this.context.strokeRect(sprite.body.hull.x, sprite.body.hull.y, sprite.body.hull.width, sprite.body.hull.height); - // this.context.stroke(); + this.context.stroke(); // this.context.strokeStyle = '#ff0000'; // this.context.strokeRect(sprite.body.hullX.x, sprite.body.hullX.y, sprite.body.hullX.width, sprite.body.hullX.height);