SceneTransitionConfig moveLeft and moveRight

Phaser 3
1

I’m creating a custom transition based off of what was done here. I see that SceneTransitionConfig has properties for moveAbove and moveBelow, but no properties for moveLeft or moveRight. Is there any way to control where the target scene is placed, if I want it to be to the right or left?

For example, let’s say I have scenes A, B, and C. A pans to the right to C. C pans to the left to B. B pans to the right to A. When B pans to A, it pans to an empty scene. If it had panned left instead, it shows scene A properly, but I want it to pan right. I hope that makes sense.

2

I think I figured it out… the both cameras need to call setScroll when I’m panning. Here’s the code that I’m using:

currentScene.scene.transition({
  target: nextScene?.Name,
  sleep: true,
  duration: 1500,
  onStart() {
    currentScene.playerState.transitioning = true;
    nextScene.playerState.setTransitioning(true);
  },
  onUpdate(progress: number) {
    const t = Phaser.Math.Easing.Quadratic.InOut(progress);
    if (direction === "left") {
      cam.setScroll(targetCam.x, targetCam.y);
      cam.setViewport(t * GridWidthPixels, 0, (1 - t) * GridWidthPixels, cam.height);
      targetCam.setViewport(0, 0, t * GridWidthPixels, targetCam.height);
      targetCam.setScroll((1 - t) * GridWidthPixels, 0);
    }
    else if (direction === "right") {
      cam.setViewport(0, 0, (1 - t) * GridWidthPixels, cam.height);
      cam.setScroll(t * GridWidthPixels, 0);
      targetCam.setScroll(cam.x, cam.y);
      targetCam.setViewport((1 - t) * GridWidthPixels, 0, t * GridWidthPixels, targetCam.height);
    }
    else if (direction === "up") {
      cam.setScroll(targetCam.x, targetCam.y);
      cam.setViewport(0, t * GridHeightPixels, cam.width, (1 - t) * GridHeightPixels);
      targetCam.setViewport(0, 0, targetCam.width, t * GridHeightPixels);
      targetCam.setScroll(0, (1 - t) * GridHeightPixels);
    }
    else if (direction === "down") {
      cam.setViewport(0, 0, cam.width, (1 - t) * GridHeightPixels);
      cam.setScroll(0, t * GridHeightPixels);
      targetCam.setScroll(cam.x, cam.y);
      targetCam.setViewport(0, (1 - t) * GridHeightPixels, targetCam.width, t * GridHeightPixels);
    }
    if (progress === 1) {
      nextScene.scene.resume();
      nextScene.playerState.setTransitioning(false);
    }
  },
});