Share
Le défilement parallèle est un moyen simple et efficace de créer l’illusion de profondeur dans un jeu en 2D. Que vous développiez un jeu de tir vertical ou un jeu de plateforme à défilement horizontal, le défilement parallaxe est un incontournable éprouvé du jeu qui augmentera considérablement l’immersion et l’impact graphique de votre projet..
Dans ce didacticiel, je vais aborder les bases du défilement de la parallaxe, ainsi que plusieurs méthodes de mise en œuvre, de manière à pouvoir introduire avec confiance et succès le défilement de la parallaxe dans votre ensemble de compétences, quel que soit votre niveau actuel..
Essayez la démo ci-dessous pour voir des scènes qui utilisent le défilement horizontal, vertical, les deux et pas de parallaxe. Cliquez sur la démo pour l'activer, puis utilisez les touches numériques pour changer de scène et les touches fléchées pour déplacer le vaisseau spatial (pour les scènes appropriées)..
La parallaxe est définie comme le déplacement apparent d'un objet observé dû à un changement de la position de l'observateur. Avec le défilement parallèle 2D, la position de l'observateur ne change que le long des axes x et y. Seuls la vitesse et l'emplacement d'un objet changeront avec la position de l'observateur, car la mise à l'échelle de l'objet nécessiterait un changement le long de l'axe z..
Takashi Nishiyama Moon Patrol Il est largement reconnu comme le premier jeu à proposer le défilement parallaxe 2D, mais cette technique existait déjà dans l’animation traditionnelle dès 1933. À l’aide d’une caméra à plans multiples, les animateurs étaient capables de créer un effet 3D non stéréoscopique qui créait l’illusion de profondeur en permettant à moyens artistiques de se déplacer à différentes vitesses en fonction de la distance perçue par rapport à l’objectif de la caméra. C’est ainsi que l’on réalise le défilement de parallaxe dans les jeux vidéo modernes, mais au lieu d’une caméra multi-plans, les scènes sont assemblées avec plusieurs couches et une seule caméra ou vue de jeu..
En divisant les éléments d'arrière-plan et d'avant-plan d'un jeu en différentes couches, il est possible de contrôler la vitesse et la position de ces éléments en fonction de leurs couches. L'observateur, dans ce cas, est le joueur et la caméra de jeu reste concentrée sur un point ou un objet particulier, tandis que les calques d'arrière-plan et d'avant-plan se déplacent en conséquence..
Ce point focal se déplace à la vitesse «normale» ou à la vitesse définie par le jeu. Les objets d'arrière-plan se déplacent plus lentement que le point focal, tandis que les objets de premier plan se déplacent plus vite que le point focal. Il en résulte une illusion de profondeur qui rend une scène 2D plus immersive..
Dans notre premier exemple, nous avons une scène très simple d’une rue de nuit qui comporte un défilement horizontal sans éléments interactifs. Les différentes couches de fond se déplacent à des vitesses prédéterminées sur l'axe des x. Pour l'instant, concentrons-nous sur les bases du défilement de la parallaxe sans vous soucier des mouvements des joueurs ou du changement de vue..
Tout d’abord, décomposons les éléments et attributs de notre scène. La fenêtre de jeu mesure 600 x 300 pixels et nos ressources en arts ont chacune une largeur d’au moins 600 pixels. En utilisant des éléments d'arrière-plan plus grands que la fenêtre de jeu, vous pouvez empêcher la totalité de l'actif d'être visible à tout moment. Étant donné que les calques sont en mosaïque, cela évitera une répétition trop évidente du défilement indéfini du même élément..
Les quatre couches qui composent notre première scène.Notre scène est composée de quatre couches. Dans cet exemple, le numéro de la couche définit l'ordre dans lequel l'actif est dessiné à l'écran, ainsi que sa vitesse de déplacement. S'il s'agissait d'un jeu de plateforme à défilement latéral, alors notre objet joueur existerait au-dessus du calque 3. Ce calque serait le point focal de l'observateur et dicterait également la vitesse des calques d'arrière-plan et d'avant-plan..
La couche 2 se déplace plus lentement que la couche 3 et la couche 1 se déplace plus lentement que la couche 2. La couche 4 existe en tant que couche de premier plan et se déplace donc plus rapidement que le point focal de la couche 3..
Ce type de technique de défilement de parallaxe peut être mis en œuvre de plusieurs manières. Dans cet exemple, les couches se déplacent à des vitesses prédéterminées sans se référencer les unes les autres. Si vous envisagez de créer plusieurs scènes avec des quantités variables de calques d'arrière-plan et d'avant-plan, il est préférable de définir la vitesse des calques en lisant la vitesse actuelle du calque Point focal. Par exemple, si le point focal est la couche 3 et se déplace à une vitesse de 5, puis chaque couche de fond successive se déplacerait à une vitesse inférieure à 5. Toutes les couches de premier plan se déplaceraient à une vitesse supérieure à 5.
// Variables focal_point_speed = 5; layer_difference = 1; // Couche de point focal layer3.hspeed = focal_point_speed; // Calques d'arrière-plan layer2.hspeed = layer3.hspeed - layer_difference; layer1.hspeed = layer2.hspeed - layer_difference; // Calques d'avant-plan layer4.hspeed = layer3.hspeed + layer_difference; layer5.hspeed = layer4.hspeed + layer_difference;
Bien que le défilement parallaxe soit le plus souvent utilisé avec des arrière-plans horizontaux, il peut également être utilisé dans des scènes verticales, comme dans cet exemple du jeu de tir spatial. Il existe peut-être des moyens plus efficaces de créer un champ d'étoiles, mais le défilement parallaxe permet de faire le travail.
La chose la plus importante à retenir de cet exemple vertical est que le défilement parallaxe fonctionne dans les quatre directions le long des axes x et y. (Nous verrons à quel point c'est important dans notre troisième et dernier exemple.)
Cette scène comporte quatre couches de fond: un fond noir statique et trois collections d'étoiles de tailles différentes. L'arrière-plan statique ne bouge pas et chaque couche successive d'étoiles grossit et avance plus rapidement, la dernière couche d'étoiles déterminant en fin de compte la vitesse verticale du point focal, le vaisseau spatial du joueur. Ce type de défilement parallaxe nous permet de simuler la profondeur de l’espace tout en simulant un mouvement vers l’avant. Le vaisseau du joueur ne monte jamais sur l'écran, mais vous obtenez toujours une sensation de voyage dans l'espace au rythme rapide..
Maintenant que nous comprenons mieux ce qu'est le défilement parallaxe, nous pouvons commencer à construire une scène dans laquelle le défilement horizontal et le défilement vertical sont mis en œuvre, ainsi qu'une vue de jeu qui suit le mouvement d'un objet contrôlé par le joueur..
Dans la démonstration en haut du didacticiel, cette scène est divisée en deux exemples. La première version montre à quoi ressemble la scène sans défilement de parallaxe. La seconde version propose un défilement complet de la parallaxe verticale et horizontale, et illustre bien comment le défilement de la parallaxe peut ajouter beaucoup d’immersion et de profondeur à ce qui était à l’origine une scène très plate et sans vie..
L'aspect le plus important de cet exemple est le mouvement du joueur et la vue du jeu. Parce que notre arrière-plan n'est plus verrouillé sur une vitesse ou une position d'écran prédéterminée, nous devons calculer la vitesse et la position de chaque couche par rapport à la fenêtre de visualisation lorsque le joueur se déplace..
L'origine de notre fenêtre de visualisation est dans le coin supérieur gauche à (X, Y). L’origine de chaque élément de fond est dans le coin supérieur gauche de l’image-objet, à (0,0). En recherchant les coordonnées x et y actuelles de la fenêtre de visualisation par rapport au monde du jeu, nous pouvons effectuer un calcul pour déterminer l'emplacement d'origine de la couche d'arrière-plan dans la scène. Cette position change lorsque la fenêtre d'affichage se déplace en fonction de ce calcul..
En utilisant différentes valeurs dans le calcul de chaque couche, nous pouvons déplacer chaque couche à des vitesses différentes, en fonction de la vitesse à laquelle le joueur se déplace..
Le code pour dessiner la couche qui se trouve directement derrière notre objet player est au format suivant: draw_background_tiled_horizontal (couche, x, y) où draw_background_tiled_horizontal () est une fonction simple pour dessiner un actif en mosaïque à un emplacement spécifique, et bg_ex_3_2 est notre atout de couche.
// couche 3 draw_background_tiled_horizontal (bg_ex_3_2, view_xview [view_current] / 2.5, (view_yview [view_current] / 10) + 300);
La valeur X de la couche dans ce cas est définie par la valeur X de la vue actuelle divisée par une valeur de 2,5, créant un mouvement horizontal légèrement plus lent que le mouvement de la vue elle-même.
De même, la valeur Y de la couche est définie par la valeur Y de la vue actuelle divisée par dix. La valeur Y de la couche est alors augmentée de 300 pour le positionner correctement par rapport au monde du jeu. Sans cet ajout supplémentaire de 300, l'actif apparaîtrait près du sommet du monde du jeu au lieu du bas où nous voulons qu'il soit.
Ces valeurs seront évidemment différentes dans votre projet, mais il est important de vous rappeler que la vitesse de déplacement du calque augmentera à mesure que le nombre de divisions augmente, mais seulement jusqu'à un certain point. En utilisant la division, le calque ne peut se déplacer qu'à la même vitesse ou plus lentement que la vitesse du lecteur..
Les deux calques derrière ce calque se déplacent plus lentement, ainsi les numéros de division sont plus petits:
// couche 1 draw_background_tiled_horizontal (bg_ex_3_0, view_xview [view_current] / 1.5, (view_yview [view_current] / 2.5) + 175); // couche 2 draw_background_tiled_horizontal (bg_ex_3_1, view_xview [view_current] / 2, (view_yview [view_current] / 5) +250);
Pour créer un calque se déplaçant plus rapidement que le point focal, par exemple un calque de premier plan, vous devez effectuer un léger changement. Il n'y a pas de couche de premier plan dans cet exemple, et la couche de point focal n'est en réalité visible qu'au bas de l'écran. Le joueur est capable de voler au-dessus du point focal, qui est le sol, de sorte que le navire lui-même devienne le point focal. Dans cet exemple, nous nous référons au sol comme étant le point focal car il s'agit de la seule couche qui se déplace à la même vitesse perçue que le vaisseau spatial. C’est là que nous découvrons notre véritable sens de la vitesse.
La couche au sol se déplace plus rapidement que la vue elle-même, le code pour dessiner cette couche est légèrement différent de celui des autres couches en arrière-plan:
// Couche de point focal (masse) draw_background_tiled_horizontal (bg_ex_3_3, -view_xview [view_current] * 1.5, -view_yview [view_current] + 700);
Avec les couches qui se déplacent plus rapidement que la vue, nous prenons la négatif Valeurs X et Y de la vue actuelle et multipliez-les par une valeur. Aucune division n'est impliquée dans le calcul de la vitesse des couches de premier plan. Dans cet exemple, la couche de sol se déplace à une vitesse horizontale égale à une fois et demie plus rapide que la vitesse de la fenêtre de visualisation. Aucune multiplication n'est effectuée sur la vitesse verticale du calque, il se déplace donc à la même vitesse que la vue. Une valeur supplémentaire de 700 est ajouté à la valeur Y de la couche pour la placer à l'emplacement souhaité près du bas du monde du jeu.
Le défilement parallèle est un moyen simple mais très efficace d’ajouter l’illusion de profondeur à un jeu en 2D. J'espère que les exemples de la démo ont prouvé son efficacité et que le tutoriel lui-même a prouvé à quel point il est simple à mettre en œuvre!
Accentsconagua