Limitations des jeux 16 bits et de leur recréation dans Unity

Dans notre premier tutoriel de jeu rétro, nous avons montré comment personnaliser l'outil 2D Pixel Perfect et comment les graphiques ont été créés à l'ère des jeux 8 bits. Dans ce post, nous serons transportés vers l'ère 16 bits. Avec Mega Cat Studios, nous apprendrons à créer des graphismes authentiques pour les jeux dans le style de Sega Genesis (Mega Drive) et Super NES en utilisant les options Unity, les structures graphiques et les palettes de couleurs.

Créez des graphiques authentiques de style Genesis

Dans cette section, nous examinerons le flux de travail de création de graphiques qui imitent l'image de différentes consoles. Il y aura moins de restrictions que dans un projet 8 bits et plus de liberté lorsque vous travaillez avec la couleur, mais Genesis a quand même des limites. Nous pensons qu'il sera également utile d'expliquer comment le matériel de la console a fonctionné afin que vous puissiez appliquer ces restrictions dans votre propre projet rétro.

Palettes et sous-palettes

Le passage de consoles 8 bits à 16 bits en raison de la complexité de l'équipement a offert aux développeurs plus d'opportunités. Cependant, les principes de création de graphiques NES de haute qualité sont toujours valables. Tous les graphiques sont toujours stockés dans des tuiles, par exemple, de taille 8 × 8, et collectés à partir d'eux en grandes images - sprites et éléments d'arrière-plan. Les artistes sont toujours limités aux sous-palettes avec une couleur transparente commune, mais 16 bits offrent plus de flexibilité pour travailler avec des palettes. Vous serez probablement ravi que les consoles 16 bits n'aient pas de palette de couleurs bien définie, c'est-à-dire que le nombre de couleurs disponibles ait considérablement augmenté par rapport à NES.

De plus, Genesis propose des sous-palettes contenant 15 couleurs plus la couleur globale utilisée pour la transparence des sprites et des calques. Cependant, l'un des inconvénients de la création de graphiques pour Genesis est de travailler avec des sous-palettes. Les sous-palettes peuvent être librement attribuées aux images-objets ou aux tuiles d'arrière-plan, mais Genesis vous permet de ne pas utiliser plus de quatre sous-palettes à la fois. Par conséquent, les artistes doivent réfléchir aux couleurs à utiliser dans la sous-palette, afin que leur nombre pour les sprites et les arrière-plans soit maximal. La sous-palette Genesis contient généralement des couleurs utilisées à la fois pour l'arrière-plan et les sprites.



La scène du jeu pour Genesis est montrée ci-dessus, et les sous-palettes utilisées ci-dessous.

Pour créer des graphiques pour n'importe quelle plate-forme 16 bits, vous devez travailler avec une palette indexée. Pour ce faire, vous pouvez utiliser l'éditeur Gimp, une alternative gratuite à Photoshop qui vous permet de manipuler des palettes indexées.

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


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


Pour Nombre maximum de couleurs, définissez la valeur sur 15 . Vous pouvez utiliser des modèles de tramage automatiques, mais ils sont généralement plus beaux si vous les créez manuellement.


Les couleurs des images sont désormais indexées. Ces informations sont automatiquement enregistrées avec l'image afin que l'index de couleur puisse être utilisé. Si vous devez modifier l'ordre des couleurs dans l'index, cliquez simplement avec le bouton droit sur la palette de couleurs et sélectionnez Réorganiser la palette de couleurs ...


Une fenêtre s'ouvrira vous permettant de glisser-déposer des couleurs, en changeant leur ordre.


Une astuce populaire pour augmenter la profondeur de couleur consiste à contrôler la palette dans une ligne de numérisation spécifique, similaire à la façon dont le défilement de parallaxe est implémenté sur NES. La console Genesis peut modifier le choix de la sous-palette graphique dans la ligne de numérisation spécifiée. Cette astuce est souvent utilisée pour créer l'illusion qu'une partie du niveau est sous l'eau. Les couleurs sous-marines sont ajoutées à une sous-palette distincte, et cette sous-palette est chargée lorsque la ligne de numérisation spécifiée est rendue à l'écran.

Stockage en tuiles et chargement dans cette console

En général, les consoles 16 bits chargeaient les tuiles graphiques différemment de celles 8 bits. Les consoles 8 bits ont chargé des tuiles sprite et d'arrière-plan avec de gros morceaux de données pour économiser la puissance de traitement, tandis que les ressources des consoles 16 bits ont fourni une flexibilité accrue. Ils pouvaient charger et remplacer des tuiles séparées à la volée, grâce auxquelles il était possible de charger uniquement les graphiques nécessaires. Par conséquent, sur un seul écran ou niveau, vous pouvez utiliser une plus grande variété de graphiques.

Un autre aspect unique de Genesis / Mega Drive est que les données graphiques et de palette ne sont pas les seules données chargées dans la console VRAM pendant le jeu. Cela a rendu difficile la création d'une conception graphique pour la console, car le nombre de tuiles graphiques pouvant être chargées en mémoire à un moment donné dépendait de ce qui se passait d'autre dans le jeu. Dans le cas général, la plupart des jeux avaient suffisamment d'espace pour charger environ 1000 tuiles, et avec des éléments dynamiques, les tuiles pouvaient toujours être téléchargées librement et chargées en mémoire.


Tuiles chargées en mémoire dans la scène ci-dessus. Un grand espace vide au milieu et des artefacts ci-dessous est l'espace alloué en mémoire pour les ennemis et autres éléments du jeu.

Malgré le fait qu'en VRAM une plus grande variété de tuiles pouvait être chargée en même temps, le plus souvent cet espace supplémentaire était réservé aux sprites. Cela a fourni une animation plus complexe et a permis d'afficher plus de sprites à l'écran simultanément. C'est-à-dire que la philosophie de conception fondamentale avec des segments de tuiles répétitifs était toujours activement utilisée dans les graphiques 16 bits, en raison de laquelle l'arrière-plan ne prenait pas beaucoup d'espace disponible. Les autorisations de NES, Genesis et SNES sont presque les mêmes, donc les segments 16 × 16 étaient généralement le point de départ pour ces types de conceptions.


Ici, l'artiste a utilisé un motif de bloc 32 × 32 pour créer la partie principale du sol, qui est l'arrière-plan.

Travailler avec des calques d'arrière-plan

Genesis / Mega Drive vous permet d'afficher simultanément sur l'écran deux couches de fond. Cela signifie que les éléments de superposition sont plus pratiques pour créer des arrière-plans de conception. Néanmoins, il n'y a que deux couches, donc, pour donner plus de profondeur à la scène, l'artiste et le développeur pourraient utiliser des astuces avec des lignes de balayage. Heureusement, puisque tout cela pouvait être transféré à la deuxième couche, les concepteurs étaient libres de placer des objets de premier plan devant l'arrière-plan sans détruire les illusions.

De plus, grâce à la présence de la deuxième couche, les développeurs n'ont plus eu à appliquer des astuces avec des priorités de sprite. Au lieu de changer constamment les priorités des sprites à la volée, il était désormais possible de définir une deuxième couche d'arrière-plan affichée devant le joueur. Cependant, pour une superposition plus complexe, cela pourrait encore nécessiter une manipulation rapide des priorités des sprites. La deuxième couche d'arrière-plan a également une zone qui peut être utilisée pour l'interface. Cette zone est verrouillée et ne défilera jamais.


En raison de la vue de haut en bas de l'arbre, il était nécessaire de créer des tuiles spéciales pour manipuler l'ordre des couches de sprites.

Restrictions sur les sprites

Lors du passage à 16 bits, la liberté de travailler avec les sprites augmente considérablement. Genesis / Mega Drive vous permet d'afficher simultanément sur l'écran jusqu'à 80 sprites et jusqu'à 20 sprites sur une ligne horizontale; tous les sprites suivants ne sont pas rendus. De plus, les sprites ne sont plus considérés comme des tuiles 8 × 8 distinctes. Genesis est capable de générer des sprites uniques constitués de plusieurs tuiles. Ils peuvent aller d'une tuile à des tuiles 4x4. Les images plus grandes devront être composées de plusieurs sprites.


Les graphismes du boss final utilisent un grand nombre d'éléments d'arrière-plan animés, de calques et de nombreux sprites. Tout cela serait impossible sur une plateforme 8 bits.

Tramage et contraste

L'une des caractéristiques des graphiques de l'ère 16 bits est l'utilisation du tramage. À cette époque, les jeux se jouaient sur des téléviseurs à tube cathodique, où les pixels de l'écran fusionnaient généralement les uns avec les autres. Les artistes ont profité de cette fonctionnalité en appliquant des motifs de tramage dans leurs graphiques: lorsqu'un pixel fusionnait avec un autre dans un motif répétitif, cela créait l'illusion de plus de couleurs que la console ne le permettait. Pour transmettre l'esthétique de l'original, le tramage est toujours activement utilisé dans le pixel art, malgré de meilleurs affichages.


Le tramage était souvent utilisé sur les consoles 16 bits. Sur un écran CRT, le motif de pixels était mélangé, créant de nouvelles couleurs ou des effets de transparence là où cela n'était pas possible.

Comparé à SNES, Genesis / Mega Drive affiche des couleurs avec un contraste plus élevé. Cela doit également être pris en compte lors du choix des sous-palettes. Si vous créez un jeu avec des couleurs sourdes et ternes, alors pendant le rendu sur le matériel d'origine, les palettes peuvent différer. En général, les graphiques doivent être créés dans une palette de couleurs à contraste élevé afin que le résultat final corresponde à la vision originale de l'artiste.

Créez des graphismes authentiques de style SNES

Les jeux Super NES fonctionnaient toujours avec des grilles / tuiles 8 × 8 pixels, il est donc extrêmement utile d'utiliser des tuiles répétitives. En général, leur taille doit être un multiple de huit.

Palette de couleurs

La première différence fondamentale entre Genesis / Mega Drive et SNES concerne la palette de couleurs. Comme Mega Drive, la console SNES n'a pas de palette de couleurs cousue dans le matériel, vous pouvez donc choisir vos propres couleurs.

La complexité de SNES est qu'il utilisait des couleurs avec une profondeur de 5 bits par pixel (bits par pixel, BPP), qui sont rarement vues aujourd'hui. Vous pouvez les implémenter avec Gimp, puis simplement postériser l'image en 32 nuances de RVB, ce qui correspondra aux couleurs avec 5 BPP. Cela affichera avec précision les couleurs de l'image sur la console.


Cette option dans Gimp est située dans l'élément de menu Couleurs> Postériser ... Une fenêtre contextuelle apparaîtra dans laquelle vous pouvez définir les niveaux de Postériser à 32 pour créer des couleurs compatibles avec 5 BPP.

Résolution d'écran

Une autre différence majeure entre les deux systèmes concerne la résolution d'écran. Étant donné que SNES était un descendant de NES, les deux consoles avaient des résolutions d'écran similaires. La résolution interne de SNES est 256 × 224. Il vous permet de rendre des images dans des zones sûres de la plupart des téléviseurs CRT sans rogner une partie de l'image. Cette résolution ne change jamais, ce sera donc la taille de l'image, et l'artiste devrait l'utiliser.


Cette image occupe la résolution SNES plein écran utilisée dans la plupart des modes d'écran.

Modes d'écran de la console

Dans cette section, nous parlerons brièvement des différents modes d'écran.


La plus grande différence entre les consoles est que SNES peut rendre des graphiques d'arrière-plan dans sept modes d'écran différents. Dans certains modes d'écran, SNES peut simultanément rendre 256 couleurs à partir d'une sous-palette à l'écran. Voici les modes d'écran les plus populaires:

• Mode 1: l' un des modes d'écran les plus courants pour SNES. Il s'agit du mode le plus moyen qui démontre les capacités de la console. Le mode 1 vous permet de travailler avec trois calques d'arrière-plan, dont deux ont leurs propres sous-palettes de 16 couleurs, et le dernier calque a une sous-palette de 4 couleurs.
• Mode 3: ce mode est couramment utilisé pour les grandes images fixes, telles que les écrans de démarrage ou les scènes. Il a deux couches d'arrière-plan. Le premier utilise une sous-palette complète de 256 couleurs, le second utilise une sous-palette de 16 couleurs.
• Mode 7: C'est l'une des principales caractéristiques de SNES. Ce mode a été montré dans la plupart des supports publicitaires de la console. Grâce au mode 7, les consoles de salon ont pu pour la première fois effectuer des transformations d'image en temps réel: mise à l'échelle, rotation, étirement et inclinaison dans le plan d'arrière-plan. Il a été utilisé pour créer des effets pseudo-3D qui peuvent être vus dans de nombreux jeux de course et simulateurs de vol pour SNES.

Pour garantir le bon fonctionnement de ces fonctions, le seul plan d'arrière-plan du mode 7 est traité très différemment des autres modes d'écran. Premièrement, il n'y a qu'un seul plan de couleur de 256 couleurs, c'est-à-dire que tous les sprites doivent avoir des couleurs d'une sous-palette de ce plan d'arrière-plan. Deuxièmement, au lieu de la taille d'écran SNES habituelle, le plan d'arrière-plan en mode 7 était de 1024 × 1024 pixels. Il évolue et s'ajuste selon les besoins du concepteur.


Ce bureau utilise le mode 1 avec une sous-palette (les deux autres sont utilisés pour l'interface utilisateur). L'écran Merci d'avoir joué utilise le mode 3, qui permet à l'artiste d'appliquer une palette de 256 couleurs.

Tailles de sprite

Par rapport à la complexité des modes d'écran d'arrière-plan, les règles de travail avec les sprites sont relativement simples. SNES a plusieurs modes de sprite différents, presque comme Mega Drive, mais avec une restriction stricte: la console ne peut utiliser que deux modes de sprite différents dans le jeu

Les sprites peuvent avoir des tailles de 8 × 8, 16 × 16, 32 × 32 ou 64 × 64. Mais ce n'est pas tout: les concepteurs ont dû choisir des combinaisons dans une liste de tailles de sprites prêtes à l'emploi. Les combinaisons suivantes peuvent être utilisées dans les jeux SNES:

• 8 × 8, 16 × 16
• 8 × 8, 32 × 32
• 8 × 8, 64 × 64
• 16 × 16, 32 × 32
• 16 × 16, 64 × 64
• 32 × 32, 64 × 64

Ces tailles sont choisies "une fois pour toutes", et tous les sprites du jeu doivent y correspondre. SNES est capable de rendre 32 sprites sur une ligne de balayage horizontal, et pas plus de 128 sprites sur l'écran à la fois. Tous les autres ne seront pas rendus.


Fork Parker Crunch-Out utilise une combinaison de 32 × 32 et 16 × 16 pour tous les sprites du jeu.

Les sprites peuvent fonctionner avec huit sous-palettes de 16 couleurs. Comme avec toutes les consoles rétro, la première couleur de toute sous-palette est la couleur globale utilisée pour la transparence. Un grand nombre de sous-palettes par rapport aux autres consoles nous donne plus de liberté dans le choix des couleurs pour les sprites. Vous devez juste vous rappeler qu'il existe une limite stricte de 256 couleurs.

Utilisation de 2D Pixel Perfect pour créer des jeux rétro

Dans le tutoriel rétro précédent, nous avons couvert les options 2D Pixel Perfect et recréé des graphiques de style 8 bits.

À partir d'Unity 2019.2, le package 2D Pixel Perfect fait partie du rendu 2D, qui à son tour fait partie du package Lightweight Render Pipeline (LWRP). Si vous n'utilisez pas LWRP, alors 2D Pixel Perfect peut également être utilisé comme un package séparé. Dans ce didacticiel, nous allons montrer comment configurer un projet dans LWRP.

Préparation d'un nouveau projet dans Unity 2019.2 et LWRP

1. Lancez Unity Hub, cliquez sur Nouveau, sélectionnez 2D et spécifiez le nom de votre projet.
   
   
   
2. Pour importer un 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 qui apparaît, sélectionnez le package Lightweight RP et assurez-vous que sa version est 6.9.0 ou supérieure.
   
   
   
3. Vous devez ensuite configurer le rendu 2D dans l'éditeur et créer un nouvel actif de pipeline. Dans la fenêtre Projet, cliquez avec le bouton droit sur la fenêtre Actifs et sélectionnez Créer> Rendu> Pipeline de rendu léger> Actif de pipeline .
4. Dans la fenêtre Actifs de la fenêtre Projet, créez un nouveau rendu 2D en cliquant avec le bouton droit et en choisissant Créer> Rendu> Pipeline de rendu léger> Rendu 2D .
   
   
   
5. Sélectionnez l'actif de pipeline créé. Sélectionnez Général , puis basculez le type de rendu de Rendu avant sur Personnalisé .
6. Attribuez le rendu 2D généré comme valeur du champ de données.
   
   
   
7. Dans les options graphiques, modifiez les paramètres de pipeline de rendu scriptable pour utiliser le nouvel actif de pipeline que vous avez créé.
   
   Ceci termine la configuration de 2D Renderer, ainsi que de la caméra 2D Pixel Perfect.

Dans Unity 2019.2, les sprites bidimensionnels peuvent avoir un matériau Sprite-Lit qui leur permet de répondre aux conditions d'éclairage 2D. Si votre projet n'a pas d'éclairage 2D, utilisez du matériel qui ne nécessite pas d'éclairage 2D pour que les sprites soient visibles, c'est-à-dire "Sprites-Default".

Pixel Teinture parfaite pour les styles graphiques 16 bits

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

La console Sega Genesis avait une résolution de 320 × 224 pixels (ou une grille de 40 × 28 carreaux de 8 × 8 pixels). Cela s'applique à la version NTSC.

La console Super NES également dans la version NTSC avait une résolution de 256 × 224 (30 × 28 tuiles avec une taille de 8 × 8 pixels).

Pour créer les deux styles graphiques, nous vous recommandons d'utiliser une résolution en hauteur de 224 pixels et 8 PPU.


En utilisant le sprite d'aide (ci-dessus montre une image plein écran 320 × 224 de Sonic the Hedgehog pour Sega Genesis), vous pouvez comprendre comment un sprite avec 8 pixels par unité (pixels par unité, PPU) est placé dans la fenêtre de scène avec la même résolution et PPU.

Si vous avez besoin d'un rappel de ce que fait chacune des options du composant 2D Pixel Perfect Camera, lisez le tutoriel de jeu rétro précédent .

Développement ultérieur

J'espère que vous avez apprécié cette série d'articles 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'avons pas terminé avec 2D Pixel Perfect, car ce package sera prêt pour la production dans Unity 2019.3, et obtiendra également plus de compatibilité avec Cinemachine 2D.

Tenez-nous au courant de vos projets avec 2D Pixel Perfect et n'oubliez pas de visiter le forum 2D pour discuter avec les utilisateurs d'Unity et les développeurs de fonctions 2D.