16 Couleurs

16 Couleurs – graphisme & jeu vidéo


9 Commentaires

Monstrombinoscope, image en collaboration avec Profil pour la VIP 2018

Petite expérimentation pour la VIP 2018 : une image en coopération avec Profil / Eclipse pour la compétition « oldschool graphics » ! J’avais fait la connaissance de Profil dans des demoparties alors que je débutais tout juste dans la demoscene (on parle quand même du dernier millénaire là !) et son talent et son attitude toujours très positive avaient été une inspiration importante pour moi.

Monstrombinoscope_x2

Monstrombinoscope, deuxième place dans la compétition oldschool graphics à la VIP 2018

Nous nous sommes un peu perdus de vue par la suite mais j’ai toujours souhaité avoir la possibilité de travailler ensemble sur un projet, chose qui a fini par se réaliser cette année. Nous nous y sommes évidemment pris trop tard pour espérer pouvoir présenter une image peaufinée comme il se doit, puisque que la machine s’est réellement mise en route une dizaine de jours avant la deadline. Ça aura néanmoins été une super expérience que j’espère avoir l’occasion de reproduire à l’avenir. Le contenu de l’image n’avait été discuté que dans ses grandes lignes au début du projet et donc les allez-retours du fichier ont généré leur lot de surprises quand un personnage inattendu surgissait sans crier gare. Le plus difficile a été de décider d’un thème en fait !

Il se trouve que le légendaire Ra a également présenté une image à la VIP. Ra, Profil, Exocet… on est en quelle année exactement ? 🙂

 

Publicités


4 Commentaires

Archéologie infographique : le graphisme pour la NES

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 » :


5 Commentaires

Speed Painting pour la Gamebuino Meta

La Gamebuino Meta est une petite console portable fabriquée en France et conçue comme un outil pour s’initier à la programmation. Les programmes sont écrits en C/C++ avec l’environnement de développement Arduino qui est très accessible. J’avais bricolé un petit slideshow pour la Gamebuino originale il y a quelques mois et je commence à me familiariser avec sa petite soeur qui présente l’avantage d’être plus puissante et de disposer d’un écran couleur. Où s’arrêtera le progrès ?

Je me suis donné 30 minutes dans Pro Motion NG pour tester le mode basse résolution (80×64) et la palette par défaut de la Gamebuino Meta. Voilà le résultat (également sur Youtube) :

Et ça s’affiche même sur la console avec un petit bout de code ! L’image finale est disponible ici.

Birduino sur la Gamebuino


1 commentaire

Stella À Trois, une intro 4 ko pour Atari 2600, et les prods marquantes de la Revision 2018

Stella À Trois est une petite intro 4 ko pour l’Atari 2600 que j’ai réalisée avec Flewww et Glafouk et qui fut présentée à la Revision le week-end dernier. Dans cette catégorie, la difficulté consiste évidemment à conserver la taille du programme sous la barre des 4096 octets tout en proposant des effets intéressants, ce qui limite grandement les possibilités. Ici je pense que les objets en dots mettent bien en valeur les capacités de la console. Le code source de l’intro est disponible sous licence GPL pour les plus curieux d’entre vous. Je tiens enfin à préciser que je suis seul responsable du jeu de mot vaseux utilisé pour le titre (Stella étant le nom de code de la console lors de son développement).

La Revision est considérée comme la demoparty la plus importante du moment et par conséquent on y découvre toujours beaucoup de productions très intéressantes. Voici quelques-unes de celles qui m’ont le plus impressionné cette année :

  • The Fall par Lemon et Deadliners : une démo Amiga 500 peaufinée à l’extrême et agrémentée de superbes graphs de Made.

 

  • Crank Crank Revolution par LFT et Redcrab : un petit jeu C64 humoristique, original et très bien réalisé.

 

  • Isometrikum par Vanity : une intro 4 ko pour Amstrad CPC très originale et agréable à regarder même en faisant abstraction des contraintes techniques.

 

  • Oscar’s Chair par Eos : une intro PC 4k très cinématique et extrêmement impressionnante. À cette taille là, la puissance des microprocesseurs modernes est mise à profit pour générer toutes les assets complexes : textures, samples, effets spéciaux… Pour référence, 4 ko c’est un fichier de 4096 caractères, soit 3 pages de roman ou probablement moins que le poids d’une icône sur votre bureau.

 

  • When Silence Dims The Stars Above par Conspiracy : du grand spectacle en 64 ko (grosso modo le poids d’un petit GIF). On arrive au point où la génération du contenu est tellement optimisée que la contrainte de taille se fait quasiment invisible. On croirait presque voir l’intro d’un jeu récent à gros budget.

 


1 commentaire

Alientis, pixel art pour Thomson TO8

Mi-mars : après la nuit polaire de ces 6 derniers mois, les premiers rayons du soleil caressent les immenses congères qui nous ont coupé du monde cet hiver. Les meutes de loups quittent peu à peu les rues du village pour les sombres bois qui le ceinturent. Le sang commence enfin à revenir dans mes doigts gourds et je peux même brièvement ôter mes moufles à l’intérieur pour réparer les dégâts causés par la neige et le gel. Dans quelques semaines la douche sera de nouveau utilisable ! Ces signes que l’hiver tire sa révérence, laissant derrière lui son habituel lot de désolation et de regrets amers, sont aussi le déclic pour mon nouveau vice : présenter une image Thomson à la Forever, une demoparty slovaque dédiée aux ordinateurs 8 bits.

Les Atari XL et XE, ZX Spectrum et Commodore 64 y sont les plus représentés, mais généralement on y découvrent aussi quelques productions pour Thomson. J’y ai participé en 2013, 2016 et 2017, portant à chaque fois fièrement l’étendard de l’apogée de la high-tech hexagonale des années 80.

Les Forever ont cette particularité que chaque édition propose un thème facultatif pour les productions. Cette année le thème était l’Atlantide et le hasard a fait que, alors que j’étais à la recherche d’une idée en rapport avec cette thématique, j’ai passé quatre soirées à regarder une nouvelle fois la quadrilogie Alien… Quelques connexions neuronales plus tard, voilà le résultat de ce crossover improbable :

Alientis, pour la Forever 2018. Image Thomson TO8 en 320×200, 16 couleurs.

Alientis, pour la Forever 2018. Image Thomson TO8 en 320×200, 16 couleurs.
Version originale sur Demozoo.

L’image utilise le mode 320×200, 16 couleurs des TO8/TO9+ avec une contrainte de proximité de deux couleurs maximum par bloc de 8×1 pixels. Elle a été réalisée avec Pro Motion NG, la nouvelle version du logiciel de dessin dédié au pixel art de Cosmigo. Une fonctionnalité particulièrement appréciable est la possibilité de tester instantanément si les contraintes de proximité sont bien respectées : il suffit de presser Alt + G pour voir les pixels problématiques s’afficher en rouge. On peut continuer à éditer l’image dans ce mode mais malheureusement les erreurs ne sont pas mises à jour en temps réel. Ici le color clash est je pense relativement discret à quelques exceptions près, la difficulté a plutôt été comme toujours de composer avec les couleurs mal étalonnées de la palette Thomson, avec très peu de choix dans les tons sombres. Pour définir la palette j’ai utilisé de nouveau le vénérable TGA2Teo.

Alientis s’est classée première (sur trois) dans la catégorie « Other 8-bit Graphics » de la Forever et a également remporté le prix « Eternity », décerné par les organisateurs à la contribution symbolisant le mieux le thème et l’atmosphère de la demoparty. Merci à eux ! Un grand merci également à Pulkomandy qui a accepté une fois de plus de me représenter sur place, en plus de toutes ses activités habituelles.

Alientis Timelapse

Alientis Timelapse


5 Commentaires

Pixels On The Line, une petite production pour la Gamebuino

N’écoutant que mon courage, j’ai voulu tenter quelque chose de nouveau pour la demoparty Cookie qui se déroulait en décembre dernier : j’allais programmer une petite production pour la Gamebuino (#YOLO). Je possède la console depuis 3 ans sans avoir fait grand chose avec, et sa petite sœur se profilant à l’horizon, c’était maintenant ou jamais.

Précisons pour corser un peu les choses que :

  • Je suis un n00b perpétuel en programmation avec des connaissances en QuickBasic, GFA Basic et Python qui sont restées très rudimentaires. Pour la Gamebuino c’est du C/C++.
  • Le développement sur Gamebuino était pour moi une véritable terre inconnue. J’avais regardé rapidement quelques exemples lors de la sortie de la machine, mais je n’étais pas allé plus loin, ne serait-ce qu’installer l’IDE.
  • Enfin je voulais ne travailler sur le projet que lors de plages horaires spécifiques, étant déjà bien occupé par mes contributions pour la SillyVenture (une image Atari ST et une démo Atari 2600) qui prenait place le même weekend que la Cookie : le travail devait donc principalement prendre place lors de mes trajets dans les transports en commun et pendant ma pause de midi au bureau.

Mon objectif était donc modeste : réussir dans le temps imparti à faire tourner quelque chose de pas trop honteux sur la console. Le choix du slideshow s’est un peu imposé tout seul du fait du ratio graphisme / code tout à fait à mon avantage.

Gamebuino Classic

La Gamebuino est une toute petite console portable à base d’Arduino, sortie fin 2014 et conçue et fabriquée à Saint-Étienne. Le prix était très modeste (35 euros) et les performances à l’avenant :

  • Processeur : Atmega328 à 16Mhz
  • Mémoire vive : 2 kb
  • Affichage : écran monochrome de 84×48 pixels recyclé de vieux Nokia 5110
  • Son : 4 canaux mono
L'easing à la main

L’easing à la main

On développe pour la plateforme à l’aide de l’IDE Arduino auquel on ajoute la librairie Gamebuino qui donne accès à des fonctions orientées jeu vidéo. En ce qui concerne Pixels On The Line, le programme est très simple puisqu’il se limite à afficher des images et à jouer une musique. Pour la version finale j’ai néanmoins ajouté un effet de transition « rideau » avec easing s’il vous plaît (c’est à dire le ralentissement au début et à la fin du mouvement qui donne un résultat beaucoup plus naturel). Mon support de l’easing est assez rustique puisqu’il se borne à incrémenter les coordonnées de l’image avec les valeurs d’une array… valeurs déterminées grâce à un dessin dans un tableur.

90% des graphismes ont été réalisés sur smartphone à l’aide d’un stylet Stilo 2A et des applications Android Pixel Maker et Pixel Touch que j’avais évoquées auparavant. Les trames ont été ajoutées avec D-Pixed, un antique logiciel Windows que j’avais utilisé brièvement il y a très longtemps et qui est le seul que j’ai pu trouver supportant correctement cette fonction.

La musique a été une autre paire de manches. Il existe en théorie deux sound trackers pour la Gamebuino, mais dans les faits aucun n’a été réellement fini et on est confronté au dilemme suivant :

  • utiliser un tracker qui permet d’entendre ce que l’on compose mais ne permet pas d’exporter le morceau ;
  • utiliser un tracker qui permet d’exporter le morceau mais qui ne permet pas d’entendre ce que l’on compose.

J’ai opté pour la deuxième solution en étant convaincu que ça n’allait pas aider mon manque de compétence en composition musicale… Glafouk a pu m’aider en me fournissant une petite mélodie que j’ai essayé de retranscrire laborieusement dans GBTracker, mais toutes les notes n’étant pas apparemment disponibles j’ai dû improviser un peu, tout en ayant aucune idée de ce que je faisais concrètement. Malgré ma grande patience, la procédure a été à la limite du supportable et encore plus pénible que l’écoute du résultat final.

Le slideshow ne casse pas trois pattes à un canard mais j’ai atteint l’objectif que je m’étais fixé et je suis plutôt satisfait du résultat au vu de mes compétences en programmation et les conditions de réalisation. Si l’envie vous en prend de regarder la démo avec un émulateur, utilisez Simbuino pour Windows ou Simbuino4web qui lui tourne dans un navigateur.

S’il s’agit de ma première production pour la console, ce sera aussi très probablement ma dernière puisque j’ai précommandé sa petite sœur (la Gamebuino Meta) dont la sortie est imminente. L’écran couleur sera le bienvenu et idéalement on pourra compter sur un meilleur sound tracker !

 


Poster un commentaire

Réaliser un time-lapse de captures d’écran avec des logiciels gratuits

Voilà un petit billet qui détaille la procédure que j’ai suivie pour la création de la vidéo timelapse de The Den sous Windows 10 et qui j’espère pourra s’avérer utile à certains d’entre vous qui lisez ceci. Bon je l’avoue, l’un des autres buts du billet est aussi que si l’envie me reprend de réaliser la même chose dans six mois ou deux ans, je n’aurai pas à tâtonner autant que j’ai eu à le faire cette fois-ci. Mais ça c’est plutôt du bonus.

Le budget de l’opération a été maîtrisé puisque je n’ai utilisé que des logiciels gratuits et même open source pour les deux derniers :

  • Auto Screen Capture pour les captures d’écran automatiques à intervalle régulier ;
  • FFmpeg pour convertir les séquences d’images en vidéo MP4 ;
  • Shotcut enfin pour le montage : enchaînement de différentes vidéos et ajout du titre et de la bande son.

La bande-son est quant à elle constituée de fichiers MOD (modules Amiga 4 canaux) convertis en WAV à l’aide d’XMPlay.

Le tout-gratuit s’est un peu fait par hasard puisqu’il s’est avéré qu’Adobe Premiere, que j’utilise généralement pour le montage, supportait mal les vidéos générées par FFmpeg, d’où le recours à Shotcut. Ce dernier utilisant les librairies de FFmpeg, des problèmes de compatibilité auraient été étonnants.

Première étape : automatiser la capture d’écran avec Auto Screen Capture (qui au passage ne pèse qu’un peu plus de 200 ko, c’est assez rare de nos jours pour le signaler !). J’ai utilisé une fréquence de deux secondes qui permet d’avoir un résultat final accéléré 50 fois pour une vidéo en 25 images par seconde. Auto Screen génère au moins deux formats de capture : plein écran (répertoire « 1 ») ou seulement la fenêtre active (répertoire « 5 »). C’est ce dernier que j’ai choisi, mais il vaudra veiller à faire un peu de nettoyage plus tard, Auto Screen capturant autre chose si on bricole avec d’autres fenêtres (forcément).

Auto Screen Capture screenshot

Auto Screen Capture

Deuxième étape : passer toutes les images à la moulinette FFmpeg. Il faut d’abord toutes les renommer comme il faut, ici une suite de 8 chiffres. J’utilise pour cela Total Commander (c’est bien, mangez en) mais il y a plein d’autres façons d’arriver au même résultat. Ensuite il suffit de taper une ligne de commande pleine de poésie pour invoquer FFmpeg :

ffmpeg -i %08d.png -framerate 25 -s 1920x1080 -vcodec libx264 output.mp4

Quelques minutes se passent ensuite où vous aurez le loisir d’apprécier le bruit des ventilateurs de votre PC, calcul intensif oblige.

Pour cette vidéo, les captures ayant été faites sur différents ordinateurs, j’avais des séquences d’images de différentes résolutions que FFmpeg a dû toutes convertir en 1920×1080. La procédure est probablement plus simple sans ce détail.

Troisième étape : importer les vidéos ainsi réalisées dans Shotcut, éventuellement assorties d’une bande son et d’images fixes. Je n’ai ni le temps ni la compétence pour réaliser un tutoriel sur l’utilisation de Shotcut, mais l’interface est relativement classique avec différentes pistes vidéo et audio sur lesquelles on place le contenu source. On peut ajouter quelques effets en positionnant le curseur en haut à droite d’un élément et en faisant un glisser-déposer quand un petit cercle palpitant apparaît. On peut par la suite exporter le tout grâce à l’icône Export en haut puis au bouton Export File en bas du menu suivant.

Shotcut screenshot

Shotcut

Enfin il n’y a plus qu’à uploader le tout sur YouTube ou équivalent. À vous les millions de vues et de followers et la vie de rêve d’un influenceur digital native qui fait du buzz.