le génie des graphistes des années 80

[F.L]

salut à tous
depuis que je me suis mis à la programmation sur megadrive, je me rends compte petit à petit du talent et parfois meme du génie des programmeurs des années 80.
et en particulier pour les graphismes
en ayant pris le choix d'utiliser les datas pour afficher les graphismes et comme j'utilise
le language Basic,
je suis face aux memes problemes qu'avaient les programmeurs dans ces années là :
pas beaucoup de mémoire et d'espace pour afficher le décors et les sprites (surtout quand il a une musique à integrer !)

par la force des choses je me suis rendu compte qu'un decor
comme celui de Barbarian ne pouvait pas etre affiché tel quel



et pourtant cette image est modeste : 320x200 et 16 couleurs. ça ne represente rien pour les ordis de maintenant (meme pour un smartphone pourrait l'afficher )
mais pour les ordis de l'epoque, des graphismes comme ça, c'etait enorme !

en reflechissant devant mon ecran, je me suis rendu compte d'une première astuce que programmeurs/graphistes de cette époque usaient et abusaient:
des elements similaires qu'ils affichaient plusieurs fois pour faire un ensemble
par exemple , le pilier de gauche



est en fait constitué de plusieurs fois cet element :


c'est ingénieux et surtout quand c'est bien fait comme ici,
on ne s'en rends pratiquement pas compte.
ceci faisait economiser des lignes de data ,et donc de la place sur la disquette,
mais aussi cela faisait utiliser moins de mémoire vive, et donc de la rapidité d'execution.
c'est pour cela que les premiers jeux vidéo n'affichaient pas grand chose à l'ecran.

ce n'est pas tout,
il y a encore plus ingénieux. c'est l'effet miroir
ils utilisaient les memes elements qu'il mettaient à l'envers à un autre endroit :


et tout ceci rien qu'avec quelques "tiles" !
une "tile" en un carré de 8 pixels sur 8 pixels qui s'affiche à l'ecran.
chaque pixel est un chiffre, à qui on attribue un couleur.
une tile represente donc 64 chiffres à placer en mémoire. imaginez le nombre de chiffres à placer en memoire pour afficher une image de 320x200 sans ces combines!

et ceci n'est qu'un debut dans les astuces des graphistes de Barbarian.
comme chaque couleur est un chiffre, on peut facilement changer la couleur de ce chiffre quand on affiche les tiles,
par exemple les piliers de la version C64 :



la couleur des deux piliers est differente, et pourtant il s'agit toujours des memes tiles !
tout comme les deux barbares.
en changeant la couleur des chiffres et en les reversant, on obtient deux barbares
completement differents alors que ce sont les memes !


tout ceci est futé mais encore trop visible. là où les vrais graphistes talenteux faisaient toute la difference, c'est quand cela ne se voyait pas.
regarder ce decor de "plaine" issu de ma version AppleII.
j'ai utilisé betement l'effet miroir mais c'est trop visible :



toute la moitié gauche de l'ecran est renversé à doite, et quand on regarde le sol
ça fait penser un peu à ces dessins fait avec des taches de peinture ecrasées.

ensuite, en regardant longement la version originale je me suis rendu compte que les graphistes avaient combine les deux methodes : effet miroir + changement de couleur pour les decors aussi !

donc voici le dessin "brut" du sol de la plaine, version C64 :



si on remplace la couleur jaune par du marron, cela donne ça :



et si on renverse le dessin à droite, et qu'on lui change la couleur jaune en gris,ca donne :



et les deux collés cote à cote :



l'impression de symétrie est cassée. on a l'impression de voir une image large alors que c'est deux fois la meme. on est quasiment face à une illusion d'optique.

quand je parlais de génie, je n'etais pas loin !
j'espere que ces exemples vous auront plu, et que vous vous rendrez encore plus compte du travail qu'executaient les programmeurs des années 80, quand vous jouez à un jeu rétro.

peut etre que vous allez faire comme moi maintenant : traquer les tiles similaires et les effets miroir !!!
si vous en trouvez des interessantes dans d'autres jeux,
ça serait sympa de les poster ici pourquoi pas


....

si vous avez tout lu jusqu'à maintenant c'est que vous n'avez pas encore décroché avec mes histoires de couleurs modifiables et de tiles renversables horizontalement.

donc je peux vous montrer qu'on pouvait aussi les inverser verticalement.
mais aussi combiner les deux !!

par exemple, cette image issu de mes remakes :



cela serait trop facile de l'afficher telle quelle, alors qu'elle est en fait
composée de quatre fois la meme image que voici :



pour afficher l'image entière , je retourne les tiles de l'image :
- horizontalement en haut à droite
- verticalement en bas à gauche
- horizontallement et verticalement en bas à droite


on economise des tiles, mais on gagne aussi un beau mal de tete !
car quand on retourne une image, l'ordre d'affichage des tiles est lui aussi inversé
il faut en tenir compte
par exemple, elles seront affichées de droite à gauche mais aussi
de bas en haut pour celle en bas à droite....

voici l'ordre d'affichage des tiles suivant leur retournement



voila, il y a surement encore d'autres astuces que je n'ai pas encore decouvert.
il faut dire que je suis autodidacte,et que je decouvre tout au fur et à mesure..
.
en me rendant compte de tout ceci, j'ai encore plus d'amiration envers tout ces jeux
que les programmeurs de l'epoque ont reussi à pondre !


j'espere que quand vous essayerez maintenant des jeux faits en graphismes à l'ancienne sur megadrive comme le mien ou celui de bonaf "SMS brawl"
vous vous rendrez compte à quel point on en bave pour y arriver
faire de la rétro-programmation sur console c'est un peu du masochisme,
mais quelle satisfaction quand le jeu est fini !
@+
F.L

[lemanscity72]

Pas mal l'artiste !!! Cela change des topics à la noix sur la next gen et les kékés qui vont avec (Oui je suis un vieux con et alors ?       )

En tout cas, cela prouve ce que j'ai toujours dit : Il fallait être un artiste à l'époque !

Continu l'ami c'est excellent !

[drfloyd]

Super sujet !

Les tiles des jeux d'action etaient super bien pensées. Je me rappelle à l'epoque d'avoir "craqué" la page de tiles de Bionic Commando. J'etais surpris de voir que touts les graphismes du jeu tenaient sur une page 320x200 de qq tiles.

Quand on programme on apprécie encore plus les jeux d'epoque car on sait qu'il fallait etre super astucieux pour la programmation mais aussi pour les graphismes, le tout dans qq Ko.

C'etait un véritable défi de faire un jeu. Défi de programamtion, et défi d'artiste.

[ichigobankai]

Tout ce qui touche au tiles/tilemap est plutot bien connu des gens faisant des homebrews 8 ou 16 bits.

Il existe des logiciels pour faire le mapping (Tiled par exemple, qui est gratuit & excellent), il faut juste coder un petit script pour convertir à votre guise les fichiers de sortie dans un autre format qui vous simplifiera la vie niveau intégration. (le format d'export de base étant en json)

exemple sous Tiled,


A l'origine Tiled génère ca en sortie :


avec un bout de script, on peut obtenir ca : (perso c'est fait en PHP -car je maitrise bien la chose-, mais on peut faire ca en C, Python...)

(la meme "forme" que ce que bmp2tiles génère, spécifique à la master system)


On parle aussi souvent de metatiles, des blocs de tiles de 2x2 tiles (ou plus). Technique que je n'aime pas car provoque un décor bien trop répétitif à mon gout (mais fait gagner en compression/taille de données et en vitesse de mise en place du tilemap).
Il y aussi un point assez important à prendre en compte, le nombre de tiles stockable en vram selon la machine (là c'est propre a chaque machine) qui limite le délire graphique et donc où l'on doit faire preuve de subtilités et d'ingéniosité...

petits chiffres :
- master system : 448 tiles (2 palettes 16 couleurs, 1 background/tiles - 1 sprites)*
- megadrive : 2048 tiles (4 palettes 16 couleurs)*

*par défaut.

Le morceau le plus compliqué, a mon sens, n'est pas la création des tiles/tilemap eux même, mais le jonglage & choix de palettes sur des tiles pour faire sortir le maximum de couleurs (et pas seulement 16 du plan imparti). L'organisation de la palette elle même n'est pas non plus a faire n'importe comment si l'on veut pouvoir faire du color cycling, ou avoir la bonne couleur pour le backdrop.

Imaginez gérer les X palettes et tiles d'un Metal Slug sur Neo•Geo, chaque palette étant faite de 16 couleurs (enfin 15 + backdrop) et chaque tile ne pouvant avoir qu'une palette attribuée...bonjour la prise de tete et le casse tête chinois géant.

[heyjoe07]

Bravo pour ton article ,c'est très intéressant, bien développé et fait avec simplicité,du coup j'ai pu comprendre les aspects techniques que tu décris et je suis une bille en informatique ! je vais suivre le sujet du coup.
PS : j'ai eu la même remarque que toi en étudiant les compositeurs de musiques de jeux de l’époque .donc "émerveillement" partagé.

[philip]

Oui, c'est un beau casse tête de tout faire rentrer dans 64Ko de Vram pour le Megadrive, l'utilisation de tiles est donc obligatoire.

[beddy]

L'astuce des tuiles était judicieux et évidement nécessaire vu la capacité mémoire des machines de l'époque. Comme tu l'as aussi souligné certaines machines ajoutaient des fonctions câblées comme la possibilité de réaliser des rotations ou des symétries de tuiles ou sprites afin de gagner plus d'espace de mémoire. 

Mais le plus spectaculaire, je pense n'ai pas cet aspect technique. Ce que je trouve fascinant c'est les graphistes de l'époque qui arrivaient à sortir des maps de jeux vraiment surprenante vu les contraintes techniques. 

Si vous prenez un machine comme le commodore 64 vous aviez 256 caractères (en 3 couleurs + le fond) re-définissables et les graphistes arrivaient à créer des maps hyper riches. Ces graphistes travaillaient avec de sacrées contraintes techniques.  

Quand je me suis attaqué au projet d'I2PCE je me suis rendu compte que de profiter pleinement des capacités graphiques de le PC-Engine était un vrai casse tête chinois. C'est pour cette raisons que les capacités d'affichage couleur n'était pas pleinement exploité à l'époque. 

I2PCE permet une conversion des images qui me semble n'était pas réalisable à l'époque de la PC-Engine. J'ai quand même eu besoin d'une machine moderne pour réaliser mes calculs. 

Mais pour revenir à ton sujet, il est vrai et sans faire le nostalgique que la programmation des années 80 avait de vraies saveurs et était très stimulante de part ses contraintes techniques. On était très proche du hardware et c'était vraiment passionnant. Je pense que c'est aussi ça qui fait qu'il y a encore des personnes qui codent sur ces machines. C'est un plaisir unique en programmation.

[lincruste]

Y'a le grand classique de Mario:



Et les auteurs de Duke Nukem qui sont tellement des génies de l'économie des ressources qu'ils sont allé piocher dans la VRAM des voisins:
nemmelheim.de/turrican/news/duke

[F.L]

bien vu !
merci de tenir le sujet vivant avec vos trouvailles !  

[drfloyd]

piquer des graphismes aux autres et les deguiser ca a du etre assez courant à l'epoque.

[F.L]

hello
je remonte le sujet car je viens de decouvrir encore une astuce des programmeurs de Barbarian,
sur la version Spectrum cette fois-ci
sur l'image ci-dessous, voici les deux persos :

l'adversaire est très proche de votre barbare : il a une croix sur le torse et un masque sur la tete.
afin de gagner en place sur la disquette et aussi en memoire vive, je me doutais bien
que les programmeurs de l'epoque n'utilisais pas deux séries de sprites si ressemblant...
mais je me suis toujours demandé comment ils avaient fait.
après quelques (longues) manip, j'ai enfin trouvé comment passer du héros à l'ennemi

pour faire le sprite ennemi, il faut remplacer le jaune et le vert par du noir, le rouge et le blanc pas du gris
pour le heros, il faut remplacer le jaune par du gris, et le rouge par du noir, le jaune et le blanc par la couleur transparente.....
et voici en vidéo comment ça se passe :
http://fl.basic.free.fr/graphistes/spectrum.wmv
futé
voila. grace à cette trouvaille je viens de trouver comment faire plus tard la version Spectrum de Barbarian
sur Megadrive. j'espere en 2015 !
@+