Comment implémenter le défilement de parallaxe dans Godot

Le défilement parallaxe est une technique fréquemment employée dans les jeux 2D. Son objectif principal est de simuler la profondeur, dynamisant ainsi les arrière-plans de jeu. Cette illusion est obtenue en déplaçant divers plans d’arrière-plan à des vitesses distinctes par rapport au mouvement de la caméra.

Godot 4 simplifie considérablement la mise en œuvre du défilement parallaxe. Son puissant moteur 2D offre un support natif pour les couches de parallaxe, permettant de créer des effets visuels impressionnants avec un minimum d’effort.

Préparation du jeu sur Godot

Pour débuter, lancez un nouveau projet 2D dans l’environnement de jeu Godot et configurez la scène en y intégrant un personnage joueur.

Le code source présenté ici est accessible sur ce dépôt GitHub et est mis à disposition sous licence MIT.

Dans cet exemple, incorporez un nœud CharacterBody2D pour permettre le déplacement du joueur. Ajoutez également un CollisionShape2D avec une forme rectangulaire, ainsi qu’un Sprite2D pour l’aspect visuel du personnage.

 extends CharacterBody2D
var vitesse = 200
func _physics_process(delta):
    var direction = Vector2()
    if Input.is_action_pressed('ui_right'):
        direction.x += 1
    if Input.is_action_pressed('ui_left'):
        direction.x -= 1
    if Input.is_action_pressed('ui_down'):
        direction.y += 1
    if Input.is_action_pressed('ui_up'):
        direction.y -= 1
    direction = direction.normalized() * vitesse
    move_and_collide(direction * delta)
 

Avec ce code, le personnage peut être contrôlé à gauche, à droite, en haut et en bas en utilisant les flèches directionnelles ou des commandes équivalentes.

Création de plans variés avec les nœuds ParallaxLayer

Ensuite, concrétisez l’effet de parallaxe en intégrant plusieurs nœuds ParallaxLayer dans la scène. Chaque ParallaxLayer servira à représenter une strate distincte de l’arrière-plan. Pour un effet de parallaxe optimal, les plans les plus éloignés de la caméra doivent se mouvoir plus lentement que ceux situés à proximité.

Ajoutez des nœuds StaticBody2D avec CollisionShape2D à chaque ParallaxLayer pour introduire des éléments d’arrière-plan avec lesquels le joueur pourra interagir. Ces objets collisionnables interagissent avec le joueur et d’autres éléments du jeu, ce qui enrichit le gameplay.

Voici le code GDScript pour la création de plans de parallaxe intégrant des objets collisionnables :

 extends ParallaxBackground
func _ready():
    
    var plan1 = ParallaxLayer.new()
    plan1.motion_scale = Vector2(0.2, 0.2)
    add_child(plan1)
    
    var corps_static1 = StaticBody2D.new()
    plan1.add_child(corps_static1)
    var collision_forme1 = CollisionShape2D.new()
    var forme1 = RectangleShape2D.new()
    forme1.extents = Vector2(32, 32) 
    collision_forme1.shape = forme1
    corps_static1.add_child(collision_forme1)
    
    var plan2 = ParallaxLayer.new()
    plan2.motion_scale = Vector2(0.5, 0.5)
    add_child(plan2)
    
    var corps_static2 = StaticBody2D.new()
    plan2.add_child(corps_static2)
    var collision_forme2 = CollisionShape2D.new()
    var forme2 = RectangleShape2D.new()
    forme2.extents = Vector2(64, 64) 
    collision_forme2.shape = forme2
    corps_static2.add_child(collision_forme2)
    
    var plan3 = ParallaxLayer.new()
    plan3.motion_scale = Vector2(1.0, 1.0)
    add_child(plan3)
    
    var corps_static3 = StaticBody2D.new()
    plan3.add_child(corps_static3)
    var collision_forme3 = CollisionShape2D.new()
    var forme3 = RectangleShape2D.new()
    forme3.extents = Vector2(128, 128) 
    collision_forme3.shape = forme3
    corps_static3.add_child(collision_forme3)
 

Grâce à ce code, chaque plan de parallaxe contient désormais un nœud StaticBody2D avec un CollisionShape2D, représentant des éléments d’arrière-plan collisionnables.

Ces objets collisionnables interagiront avec le personnage du joueur, améliorant la profondeur et la complexité du jeu.

Déplacement des différentes strates à des vitesses variées

Maintenant que vos plans de parallaxe sont configurés, vous devez actualiser leurs positions en fonction des mouvements du joueur. Cela produira l’effet de parallaxe, où les plans à proximité de la caméra se déplacent plus rapidement que les plus distants.

Intégrez le code GDScript suivant à la scène du Joueur :

 extends CharacterBody2D
func _physics_process(delta):
    ...
    move_and_collide(direction * delta)
    
    var arriere_plan_parallaxe = get_parent()
    var mouvement = -direction * delta
    arriere_plan_parallaxe.set_scroll_offset(arriere_plan_parallaxe.scroll_offset + mouvement)
 

Ce code détermine le mouvement des plans de parallaxe en fonction du déplacement du joueur et ajuste le décalage de défilement du nœud ParallaxBackground en conséquence. Notez l’utilisation du signe négatif pour assurer que les plans se déplacent en sens inverse du mouvement du joueur.

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 des plans de parallaxe pendant le jeu, vous pouvez créer une expérience plus captivante et dynamique pour les joueurs.

Pour mettre en œuvre le défilement parallaxe aléatoire, incorporez de nouveaux plans de parallaxe avec des échelles et des positions de mouvement aléatoires.

 extends ParallaxBackground
const MAX_PLANS = 5
const ECHELLE_MIN = 0.2
const ECHELLE_MAX = 1.5
const VITESSE_MIN = 0.01
const VITESSE_MAX = 0.03
const POSITION_X_MIN = -500
const POSITION_X_MAX = 500
const POSITION_Y_MIN = -300
const POSITION_Y_MAX = 300
func _ready():
    for i in range(MAX_PLANS):
        creer_plan_aleatoire()
func creer_plan_aleatoire():
    
    var plan = ParallaxLayer.new()
    var echelle = lerp(ECHELLE_MIN, ECHELLE_MAX, randf())
    plan.motion_scale = Vector2(echelle, echelle)
    var position_x = randf_range(POSITION_X_MIN, POSITION_X_MAX)
    var position_y = randf_range(POSITION_Y_MIN, POSITION_Y_MAX)
    plan.global_transform.origin.x = position_x
    plan.global_transform.origin.y = position_y
    add_child(plan)
    
    var corps_static = StaticBody2D.new()
    plan.add_child(corps_static)
    var collision_forme = CollisionShape2D.new()
    var forme = RectangleShape2D.new()
    forme.extents = Vector2(32, 32) 
    collision_forme.shape = forme
    corps_static.add_child(collision_forme)
func supprimer_plan_aleatoire():
    
    if get_child_count() > 0:
        var index_aleatoire = randi() % get_child_count()
        var plan_a_supprimer = get_child(index_aleatoire)
        remove_child(plan_a_supprimer)
 

Ce code définit des constantes pour régler le caractère aléatoire des plans de parallaxe. La fonction lerp est utilisée pour interpoler les valeurs entre ECHELLE_MIN et ECHELLE_MAX, produisant ainsi une échelle de mouvement aléatoire pour chaque nouveau plan. La signature de cette fonction est la suivante :

 Variant lerp ( Variant from, Variant to, float weight ) 

L’utilisation du résultat de randf() comme poids permet de générer des plans avec une échelle aléatoire.

La fonction randf_range fournit une autre méthode pour générer des valeurs aléatoires dans une plage. Ici, la fonction creer_plan_aleatoire l’utilise pour générer des positions aléatoires pour les nouveaux plans dans une plage définie :

 var position_x = randf_range(POSITION_X_MIN, POSITION_X_MAX) 

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

Intégration de fonctionnalités additionnelles

Le défilement parallaxe offre une base solide pour sublimer l’esthétique de votre jeu de plateforme, mais vous pouvez aller plus loin en y intégrant des fonctionnalités supplémentaires. Voici quelques idées à considérer.

Éléments d’arrière-plan

Introduisez des éléments plus interactifs dans vos plans de parallaxe, tels que des plateformes flottantes, des obstacles animés ou des personnages en arrière-plan avec animations. Ces objets peuvent accroître la profondeur et l’interactivité de votre jeu de plateforme.

Éclairage dynamique

Incorporez des effets d’éclairage dynamiques dans vos plans de parallaxe. En ajoutant des sources de lumière et des ombres, vous pouvez créer une impression de réalisme et de profondeur dans le monde du jeu. Le système d’éclairage de Godot fonctionne parfaitement avec les jeux 2D et peut rehausser considérablement la qualité visuelle.

Effets de particules

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

Cycle jour-nuit

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

Bien que le défilement parallaxe puisse améliorer l’aspect visuel de votre jeu, il est essentiel de respecter certaines bonnes pratiques pour garantir une expérience fluide et agréable.

Optimisation de la performance

Tenez compte du nombre de plans de parallaxe et de leur complexité. Un trop grand nombre de plans ou de ressources haute résolution peut engendrer des problèmes de performance, en particulier sur les appareils moins puissants. Optimisez vos graphismes et utilisez des formes de collision simplifiées dans la mesure du possible.

Agencement des plans

Organisez vos plans de parallaxe avec soin. Prenez en considération la hiérarchie visuelle et l’effet de profondeur souhaité. Les plans les plus proches de la caméra doivent se déplacer plus vite, tandis que ceux plus éloignés doivent se mouvoir plus lentement.

Limites de la caméra

Définissez des limites pour les mouvements de la caméra pour éviter les zones vides non désirées ou des problèmes visuels lorsque le joueur atteint les limites du monde de jeu. Cela assure une expérience fluide pour les joueurs.

Tests et ajustements

Testez votre défilement parallaxe sur différents appareils et tailles d’écran pour assurer un affichage et un fonctionnement correct sur diverses plateformes. Ajuster les échelles de mouvement, les positions des plans et d’autres paramètres peut affiner l’effet de parallaxe pour de meilleurs résultats.

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

En procédant ainsi, vous créez une impression de mouvement et de dynamisme en arrière-plan, ce qui rend le monde du jeu vivant et imprévisible. Les joueurs découvriront un environnement visuel en constante évolution, ajoutant une dimension supplémentaire d’excitation à leur expérience de jeu.