From 3de62907a072905b32ff104201ff5b6be137e9b3 Mon Sep 17 00:00:00 2001 From: photonstorm Date: Tue, 29 Oct 2013 04:07:26 +0000 Subject: [PATCH] Nearly fixed the tilemap / body issue. More tests needed but then can push to master. --- README.md | 1 + examples/camera/basic follow.js | 52 +++++++++++++++++----------- examples/camera/moving the camera.js | 46 ++++++++++++------------ examples/tilemaps/sci fly.js | 4 +-- src/core/Camera.js | 11 ++---- src/gameobjects/Sprite.js | 31 +++++++++-------- src/physics/arcade/Body.js | 15 ++++---- src/utils/Debug.js | 12 +++++-- 8 files changed, 95 insertions(+), 77 deletions(-) diff --git a/README.md b/README.md index 5d020d0b..6fe03710 100644 --- a/README.md +++ b/README.md @@ -44,6 +44,7 @@ Version 1.1.2 * Fixed issue 136 - distanceTo using worldX/Y instead of x/y. * Added init method to plugins, to be called as they are added to the PluginManager (thanks beeglebug) * If you pause an Animation, when you next play it it'll resume (un-pause itself). +* Started work on fixing the body / camera / tilemap issue - pretty much sorted now I think, more tests needed. diff --git a/examples/camera/basic follow.js b/examples/camera/basic follow.js index 9a225a92..417c07ac 100644 --- a/examples/camera/basic follow.js +++ b/examples/camera/basic follow.js @@ -1,60 +1,72 @@ var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); -var baddie; -var keys = Phaser.Keyboard; - function preload() { game.load.image('background','assets/misc/starfield.jpg'); - game.load.image('ufo','assets/sprites/ufo.png'); - game.load.image('baddie','assets/sprites/space-baddie.png'); + game.load.image('ufo','assets/sprites/space-baddie.png'); + game.load.image('player','assets/sprites/phaser-dude.png'); } +var player; +var fixed; +var cursors; + function create() { game.add.tileSprite(0, 0, 2000, 2000, 'background'); - game.world.setBounds(0, 0, 1400,1400); + game.world.setBounds(0, 0, 1400, 1400); - for (var i = 0; i < 10; i++) + for (var i = 0; i < 100; i++) { game.add.sprite(game.world.randomX, game.world.randomY, 'ufo'); } - baddie = game.add.sprite(150, 320, 'baddie'); + fixed = game.add.sprite(300, 320, 'player'); + fixed.fixedToCamera = true; + fixed.cameraOffset.x = 300; + fixed.cameraOffset.y = 300; - game.camera.follow(baddie); + player = game.add.sprite(150, 320, 'player'); + + cursors = game.input.keyboard.createCursorKeys(); + + game.camera.follow(player); } function update() { - baddie.body.velocity.setTo(0, 0); + player.body.velocity.setTo(0, 0); - if (game.input.keyboard.isDown(keys.LEFT) && !game.input.keyboard.isDown(keys.RIGHT)) + if (cursors.up.isDown) { - baddie.body.velocity.x = -155; + player.body.velocity.y = -200; } - else if (game.input.keyboard.isDown(keys.RIGHT) && !game.input.keyboard.isDown(keys.LEFT)) + else if (cursors.down.isDown) { - baddie.body.velocity.x = 155; + player.body.velocity.y = 200; } - else if (game.input.keyboard.isDown(keys.UP) && !game.input.keyboard.isDown(keys.DOWN)) + + if (cursors.left.isDown) { - baddie.angle = 90; - baddie.body.velocity.y = -155; + player.body.velocity.x = -200; } - else if (game.input.keyboard.isDown(keys.DOWN) && !game.input.keyboard.isDown(keys.UP)) + else if (cursors.right.isDown) { - baddie.angle = 90; - baddie.body.velocity.y = 155; + player.body.velocity.x = 200; } + } function render() { game.debug.renderCameraInfo(game.camera, 32, 32); + game.debug.renderSpriteCoords(player, 32, 200); + game.debug.renderSpriteCoords(fixed, 600, 200); + + game.debug.renderSpriteCoords(game.world._container, 32, 400); } diff --git a/examples/camera/moving the camera.js b/examples/camera/moving the camera.js index 7bbf28ba..ad4ad308 100644 --- a/examples/camera/moving the camera.js +++ b/examples/camera/moving the camera.js @@ -1,52 +1,52 @@ -var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update }); +var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.image('mushroom', 'assets/sprites/mushroom2.png'); } +var cursors; + function create() { game.stage.backgroundColor = '#2d2d2d'; // Make our game world 2000x2000 pixels in size (the default is to match the game size) - game.world.setBounds(0,0,2000, 2000); + game.world.setBounds(0, 0, 2000, 2000); - for (var i = 0; i < 50; i++) - { - var s = game.add.sprite(game.world.randomX, game.world.randomY, 'mushroom'); - } - - for (var i = 0; i < 50; i++) + for (var i = 0; i < 150; i++) { game.add.sprite(game.world.randomX, game.world.randomY, 'mushroom'); } - for (var i = 0; i < 50; i++) - { - var s = game.add.sprite(game.world.randomX, game.world.randomY, 'mushroom'); - } + cursors = game.input.keyboard.createCursorKeys(); } function update() { - if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) - { - game.camera.x -= 4; - } - else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) - { - game.camera.x += 4; - } - - if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) + if (cursors.up.isDown) { game.camera.y -= 4; } - else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) + else if (cursors.down.isDown) { game.camera.y += 4; } + if (cursors.left.isDown) + { + game.camera.x -= 4; + } + else if (cursors.right.isDown) + { + game.camera.x += 4; + } + +} + +function render() { + + game.debug.renderCameraInfo(game.camera, 32, 32); + } diff --git a/examples/tilemaps/sci fly.js b/examples/tilemaps/sci fly.js index 472ec5ed..6661e2f7 100644 --- a/examples/tilemaps/sci fly.js +++ b/examples/tilemaps/sci fly.js @@ -80,7 +80,7 @@ function particleBurst() { function update() { - // game.physics.collide(sprite, layer); + game.physics.collide(sprite, layer); game.physics.collide(emitter, layer); sprite.body.velocity.x = 0; @@ -111,7 +111,7 @@ function update() { function render() { - // game.debug.renderSpriteCorners(sprite); + game.debug.renderSpriteCorners(sprite); // game.debug.renderSpriteInfo(sprite, 32, 32); game.debug.renderSpriteCoords(sprite, 32, 32); diff --git a/src/core/Camera.js b/src/core/Camera.js index 6b9b40bb..ec8025b1 100644 --- a/src/core/Camera.js +++ b/src/core/Camera.js @@ -195,15 +195,8 @@ Phaser.Camera.prototype = { this.checkBounds(); } - if (this.view.x !== -this.displayObject.position.x) - { - this.displayObject.position.x = -this.view.x; - } - - if (this.view.y !== -this.displayObject.position.y) - { - this.displayObject.position.y = -this.view.y; - } + this.displayObject.position.x = -this.view.x; + this.displayObject.position.y = -this.view.y; }, diff --git a/src/gameobjects/Sprite.js b/src/gameobjects/Sprite.js index 43518256..d9680ca0 100644 --- a/src/gameobjects/Sprite.js +++ b/src/gameobjects/Sprite.js @@ -306,6 +306,8 @@ Phaser.Sprite = function (game, x, y, key, frame) { * @default */ this.fixedToCamera = false; + this.cameraOffset = new Phaser.Point; + this.world = new Phaser.Point; /** * You can crop the Sprites texture by modifying the crop properties. For example crop.width = 50 would set the Sprite to only render 50px wide. @@ -364,17 +366,19 @@ Phaser.Sprite.prototype.preUpdate = function() { this.renderOrderID = this.game.world.currentRenderOrderID++; } + this.prevX = this.x; + this.prevY = this.y; + if (this.fixedToCamera) { - this.prevX = this.game.camera.view.x + this.x; - this.prevY = this.game.camera.view.y + this.y; - } - else - { - this.prevX = this.x; - this.prevY = this.y; + this.x = this.game.camera.view.x + this.cameraOffset.x; + this.y = this.game.camera.view.y + this.cameraOffset.y; + // this.prevX = this.game.camera.view.x + this.x; + // this.prevY = this.game.camera.view.y + this.y; } + this.world.setTo(this.game.camera.x + this.worldTransform[2], this.game.camera.y + this.worldTransform[5]); + this.updateCache(); this.updateAnimation(); @@ -656,8 +660,8 @@ Phaser.Sprite.prototype.postUpdate = function() { if (this.fixedToCamera) { - this._cache.x = this.game.camera.view.x + this.x; - this._cache.y = this.game.camera.view.y + this.y; + this._cache.x = this.game.camera.view.x + this.cameraOffset.x; + this._cache.y = this.game.camera.view.y + this.cameraOffset.y; } else { @@ -665,11 +669,10 @@ Phaser.Sprite.prototype.postUpdate = function() { this._cache.y = this.y; } - if (this.position.x != this._cache.x || this.position.y != this._cache.y) - { - this.position.x = this._cache.x; - this.position.y = this._cache.y; - } + this.world.setTo(this.game.camera.x + this.worldTransform[2], this.game.camera.y + this.worldTransform[5]); + + this.position.x = this._cache.x; + this.position.y = this._cache.y; } } diff --git a/src/physics/arcade/Body.js b/src/physics/arcade/Body.js index 26cff394..e70bc705 100644 --- a/src/physics/arcade/Body.js +++ b/src/physics/arcade/Body.js @@ -350,13 +350,14 @@ Phaser.Physics.Arcade.Body.prototype = { this.embedded = false; - - this.screenX = (this.sprite.worldTransform[2] - (this.sprite.anchor.x * this.width)) + this.offset.x; this.screenY = (this.sprite.worldTransform[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.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.preX = (this.sprite.world.x - (this.sprite.anchor.x * this.width)) + this.offset.x; + this.preY = (this.sprite.world.y - (this.sprite.anchor.y * this.height)) + this.offset.y; this.preRotation = this.sprite.angle; @@ -513,8 +514,10 @@ Phaser.Physics.Arcade.Body.prototype = { this.angularVelocity = 0; this.angularAcceleration = 0; - 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.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.preX = (this.sprite.world.x - (this.sprite.anchor.x * this.width)) + this.offset.x; + this.preY = (this.sprite.world.y - (this.sprite.anchor.y * this.height)) + this.offset.y; this.preRotation = this.sprite.angle; this.x = this.preX; diff --git a/src/utils/Debug.js b/src/utils/Debug.js index 9b6cca2c..d252d883 100644 --- a/src/utils/Debug.js +++ b/src/utils/Debug.js @@ -556,15 +556,21 @@ Phaser.Utils.Debug.prototype = { this.start(x, y, color); - this.line(sprite.name); + if (sprite.name) + { + this.line(sprite.name); + } + this.line('x: ' + sprite.x); this.line('y: ' + sprite.y); this.line('pos x: ' + sprite.position.x); this.line('pos y: ' + sprite.position.y); this.line('local x: ' + sprite.localTransform[2]); this.line('local y: ' + sprite.localTransform[5]); - this.line('world x: ' + sprite.worldTransform[2]); - this.line('world y: ' + sprite.worldTransform[5]); + this.line('t x: ' + sprite.worldTransform[2]); + this.line('t y: ' + sprite.worldTransform[5]); + this.line('world x: ' + sprite.world.x); + this.line('world y: ' + sprite.world.y); this.stop();