Dynamic camera pan values?

Phaser 3
1

Hi Everyone!

I was wondering if it’s possible to have the camera pan x/y values update to dynamic x/y position values? For example…

I need the camera to pan towards the player object. Once the pan is finished, the camera should start following the player. This is the code I’m using:

this.camera.pan(
        this.player.x, //How to make dynamic?
        this.player.y, //How to make dynamic?
        time,
        "Sine.easeInOut",
        true,
        //The camera pan callback  
       (camera, progress) => {
          if (progress === 1) {
            camera.startFollow(this.player, false, 0.1, 0.1); 
          }
        }

But the problem I’m having is that the x and y values I set in the pan represent the position of the player at the moment the pan is started. If the player moves while the pan is happening, the camera won’t update to the pan to that new position. So when the pan is finished and startFollow is called, the camera will jump (jarringly) to point to the player’s current new position. (The lerp values, 0.1, don’t help to smooth this out - the camera just jumps to the new position, which is actually a bit unexpected. If they did smoothly update to the player’s position I probably wouldn’t even need the pan effect.)

I’ve tried…

this.camera.pan(
        () => this.player.x,
        () => this.player.y,

… but no luck there.

I know the callback has x and y parameters, but those are ready only.

Does anyone know how to tell the pan to dynamically track the player’s position? (Or, am I overthinking this and there’s a much simpler solution?)

2

Hi @kittykatattack,
You can change camera.panEffect.destination in the callback.
Example:

3

@jjcapellan Thank you so much, it works like a charm!!! I wasn’t aware of the panEffect.desitination property :grinning_face_with_smiling_eyes:

4

Just had a chance to revisit this in my game and created a re-usable function that lets me zoom/pan in and out of the player, while tracking its movement. For posterity:

 const zoomAndPanTo = (camera, zoomLevel, x, y, time, spriteToFollow = null, easing = "Sine.easeInOut", whenFinished = undefined) => {
  camera.pan(
    x,
    y,
    time,
    easing,
    true,
    //The camera pan callback
    //https://photonstorm.github.io/phaser3-docs/Phaser.Types.Cameras.Scene2D.html#.CameraPanCallback
    (camera, progress) => {
      //Update the pan effect's destination x/y to the player's position
      //https://phaser.discourse.group/t/dynamic-camera-pan-values/8365
      //If the camera's destination target is moving, like the player,
      //update the `desitnation` values
      if (spriteToFollow) {
        camera.panEffect.destination.x = spriteToFollow.x;
        camera.panEffect.destination.y = spriteToFollow.y;
      } 
      if (progress === 1 && whenFinished) {
        whenFinished();
      }
    }
  );
  camera.zoomTo(zoomLevel, time, easing);
};

Use it like this:

zoomAndPanTo(this.camera, 0.7, this.player.x, this.player.y, 3000, this.player, "Sine.easeInOut", () => {
      this.camera.startFollow(this.player, false, 0.1, 0.1);
      this.camera.setFollowOffset(0, 0);
    });