Sliding scene transition

Phaser 3
1

Does anyone have any suggestions for creating a sliding transition between scenes?

Tried using scene manager…
this.scene.transition({
target: ‘Page1_2’,
duration: 6000,
moveBelow: true,
onUpdate: (progress) => {
this.cameras.main.pan(1920*progress,400);

            }
        });
  },this);
2

:wave:

You have to animate the camera viewports as well. I’ll try to make an example.

3

Thank you. I do not have much experience moving cameras.

4

4 Likes
5

You rock! Thanks so much

6

Hi!
Really great sliding effect. I have implemented it without background images and the only problem is that the game objects of the target scene are shown for a split second before the transition begins. Do you have any idea why this happen and maybe a solution? :slight_smile:
regards Anne

7

Not sure but — avoid preload() in the transition target scene; avoid setting camera viewport width or height to 0; make sure scene is sleeping before transition (I added Scene Watcher Plugin to example above).

8

Thanks for answering :slight_smile: I don’t have preload, I just copied your code
cam.setViewport(0, 0, (1 - progress) * defaultWidth, cam.height);
cam.setScroll(progress * defaultWidth, 0);
targetCam.setViewport((1 - progress) * defaultWidth, 0, progress * targetDefaultWidth, targetCam.height);
for the sliding effect, and if I make the target scene sleep, nothing is shown in the scene.
Anne

9

You can try

cam.setViewport(0, 0, Math.max(1, (1 - progress) * defaultWidth), cam.height);
// …
targetCam.setViewport(
  (1 - progress) * defaultWidth,
  0,
  Math.max(1, progress * targetDefaultWidth),
  targetCam.height
);

If that doesn’t work I would try the Scene Watcher plugin and check if the sleep/wake is working how you want.

10

Thank you very much for your answer. It does, however, not make a difference :frowning: I think the problem is that the transition happens right away before the viewport and scrolling calls. I can “fix” it by setting the target scene invisible for 1ms, then the game objects do not show up. However, I believe that is a hack. I will se if I can make the plug-in work. Thanks again!