Sign in to follow this  
JohnyBro

Camera following with delay

Recommended Posts

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 :

59d411649ecc9_hCGJg0T1.png.43fc79ce1271538832fc98bf8ad5c415.png

Moving to the right :

59d41209d0786_WiPePH11.png.05d7c246019cd272e162c70d4963a3d4.png

Moving to the left :

59d4123570972_0uTxVR91.png.6e803602eedc7b7a1ca99885d249f99e.png

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 by JohnyBro
Added gitHub link

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.