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 dans le temps. Dans ce billet, nous avançons rapidement vers l'ère des 16 bits. Avec l’aide des Mega Cat Studios, vous apprendrez à créer des œuvres d’art authentiques pour les jeux de style Sega Genesis (ou Mega Drive) et Super NES en utilisant les paramètres Unity, les structures graphiques et les palettes de couleurs.

Amenez votre expérience de développement 2D à un niveau supérieur et explorez la suite native d'outils 2D Unity.

Mega Cat Studios a transformé la création de jeux rétro très précis en une forme d'art. Si bien, en fait, que plusieurs de leurs titres peuvent également être acquis sous forme de cartouche 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, où nous avons couvert les paramètres 2D Pixel Perfect et comment recréer des graphiques de style 8 bits. Avec Unity 2019.2, 2D Pixel Perfect fait maintenant partie du rendu 2D, qui est dans le paquet LWRP (Lightweight Render Pipeline). 2D Pixel Perfect existe également en tant que package autonome (avec les mêmes fonctionnalités) pour les créateurs qui n’utilisent pas LWRP. Pour ce guide, nous allons vous montrer comment configurer le projet dans LWRP.

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

2. Pour importer le package 2D Pixel Perfect, cliquez sur le menu Fenêtre dans la barre d'outils et sélectionnez Gestionnaire de packages. Dans la fenêtre contextuelle, sélectionnez le package Lightweight RP, en vous assurant d'obtenir la version 6.9.0 ou supérieure.

3. Ensuite, vous allez configurer le rendu 2D dans l'éditeur et créer un nouveau pipeline Asset. Dans la fenêtre Projet, cliquez avec le bouton droit de la souris sur la vue Ressources et sélectionnez Créer > Rendu > Pipeline de rendu léger > Pipeline Asset.

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

5. Sélectionnez la ressource Pipeline que vous avez créée. Sélectionnez Général, puis modifiez le Type de rendu de Transférer le rendu à 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 la nouvelle ressource de pipeline que vous avez créée.

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

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 du matériel qui ne nécessite pas de lumières 2D pour rendre les Sprites visibles, auquel cas vous pouvez changer le matériel en « Sprites-Default ».

Vous devez ajouter le composant Pixel Perfect Camera à votre appareil photo principal. Nous vous recommandons de cocher Exécuter en mode Édition.

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

Utiliser une résolution en hauteur de 224 px et concevoir des ressources avec 8 PPU est recommandé pour les deux styles graphiques.

Si vous avez besoin d'une remise à niveau sur ce que fait chaque option dans le composant 2D Pixel Perfect Camera, consultez notre précédent article rétro blog de jeu.

Dans cette section, nous allons aborder le flux de travail pour créer des illustrations qui imitent l’apparence de différentes consoles, comme nous l’avons fait dans notre article de blog NES. Il y a moins de restrictions que dans un projet 8 bits et plus de liberté avec la couleur, mais la Genesis a ses propres limites. Nous pensons également qu’il est important d’expliquer le fonctionnement du matériel d’origine afin de pouvoir appliquer ces limitations à votre propre projet rétro.

Faire le saut des consoles 8 à 16 bits vous donne plus d'options sur du matériel plus sophistiqué. Cela dit, les principes fondamentaux de la réalisation d'une grande œuvre NES s'appliquent toujours. Tous les graphiques sont toujours stockés dans des tuiles 8x8, par exemple, puis assemblés en images plus grandes, qu’il s’agisse de Sprites ou d’éléments de fond. Vous devez toujours travailler dans des sous-palettes limitées avec une couleur transparente commune, bien que 16 bits offre une plus grande liberté dans les palettes à certains égards. Vous serez probablement soulagé d'entendre que les consoles 16 bits n'ont généralement pas une palette de couleurs codées en dur comme leurs homologues 8 bits, ce qui signifie que les couleurs disponibles sont considérablement étendues par rapport à la NES.

Ensuite, la Genesis dispose de sous-palettes qui contiennent 15 couleurs plus la couleur commune utilisée pour la transparence Sprite et la transparence des calques. Une des faiblesses de la conception de l'art pour Genesis vient des sous-palettes, cependant. Les sous-palettes peuvent être librement assignées aux Sprites ou aux tuiles de fond, mais la Genèse 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 pour une utilisation Sprite et en arrière-plan. Une sous-palette pour la Genèse 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 n'importe quelle plateforme 16 bits, vous devez travailler avec une palette indexée. Pour cela, Gimp peut être une alternative open-source à Photoshop qui permet beaucoup de 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 apparaît.

Réglez le nombre maximum de couleurs sur 15. Vous pouvez utiliser des motifs automatiques de tergiversation, mais ceux-ci ont tendance à être plus beaux lorsqu’ils sont créés manuellement.

Les couleurs de l’image sont maintenant indexées. Ces informations sont automatiquement enregistrées avec l'image afin que l'index de couleur puisse être utilisé. Si vous devez changer l'ordre des couleurs dans l'index, vous pouvez simplement cliquer avec le bouton droit de la souris sur la carte des couleurs et sélectionner Réorganiser la carte...

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

Une astuce populaire pour créer une plus grande profondeur de couleur est de contrôler la palette le long d'une ligne matricielle spécifiée, tout comme le défilement parallaxe a été réalisé sur la NES. La Genèse est capable de modifier les sélections de sous-palettes pour l'illustration 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-palette complètement séparée, et la sélection de sous-palette est chargée une fois qu’une certaine ligne matricielle est affichée à l’écran.

En général, les consoles 16 bits ne chargent pas les dalles graphiques de la même manière que les consoles 8 bits. Les consoles 8 bits chargeront les dalles Sprite et background séparément et en gros morceaux de données pour éviter d'utiliser beaucoup de puissance de traitement, tandis que les consoles 16 bits ont la puissance de traitement pour une plus grande flexibilité. Ils peuvent charger et échanger des tuiles individuelles à la volée, vous permettant de charger uniquement les graphiques dont vous avez besoin lorsque vous en avez besoin. Cela permet d'utiliser une plus grande gamme d'illustrations dans un seul niveau ou écran d'un jeu.

Un autre aspect qui est propre à la Genesis/Mega Drive est que les données des tuiles graphiques et de la palette ne sont pas les seules choses chargées dans la VRAM de la console pendant le jeu. Cela peut rendre la conception de l'art pour la console délicate car le nombre de tuiles graphiques qui peuvent être chargées en mémoire à un moment donné varie en fonction de ce qui se passe dans le jeu. D'une manière générale, la plupart des jeux laisseront suffisamment d'espace pour charger dans ~ 1000 tuiles, et s'il y a un élément dynamique, les tuiles peuvent toujours être échangées librement.

Bien qu'une plus grande gamme de tuiles disponibles puisse être chargée en VRAM à la fois, la plupart du temps, cette liberté supplémentaire est réservée aux Sprites, pour permettre des animations plus variées et plus de types de Sprites à l'écran à la fois. Cela signifie que la philosophie de conception de base consistant à utiliser des segments répétés de carreaux tend à être encore beaucoup utilisée dans l'art 16 bits afin que l'arrière-plan ne prenne pas trop d'espace disponible. Les résolutions des NES, Genesis et SNES sont toutes assez similaires, donc les segments 16x16 ont tendance à être le point de départ de ce genre de conceptions.

Le Genesis/Mega Drive permet d'activer deux couches d'arrière-plan à la fois sur l'écran. Cela signifie que les éléments superposés sont plus facilement disponibles pour la conception des arrière-plans. Cela dit, il ne s’agit encore que de deux couches, donc l’artiste et le développeur devront peut-être se fier à des astuces de lignes matricielles pour créer une plus grande profondeur dans une scène. Heureusement, parce que tout cela peut aller sur une deuxième couche, les concepteurs sont libres de placer des objets de premier plan devant l'arrière-plan sans briser l'illusion.

Avoir un second calque rend également obsolète l'utilisation d'astuces prioritaires pour créer des objets de premier plan. Au lieu d'avoir à modifier à plusieurs reprises les priorités des Sprites à la volée, vous pouvez maintenant simplement définir le deuxième calque d'arrière-plan à afficher devant le lecteur, bien que des calques plus avancés puissent 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 verrouillé en place et ne défilera jamais.

Lorsque vous travaillez avec des Sprites, il y a une plus grande liberté lorsque vous faites le saut à 16 bits. Le Genesis/Mega Drive vous permet d'avoir 80 Sprites à l'écran à la fois et une vingtaine sur une seule ligne horizontale avant qu'il ne cesse de rendre de nouveaux Sprites. Au-delà, les Sprites ne sont plus comptés comme des tuiles individuelles 8x8. La Genèse est capable de générer des Sprites simples faits de plusieurs tuiles. Ceux-ci peuvent être aussi petits qu'une seule tuile et aussi grands que des tuiles 4x4 en taille. Tout ce qui est plus grand que ça nécessiterait quand même de le fabriquer à partir de plusieurs Sprites.

L'une des caractéristiques marquantes des œuvres d'art de l'ère 16 bits est l'utilisation de tergiversations. Les jeux à l'époque étaient affichés sur des écrans cathodiques, où les pixels à l'écran avaient tendance à saigner les uns dans les autres. Les artistes profiteraient de ce fait en utilisant des motifs tergiversants dans l'œuvre, de sorte que lorsqu'un pixel saignait dans un autre dans un motif répétitif, il créait l'illusion d'avoir plus de couleurs que celles qui étaient réellement disponibles. À ce jour, le tergiversation est fortement utilisé dans le pixel art, malgré les améliorations apportées à nos écrans, pour maintenir une esthétique précise.

Des deux principales consoles 16 bits, la Genesis/Mega Drive affiche ses couleurs avec un contraste bien plus important. C'est aussi quelque chose dont vous devez être conscient lorsque vous choisissez vos sous-palettes. Faire quelque chose avec des tons plus sourds et ternes finira pas regarder tout à fait comment il est prévu de le faire quand il s'agit de rendre l'image réellement sur le matériel. L’art doit généralement être créé avec une palette de couleurs à fort contraste afin que le résultat final reste conforme à la Vision originale de l’artiste.

Pour les projets Super NES, nous travaillons toujours avec des pixels 8x8 en taille carrelage/grille, donc travailler avec des carreaux répétables est extrêmement utile. D'une manière générale, ceux-ci seront dans un multiple de huit.

La première différence fondamentale entre le Genesis/Mega Drive et le SNES concerne la palette de couleurs. Tout comme le Mega Drive, le SNES ne possède pas de palette de couleurs codées en dur, vous pouvez donc choisir leurs couleurs.

Ce qui est délicat avec le SNES, c’est qu’il utilise des couleurs de 5 bits par pixel (BPP), qui ne sont pas très courantes aujourd’hui. Vous pouvez résoudre ce problème en utilisant Gimp pour créer des illustrations, puis vous pouvez simplement poster l'image en 32 nuances de RGB, ce qui fonctionnera en 5 couleurs BPP, même si vous n'avez pas enregistré l'image en tant que telle. Cela permet à vos couleurs d'image de s'afficher avec précision sur la console.

Vous pouvez trouver cette option dans Gimp sous Couleurs > Postériser... Une fenêtre contextuelle apparaît, où vous pouvez définir les niveaux de Postériser à 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. SNES étant le successeur de NES, les deux systèmes partagent des résolutions d'écran similaires. La résolution interne du SNES est de 256x224. Cela permet à toutes les images rendues de s'afficher dans les zones de sécurité de la plupart des téléviseurs à tube cathodique, de sorte qu'aucune image ne sera coupée. Cette résolution ne change jamais, donc ce sera 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 significative entre les systèmes est que le SNES peut restituer des graphiques en arrière-plan dans sept modes d'écran différents. Le SNES est capable de restituer un total de 256 couleurs à l'écran en une seule sous-palette dans certains modes d'écran. Voici quelques-uns des modes d'écran les plus populaires:

• Mode 1: C'est l'un des modes d'écran les plus couramment utilisés pour le SNES. Il affiche la meilleure performance moyenne des capacités de la console. Le mode 1 vous permet d'avoir trois calques de fond où deux d'entre eux ont leur propre sous-palette de 16 couleurs, et le calque final a une sous-palette de 4 couleurs.
• Mode 3: Ce mode est généralement utilisé pour les images statiques plus grandes comme les écrans titres et les écrans d'histoire. Il dispose de deux plans de fond. 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 du SNES. Il a été montré dans la plupart des documents promotionnels pour la console, Mode 7 était la première fois qu'une console de salon était capable d'appliquer des transformations à une image en temps réel, permettant la mise à l'échelle, la rotation, l'étirement et le biais dans le plan de fond. Cela a été utilisé pour créer les effets pseudo 3D vus dans beaucoup de jeux de course et de vol pour 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 fonctionnalités de fonctionner. Premièrement, il n'y a qu'un seul plan d'arrière-plan de 256 couleurs à travailler, 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 du SNES, un plan d'arrière-plan Mode 7 est de taille 1024x1024 pixels. Il est ensuite dimensionné et ajusté pour s'adapter à l'écran comme le designer le souhaite.

Après la complexité des modes d'écran d'arrière-plan, les règles pour les Sprites sont relativement simples. Le SNES dispose de plusieurs modes Sprite différents, un peu comme le Mega Drive l'a fait, mais avec la limitation difficile de ne pouvoir utiliser que deux modes Sprite différents pour la totalité du jeu.

Les sprites peuvent être 8x8, 16x16, 32x32 ou 64x64. Non seulement cela, mais les concepteurs doivent choisir parmi une liste prédéterminée de combinaisons de tailles 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. Le SNES est capable de restituer 32 Sprites sur une seule ligne matricielle horizontale à la fois, mais affiche une forte limite de 128 Sprites sur ce qui peut être montré à l'écran à la fois. Tout ce qui dépasse cela ne sera pas rendu à l'écran.

Les sprites ont huit sous-palettes de 16 couleurs à travailler. Un peu comme toutes les consoles rétro, la première couleur de toute sous-palette est une couleur commune partagée qui est utilisée pour la transparence. La grande quantité de sous-palettes par rapport aux autres consoles couvertes vous donne une plus grande liberté lors du choix des couleurs pour les Sprites. Vous devez juste garder à l’esprit qu’il y a une limite de 256 couleurs.

Nous espérons que vous avez apprécié ce billet sur la façon de créer des jeux rétro 8 et 16 bits en utilisant 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.

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