Transition between 2 pictures

Phaser 3
1

Hello,

I have several pictures in an array :

const imagesCarousel = [
    'images/1.png',
    'images/2.png',
    'images/3.png',
    'images/4.png',
    'images/5.png'
];

The goal is to change the image every 3 seconds (for the first one), then 1 second for the following pictures, with a quick white screen transition.

In the create function, I draw the pictures with this code :

for (let i = 0; i < imagesCarousel.length; i++) {
    carousel.push(this.add.image(0, 0, imagesCarousel[i]).setOrigin(0, 0));
    carousel[i].alpha = 0;
}
carousel[0].alpha = 1;

I use the carouselTimer event that calls the CustomTransition.Carousel function :

carouselTimer = this.time.addEvent({ delay: 1000, callback: CustomTransition.Carousel, args: [carousel, 3000, 1000], callbackScope: this, loop: true });

static Carousel(arr, firstDelay, secondDelay) { // Fonction faisant remplacer des images successivements. Arr contient les objets, firstDelay la durée de la première image et secondDelay la durée des images suivantes
        let carouselNext = carouselActive + 1;
        let whiteScreen = this.add.graphics(); // Variable de dessin d'un rectangle blanc de transition
        whiteScreen.setDepth(3);

        if (carouselNext == arr.length) { // Définition de la prochaine image à afficher
            carouselNext = 0;
        }

        if (carouselActive == 0) { // Définition du délai (1er écran plus long)
            carouselTimer.delay = firstDelay;
        } else {
            carouselTimer.delay = secondDelay;
        }
        
        if (carouselActive == 1) { // Transition vers un écran blanc après la 1ère image
            whiteScreen.fillStyle(0xffffff);
            var whiteRectangle = whiteScreen.fillRect(0, 0, 300, 300);
            whiteRectangle.alpha = 0;
            CustomTransition.FilledScreen(whiteRectangle, false, 250);
        }

        arr[carouselActive].setDepth(1); // Gestion de la superposition des 2 images (active et prochaine) avec transition
        arr[carouselNext].setDepth(0);
        for (let i = 0; i < arr.length; i++) {
            if (i == carouselActive || i == carouselNext) {
                arr[i].alpha = 1;
            } else {
                arr[i].alpha = 0;
            }
        }

        if (carouselActive == 1) { // Suppression de la transition vers un écran blanc après la 1ère image
            CustomTransition.FilledScreen(whiteRectangle, true, 250);
        }

        carouselActive = carouselNext;
    }

static FilledScreen(item, reverse, transitionDuration) { // Fonction qui crée une transition linéaire de durée transitionDuration (transparent -> opaque si reverse = false ; opaque -> transparent si reverse = true)
        let startAlpha;
        let endAlpha;
        if (reverse) { // Disparition d'un écran
            startAlpha = 1;
            endAlpha = 0;
        }
        else { // Apparition d'un écran
            startAlpha = 0;
            endAlpha = 1;
        }

        _this.tweens.add({
            targets: item,
            ease: 'Linear',
            duration: transitionDuration,
            repeat: 0,
            delay: 0,
            alpha: {
                getStart: () => startAlpha,
                getEnd: () => endAlpha
            }
        });
    }

In FilledScreen, I use a tween to make a white screen with opacity from 0 to 1, then from 1 to 0.
I would like that function makes those 3 tasks in the following order :

  1. Tween from transparent to white screen
  2. Change the picture
  3. Tween from white screen to transparent

Unfortunately, my 2 tweens are following each other, and the second tween. My code doesn’t wait the end of the first tween.

How to wait that the first tween finishes ?

Thank you for your help :slight_smile: