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

Dans notre premier guide 2D Pixel Perfect pour les jeux rétro, nous vous avons montré comment configurer l'outil 2D Pixel Perfect et comment les graphismes 8 bits étaient réalisés à l'époque. Dans ce billet, nous allons faire un saut dans l'ère des 16 bits. Avec l'aide de Mega Cat Studios, vous apprendrez à créer des illustrations authentiques pour les jeux de type Sega Genesis (ou Mega Drive) et Super NES en utilisant les paramètres, les structures graphiques et les palettes de couleurs d'Unity.

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

Mega Cat Studios 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.

Avant de vous plonger dans ce billet, nous vous recommandons de vous familiariser avec notre précédent guide rétro, dans lequel nous avons abordé les paramètres 2D Pixel Perfect et la manière de recréer des graphismes de style 8 bits. Avec Unity 2019.2, 2D Pixel Perfect fait désormais partie du moteur de rendu 2D, qui se trouve dans le package Lightweight Render Pipeline (LWRP). 2D Pixel Perfect existe également en tant que paquet autonome (avec les mêmes fonctionnalités) pour les créateurs qui n'utilisent pas LWRP. Dans ce guide, nous allons vous montrer comment configurer le projet dans LWRP.

Dans Unity Hub, cliquez sur Nouveau, sélectionnez 2D, puis nommez votre projet.

2. Pour importer le paquet 2D Pixel Perfect, cliquez sur le menu Fenêtre dans la barre d'outils et sélectionnez Gestionnaire de paquets. Dans la fenêtre pop-up, sélectionnez le paquet Lightweight RP, en vous assurant que vous obtenez la version 6.9.0 ou supérieure.

3. Ensuite, vous allez configurer le moteur de rendu 2D dans l'éditeur et créer un nouvel élément de pipeline. Dans la fenêtre du projet, cliquez avec le bouton droit de la souris sur la vue Assets et sélectionnez Create > Rendering > Lightweight Render Pipeline > Pipeline Asset.

4. Dans la vue Actifs de la fenêtre Projet, créez un nouveau Renderer 2D en cliquant avec le bouton droit de la souris et en sélectionnant Créer > Rendu > Lightweight Render Pipeline > Renderer 2D.

5. Sélectionnez le pipeline que vous avez créé. Sélectionnez Général, puis changez le Type de rendu de Renvoi à Personnalisé.

6. Attribuez le rendu 2D que vous avez créé au champ de données.

7. Dans les paramètres graphiques, définissez vos paramètres de pipeline de rendu scriptable pour utiliser le nouvel actif de pipeline que vous avez créé.

Le moteur de rendu 2D devrait maintenant être configuré, y compris la caméra 2D Pixel Perfect.

Dans Unity 2019.2, les Sprites 2D peuvent avoir un matériau "Sprite-Lit", qui leur permet de réagir aux conditions d'éclairage 2D. Si vous n'utilisez pas de lumières 2D dans votre projet, assurez-vous d'avoir un matériau qui ne nécessite pas de lumières 2D pour rendre les Sprites visibles, auquel cas vous pouvez changer le matériau en "Sprites-Default".

Vous devez ajouter le composant Pixel Perfect Camera à votre caméra principale. Nous vous recommandons de vérifier le mode d'exécution en mode édition.

La console Sega Genesis a une résolution de 320x224 px (soit une grille de 40x28 carreaux de 8x8 pixels). Il s'agit de la version NTSC. Le Super NES a une résolution de 256×224 (30x28 carreaux de 8x8 pixels) également dans sa version NTSC.

Il est recommandé d'utiliser une résolution en hauteur de 224 px et de concevoir des actifs avec 8 PPU pour les deux styles graphiques.

Si vous avez besoin d'un rappel sur ce que chaque option fait dans le composant 2D Pixel Perfect Camera, consultez notre précédent article de blog sur les jeux rétro.

Dans cette section, nous allons aborder le processus de création d'œuvres d'art imitant l'aspect de différentes consoles, comme nous l'avons fait dans notre article de blog sur la NES. Il y a moins de restrictions que dans un projet 8 bits et plus de liberté avec les couleurs, mais la Genesis a ses propres limites. Nous pensons également qu'il est important d'expliquer le fonctionnement du matériel d'origine afin que vous puissiez appliquer ces limitations à votre propre projet rétro.

Passer d'une console 8 bits à une console 16 bits permet de disposer d'un plus grand nombre d'options sur un matériel plus sophistiqué. Cela dit, les principes fondamentaux d'une bonne illustration de la NES sont toujours valables. Tous les graphiques sont toujours stockés dans des tuiles de 8x8, par exemple, puis assemblés en images plus grandes, qu'il s'agisse de sprites ou d'éléments d'arrière-plan. Vous devez toujours travailler dans des sous-palettes limitées avec une couleur transparente commune, bien que les 16 bits offrent une plus grande liberté dans les palettes à certains égards. Vous serez sans doute soulagé d'apprendre que les consoles 16 bits n'ont généralement pas de palette de couleurs codées en dur comme leurs homologues 8 bits, ce qui signifie que les couleurs disponibles sont considérablement élargies par rapport à la NES.

Ensuite, la Genesis propose des sous-palettes qui contiennent 15 couleurs plus la couleur commune utilisée pour la transparence des Sprites et des calques. L'une des faiblesses de la conception d'art pour Genesis vient des sous-palettes. Les sous-palettes peuvent être librement assignées aux sprites ou aux tuiles d'arrière-plan, mais le Genesis ne permet d'utiliser que quatre sous-palettes à la fois. Pour cette raison, les artistes doivent être attentifs aux couleurs utilisées dans une sous-palette afin qu'elles puissent être maximisées à la fois pour les sprites et les arrière-plans. Une sous-palette pour la Genesis contient généralement des couleurs qui sont utilisées à la fois par les arrière-plans et les Sprites afin de tout intégrer proprement.

Pour créer pour une plate-forme 16 bits, vous devez travailler avec une palette indexée. Pour cela, Gimp peut être une alternative open-source à Photoshop qui permet de nombreuses manipulations de palettes indexées.

Pour créer la palette indexée dans Gimp, allez dans Image > Mode > Indexé...

La fenêtre Conversion des couleurs indexées s'affiche.

Réglez le nombre maximum de couleurs sur 15. Il est possible d'utiliser des motifs de tramage automatiques, mais ceux-ci ont tendance à être plus esthétiques lorsqu'ils sont créés manuellement.

Les couleurs de l'image sont maintenant indexées. Cette information est automatiquement enregistrée avec l'image afin que l'index des couleurs puisse être utilisé. Si vous devez modifier l'ordre des couleurs dans l'index, il vous suffit de cliquer avec le bouton droit de la souris sur la carte des couleurs et de sélectionner Réorganiser la carte des couleurs...

Un menu contextuel apparaît, vous permettant de faire glisser et de déposer les couleurs dans un nouvel ordre.

Une astuce populaire pour créer une plus grande profondeur de couleur consiste à contrôler la palette le long d'une ligne de trame spécifique, de la même manière que le défilement parallaxe a été réalisé sur la NES. Le Genesis est capable de modifier les sélections de sous-palettes pour le dessin le long d'une ligne de trame spécifiée. Cette astuce est fréquemment utilisée pour créer l'illusion qu'une partie d'un niveau est sous l'eau. Les couleurs "sous-marines" sont ajoutées à une sélection de sous-palettes complètement distincte, et la sélection de sous-palettes est chargée dès qu'une certaine ligne de trame est affichée à l'écran.

En général, les consoles 16 bits ne chargent pas les tuiles graphiques de la même manière que les consoles 8 bits. Les consoles 8 bits chargeront les sprites et les tuiles d'arrière-plan séparément et en gros blocs de données pour éviter d'utiliser beaucoup de puissance de traitement, tandis que les consoles 16 bits disposent de la puissance de traitement nécessaire pour une plus grande flexibilité. Ils peuvent charger et échanger des tuiles individuelles à la volée, ce qui vous permet de ne charger que les graphiques dont vous avez besoin au moment où vous en avez besoin. Cela permet d'utiliser une plus grande variété d'œuvres d'art dans un seul niveau ou écran d'un jeu.

Un autre aspect propre à la Genesis/Mega Drive est que les données des tuiles graphiques et des palettes ne sont pas les seules à être chargées dans la VRAM de la console pendant le jeu. Cela peut compliquer la conception d'œuvres d'art pour la console, car le nombre de tuiles graphiques pouvant être chargées dans la mémoire à un moment donné varie en fonction de ce qui se passe dans le jeu. En règle générale, la plupart des jeux offrent suffisamment d'espace pour charger environ 1000 tuiles, et s'il y a un élément dynamique, les tuiles peuvent toujours être échangées librement.

Bien qu'un plus grand nombre de tuiles disponibles puissent être chargées simultanément dans la VRAM, la plupart du temps, cette liberté supplémentaire est réservée aux sprites, afin de permettre des animations plus variées et plus de types de sprites à l'écran en même temps. Cela signifie que la philosophie de conception de base consistant à utiliser des segments de carreaux répétitifs est encore souvent utilisée dans l'art 16 bits afin que l'arrière-plan ne prenne pas trop d'espace. Les résolutions de la NES, de la Genesis et de la SNES sont toutes assez similaires, de sorte que les segments 16x16 constituent généralement le point de départ de ce type de conception.

La Genesis/Mega Drive permet à deux couches de fond d'être actives en même temps sur l'écran. Cela signifie que les éléments en couches sont plus facilement disponibles pour la conception d'arrière-plans. Cela dit, il ne s'agit toujours que de deux couches, de sorte que l'artiste et le développeur devront peut-être recourir à des astuces de trame pour créer une plus grande profondeur dans une scène. Heureusement, comme tous ces éléments peuvent être placés sur une deuxième couche, les concepteurs sont libres de placer des objets au premier plan devant l'arrière-plan sans briser l'illusion.

L'existence d'une deuxième couche rend également obsolète l'utilisation des astuces de priorité des sprites pour créer des objets de premier plan. Au lieu de devoir modifier à plusieurs reprises les priorités des sprites à la volée, vous pouvez maintenant simplement définir la deuxième couche d'arrière-plan à afficher devant le joueur, même si une superposition plus avancée peut encore nécessiter une manipulation rapide des priorités des sprites. Le deuxième volet d'arrière-plan comporte également un sous-volet qui peut être utilisé pour les affichages tête haute (HUD). Le sous-volet sera bloqué en place et ne défilera jamais.

Lorsque vous travaillez avec des sprites, vous disposez d'une plus grande liberté lorsque vous passez au 16 bits. La Genesis/Mega Drive vous permet d'avoir 80 sprites à l'écran à la fois et environ 20 sur une seule ligne horizontale avant qu'elle n'arrête de rendre de nouveaux sprites. En outre, les sprites ne sont plus comptés comme des tuiles individuelles de 8x8. Le Genesis est capable de générer des Sprites simples composés de plusieurs tuiles. Ils peuvent être aussi petits qu'une seule tuile et aussi grands que des tuiles de 4 x 4. Tout ce qui est plus grand que cela nécessiterait encore de le créer à partir de plusieurs sprites.

L'une des caractéristiques des œuvres d'art de l'ère 16 bits est l'utilisation du tramage. À l'époque, les jeux étaient affichés sur des moniteurs à tube cathodique, où les pixels avaient tendance à se fondre les uns dans les autres. Les artistes tiraient parti de ce fait en utilisant des motifs de tramage dans les œuvres d'art, de sorte que lorsqu'un pixel se fondait dans un autre dans un motif répétitif, cela créait l'illusion d'avoir plus de couleurs qu'il n'y en avait en réalité. Aujourd'hui encore, le tramage est largement utilisé dans l'art du pixel, malgré l'amélioration de nos écrans, afin de conserver une esthétique précise.

Des deux principales consoles 16 bits, la Genesis/Mega Drive affiche ses couleurs avec un contraste beaucoup plus important. C'est également un point dont vous devez tenir compte lorsque vous choisissez vos sous-palettes. Faire quelque chose avec des tons plus sourds et plus ternes ne donnera pas l'effet escompté lors du rendu de l'image sur le matériel. Les œuvres d'art doivent généralement être créées avec une palette de couleurs très contrastées afin que le résultat final reste conforme à la vision originale de l'artiste.

Pour les projets Super NES, nous travaillons toujours avec des tuiles/grilles de 8x8 pixels, donc travailler avec des tuiles répétables est extrêmement utile. En règle générale, il s'agit d'un multiple de huit.

La première différence fondamentale entre la Genesis/Mega Drive et la SNES concerne la palette de couleurs. Tout comme la Mega Drive, la SNES n'a pas de palette de couleurs codées, vous pouvez donc choisir vos couleurs.

Le problème de la SNES est qu'elle utilise des couleurs à 5 bits par pixel (BPP), ce qui n'est pas très courant aujourd'hui. Vous pouvez y remédier en utilisant Gimp pour créer des œuvres d'art, puis en postérisant l'image en 32 nuances de RGB, ce qui donnera 5 couleurs BPP, même si vous n'avez pas sauvegardé l'image en tant que telle. Cela permet aux couleurs de votre image de s'afficher avec précision sur la console.

Vous trouverez cette option dans Gimp sous Couleurs > Postériser... Une fenêtre pop-up apparaît, dans laquelle vous pouvez régler les niveaux de postérisation sur 32 pour créer 5 couleurs compatibles BPP.

La prochaine grande différence entre les deux systèmes concerne la résolution de l'écran. La SNES étant le successeur de la NES, les deux systèmes ont des résolutions d'écran similaires. La résolution interne du SNES est de 256x224. Cela permet aux images rendues de s'afficher dans les zones de sécurité de la plupart des téléviseurs à tube cathodique, de sorte qu'aucune partie de l'image ne sera coupée. Cette résolution ne change jamais, et c'est donc la taille de l'image qu'un artiste devra utiliser comme référence.

Cette section fournit une référence rapide à ce que les différents modes d'écran ont à offrir.

La différence la plus importante entre les deux systèmes est que la SNES peut rendre les graphiques d'arrière-plan dans sept modes d'écran différents. La SNES est capable de restituer un total de 256 couleurs à l'écran en même temps dans une seule sous-palette dans certains modes d'écran. Voici quelques-uns des modes d'affichage les plus populaires :

• Mode 1 : C'est l'un des modes d'écran les plus utilisés sur la SNES. Il s'agit de la meilleure démonstration moyenne des capacités de la console. Le mode 1 vous permet d'avoir trois couches d'arrière-plan dont deux ont leur propre sous-palette de 16 couleurs, et la dernière couche a une sous-palette de 4 couleurs.
• Mode 3 : Ce mode est généralement utilisé pour les grandes images statiques telles que les écrans de titre et les écrans d'histoire. Il dispose de deux avions d'arrière-plan. La première utilise une sous-palette complète de 256 couleurs et la seconde permet une sous-palette de 16 couleurs.
• Mode 7 : C'était l'une des principales caractéristiques de la SNES. Présenté dans la plupart des documents promotionnels de la console, le mode 7 permettait pour la première fois à une console de salon d'appliquer des transformations à une image en temps réel, en autorisant la mise à l'échelle, la rotation, l'étirement et l'inclinaison dans le plan d'arrière-plan. Ce système a été utilisé pour créer les effets de pseudo 3D que l'on retrouve dans de nombreux jeux de course et de vol pour la SNES.

Le plan d'arrière-plan unique du mode 7 est géré de manière très différente de tous les autres modes d'écran pour permettre à ces fonctions de fonctionner. Tout d'abord, il n'existe qu'un seul plan d'arrière-plan de 256 couleurs, ce qui signifie que tous les sprites doivent partager leurs couleurs avec la sous-palette du plan d'arrière-plan. Ensuite, au lieu de travailler avec la taille normale de l'écran de la SNES, un plan d'arrière-plan en mode 7 a une taille de 1024x1024 pixels. Il est ensuite dimensionné et ajusté pour s'adapter à l'écran comme le souhaite le concepteur.

Après la complexité des modes d'écran de fond, les règles relatives aux Sprites sont relativement simples. La SNES dispose de plusieurs modes de sprites différents, tout comme la Mega Drive, mais avec la limitation de ne pouvoir utiliser que deux modes de sprites différents pour l'ensemble du jeu.

Les sprites peuvent être de 8x8, 16x16, 32x32 ou 64x64. De plus, les concepteurs doivent choisir parmi une liste prédéterminée de combinaisons de tailles de Sprite. Les jeux sur le SNES peuvent inclure les combinaisons suivantes :

• 8x8, 16x16
• 8x8, 32x32
• 8x8, 64x64
• 16x16, 32x32
• 16x16, 64x64
• 32x32, 64x64

Ces tailles sont "gravées dans le marbre" une fois que vous les avez choisies, et tous les Sprites du jeu doivent s'y conformer. La SNES est capable de rendre 32 sprites sur une seule ligne horizontale à la fois, mais se targue d'avoir une limite de 128 sprites sur ce qui peut être affiché à l'écran à la fois. Tout ce qui dépasse cette limite ne sera pas affiché à l'écran.

Les sprites disposent de huit sous-palettes de 16 couleurs. Comme pour toutes les consoles rétro, la première couleur de chaque sous-palette est une couleur commune utilisée pour la transparence. La quantité importante de sous-palettes par rapport aux autres consoles couvertes vous donne une plus grande liberté dans le choix des couleurs pour les Sprites. Vous devez simplement garder à l'esprit qu'il y a une limite stricte de 256 couleurs.

Nous espérons que vous avez apprécié ce billet sur la création de jeux rétro 8 et 16 bits à l'aide de 2D Pixel Perfect dans la dernière version d'Unity.

Nous n'en avons pas encore fini avec 2D Pixel Perfect, car la fonctionnalité sera vérifiée pour la production dans Unity 2019.3, et sera également plus compatible avec Cinemachine 2D.

Laissez-nous savoir comment se déroule votre propre projet 2D Pixel Perfect, et n'oubliez pas de visiter le forum 2D pour échanger avec la communauté Unity et l'équipe de développement 2D.