Attention: Here be dragons

This is the latest (unstable) version of this documentation, which may document features not available in or compatible with released stable versions of Godot.

Checking the stable version of the documentation...

Parallaxe 2D

Introduction

Le parallaxe est un effet utilisé pour simuler la profondeur en faisant déplacer les textures à différentes vitesses par rapport à la caméra. Godot fournit le nœud Parallax2D pour obtenir cet effet. Il peut encore être facile de se tromper, donc cette page fournit des descriptions détaillées de certaines propriétés et comment corriger certaines erreurs courantes.

Note

This page covers how to use Parallax2D, which is recommended to use over the ParallaxLayer and ParallaxBackground nodes.

Pour commencer

The parallax node supports adding nodes that render things as children, so you can use one or many nodes to make up each layer. To begin, place each node or nodes you want to have scroll independently as a child of their own parallax node. Make sure that the top left of the textures used are at the (0, 0) crossing, like in the image below. See the section on positioning for why this is important.

The scene above uses one prepared texture for the higher clouds in a Sprite2D, but you could just as easily use multiple nodes spaced out to compose the layer.

Scroll scale

L'élément charnière de l'effet de parallaxe est la propriété scroll_scale. Elle fonctionne comme un multiplicateur de vitesse de défilement, permettant aux couches de se déplacer à une vitesse différente de celle de la caméra pour chaque axe défini. Une valeur de 1 fait défiler le nœud de parallaxe à la même vitesse que la caméra. Si vous voulez que votre image semble plus éloignée lors du défilement, utilisez une valeur inférieure à 1, avec 0 l'arrêtant complètement. Si vous voulez que quelque chose semble plus proche de la caméra, utilisez une valeur supérieure à 1, ce qui le fera défiler plus rapidement.

La scène ci-dessus est composée de cinq couches. Des valeurs possibles pour :ref:scroll_scale <class_parallax2d_property_scroll_scale> pourraient être :

• (0.7, 1) - Forêt

• (0.5, 1) - Collines

• (0.3, 1) - Nuages du bas

• (0.2, 1) - Nuages du haut

• (0.1, 1) - Ciel

La vidéo ci-dessous montre comment ces valeurs affectent le défilement durant le jeu :

Répétition infinie

Parallax2D offre un effet supplémentaire qui donne l'illusion que les textures se répètent à l'infini. La propriété repeat_size indique au nœud de faire avancer ou reculer sa position lorsque la caméra se déplace de la valeur définie. Cet effet est obtenu en ajoutant une seule répétition à tous les éléments de canevas enfants, décalés de cette valeur. Pendant que la caméra se déplace entre l'image et sa répétition, elle se replace de manière invisible, donnant l'apparence d'une image en boucle.

Étant un effet délicat, il est facile pour les utilisateurs non familiers de faire des erreurs avec leur configuration. Allons sur le "comment" et le "pourquoi" de quelques problèmes communs que les utilisateurs rencontrent.

Mauvais dimensionnement

Il est plus facile de travailler avec l'effet de répétition infinie quand vous avez une image conçue pour se répéter sans couture et qui est la même taille ou plus grande que votre fenêtre d'affichage avant le réglage de repeat_size. Si vous n'êtes pas en mesure d'obtenir des ressources conçues pour cette tâche, il y a d'autres choses que vous pouvez faire pour mieux préparer votre image en ce qui concerne la taille.

Voici un exemple de texture trop petite pour sa fenêtre d'affichage :

Nous pouvons voir que la taille de la vue est de 500x300, mais la texture est de 288x208. Si nous définissons la propriété :ref:repeat_size<class_parallax2d_property_repeat_size> à la taille de notre image, l'effet de répétition infinie ne se déroule pas correctement car la texture originale ne couvre pas la vue. Si nous définissons la propriété :ref:repeat_size<class_parallax2d_property_repeat_size> à la taille de la vue, nous avons un grand espace. Comment pourrions-nous faire ?

Rendre la fenêtre d'affichage plus petite

The simplest answer is to make the viewport the same size or smaller than your textures. In Project Settings > Display > Window, change the Viewport Width and Viewport Height settings to match your background.

Mise à l'échelle du Parallax2D

Si vous ne visez pas un style pixel-perfect ou si vous ne voyez pas d'inconvénient à un léger flou, vous pouvez choisir de redimensionner les textures pour qu'elles s'adaptent à votre écran. Définissez l'échelle (scale) du Parallax2D, et toutes les textures enfants seront redimensionnées en conséquence.

Scale the child nodes

Similar to scaling the Parallax2D, you can scale your Sprite2D nodes to be large enough to cover the screen. Keep in mind that some settings like Parallax2D.repeat_size and Sprite2D.region_rect do not take scaling into account, so it's necessary to adjust these values based on the scale.

Répéter les textures

Vous pouvez aussi commencer du bon pied en préparant les nœuds fils plus tôt dans le processus. Si vous avez une Image 2D, que vous souhaitez répéter, mais qui est trop petite, vous pouvez faire ce qui suit :

• définir texture_repeat à CanvasItem.TEXTURE_REPEAT_ENABLED

• définir region_enabled à true

• set the region_rect to a multiple of the size of your texture large enough to cover the viewport.

Ci-dessous, vous pouvez voir que répéter l'image deux fois la rend suffisamment large pour recouvrir tout l'écran.

Un mauvais positionnement

Il est commun de voir des utilisateurs paramétrer par erreur toutes leurs textures de façon à les centrer à (0,0) :

cela crée des problèmes avec l'effet de répétition infini et devrait être évité. Le "canevas de répétition infinie" commence à (0,0) et s'étend vers le bas et à droite de la valeur de la ref:taille_de_répétition<class_parallax2d_property_repeat_size>.

Si les textures sont centrées sur le point d'intersection``(0,0)``, le canevas de répétition infini est seulement partiellement recouvert, donc il ne se répète que partiellement.

Est-ce que augmenter repeat_times corrigerait ça ?

Increasing repeat_times technically would work in some scenarios, but is a brute force solution and not the problem it is designed to solve (we'll go over this in a bit). A better fix is to understand how the repeat effect works and set up the parallax textures appropriately to begin with.

First, check to see if any textures are spilling over onto the negative parts of the canvas. Make sure the textures used in the parallax nodes fit inside the "infinite repeat canvas" starting at (0,0). That way, if Parallax2D.repeat_size is set correctly, it should look something like this, with one single loop of the image the same size or larger than the viewport:

If you think of how the image scrolls across the screen, it starts by displaying what's inside the red rectangle (determined by repeat_size), and when it reaches what's inside the yellow rectangle it zips the image forward to give the illusion of scrolling forever.

If you have the image positioned away from the "infinite repeat canvas", when the camera reaches the yellow rectangle, half of the image is cut off before it jumps forward like in the image below:

Décalage du défilement

If your parallax textures are already working correctly, but you prefer it to start at a different point, Parallax2D comes with a scroll_offset property used to offset where the infinite repeat canvas starts. As an example, if your image is 288x208, setting the scroll_offset to (-144,0) or (144,0) allows it to begin halfway across the image.

Nombre de répétitions

Ideally, following this guide, your parallax textures are large enough to cover the screen even when zoomed out. Until now, we have had a perfectly fitting 288x208 texture inside of a 288x208 viewport. However, problems occur when we zoom out by setting the Camera2D.zoom to (0.5, 0.5):

Even though everything is correctly set for the viewport at the default zoom level, zooming out makes it smaller than the viewport, breaking the infinite repeat effect. This is where repeat_times can help out. Setting a value of 3 (one extra repeat behind and in front), it is now large enough to accommodate the infinite repeat effect.

If these textures were meant to be repeated vertically, we would have specified a y value for the repeat_size. The repeat_times would automatically add a repeat above and below as well. This is only a horizontal parallax, so it leaves an empty block above and below the image. How do we solve this? We need to get creative! In this example, we stretch the sky higher, and grass sprite lower. The textures now support the normal zoom level and zooming out to half size.

Écran partagé

Most tutorials for making a split screen game in Godot begin by writing a small script to assign the Viewport.world_2d of the first SubViewport to the second, so they have a shared display. Questions often pop up about how to share a parallax effect between both screens.

The parallax effect fakes a perspective by moving the positions of different textures in relation to the camera. This is understandably problematic if you have multiple cameras, because your textures can't be in two places at once!

This is still achievable by cloning the parallax nodes into the second (or third or fourth) SubViewport. Here's how a setup looks for a two player game:

Of course, now both backgrounds show in both SubViewports. What we want is for each parallax to only show in their corresponding viewport. We can achieve this by doing the following:

• Leave all parallax nodes at their default visibility_layer of 1.

• Set the first SubViewport's canvas_cull_mask to only layers 1 and 2.

• Do the same for the second SubViewport but use layers 1 and 3.

• Give your parallax nodes in the first SubViewport a common parent and set its visibility_layer to 2.

• Do the same for the second SubViewport's parallax nodes, but use a layer of 3.

How does this work? If a canvas item has a visibility_layer that doesn't match the SubViewport's canvas_cull_mask, it will hide all children, even if they do. We use this to our advantage, letting the SubViewports cut off rendering of parallax nodes whose parent doesn't have a supported visibility_layer.

Prévisualiser dans l'éditeur

Avant la 4.3, la recommandation était de placer chaque couche dans son propre ParallaxBackground, activer la propriété follow_viewport_enabled et mettre à l'échelle la couche individuellement. Cette méthode a toujours été difficile à faire, mais est toujours réalisable en utilisant un CanvasLayer au lieu d'un ParallaxBackground.

Note

Une autre recommandation est l'addon "Parallax2D Preview" de KoBeWi. Il fournit quelques différents modes de prévisualisation et est très pratique !