Vous pouvez obtenir cet effet visuel impressionnant simplement en déplaçant des objets à différentes vitesses.
Le défilement de parallaxe est une technique utilisée par de nombreux jeux 2D pour créer une illusion de profondeur et ajouter un intérêt visuel aux arrière-plans du jeu. Il obtient l'effet en déplaçant différentes couches de l'arrière-plan à différentes vitesses 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 une prise en charge intégrée des calques de parallaxe, vous permettant de créer des effets visuels époustouflants avec un minimum d'effort.
Configurer le 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 Référentiel GitHub et est libre d'utilisation sous la licence MIT.
Pour cet exemple, ajoutez un PersonnageCorps2D nœud pour le mouvement des joueurs. Ajoutez également un
CollisionShape2D avec une forme de rectangle et un Sprite2D pour représenter le personnage du joueur.extends CharacterBody2Dvar speed = 200
func _physics_process(delta):
var velocity = Vector2()if Input.is_action_pressed('ui_right'):
velocity.x += 1if Input.is_action_pressed('ui_left'):
velocity.x -= 1if Input.is_action_pressed('ui_down'):
velocity.y += 1if Input.is_action_pressed('ui_up'):
velocity.y -= 1
velocity = velocity.normalized() * speed
move_and_collide(velocity * delta)
Avec ce code, le personnage du joueur peut se déplacer vers la gauche, la droite, le haut et le bas à l'aide des touches fléchées ou d'entrées similaires.
Création de différentes couches avec des nœuds ParallaxLayer
Ensuite, créez l'effet de parallaxe en ajoutant plusieurs ParallaxLayer nœuds à la scène. Chaque ParallaxLayer représentera une couche différente de l'arrière-plan. Pour obtenir un effet de parallaxe convaincant, les calques les plus éloignés de la caméra doivent se déplacer plus lentement que les plus proches.
Ajouter StaticBody2D nœuds avec CollisionShape2D dans chaque ParallaxLayer pour créer des objets collidables en arrière-plan. Ces objets pouvant entrer en collision interagiront avec le joueur et d'autres éléments du jeu, ajoutant plus de profondeur au gameplay.
Voici le code GDScript pour créer les calques de parallaxe avec des objets collidables :
extends ParallaxBackgroundfunc _ready():
# Create the first parallax layer
var layer1 = ParallaxLayer.new()
layer1.motion_scale = Vector2(0.2, 0.2)
add_child(layer1)# Add a StaticBody2D with CollisionShape2D to the first layer
var static_body1 = StaticBody2D.new()
layer1.add_child(static_body1)var collision_shape1 = CollisionShape2D.new()
var shape1 = RectangleShape2D.new()
shape1.extents = Vector2(32, 32)
collision_shape1.shape = shape1
static_body1.add_child(collision_shape1)# Create the second parallax layer
var layer2 = ParallaxLayer.new()
layer2.motion_scale = Vector2(0.5, 0.5)
add_child(layer2)# Add a StaticBody2D with CollisionShape2D to the second layer
var static_body2 = StaticBody2D.new()
layer2.add_child(static_body2)var collision_shape2 = CollisionShape2D.new()
var shape2 = RectangleShape2D.new()
shape2.extents = Vector2(64, 64)
collision_shape2.shape = shape2
static_body2.add_child(collision_shape2)# Create the third parallax layer
var layer3 = ParallaxLayer.new()
layer3.motion_scale = Vector2(1.0, 1.0)
add_child(layer3)# Add a StaticBody2D with CollisionShape2D to the third layer
var static_body3 = StaticBody2D.new()
layer3.add_child(static_body3)
var collision_shape3 = CollisionShape2D.new()
var shape3 = RectangleShape2D.new()
shape3.extents = Vector2(128, 128)
collision_shape3.shape = shape3
static_body3.add_child(collision_shape3)
Avec ce code, chaque couche de parallaxe contient maintenant un StaticBody2D nœud avec un CollisionShape2D représentant des objets pouvant entrer en collision en arrière-plan.
Ces objets pouvant entrer en collision interagiront avec le personnage du joueur et d'autres éléments du jeu, ajoutant plus de profondeur et de complexité au gameplay.
Déplacer différentes couches avec une vitesse différente
Maintenant que vos couches de parallaxe sont configurées, vous devez mettre à jour leurs positions en fonction du mouvement 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 plus éloignées.
Ajoutez le code GDScript suivant à la scène Player :
extends CharacterBody2Dfunc _physics_process(delta):
...
move_and_collide(velocity * delta)
# Update parallax layers based on player movement
var parallax_background = get_parent()
var motion = -velocity * delta
parallax_background.set_scroll_offset(parallax_background.scroll_offset + motion)
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.
Le défilement de 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 couches de parallaxe pendant le jeu, vous pouvez créer une expérience plus engageante et dynamique pour les joueurs.
Pour implémenter le défilement de parallaxe aléatoire, ajoutez de nouvelles couches de parallaxe avec des échelles et des positions de mouvement aléatoires.
extends ParallaxBackgroundconst MAX_LAYERS = 5
const MIN_SCALE = 0.2
const MAX_SCALE = 1.5
const MIN_SPEED = 0.01
const MAX_SPEED = 0.03
const MIN_X_POSITION = -500
const MAX_X_POSITION = 500
const MIN_Y_POSITION = -300
const MAX_Y_POSITION = 300func _ready():
for i in range(MAX_LAYERS):
create_random_layer()func create_random_layer():
# Add a new parallax layer with a random motion scale
var layer = ParallaxLayer.new()
var scale = lerp(MIN_SCALE, MAX_SCALE, randf())
layer.motion_scale = Vector2(scale, scale)var x_position = randf_range(MIN_X_POSITION, MAX_X_POSITION)
var y_position = randf_range(MIN_Y_POSITION, MAX_Y_POSITION)
layer.global_transform.origin.x = x_position
layer.global_transform.origin.y = y_positionadd_child(layer)
# Add a StaticBody2D with CollisionShape2D to the new layer
var static_body = StaticBody2D.new()
layer.add_child(static_body)var collision_shape = CollisionShape2D.new()
var shape = RectangleShape2D.new()
shape.extents = Vector2(32, 32)
collision_shape.shape = shape
static_body.add_child(collision_shape)
func remove_random_layer():
# Remove a random parallax layer
if get_child_count() > 0:
var random_index = randi() % get_child_count()
var layer_to_remove = get_child(random_index)
remove_child(layer_to_remove)
Ce code définit des constantes pour contrôler le caractère aléatoire des couches de parallaxe. Utilisez le lerp fonction pour interpoler les valeurs entre MIN_SCALE et MAX_SCALE, générant une échelle de mouvement aléatoire pour chaque nouveau calque. Cette fonction a la signature suivante :
Variant lerp ( Variant from, Variant to, float weight )Passer le résultat de randf() car le poids vous permet de générer des calques avec une échelle aléatoire.
Le randf_range La fonction offre un autre moyen de générer des valeurs aléatoires dans une plage. Ici, la fonction create_random_layer l'utilise pour générer des positions aléatoires pour les nouveaux calques dans une plage spécifiée :
var x_position = randf_range(MIN_X_POSITION, MAX_X_POSITION)Votre jeu de démonstration devrait maintenant ressembler à ceci :
Inclure des fonctionnalités supplémentaires
Le défilement de parallaxe fournit une base solide pour améliorer votre jeu de plateforme attrait visuel, mais vous pouvez aller encore plus loin en incorporant des fonctionnalités supplémentaires. Voici quelques idées à considérer.
Objets d'arrière-plan
Créez des éléments plus interactifs dans vos calques de parallaxe, tels que des plates-formes 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 une impression de réalisme et de profondeur dans le monde du jeu. Le système d'éclairage de Godot fonctionne bien avec les jeux 2D et peut améliorer considérablement la qualité visuelle.
Effets de particules
Intégrez des systèmes de particules dans vos calques de parallaxe pour ajouter des effets visuels subtils. Les feuilles qui tombent, les nuages à la dérive ou les étoiles scintillantes peuvent améliorer l'ambiance et rendre le monde du jeu plus vivant. Vous pouvez aussi ajouter des effets sonores libres de droit à votre jeu.
Cycle jour-nuit
Implémentez 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 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 les visuels de votre jeu, il est essentiel de suivre certaines bonnes pratiques pour garantir une expérience fluide et agréable.
Optimisation des performances
Tenez compte du nombre de couches de parallaxe et de leur complexité. Trop de couches ou de ressources haute résolution peuvent entraîner des problèmes de performances, en particulier sur les appareils moins puissants. Optimisez votre illustration et utilisez des formes de collision simplifiées dans la mesure du possible.
Disposition des calques
Organisez 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 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 du monde du jeu. Cela garantit une expérience fluide pour les joueurs.
Tests et ajustements
Testez votre défilement de parallaxe sur différents appareils et tailles d'écran pour vous assurer qu'il s'affiche et fonctionne correctement sur différentes plates-formes. Ajuster les échelles de mouvement, les positions des calques et d'autres paramètres peut affiner l'effet de parallaxe pour obtenir les meilleurs résultats.
L'ajout d'un défilement de parallaxe aléatoire peut considérablement améliorer le niveau d'engagement de votre jeu Godot. Le défilement de parallaxe aléatoire implique de générer et de positionner dynamiquement des couches de parallaxe pendant le jeu.
En faisant cela, vous créez une sensation 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, ajoutant une couche supplémentaire d'excitation à leur expérience de jeu.
