Imaginez ceci : une journée d’automne, tout le monde essaie de trouver une place de parking dans cette rue bizarre près de la poste à Fontana. Moi, bien sûr, en conductrice expérimentée, je décide de tourner dans une petite ruelle pour chercher une place. Oups, pas de place ! Rien de grave, je tourne, mais… dans le rétroviseur, juste derrière moi, apparaît une grosse voiture. Et pendant qu’elle roule, je commence un peu à m’énerver, parce que quelqu’un me suit sans cesse – qu’est-ce que je suis, un GPS ?
Au moment où ça m’énervait vraiment, je tourne le volant, je m’arrête et je me dis : “Allez, je vais lui laisser la chance de passer.” Et bien sûr, il passe, mais je n’ai pas abandonné ! Et voilà, je trouve deux places de parking ! Ravie, je m’engouffre dans l’une d’elles, pensant que c’est ma place chanceuse.
Et bien sûr, pendant que je manœuvre pour me garer, cette même voiture se gare juste derrière moi. Je me dis : “Ah, c’est sûrement un conducteur courtois, il va être poli.” Mais non ! La femme dans cette voiture sort et me regarde comme si je venais tout droit de la jungle.
“Vous faites l’idiote, ou vous êtes vraiment idiote ?” me dit-elle. Ce à quoi, je dois avouer, je ne m’attendais pas vraiment dans ce coin tranquille de la ville.
Moi, bien sûr, je réponds avec tout mon charme : “Je suis idiote”, comme si je me plaignais de ne pas avoir d’autres répliques drôles prêtes pour elle. Et là, commence le véritable drame ! Puis elle ouvre son coffre, et je me dis : “Qu’est-ce qui va se passer maintenant ? On dirait une scène de film d’action !” Une batte de baseball toute neuve, encore dans son emballage ! Et puis, comme dans une scène de thriller, elle me dit :
“Je vais te défoncer la voiture !”
Je lui réponds : “Je ne vais pas me disputer pour une place de parking !” Parce que sérieusement, pour se disputer à propos d’une place de parking, il faudrait d’abord devenir un pro dans ce domaine. Et elle se déplace, je sors de la voiture comme si je faisais une danse élégante, sans abîmer la voiture.
In this blog post, I’ll walk you through the process I used to create this parallax effect in Phaser 3, along with the code snippets to bring it all together.
All the illustrations and artwork in the game are entirely my original work, created both digitally and on paper. These illustrations have been with me for about 15 years, and they’ve finally found their place in this interactive world.
For my Halloween-themed game Witch's Night, I wanted to achieve a dynamic parallax effect that would create depth and movement in the scene. The effect would consist of three layers—foreground, midground, and background—each scrolling at different speeds. I also integrated interactive objects within the foreground layer, making the scene come alive with animations and sound effects.
The Setup
I structured the parallax effect using Phaser’s tileSprite objects, which are ideal for scrolling backgrounds. Here’s a quick overview of how the layers work:
Background: Moves the slowest, giving the impression of distant scenery.
Midground: Moves slightly faster than the background.
Foreground: Moves the fastest and includes interactive objects that respond to user inputs.
Let’s take a look at the core function responsible for setting up the parallax:
To create the scrolling effect, I update the x-coordinates of each layer in the update method, where the speed varies depending on the depth of the layer:
This results in a smooth parallax effect where each layer moves at a different speed, enhancing the sense of depth.
Adding Interactive Elements
I wanted the player to feel engaged with the scene, so I added various interactive objects—witches, trees, a piano, and more—that respond to user actions like clicks and hovers. Using a custom utility function, setupInteractiveAnimation, I ensured that each object has unique animations and sounds.
Example: Interactive Piano
For the interactive piano, I created an animation and played a sound effect whenever the player clicks on it. Here’s the setup:
// Create static piano image and set interactivity
this.staticPiano = this.add.image(970, 600, "staticPiano").setInteractive({ cursor: "pointer" }).setDepth(10);
// Define piano animation
this.anims.create({
key: "pianoAnim",
frames: this.anims.generateFrameNumbers("pianoAnim", { start: 0, end: 4 }),
frameRate: 3,
repeat: 3
});
// Use utility function to handle interactivity and animation
setupInteractiveAnimation(
this,
this.staticPiano,
"pianoAnim",
"pianoSound",
this.staticPiano.x,
this.staticPiano.y,
10,
1 // scale
);
The setupInteractiveAnimation function simplifies setting up animations and sounds for each object, making it easy to add interactive elements with minimal code repetition.
Interactive Lantern
I also added a glowing lantern in the foreground. It gently sways back and forth, and when clicked, it reveals a hidden clue. This small interaction adds an element of mystery:
this.lantern = this.add.image(100, 0, "lantern")
.setOrigin(0.5, 0)
.setDepth(19)
.setInteractive({ cursor: "pointer" });
this.tweens.add({
targets: this.lantern,
angle: { from: -7, to: 7 },
duration: 2000,
yoyo: true,
repeat: -1,
ease: "Sine.easeInOut"
});
// Show clue on click
this.lantern.on("pointerdown", () => {
this.showClue("yellow"); // Custom function to show clues
});
The combination of parallax and interactivity resulted in a rich and engaging visual experience for the player.
Conclusion
The parallax effect in Witch's Night, not only brings depth to the scene but also sets the stage for an interactive environment filled with surprises. With a few tweaks, you can create similar effects for your own projects using Phaser 3!
If you’re interested in trying out the game or have any questions about the code, feel free to drop a comment below or check out the live demo here.
