2D Pixel Perfect : Comment configurer votre projet Unity pour les jeux rétro 8 bits.

Passez à la vitesse supérieure en matière de développement 2D et explorez la suite native d'outils 2D d'Unity.

Les jeux rétro aux mécanismes simples et aux graphismes pixelisés peuvent évoquer de bons souvenirs aux joueurs chevronnés, tout en étant accessibles à un public plus jeune. De nos jours, de nombreux jeux sont qualifiés de "rétro", mais il faut des efforts et de la planification pour créer un titre qui ait vraiment l'air et la sensation de la nostalgie. C'est pourquoi nous avons invité les gens de Mega Cat Studios à nous aider à parler de ce sujet. Dans cet article de blog, nous allons couvrir tout ce dont vous avez besoin pour créer un art authentique pour les jeux de style NES, y compris les paramètres importants d'Unity, les structures graphiques et les palettes de couleurs. Téléchargez notre exemple de projet et suivez le mouvement !

Mega Cat Studios, situé à Pittsburgh, en Pennsylvanie, a fait de la création de jeux rétro très précis une forme d'art. À tel point que plusieurs de leurs titres peuvent également être acquis sous forme de cartouches et joués sur des consoles rétro comme la Sega Genesis.

Les récents ajouts aux flux de travail d'Unity en ont fait un environnement bien adapté à la création de vos jeux rétro. Le système de cartes 2D a été amélioré et prend désormais en charge les cartes en grille, hexagonales et isométriques ! En outre, vous pouvez utiliser le nouveau composant Pixel Perfect Camera pour obtenir des mouvements et des visuels cohérents basés sur des pixels. Vous pouvez même aller jusqu'à utiliser la pile Post Processing pour ajouter toutes sortes d'effets d'écran rétro sympas. Toutefois, avant de pouvoir effectuer ce travail, vos actifs doivent être importés et configurés correctement.

Nos actifs ont d'abord besoin d'une configuration correcte pour être clairs et nets. Pour chaque actif que vous utilisez, sélectionnez l'actif dans la vue Projet, puis modifiez les paramètres suivants dans l'inspecteur :

• Le mode de filtrage est passé à "Point".
• Compression modifiée en "Aucune

Les autres modes de filtrage donnent une image légèrement floue, ce qui gâche le style net de l'art des pixels que nous recherchons. Si la compression est utilisée, les données de l'image sont comprimées, ce qui entraîne une certaine perte de précision par rapport à l'original. Il est important de le noter, car certains pixels peuvent changer de couleur, ce qui peut entraîner une modification de la palette de couleurs globale. Moins il y a de couleurs et plus votre sprite est petit, plus la différence visuelle causée par la compression est importante. Voici une comparaison entre la compression normale (par défaut) et l'absence de compression.

Il faut également tenir compte de la taille maximale de l'image dans l'inspecteur. Si l'image de votre sprite a une taille sur un axe supérieur à la propriété "Max Size" (2048 par défaut), elle sera automatiquement redimensionnée à la taille maximale. Cela entraîne généralement une perte de qualité et rend l'image floue. Étant donné que certains matériels ne prennent pas correctement en charge les textures de plus de 2048 sur l'un ou l'autre axe, il est judicieux de s'efforcer de ne pas dépasser cette limite.

Ci-dessus, un sprite provenant d'une feuille de sprites qui était de 2208 sur un axe avec une taille maximale fixée à 2048. Comme vous pouvez le constater, l'augmentation de la propriété Max Size à 4096 permet de dimensionner l'image de manière appropriée et d'éviter une perte de qualité.

Enfin, lorsque vous préparez votre sprite ou votre feuille de sprite, veillez à définir le mode de l'unité pivot sur "Pixels" au lieu de "Normalisé".

Ainsi, le point de pivot du sprite sera basé sur des pixels plutôt que sur une plage lisse de 0 à 1 sur chaque axe de l'image. Si le sprite ne pivote pas exactement à partir d'un pixel, nous perdons la perfection du pixel. Les pivots peuvent être définis pour les sprites dans l'éditeur de sprites, qui peut être ouvert à partir de l'inspecteur lorsqu'un sprite est sélectionné.

En préparant nos atouts, nous pouvons régler notre appareil photo pour qu'il soit "parfait au pixel près". Un résultat au pixel près aura l'air propre et net. Les signes révélateurs de l'art du pixel qui ne sont pas affichés comme des pixels parfaits comprennent le flou (aliasing) et certains pixels qui apparaissent rectangulaires alors qu'ils devraient être carrés.

Le package 2D Pixel Perfect peut être importé via le gestionnaire de packages dans Unity. Cliquez sur le menu "Fenêtre" dans la barre d'outils, puis sur "Gestionnaire de paquets". Dans la nouvelle fenêtre, cliquez sur "Avancé" et assurez-vous que vous avez activé l'option "Afficher les paquets de prévisualisation". Sélectionnez 2D Pixel Perfect dans la liste de gauche, puis sélectionnez installer en haut à droite de la fenêtre.

C'est tout. Vous êtes maintenant prêt à utiliser le composant "pixel-perfect" de l'appareil photo.

Le composant Pixel Perfect Camera s'ajoute au composant Camera d'Unity et le complète. Pour l'ajouter, allez dans votre appareil photo principal et ajoutez-y le composant Pixel Perfect Camera. Si l'option du composant Pixel Perfect Camera n'est pas présente, suivez les instructions mentionnées précédemment pour l'importer dans le projet.

Examinons maintenant les paramètres disponibles.

Tout d'abord, je vous recommande de cocher la case "Exécuter en mode édition" et de régler le rapport d'aspect de l'affichage du jeu sur "Aspect libre" afin de pouvoir redimensionner librement l'affichage du jeu. Le composant affichera des messages utiles dans la vue du jeu expliquant si l'affichage n'est pas parfait en termes de pixels à une résolution donnée.

Maintenant, vous pouvez passer en revue chaque paramètre pour voir ce qu'il fait et comment il affecte l'apparence de votre jeu !

• Assets Pixels Per Unit - Ce champ fait référence au paramètre que vous pouvez sélectionner dans l'inspecteur pour chaque actif. En règle générale, chaque bien qui sera utilisé dans l'espace mondial du jeu doit utiliser le même nombre de pixels par unité (PPU), et vous devez également indiquer cette valeur ici. Si votre univers de jeu se présente sous la forme d'une grille de tuiles et de sprites de 16 pixels par 16 pixels, un PPU de 16 serait logique : chaque tuile de la grille représenterait une unité dans les coordonnées de l'espace mondial. Veillez à indiquer ici le PPU que vous avez choisi.
• Résolution de référence - Définissez la résolution à laquelle vous souhaitez que toutes vos ressources soient visualisées. Si vous souhaitez un aspect rétro, cela signifie généralement une résolution très faible. Par exemple, la résolution native de la Sega Genesis est de 320x224. Lors du portage d'un jeu de Sega Genesis, nous utilisons une résolution de référence de 320x224. Pour une utilisation générale en 16:9, 320x180, ainsi que 398x224 (si vous souhaitez conserver la résolution verticale) devraient fonctionner correctement.
• Upscale Render Texture - Cette option permet de rendre la scène à une résolution aussi proche que possible de la résolution de référence, puis de l'adapter à la taille réelle de l'écran. Comme ce paramètre permet de remplir l'écran, nous le recommandons si vous souhaitez obtenir un plein écran au pixel près, sans marges. L'option "Rendre la texture à l'échelle supérieure" affecte également de manière significative l'aspect des sprites lorsqu'ils sont tournés.

• Pixel Snapping (disponible uniquement si Upscale Render Texture est désactivé) - Si cette option est activée, les rendus de sprites seront automatiquement calés sur une grille de l'espace mondial, dont la taille est basée sur le PPU choisi. Notez que cela n'affecte pas les positions de transformation des objets. Par conséquent, vous pouvez toujours interpoler les objets en douceur entre les positions, mais le mouvement visuel restera parfait et rapide comme un pixel.
• Exemple :

• Recadrage (X et Y) - Cette fonction recadre la région visualisée de l'espace mondial pour qu'elle corresponde exactement à la résolution de référence, et ajoute des marges noires à l'affichage pour combler les lacunes sur les bords de l'écran.
• Remplissage étiré - Cette option est disponible si vous activez à la fois x et y pour l'option Recadrage. La caméra s'adapte alors à la vue du jeu pour s'adapter à l'écran tout en préservant le rapport hauteur/largeur. Comme cette mise à l'échelle ne se produit pas uniquement dans les multiples entiers de la résolution de référence, la perfection des pixels sera perdue à toute résolution qui n'est pas un multiple entier de la résolution de référence. L'avantage est que, même si vous perdez la perfection des pixels pour de nombreuses résolutions, vous n'aurez pas les marges de la barre noire et vous aurez un écran entièrement rempli. Notez que, bien que le remplissage par étirement provoque souvent un effet de flou, le message d'alerte habituel ne s'affiche pas.

Si vous voulez un écran au pixel près et rapide qui conviendra à une grande variété de cas d'utilisation, je vous le recommande :

• Utilisez une résolution de référence qui ne sera jamais supérieure à la résolution de la fenêtre du lecteur (par exemple 320x180).
• Activer ou désactiver la texture de rendu à échelle supérieure
• Activez-le si vous souhaitez utiliser des rotations en dehors de 90, 180 et 270 et si vous préférez l'effet visuel qu'il produit sur les sprites ayant subi une rotation.
• L'agrandissement de la texture du rendu peut donner lieu à une image non parfaite en termes de pixels à certaines résolutions, en fonction de votre résolution de référence. Faites des essais avec cette méthode et différentes résolutions d'écran en utilisant l'option "Exécuter en mode édition" activée sur le Pixel. Perfect Camera component pour déterminer s'il s'agit d'un problème pour votre résolution. Si vous parvenez à produire une image au pixel près à toutes les résolutions cibles, vous obtiendrez la meilleure expérience de plein écran au pixel près.
• Activez ou désactivez le Pixel Snapping selon vos préférences
• Il s'agit plus d'une préférence personnelle que d'autre chose. Sans accrochage, les mouvements sont beaucoup plus fluides, mais les pixels peuvent ne pas être alignés.
• Activer Crop Frame X et/ou Y si vous n'utilisez pas Upscale Render Texture
• Si vous ne parvenez pas à obtenir un résultat parfait en termes de pixels avec un rendu de texture à échelle supérieure, le recadrage X et/ou Y garantira une image parfaite en termes de pixels pour toute résolution supérieure à la résolution de référence, mais créera des marges importantes sur les bords de l'écran pour certaines résolutions.
• Désactiver le remplissage par étirement

Nous recommandons de régler l'appareil photo de manière à ce qu'il soit optimisé pour une visualisation au format 16:9, y compris la résolution de référence si possible. À l'heure où nous écrivons ces lignes, la plupart des joueurs jouent sur des moniteurs 16:9, avec une résolution de 1920x1080. Par exemple, la résolution de référence de 320x180 est 16:9, et il n'y aura donc pas de barre noire lorsqu'elle sera lue à 1920x1080 ou à toute autre résolution qui est un multiple pair de 320x180, telle que 1280x720.

Dans la barre d'outils d'Unity, vous pouvez aller sous Édition > Paramètres du projet > Lecteur et limiter les ratios d'aspect que le jeu prendra en charge. Si vous constatez qu'une configuration particulière fonctionne comme vous le souhaitez dans le ratio que vous visez, mais qu'elle n'est pas adaptée à certains ratios d'aspect, vous pouvez empêcher la fenêtre d'être dans ces ratios ici. Cependant, gardez à l'esprit que tous les utilisateurs n'auront pas une configuration d'affichage qui fonctionnera bien avec vos limitations, ce qui n'est donc pas recommandé. Au lieu de cela, activez le recadrage pour que ces utilisateurs aient des marges, plutôt que d'avoir à jouer dans une résolution qui ne correspond pas à leur écran.

Maintenant que nous avons vu comment configurer Unity pour obtenir des illustrations au pixel près, voyons les bases de la création d'illustrations pour des jeux qui respectent les restrictions de la Nintendo Entertainment System classique. Cette génération de consoles impose un grand nombre de restrictions aux artistes qui tentent de créer une image authentique. Ces restrictions concernent notamment les palettes utilisées ainsi que la taille et la quantité d'objets à l'écran. En outre, il est important de garder à l'esprit la résolution de référence de 256x240 lorsque l'on "cible" cette console.

Lors de la création d'une œuvre d'art propre à la NES, l'artiste doit respecter un certain nombre de restrictions. Certaines d'entre elles sont les mêmes quelle que soit la console rétro qu'un artiste tente d'émuler, tandis que d'autres sont spécifiques à la NES elle-même. La première, et peut-être la plus importante de ces restrictions, concerne la manière dont les palettes de couleurs sont utilisées dans une image. La NES est assez unique en ce qui concerne sa palette de couleurs, car la palette complète de couleurs de la console est codée en dur dans la console. Le NES choisit les couleurs à utiliser dans une image en envoyant une série de valeurs au processeur graphique du NES, qui renvoie ensuite les couleurs associées à ces valeurs. Vous trouverez ci-dessous une image de la palette de couleurs de la NES :

Ces couleurs ne peuvent pas être modifiées car elles font partie intégrante de la console. Tous les jeux que vous avez vus sur cette console utilisent des combinaisons de ces couleurs pour créer leurs images.

Pour créer les combinaisons utilisées dans le jeu, des sous-palettes sont créées et attribuées aux sprites du jeu ou aux éléments d'arrière-plan. Le NES divise sa palette en sous-palettes qui peuvent être assignées aux sprites et aux arrière-plans. Chaque sous-palette comprend une couleur commune à toutes les sous-palettes et trois couleurs uniques. Il est capable de charger quatre sous-palettes pour les arrière-plans et quatre sous-palettes pour les sprites. Dans le cas des sprites, la couleur commune au début de chaque sous-palette est traitée comme de la transparence.

Il s'agit d'un exemple d'une série de sous-palettes utilisées dans un jeu. La ligne supérieure représente les sous-palettes d'arrière-plan et la ligne inférieure les sous-palettes de sprites. Dans cet exemple, le noir est utilisé comme couleur commune à toutes les sous-palettes. La couleur commune étant traitée comme une transparence sur les sprites, une deuxième entrée de palette noire est nécessaire pour les sous-palettes des sprites, afin de l'utiliser comme une couleur visible.

Les restrictions concernant l'utilisation des palettes deviennent encore plus strictes lorsque l'artiste passe à la manière dont les palettes sont utilisées dans le jeu. Pour expliquer cela, il convient d'examiner plus en détail la manière dont les consoles rétro stockent, utilisent et affichent les œuvres d'art. Les illustrations des consoles rétro sont stockées dans le jeu sous forme de tuiles de 8x8 px. L'utilisation de cette approche basée sur les carreaux permet aux artistes d'économiser de l'espace en réutilisant les carreaux pour d'autres usages. (Par exemple, des morceaux de trottoir peuvent être réutilisés et utilisés pour faire le rebord d'un bâtiment). L'autre point important à noter concernant le stockage basé sur les tuiles est que les informations sur les couleurs ne sont généralement pas sauvegardées avec les graphiques. Tous les carreaux sont sauvegardés avec une palette monochromatique. Ainsi, chaque fois qu'une tuile est affichée dans le jeu, une sous-palette peut lui être attribuée, ce qui permet à la même tuile d'être affichée simultanément à l'écran avec des sous-palettes différentes.

Le NES attribue différemment les palettes aux sprites et aux arrière-plans. Il attribue des sous-palettes aux sprites, carreau par carreau. Cela signifie que chaque carreau 8x8 d'un sprite peut se voir attribuer l'une des quatre sous-palettes de sprite.

Les arrière-plans, en revanche, sont beaucoup plus restrictifs. Les arrière-plans attribuent leurs palettes par tranches de 16x16. Les affectations de sous-palettes pour un fond d'écran entier sont appelées "tables d'attributs". Ces tables d'attributs sont la raison pour laquelle la plupart des œuvres d'art rétro font un usage intensif de segments de carreaux répétitifs. Ces segments sont généralement composés de carreaux de 16x16, de sorte qu'ils s'intègrent parfaitement dans une table d'attributs. Même si elle répondait à une restriction matérielle, cette approche des arrière-plans basée sur des tuiles 16x16 a fini par devenir une caractéristique déterminante de l'art rétro et est absolument nécessaire lorsque l'on essaie de le recréer.

Même si les artistes sont libres d'utiliser différentes sous-palettes pour chaque carreau 8x8 d'un sprite, ils peuvent se retrouver dans une situation où ils souhaitent avoir une profondeur de couleur plus importante dans un sprite que ce qui est déjà disponible. C'est là que la superposition de sprites peut intervenir. La superposition de sprites consiste simplement à diviser un sprite en deux sprites distincts et à les placer l'un sur l'autre. Cela permet aux artistes de contourner la restriction d'une sous-palette par tuile 8x8. Cela permettra aux artistes de doubler le nombre de couleurs pouvant être utilisées dans une seule zone de 8x8. Le seul inconvénient majeur de cette méthode est la limitation du rendu des sprites. Le NES n'est capable d'afficher que 64 sprites 8x8 à l'écran en même temps, et seulement 8 sprites sur la même ligne horizontale les uns avec les autres. Une fois ce nombre atteint, aucune autre tuile de sprite ne sera rendue à l'écran. C'est pourquoi de nombreux jeux NES faisaient scintiller les sprites lorsqu'il y en avait beaucoup à l'écran en même temps. De cette façon, il n'affiche que certains sprites sur des images alternées. Les artistes doivent tenir compte de ces limites lorsqu'ils superposent des sprites, car si cela double le nombre de couleurs, cela double également le nombre de sprites sur une même ligne horizontale.

Il est également possible de superposer des sprites sur l'arrière-plan pour contourner les limites de la table d'attributs. Cette astuce est généralement utilisée pour les images statiques, comme les écrans d'histoire et les portraits de personnages, afin de leur donner une plus grande profondeur de couleur. Pour ce faire, l'artiste dessine une partie de l'image en arrière-plan, puis superpose des sprites pour remplir le reste.

Pour expliquer la prochaine restriction majeure du NES, il faut d'abord revenir sur le fait que les graphiques sont stockés dans des tuiles. Les tuiles graphiques sont stockées dans 256 pages de tuiles et les tuiles de ces pages ne peuvent pas être chargées dans la VRAM à différents endroits, de sorte qu'il devient difficile de mélanger et d'associer des tuiles de différentes pages à la volée. La VRAM de la NES n'est capable d'afficher que 512 de ces tuiles à la fois. Au-delà de cette restriction, il divise les tuiles en deux pour les sprites et l'arrière-plan. Cela signifie qu'il n'est capable d'afficher que 256 tuiles de sprites et 256 tuiles d'arrière-plan à un moment donné. Cela peut devenir très restrictif si l'artiste souhaite afficher une grande variété de sprites et d'éléments d'arrière-plan.

Pour remédier à cette limitation, le NES dispose d'une fonction qui permet à l'artiste de diviser chaque page en pages partielles appelées banques. Ainsi, si le NES n'est pas capable de charger des tuiles individuelles à partir de différents points des données graphiques, il est capable de charger différentes sections d'une page à différents moments. Pour la plupart des jeux, ces banques seront soit des banques de 1K, soit des banques de 2K. Une banque de 1K équivaut à un quart de page ou 64 carreaux, tandis qu'une banque de 2K correspond à la moitié d'une page ou 128 carreaux. L'artiste doit décider s'il souhaite réserver l'utilisation de chaque type de banque aux Sprites ou aux éléments d'arrière-plan, car les deux types de banques doivent être utilisés. Cela signifie que vous ne pouvez pas avoir des banques de 1K pour les sprites et les arrière-plans. Une page doit utiliser des banques de 1K et l'autre de 2K. En règle générale, la plupart des jeux utilisent des banques de 1K pour les sprites et des banques de 2K pour les arrière-plans, car les tuiles d'arrière-plan sont généralement plus statiques et ont moins besoin d'être modifiées à la volée.

L'utilité des banques de 1K pour les sprites est assez significative. Si le sprite du joueur possède un grand nombre d'animations qui ne tiennent pas sur une seule page avec tous les autres sprites qui doivent être chargés, les actions individuelles peuvent être enregistrées dans des banques de 1K, puis permutées en fonction de l'action qui se déroule à l'écran. Il permet également d'utiliser une plus grande variété de sprites dans une seule zone d'un jeu. Par exemple, si le joueur doit rencontrer six types d'ennemis différents dans une zone du jeu, mais que la page de sprites n'autorise que le joueur et trois autres types de sprites, alors, lorsqu'un type d'ennemi est éliminé de l'écran, le jeu peut remplacer l'une des banques d'ennemis par un nouveau type d'ennemi.

L'un des seuls inconvénients majeurs de l'utilisation de banques de 1K pour les sprites et de 2K pour les arrière-plans est la façon dont le NES gère l'animation des arrière-plans. Pour animer un élément d'arrière-plan d'un jeu NES, l'artiste doit créer des banques de doublons des éléments d'arrière-plan animés. Chaque nouvelle banque dupliquée contiendra l'image suivante de l'animation pour chacun des éléments animés. Ces banques sont ensuite échangées une à une, comme dans un flip-book, afin de créer l'animation. Si l'artiste utilise des banques d'une demi-page pour les arrière-plans, le stockage de toutes ces banques en double peut prendre beaucoup de place. Une façon de contourner ce problème est de placer tous les éléments d'arrière-plan animés de l'ensemble du jeu dans une seule banque. Cependant, l'artiste se voit contraint de ne disposer que de 128 tuiles pour les éléments statiques de chaque arrière-plan. C'est à l'artiste de décider de la meilleure façon de procéder lorsqu'il s'agit de choisir le type de banque qu'il va utiliser pour son œuvre d'art.

De nombreux jeux de cette époque utilisent des astuces pour créer des effets tels que le défilement en parallaxe en arrière-plan, mais cela représente également un défi pour les artistes et les concepteurs. Alors que les dernières consoles 16 bits permettaient d'ajouter plusieurs couches d'arrière-plan, cette option n'est pas disponible sur la NES. Tous les arrière-plans sont une seule image aplatie. Afin de créer une impression de profondeur et de superposition, différentes astuces de programmation ont été utilisées. Pour créer un arrière-plan en parallaxe, par exemple, le développeur peut définir un registre capable de déterminer quand une certaine ligne horizontale (connue sous le nom de ligne de trame) est affichée à l'écran. Ils peuvent ensuite utiliser ce registre pour contrôler la vitesse et la direction du défilement de l'écran. Ils peuvent ainsi créer une rangée horizontale de l'arrière-plan qui défile à une vitesse différente de celle du reste de l'arrière-plan. À ce stade, l'astuce pour les artistes et les concepteurs consiste à garder à l'esprit que l'arrière-plan est toujours une image plane. Si une plate-forme ou tout autre élément censé se trouver "devant" l'arrière-plan qui se déplace plus lentement est placé dans cette région, il défilera lui aussi plus lentement que le reste de l'image. Cela signifie que les concepteurs doivent faire attention à l'endroit où ils placent les éléments de l'arrière-plan dans la scène, et que les artistes doivent créer l'arrière-plan de manière à ce que l'effet soit homogène.

Il existe également une autre astuce pour les artistes qui souhaitent que l'un de leurs éléments d'arrière-plan apparaisse au premier plan. Sur le NES, les développeurs peuvent définir la priorité d'un sprite comme étant inférieure à zéro. Dans ce cas, le sprite sera affiché derrière tout pixel d'arrière-plan non transparent. Les priorités des sprites peuvent également être modifiées et déclenchées à la volée, ce qui permet à certains éléments de modifier la priorité d'un sprite en fonction des besoins.

Lorsque quelqu'un essaie de créer un projet qui est authentique à une console rétro, il y a beaucoup de considérations techniques qu'ils doivent garder à l'esprit qui peuvent ne pas être des choses que le développement moderne a à se soucier. En raison de la manière dont les anciennes machines rendaient les images et de la faible marge de manœuvre dont disposaient le CPU et le GPU, les concepteurs devaient faire preuve de créativité pour contourner les limites du matériel. À l'ère moderne, il est important de connaître ces limites et ces techniques afin de recréer véritablement l'aspect et la conception des jeux de l'époque. Dans le prochain article, nous examinerons les limites de conception imposées par l'ère 16 bits ainsi que le travail d'Unity nécessaire pour obtenir cette sensation de "vieille télévision". Le guide 2D Pixel Perfect pour les visuels rétro 16 bits est désormais disponible ici.

---

C'est la première fois que vous créez des niveaux avec Tilemap ? Explorez la construction de mondes en 2D dans ce tutoriel pour débutants sur Unity Learn.