Objects that are 'fixedToCamera' are now still correctly placed even if the camera is scaled (phaserjs#512)

Author: photonstorm

README.md

@@ -217,6 +217,7 @@ Bug Fixes:
 * Tilemap.putTile now correctly re-calculates the collision data based on the new collideIndexes array (fixes #371)
 * Circle.circumferencePoint using the asDegrees parameter would apply degToRad instead of radToDeg (thanks Ziriax, fixes #509)
 * InputHandler.enableSnap now correctly assigns the snap offset parameters (fixes #515)
+* Objects that are 'fixedToCamera' are now still correctly placed even if the camera is scaled (#512)
 
 
 TO DO:

examples/wip/fixed to cam scale.js

@@ -0,0 +1,92 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
+
+function preload() {
+
+    game.load.image('backdrop', 'assets/pics/remember-me.jpg');
+    game.load.image('mushroom', 'assets/sprites/mushroom2.png');
+	game.load.image('coke', 'assets/sprites/cokecan.png');
+    game.load.bitmapFont('desyrel', 'assets/fonts/bitmapFonts/desyrel.png', 'assets/fonts/bitmapFonts/desyrel.xml', null, 0, -32);
+
+}
+
+var cursors;
+var mushroom;
+
+function create() {
+
+    game.world.setBounds(0, 0, 1920, 1200);
+    game.add.image(0, 0, 'backdrop');
+
+    mushroom = game.add.sprite(400, 400, 'mushroom');
+
+    //  Test Fixing an Image to the Camera
+    var fixie = game.add.image(100, 100, 'coke');
+    fixie.fixedToCamera = true;
+
+    //  And tween it
+    game.add.tween(fixie.cameraOffset).to({ y: 500 }, 2000, Phaser.Easing.Bounce.Out, true, 0, 1000, true);
+
+    //  Test Fixing a Sprite to the Camera
+    var fixie2 = game.add.sprite(600, 100, 'coke');
+    fixie2.fixedToCamera = true;
+    fixie2.inputEnabled = true;
+    fixie2.events.onInputDown.add(clicked, this);
+
+    //  Test Fixing a Text to the Camera
+    var text = game.add.text(300, 32, '-phaser-');
+    text.fixedToCamera = true;
+
+    //  Test fixing a BitmapText to the Camera
+    var text2 = game.add.bitmapText(200, 500, 'desyrel', 'camera fixies', 32);
+    text2.fixedToCamera = true;
+
+    //  Test fixing a Graphics object to the Camera
+    var graphics = game.add.graphics(0, 0);
+    graphics.fixedToCamera = true;
+    graphics.beginFill(0xFF3300);
+    graphics.lineStyle(2, 0x0000FF, 1);
+    graphics.drawRect(50, 250, 100, 100);
+
+    //  Button! do mouse events still work then?
+
+    game.camera.scale.set(2);
+
+    game.camera.follow(mushroom);
+
+    cursors = game.input.keyboard.createCursorKeys();
+
+}
+
+function clicked() {
+
+    console.log('boom');
+
+}
+
+function update() {
+
+    if (cursors.left.isDown)
+    {
+    	mushroom.x -= 8;
+    }
+    else if (cursors.right.isDown)
+    {
+    	mushroom.x += 8;
+    }
+
+    if (cursors.up.isDown)
+    {
+    	mushroom.y -= 8;
+    }
+    else if (cursors.down.isDown)
+    {
+    	mushroom.y += 8;
+    }
+
+}
+
+function render() {
+
+
+}

src/core/Camera.js

@@ -90,6 +90,11 @@ Phaser.Camera = function (game, id, x, y, width, height) {
     * @property {PIXI.DisplayObject} displayObject - The display object to which all game objects are added. Set by World.boot
     */
     this.displayObject = null;
+
+    /**
+    * @property {Phaser.Point} scale - The scale of the display object to which all game objects are added. Set by World.boot
+    */
+    this.scale = null;
 
 };
 

src/core/World.js

@@ -51,6 +51,8 @@ Phaser.World.prototype.boot = function () {
 
     this.camera.displayObject = this;
 
+    this.camera.scale = this.scale;
+
     this.game.camera = this.camera;
 
     this.game.stage.addChild(this);

src/gameobjects/BitmapText.js

@@ -192,8 +192,8 @@ Phaser.BitmapText.prototype.postUpdate = function () {
     //  Fixed to Camera?
     if (this._cache[7] === 1)
     {
-        this.position.x = this.game.camera.view.x + this.cameraOffset.x;
-        this.position.y = this.game.camera.view.y + this.cameraOffset.y;
+        this.position.x = (this.game.camera.view.x + this.cameraOffset.x) / this.game.camera.scale.x;
+        this.position.y = (this.game.camera.view.y + this.cameraOffset.y) / this.game.camera.scale.y;
     }
 
 }

src/gameobjects/Graphics.js

@@ -128,8 +128,8 @@ Phaser.Graphics.prototype.postUpdate = function () {
     //  Fixed to Camera?
     if (this._cache[7] === 1)
     {
-        this.position.x = this.game.camera.view.x + this.cameraOffset.x;
-        this.position.y = this.game.camera.view.y + this.cameraOffset.y;
+        this.position.x = (this.game.camera.view.x + this.cameraOffset.x) / this.game.camera.scale.x;
+        this.position.y = (this.game.camera.view.y + this.cameraOffset.y) / this.game.camera.scale.y;
     }
 
 }

src/gameobjects/Image.js

@@ -187,8 +187,8 @@ Phaser.Image.prototype.postUpdate = function() {
     //  Fixed to Camera?
     if (this._cache[7] === 1)
     {
-        this.position.x = this.game.camera.view.x + this.cameraOffset.x;
-        this.position.y = this.game.camera.view.y + this.cameraOffset.y;
+        this.position.x = (this.game.camera.view.x + this.cameraOffset.x) / this.game.camera.scale.x;
+        this.position.y = (this.game.camera.view.y + this.cameraOffset.y) / this.game.camera.scale.y;
     }
 
     //  Update any Children

src/gameobjects/Sprite.js

@@ -308,8 +308,8 @@ Phaser.Sprite.prototype.postUpdate = function() {
     //  Fixed to Camera?
     if (this._cache[7] === 1)
     {
-        this.position.x = this.game.camera.view.x + this.cameraOffset.x;
-        this.position.y = this.game.camera.view.y + this.cameraOffset.y;
+        this.position.x = (this.game.camera.view.x + this.cameraOffset.x) / this.game.camera.scale.x;
+        this.position.y = (this.game.camera.view.y + this.cameraOffset.y) / this.game.camera.scale.y;
     }
 
     //  Update any Children

src/gameobjects/Text.js

@@ -179,8 +179,8 @@ Phaser.Text.prototype.postUpdate = function () {
 
     if (this._cache[7] === 1)
     {
-        this.position.x = this.game.camera.view.x + this.cameraOffset.x;
-        this.position.y = this.game.camera.view.y + this.cameraOffset.y;
+        this.position.x = (this.game.camera.view.x + this.cameraOffset.x) / this.game.camera.scale.x;
+        this.position.y = (this.game.camera.view.y + this.cameraOffset.y) / this.game.camera.scale.y;
     }
 
     //  Update any Children