Comment implémenter le Parallax Scrolling dans Godot

Le défilement parallaxe est une technique que de nombreux jeux en 2D utilisent pour créer une illusion de profondeur et ajouter un intérêt visuel aux arrière-plans du jeu. L’effet est obtenu en déplaçant les différentes couches de l’arrière-plan à des vitesses différentes par rapport au mouvement de la caméra.

Godot 4 facilite plus que jamais la mise en œuvre du défilement parallaxe. Son puissant moteur 2D offre un support intégré pour les couches de parallaxe, ce qui vous permet de créer des effets visuels étonnants avec un minimum d’effort.

Configuration du jeu Godot

Pour commencer, créez un nouveau projet 2D dans le moteur de jeu Godot et configurez la scène du jeu avec un personnage joueur.

Le code utilisé dans cet article est disponible dans ce dépôt GitHub et est libre d’utilisation sous la licence MIT.

Pour cet exemple, ajoutez un CharacterBody2D pour le mouvement du joueur. Ajoutez également un nœud CollisionShape2D avec une forme de rectangle et un nœud Sprite2D pour représenter le personnage du joueur.

Avec ce code, le personnage du joueur peut se déplacer vers la gauche, la droite, le haut et le bas en utilisant les touches fléchées ou des entrées similaires.

Création de couches différentes avec les nœuds ParallaxLayer

Créez ensuite l’effet de parallaxe en ajoutant plusieurs nœuds ParallaxLayer à la scène. Chaque nœud couche de parallaxe représentera une couche différente de l’arrière-plan. Pour obtenir un effet de parallaxe convaincant, les couches les plus éloignées de la caméra doivent se déplacer plus lentement que les plus proches.

Ajouter StaticBody2D avec CollisionShape2D dans chaque ParallaxLayer afin de créer des objets susceptibles d’entrer en collision avec l’arrière-plan. Ces objets interagiront avec le joueur et d’autres éléments du jeu, ajoutant ainsi plus de profondeur au gameplay.

Voici le code GDScript permettant de créer les couches de parallaxe avec des objets collidables :

Avec ce code, chaque couche de parallaxe contient maintenant un objet StaticBody2D avec un nœud CollisionShape2D représentant les objets susceptibles d’entrer en collision à l’arrière-plan.

Ces objets collisionnables interagiront avec le personnage du joueur et d’autres éléments du jeu, ajoutant plus de profondeur et de complexité au gameplay.

Déplacement de différentes couches à des vitesses différentes

Maintenant que vous avez mis en place vos couches de parallaxe, vous devez mettre à jour leurs positions en fonction des mouvements du joueur. Cela créera l’effet de parallaxe, où les couches les plus proches de la caméra se déplacent plus rapidement que celles qui en sont plus éloignées.

Ajoutez le code GDScript suivant à la scène Player :

Ce code calcule le mouvement des couches de parallaxe en fonction du mouvement du joueur et met à jour le décalage de défilement du nœud ParallaxBackground en conséquence. Notez l’utilisation du signe négatif pour s’assurer que les couches se déplacent dans la direction opposée au mouvement du joueur.

Ajouter de l’imprévisibilité avec le défilement aléatoire de la parallaxe

Le défilement parallaxe aléatoire introduit un élément de surprise et d’imprévisibilité dans l’arrière-plan de votre jeu. En générant et en positionnant dynamiquement les couches de parallaxe pendant le jeu, vous pouvez créer une expérience plus attrayante et plus dynamique pour les joueurs.

Pour mettre en œuvre le défilement aléatoire, ajoutez de nouvelles couches de parallaxe avec des échelles et des positions de mouvement aléatoires.

Ce code définit des constantes pour contrôler le caractère aléatoire des couches de parallaxe. Utilisez les constantes lerp pour interpoler les valeurs entre MIN_SCALE et MAX_SCALE générant une échelle de mouvement aléatoire pour chaque nouvelle couche. Cette fonction a la signature suivante :

Elle transmet le résultat de randf() comme poids vous permet de générer des couches avec une échelle aléatoire.

Le randf_range offre un autre moyen de générer des valeurs aléatoires à l’intérieur d’une plage. Ici, la fonction create_random_layer l’utilise pour générer des positions aléatoires pour les nouvelles couches dans un intervalle spécifié :

Votre jeu de démonstration devrait maintenant ressembler à ceci :

Inclure des fonctionnalités supplémentaires

Le défilement parallaxe constitue une base solide pour améliorer l’attrait visuel de votre jeu de plateforme, mais vous pouvez aller encore plus loin en incorporant des fonctionnalités supplémentaires. Voici quelques idées à prendre en compte.

Objets d’arrière-plan

Créez des éléments plus interactifs dans vos couches de parallaxe, tels que des plateformes flottantes, des obstacles mobiles ou des personnages d’arrière-plan animés. Ces objets peuvent ajouter de la profondeur et de l’interactivité à votre jeu de plateforme.

Éclairage dynamique

Introduisez des effets d’éclairage dynamiques dans vos calques de parallaxe. En ajoutant des sources de lumière et des ombres, vous pouvez créer un sentiment de réalisme et de profondeur dans le monde du jeu. Le système d’éclairage de Godot fonctionne bien avec les jeux en 2D et peut améliorer considérablement la qualité visuelle.

Effets de particules

Intégrez des systèmes de particules dans vos couches de parallaxe pour ajouter des effets visuels subtils. Des feuilles qui tombent, des nuages à la dérive ou des étoiles scintillantes peuvent améliorer l’ambiance et rendre l’univers du jeu plus vivant. Vous pouvez également ajouter des effets sonores libres de droits à votre jeu.

Cycle jour-nuit

Mettez en place un cycle jour-nuit qui modifie la couleur et l’intensité des couches de parallaxe en fonction de l’heure de la journée dans le jeu. Cette fonction dynamique peut offrir aux joueurs une expérience en constante évolution au fur et à mesure qu’ils progressent dans le jeu.

Bonnes pratiques pour la mise en œuvre du défilement parallaxe

Si le défilement parallaxe peut améliorer l’aspect visuel de votre jeu, il est essentiel de suivre quelques bonnes pratiques pour garantir une expérience fluide et agréable.

Optimisation des performances

Faites attention au nombre de couches de parallaxe et à leur complexité. Un trop grand nombre de couches ou de ressources en haute résolution peut entraîner des problèmes de performance, en particulier sur les appareils les moins puissants. Optimisez vos œuvres et utilisez des formes de collision simplifiées dans la mesure du possible.

Disposition des calques

Disposez vos calques de parallaxe de manière réfléchie. Tenez compte de la hiérarchie visuelle et de l’effet de profondeur souhaité. Les calques les plus proches de la caméra doivent se déplacer plus rapidement, tandis que ceux qui sont plus éloignés doivent se déplacer plus lentement.

Limites de la caméra

Définissez des limites pour le mouvement de la caméra afin d’éviter les espaces vides indésirables ou les problèmes visuels lorsque le joueur atteint les limites de l’univers de jeu. Cela permet d’assurer une expérience fluide pour les joueurs.

Tests et ajustements

Testez votre défilement parallaxe sur différents appareils et tailles d’écran pour vous assurer qu’il s’affiche et fonctionne correctement sur différentes plateformes. La modification des échelles de mouvement, des positions des couches et d’autres paramètres permet d’affiner l’effet de parallaxe pour obtenir les meilleurs résultats.

Rendre les jeux Godot plus attrayants grâce au défilement parallaxe

L’ajout d’un défilement aléatoire en parallaxe peut considérablement améliorer le niveau d’engagement de votre jeu Godot. Le défilement parallaxe aléatoire consiste à générer et à positionner dynamiquement des couches de parallaxe pendant le jeu.

Ce faisant, vous créez un sentiment de mouvement et de dynamisme en arrière-plan, rendant le monde du jeu vivant et imprévisible. Les joueurs découvriront un environnement visuel en constante évolution, ce qui ajoutera une couche supplémentaire d’excitation à leur expérience de jeu.