camera Camera following with delay

[JohnyBro]

Hi guys,

First excuse me for my english.

I want the camera to follow a sprite and I set the position of this sprite every frame.

function create(){
    this.player = new Player(this.game);
    this.playerController = new PlayerController(this.game, this.player);
    this.cameraTarget = this.game.add.sprite(this.player.x, this.player.y, "cameraTarget");
    this.cameraTarget.anchor.setTo(0.5, 0.5);
    this.camera.follow(this.cameraTarget);
}

function update(){
    this.playerController.move();
    this.cameraTarget.x = this.player.x;
    this.cameraTarget.y = this.player.y;
}

This work but the camera have a small delay, here is some picture of this (red = player, yellow = cameraTarget).

Not moving :

Moving to the right :

Moving to the left :

You can see the delay of the camera with the yellow box's offset (Trust me the yellow box is always centered on my screen).

The stranger thing is when I set the follow of the camera on the player it work well, no delay.

Don't tell me to set the follow of the camera on the player plz, I need this cameraTarget for later calculations.

Here is the gitHub if you want the code : https://github.com/JohnyBro/Platformer

If someone can help me with this it will be appreciated.

Edited October 3, 2017 by JohnyBro
Added gitHub link

[samme]

Are you moving the player with physics?

Also switch temporarily to CANVAS mode, its debug rendering is slightly more accurate.

[JohnyBro]

Yes I move the player with velocity and I tried with the CANVAS mode but it changed nothing.

[samme]

Try the techniques in phaser-ce/issues/357.

[JohnyBro]

I already tried with child, preRender function and .updateTransform() function.

And I did the same code as in this example http://phaser.io/examples/v2/camera/child follow

But I don't know why it didn't work for me.

Here you can test my game and feel the camera bug if you want (unzip and launch GAME.exe) : https://drive.google.com/open?id=0B1iMRHejotxJZ04ycnowTng0aEU

[JohnyBro]

I found where is the issue.

I use a tilemap for my game but if I only set a sprite as background it work.

Work :

function create(){
    this.game.add.sprite(0, 0, "background");
    this.game.world.setBounds(0,0,3000,3000);

    this.player = new Player(this.game);
    this.playerController = new PlayerController(this.game, this.player);

    this.cameraTarget = this.game.add.sprite(this.player.x, this.player.y, "cameraTarget");
    this.cameraTarget.anchor.setTo(0.5, 0.5);

    this.camera.follow(this.cameraTarget);
}

function update(){
    this.playerController.move(); //Move the player with physics
}

function preRender(){
    this.cameraTarget.x = this.player.x;
    this.cameraTarget.y = this.player.y;
    this.cameraTarget.updateTransform();

    this.game.camera.updateTarget();
    this.game.stage.updateTransform();
}

Doesn't work :

function create(){
    createMap.call(this); //Create the tilemap

    this.player = new Player(this.game);
    this.playerController = new PlayerController(this.game, this.player);

    this.cameraTarget = this.game.add.sprite(this.player.x, this.player.y, "cameraTarget");
    this.cameraTarget.anchor.setTo(0.5, 0.5);

    this.camera.follow(this.cameraTarget);
}

function update(){
    this.playerController.move(); //Move the player
}

function preRender(){
    this.cameraTarget.x = this.player.x;
    this.cameraTarget.y = this.player.y;
    this.cameraTarget.updateTransform();

    this.game.camera.updateTarget();
    this.game.stage.updateTransform();
}

So now I know where the bug is but I don't know how to fix it.

[JohnyBro]

I made a codepen if someone want to check https://codepen.io/anon/pen/ZXrxLg?editors=0010

You can switch by commenting lines 34 and 35 and uncomment lines 32 to switch.

[JohnyBro]

Nobody can help me ?

[samme]

Turn off enableScrollDelta.

 

[JohnyBro]

It change nothing.

I rly think it's a bug in phaser code.

[samme]

Well find it yourself then.

[samme]

@JohnyBro I think there are two ways to fix it:

• Update camera target's position from player.body.center.
• Run player.postUpdate() early and then update camera target's position from player.position. See pen: https://codepen.io/samme/pen/VMdJbZ.