16 Couleurs

16 Couleurs – graphisme & jeu vidéo

Archéologie infographique : le graphisme pour la NES

4 Commentaires

J’ai dernièrement eu l’opportunité de travailler avec Mara et Glafouk de Flush sur une petite production pour la NES, une invitation pour la VIP 2018 :

Le temps nous a fait défaut pour pouvoir inclure certaines des idées que nous avions en tête (en particulier, un peu d’animation sur les fantômes) mais le résultat est satisfaisant, surtout que pour nous tous il s’agissait peu ou prou de notre première expérience avec la NES. Ça m’aura ainsi permis de m’initier à la réalisation de graphismes adaptés aux contraintes de la console même si la réalisation de certaines images a été un peu précipitée.

Comme toujours, il a fallu tâtonner un petit peu avant de trouver exactement comment s’y prendre. Pour commencer il est très utile de comprendre comment la NES gère l’affichage à l’écran. L’article NES Graphics – Part 1 l’explique très clairement, mais on peut le résumer à ces cinq règles, les cinq commandements du graphisme NES :

  • La résolution de la NES est de 256×240
  • On dispose de 4 palettes de 4 couleurs (hors sprites), choisies parmi un total de 64.
  • La couleur 0 dans chacune de ces 4 palettes doit être identique, c’est la « couleur de fond ».
  • L’écran est composé de tiles de 8×8 pixels, avec un maximum de 256 (une tile peut être utilisée autant de fois que nécessaire).
  • Ces tiles sont à leur tour groupées en blocs de 2×2 (donc 16×16 pixels) qui doivent chacun utiliser uniquement les couleurs d’une seule palette.

NES graphics explained

Il faut donc gérer une double grille : 8×8 pour les tiles et 16×16 pour les palettes. La deuxième s’avère beaucoup plus contraignante en pratique et il vaut mieux commencer par la prendre en compte dès le début pour éviter d’avoir à se casser la tête plus tard à gérer les conflits de couleurs.

Les contraintes ci-dessus sont spécifiques aux écrans d’arrière-plan, auxquels on peut ensuite ajouter des sprites, qui sont eux aussi composés de tiles de 8×8 et disposent de leur propre palette de 4 couleurs, dont une transparente. La NES peut afficher jusqu’à 64 sprites simultanément mais gare aux problèmes de clignotement s’il y en a plus de 8 sur une même ligne d’affichage.

Revenons à la palette standard NES, la sélection de 64 couleurs parmi lesquels on choisit les teintes souhaitée. La première impression, c’est que le choix des couleurs est un peu navrant : pas de vrai jaune, des teintes qui font quasiment doublon, très peu de gris… Ensuite j’ai réalisé qu’il y avait une multitude de façons de représenter ces couleurs selon la version de la console (NTSC/PAL), le type d’écran et la connexion entre les deux et j’ai décidé de ne pas trop me monter le ciboulot avec l’exactitude des teintes.

NES palettes

How I learned to stop worrying about NES colours.
Source : http://emulation.gametechwiki.com/index.php/Famicom_Color_Palette

NES Screen Tool est un petit outil Windows utilisé pour convertir une image au format BMP en un format compréhensible par la NES. Attention par contre, il faut vraiment respecter les contraintes de palettes à 100% pour que la conversion se passe bien, NESst ne prétend pas faire une conversion intelligente en optimisant la palette et en réaffectant les couleurs. Le moindre pixel en dehors des clous (même si c’est la bonne teinte, mais avec le mauvais index de palette) donne des couleurs complètement incorrectes sur un bloc entier. Mieux vaut donc préparer ses palettes dès le départ, en copiant la couleur de fond à l’index 0 de chaque palette et bien s’assurer que chaque bloc de 16×16 utilise les couleurs d’une seule palette uniquement.

NES Screen Tool

NES Screen Tool

Niveau tiles, certains logiciels de pixel art les gèrent nativement, ce qui permet de s’assurer qu’on ne dépasse pas la limite de 256. Sinon on peut simplement afficher une grille de 8×8 et veiller à réutiliser les mêmes tiles autant que possible. En guise de référence, ma petite maison ci-dessus n’en utilise que la moitié sur les 256 disponibles.

Également disponible dans la série « archéologie infographique » :

Publicités

Auteur : HP

Professionnel de l'industrie vidéoludique depuis plus de 15 ans, j'écris principalement sur l'infographie, le business des jeux vidéo et la demoscene.

4 réflexions sur “Archéologie infographique : le graphisme pour la NES

  1. la palette du MSX c’est pareil, des doublons en veux tu en voila ..

    • Je ne connais pas trop les contraintes du MSX, mais les capacités graphiques ont l’air de pas mal varier d’un modèle à l’autre, non ?

  2. Merci pour les infos sur le graphisme avec une Nes, en complément il y a cette chaîne youtube en français sur les graphismes de la nes dans certains jeux, l’auteur décortique quelque jeux en utilisant un émulateur pour comprendre la méthode utilisée par les programmeurs pour les graphismes et autres (fps,collision etc..), chaîne vraiment très intéressante.

    https://www.youtube.com/user/upsilandre/videos

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

w

Connexion à %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.