Vous êtes-vous déjà demandé comment fonctionnaient les graphismes de vos jeux vidéo préférés ? C’est le début d’une série sur les graphismes des jeux, et quel meilleur endroit pour commencer que la façon dont le Mario Bros. original a fait apparaître ces glorieux pixels pixelisés à l’écran. Attachez-vous, car nous faisons la course avec des systèmes comme la NES, le Commodore 64 et de nombreux autres classiques des années 1980.
Et pour comprendre les années 1980, il est important de comprendre comment fonctionnaient les téléviseurs de l’époque. Les téléviseurs à tube cathodique (CRT) fonctionnent en bombardant avec précision une couche de phosphore avec des électrons, ce qui excite le phosphore, qui libère ensuite de la lumière visible. Le faisceau balaie de gauche à droite puis de haut en bas, donnant à chaque pixel une petite fraction de seconde. Tout cela signifie effectivement que les données des pixels doivent être envoyées en même temps que lorsque les pixels sont allumés, c’est pourquoi ce type de graphique est souvent surnommé « course contre le faisceau ».
Une autre chose à comprendre à propos des années 1980 est que 64 Ko représentaient beaucoup de mémoire. À l’époque, il n’y avait presque jamais assez de mémoire pour stocker une image entière de vidéo, et les processeurs de l’époque n’étaient pas non plus assez rapides pour remplir un tel framebuffer. Pour cette raison, ces ordinateurs regroupaient 8 x 8 pixels en « tuiles » ou « caractères » et les utilisaient à plusieurs reprises lorsqu’ils en avaient besoin, réduisant considérablement la quantité de mémoire requise. Une telle tuile est généralement représentée par un seul octet dans la mémoire « carte de tuiles », qui est à son tour utilisée comme index dans les « données de tuiles », qui stockent réellement les images des tuiles.
Coloriage par numéros
Les couleurs ont été mises en œuvre de différentes manières, mais il existe deux solutions beaucoup plus courantes que les autres : les couleurs des carreaux et les palettes de carreaux.
L’approche la plus simple des deux, que j’appelle « Couleurs de tuiles », vous donne deux couleurs avec lesquelles travailler. La vignette stocke « l’image », puis la colore avec une couleur de premier plan par vignette, sur une couleur d’arrière-plan plus grande. La couleur des tuiles était stockée de la même manière que la carte des tuiles et constituait un simple index d’une valeur de couleur. Par exemple, le Commodore 64 utilise une couleur d’arrière-plan partagée sur toutes les vignettes et une autre couleur de premier plan par vignette.
Utiliser uniquement des couleurs de tuiles et une couleur d’arrière-plan peut sembler très restrictif (et c’est le cas), mais cela n’a pas empêché les jeux Commodore 64 d’avoir fière allure. Cette capture d’écran démontre très bien les limites techniques des couleurs de tuiles, montrant clairement un fond noir avec une seule couleur par tuile au premier plan, mais également des tuiles de couleurs différentes.
L’approche la plus avancée consiste à utiliser plusieurs bits par pixel dans les données de mosaïque et à attribuer une palette à une mosaïque à l’aide des données de couleur. Comme c’est le cas ici, les palettes de couleurs se trouvaient dans un autre élément de mémoire, bien que cette fois, elles se trouvent généralement dans la puce vidéo réelle au lieu de la RAM.
Cette capture d’écran montre une combinaison de plusieurs calques pour les tuiles et de palettes pour ces tuiles, permettant respectivement le défilement parallaxe d’un arrière-plan et de tuiles plus colorées.
Modes bitmap
(Concubisme par Archimage)
Certains jeux décident d’utiliser plus de mémoire en échange d’une résolution plus élevée. Dans de tels « modes bitmap », il n’y a pas de « données de tuile » à rechercher car au lieu d’utiliser des tuiles, les données d’image sont utilisées directement. Les modes Bitmap échangent de la mémoire contre des détails, mais utilisent toujours des morceaux de la taille d’une tuile pour les couleurs. Cela représente souvent huit fois plus de mémoire, car les tuiles sont huit par huit, ce qui est souvent trop si vous souhaitez également jouer à un jeu. Mais pour les quelques jeux qui utilisent le mode bitmap pendant le jeu, il y a un autre inconvénient : la mise à jour prend plusieurs fois plus de temps que les tuiles.
Cet art montre de quoi un Commodore 64 est capable en mode bitmap multicolore. Dans ce mode, les pixels sont étirés horizontalement et peuvent avoir l’une des quatre couleurs suivantes : arrière-plan, alterné 1 et 2 et premier plan. Cet art combine le mode bitmap multicolore et le tramage manuel pour donner l’illusion d’une résolution couleur plus élevée.
Lutins
Les vignettes sont idéales pour les images d’arrière-plan statiques, mais peuvent être assez limitantes lors de l’affichage de caractères en mouvement, et le mode bitmap ne résoudra toujours pas les couleurs conflictuelles. C’est là qu’interviennent les sprites : les sprites sont généralement constitués d’une ou plusieurs tuiles, ou de minuscules images bitmap, qui peuvent être placées arbitrairement sur l’écran. Au lieu de remplacer tous les pixels comme le font les tuiles, les sprites sont superposés sur l’image d’arrière-plan.
Cette capture d’écran de Super Mario World montre environ 16 sprites, soit la moitié du nombre que la SNES peut afficher sur une seule ligne de balayage. Mario, la carapace, les points et les tortues sont tous rendus sous forme de sprites.
Sur la SNES, par exemple, les sprites sont de minuscules images bitmap qui utilisent des palettes de la même manière que les tuiles, elles sont donc encore plus flexibles. Le rendu à l’écran était pris en charge par le matériel graphique, de sorte que la surcharge du processeur liée à l’utilisation d’un sprite était minime.
Interruptions de la ligne de balayage
Les interruptions de ligne de balayage sont une technique qui dépend davantage du processeur que de la puce graphique. Ils utilisent le fait que la puce vidéo doit nécessairement savoir quelle ligne de balayage elle dessine pour synchroniser le CPU avec elle. Cela permet des effets qui restituent chaque ligne de balayage normalement, mais modifient les paramètres entre lesdites lignes de balayage.
Cela permet aux jeux d’afficher plusieurs modes graphiques différents, plus de sprites qu’il ne peut y en avoir sur une seule ligne de balayage, ou même de créer l’illusion de la 3D ! En combinaison avec des transformations affines, Super Mario Kart a créé l’illusion de profondeur. La rue est composée des mêmes motifs alternés, mais selon l’endroit où ils sont dessinés sur l’écran, ils sont plus ou moins larges, décalés vers la gauche ou la droite, et voilà, l’illusion est totale.
Nous parlerons plus tard des calculs matriciels dans les graphiques du jeu, mais notez qu’il s’agit simplement de multiplier pour changer la largeur et d’ajouter un décalage pour créer une courbe de route.
Conclusion
Bien que la course au faisceau soit une approche graphique très différente de celle que nous avons actuellement, il est tout à fait possible de donner une belle apparence aux jeux et même de créer de très belles illustrations. Les vignettes de base sont efficaces pour afficher du texte, mais sont inférieures en termes de détails au mode bitmap. D’un autre côté, le mode bitmap consomme beaucoup plus de mémoire que les tuiles et est trop détaillé pour être mis à jour efficacement par les seuls processeurs des années 1980. Les sprites peuvent être utilisés pour avoir des éléments mobiles dans des scènes autrement « statiques » et sont présents dans presque toutes les implémentations de course de faisceau. Enfin, les interruptions de ligne de balayage permettent aux programmeurs de tirer le meilleur parti du matériel en modifiant stratégiquement les paramètres au moment idéal. En rassemblant tout cela, un plombier animé peut conduire un kart à pédales.
Ensuite, nous remonterons dans le temps, à l’époque où la mémoire n’était pas si rare, et parlerons des graphiques 2D de base avec un framebuffer et de la manière dont les primitives de forme sont dessinées. À plus tard!
