Graphismes ASCII : comment nous dessinons une ville entière en texte

Un dessin, c’est deux lignes de texte

Chaque dessin du jeu est une liste de paires de lignes de même largeur. La première ligne est l’image elle-même, les caractères que vous verriez dans un éditeur de texte. La seconde est une carte des couleurs : une lettre par caractère, qui renvoie à une entrée de la palette du dessin donnant une couleur au glyphe et une couleur à son fond. Une espace dans la carte des couleurs signifie la transparence ; une espace dans le texte sous une couleur signifie un fond plein.

C’est tout le format. Un puits avec son toit et sa corde, un grenier, la porte d’un rempart : chacun est tapé ainsi, et un test vérifie la largeur et la hauteur de chaque dessin avant qu’il puisse entrer dans le jeu.

Une grille de 16 sur 8

Une case de la carte fait 16 caractères de large et 8 de haut, une proportion 2:1 adaptée à la vue de trois quarts. Un bâtiment qui couvre w×h cases fait exactement 16·w caractères de large. Ses 8·h rangées du bas forment sa base, posée sur ses cases ; tout ce qui est au-dessus, toit, drapeau ou fumée, déborde sur la case située derrière. C’est ce débord qui donne de la profondeur à une rue : les toits d’une rangée couvrent en partie la route derrière eux, comme dans les city builders isométriques classiques. La raison de cette taille de grille est racontée dans de 10×5 à 16×8.

Du texte à la lumière

Les caractères sont dessinés sur un canevas en WebGL2. Chaque glyphe qui apparaît à l’écran entre dans un atlas de textures, et chaque image est dessinée depuis cet atlas en une seule passe. Le shader ajoute ce que le texte brut ne peut pas avoir : une texture de surface, du volume, de la lumière et les ombres que bâtiments et marcheurs projettent sur la route. Là où WebGL2 manque, un moteur de rendu Canvas simple dessine la même ville plus sobrement.

Dans le style dense, chaque caractère est subdivisé en traits plus fins, si bien que même un petit détail a de la texture
Le sol, les routes et l’eau sont dessinés une seule fois dans une couche mise en cache ; seul ce qui bouge est redessiné
La nuit, fenêtres, lanternes et feux luisent, et les lanternes s’allument en vague au crépuscule
Dézoomez et une enseigne se fond en une tache d’or sur laque ; zoomez et son caractère devient net

De vrais caractères chinois sur les enseignes

C’est sur les enseignes que le texte devient littéral. Vingt-huit sortes de bâtiments portent de vrais caractères chinois, dans les formes traditionnelles en usage sous les Qin et les Han, en or sur laque : 市 au-dessus du marché, 倉 au-dessus du grenier, 井 sur le puits, 廟 sur le temple, 鹽鐵 sur l’Office du sel et du fer, 未央 au-dessus du palais Weiyang. Ils proviennent d’une petite police qui ne contient que les caractères dont le jeu a besoin, environ 14 Ko.

Pourquoi pas un simple filtre

Convertir un rendu 3D en ASCII est une astuce bien connue, et l’effet est saisissant. Mais des caractères choisis selon la luminosité, c’est du bruit ; des caractères choisis par une personne, c’est du dessin. Une rangée de tuiles se lit comme des tuiles parce que quelqu’un l’a tapée comme des tuiles. Garder les dessins en texte signifie aussi que la ville peut toujours être montrée en texte : maintenez la touche ² pour les Symboles, ou enregistrez une vue en fichier .txt.

Et cela reste léger

Le texte est compact. Les dessins sont petits, la police est petite, et le réglage graphique bas revient aux dessins plus grossiers en 10×5 et renonce à la nuit et aux effets, ce qui garde le jeu jouable sur les vieux portables. Vous pouvez voir ce rendu en mouvement dans les vidéos, et le genre dont il vient dans les jeux comme Pharaon et Caesar 3.

Glyph Dynasty arrive bientôt sur Steam, pour Windows, macOS et Linux. Regardez les vidéos, suivez l’histoire du développement ou ouvrez le dossier de presse.