Camera follow Player (with offset)

[Baron Karza]

Hello there,

I was wondering if there is a way to specific an offestY and an offsetY relative to the sprite that the camera is following.

In other words I want the camera to follow my main sprite but I want that the camera is placed a bit above my main sprite.

If this is not possibile, the only workaround that cames to my mind is to place an invisibile sprite that follows my main sprite and set the camera to follow this invisibile sprite.

Thanks in advance

 

[marvster]

Have a look at camera.focusOnXY(x, y) which will instantly focus on given coordinates.

Using this in the update-loop with player.x and player.y+<offsetvalue> might work out for you.

[Baron Karza]

Thanks marvster,

I was looking at the wrong part of the docs, that is sprite.fixedToCamera and sprite.cameraOffset

[Baron Karza]

Have a look at camera.focusOnXY(x, y) which will instantly focus on given coordinates.

Using this in the update-loop with player.x and player.y+<offsetvalue> might work out for you.

 

Btw, it worked but I just discovered that if you have specified camera.follow it seems to override the camera.setFocusOnXY.

I just removed the camera.follow and all worked very well, thanks again

[Baron Karza]

Sorry for reopening this thread but camera.focusOnXY(x, y)  has a big problem.

 

I try to explain.

 

I can call that method only in update loop because my player moves and the camera has to follow him (with an offset on the y axis)

But by doing this generates an annoying flickering that is not generated if I use the normal camera.follow method (once).

I investigated further by digging in Phaser code and I noticed that the method camera.follow ends up by invoking the camera.focusOnXY method but as I have said above it doesn't generate any flickering.

So I thought that camera.follow calls that method in a different time than the main update loop.

 

In fact I solved by "hacking" the method game.camera.updateTarget (an internal method) and by overriding it on the game instance (I just added my "span y" value to the internal call to camera.focusOnXY.

It worked flawlessy.

 

For this reason I propose a small modify to the camera.focus method
 

follow: function (target, style) {          if (typeof style === "undefined") { style = Phaser.Camera.FOLLOW_LOCKON; }

has to become

follow: function (target, style,span) {          if (typeof style === "undefined") { style = Phaser.Camera.FOLLOW_LOCKON; }          if (typeof span === "undefined") { span = {x:0,y:0} }          this.span = span;

and then in the  "updateTarget: function () {" just one line has to be modified:

    ...    ...    }else{      this.focusOnXY(this.target.x+this.span.x, this.target.y+this.span.y);    }

What do you think?

[tacostuesdays]

Beautiful workaround. I also needed an offset for my game, and also noticed the flickering. The patch worked around the issue. Here's a patch of the change that Baron suggested

--- phaser.patched.js	2014-03-28 01:42:49.000000000 +0000+++ phaser.js	2015-08-23 10:46:38.141772416 +0000@@ -12757,10 +12757,11 @@     * @param {Phaser.Sprite|Phaser.Image|Phaser.Text} target - The object you want the camera to track. Set to null to not follow anything.     * @param {number} [style] - Leverage one of the existing "deadzone" presets. If you use a custom deadzone, ignore this parameter and manually specify the deadzone after calling follow().     */-    follow: function (target, style) {+    follow: function (target, style, span) {          if (typeof style === "undefined") { style = Phaser.Camera.FOLLOW_LOCKON; }-+        if (typeof span === "undefined") { span = {x:0,y:0} }+        this.span = span;         this.target = target;          var helper;@@ -12877,7 +12878,7 @@         }         else         {-            this.focusOnXY(this.target.x, this.target.y);+            this.focusOnXY(this.target.x+this.span.x, this.target.y+this.span.y);         }      },

[Larzan]

Anybody else wondering about this, here is a great patch that you can just copy paste into your project: