16 Couleurs

16 Couleurs – graphisme & jeu vidéo


4 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 !

 

Publicités


8 Commentaires

The Den, pixel art pour Atari STE

Une fois la décision prise d’assister à la demoparty Silly Venture qui s’est tenue à Gdansk en Pologne du 8 au 10 décembre, je ne voulais pas arriver les mains vides (même si j’avais déjà une démo Atari 2600 sur le feu), en particulier pour la compétition de graphs Atari ST dans laquelle j’ai eu l’occasion de participer en 2014 et 2016. Cette année ma contribution a terminé deuxième derrière une image de Carrion que je trouve très réussie.

The Den, Atari STE pixel art

The Den, image Atari STE pour la Silly Venture 2017 (taille doublée)

En plus d’être de saison, le thème me trottait dans la tête depuis longtemps, au point où j’avais envisagé de préparer une image un peu similaire, même si plus champêtre et plus estivale, pour la précédente édition de la Silly Venture.

Comme d’habitude pour la machine, l’image est en 320×200 pixels en 16 couleurs grace à la palette étendue de l’Atari STE (16 niveaux par composante rouge, verte et bleue pour un total de 4096 couleurs, à comparer aux maigres 512 couleurs des ST et STF). Le travail a pris à peu près 20 heures des premières ébauches sur papier jusqu’à l’image finale.

Pour la première fois pour moi, j’ai enregistré la totalité du processus de création en faisant une capture d’écran de Grafx2 toutes les deux secondes. Après la conversion des quelques 29000 images en une petite vidéo de 17 minutes, vous pouvez maintenant avoir un aperçu ma façon de travailler en 50 fois plus rapide. La bande son provient elle des diskmags Imphobia que je lisais il y a une vingtaine d’années et dont les musiques m’ont marqué durablement (pas trop de séquelles à part ça, merci).

Pour compenser mes lacunes en perspective et m’assurer que l’agencement de la pièce était physiquement possible en trois dimensions, j’ai utilisé comme référence un rendu 3D des formes de base, d’où la présence de la grille en début de vidéo quand j’esquisse les meubles.

L’avantage de ce genre de vidéo je pense est de se rappeler que les premières étapes d’un processus créatif ressemblent rarement à grand chose et que ce n’est qu’avec de l’huile de coude et de la patience qu’on arrive petit à petit à obtenir un résultat correct. L’important est donc de persévérer, comme l’écrivait si bien Boileau :

Hâtez-vous lentement, et sans perdre courage,
Vingt fois sur le métier remettez votre ouvrage,
Polissez-le sans cesse, et le repolissez,
Ajoutez quelquefois, et souvent effacez.

J’en profite pour vous souhaiter une bonne année 2018 à tous ! Si j’avais un vœu à formuler pour cette nouvelle année, ce serait de pouvoir dessiner aussi vite que sur la vidéo ci-dessus 🙂


2 Commentaires

40 years par Flush, une démo Atari 2600 pour la Silly Venture 2017

Atari VCS 40th anniversary

Après .bin en avril, j’ai récemment eu l’opportunité de participer à une nouvelle démo pour l’Atari 2600, dédiée aux 40 ans de la console. Je vous laisse le soin d’apprécier le chemin parcouru depuis en matière de jeu vidéo.

Une des particularités de la démo est de faire usage d’un nouveau mode graphique conçu par Tjoppen qui met à profit les sprites pour pouvoir afficher une image en 40×96 avec jusqu’à 3 couleurs par ligne (la couleur de base, unique pour toute l’image et en pleine résolution + deux couleurs en résolution 4×1, affichées en arrière plan). Ceci permet d’afficher des images un tantinet plus colorées qu’habituellement sur la machine, comme on peut voir sur mes deux images ci-dessous. Celles-ci ont été réalisées dans l’urgence sur place et dans des conditions pas franchement idéales, il y a certainement moyen de faire beaucoup mieux en prenant son temps.

Atari VCS new graphic mode

Pour finir, une version de la bougie animée en mode plein écran, qui n’a malheureusement pas pu être intégrée à la démo par manque de place. Comme quoi 32 ko ça se remplit assez rapidement en fait 🙂

Niveau émulateur, je peux conseiller l’utilisation de Stella qui est un peu la référence en matière de VCS et qui présente l’avantage de tourner sur toutes les plateformes.

Atari 2600 joystick candle

 


5 Commentaires

Le graphisme sur Atari 2600

On peut difficilement imaginer plus oldschool et rustique que l’Atari 2600 (ou VCS) : sortie en 1977, la première console d’Atari a été conçue avec un cahier des charges des plus drastiques : créer une machine qui permettrait grosso modo de faire tourner le Tank d’Atari/Kee Games pour un coût minimum.

Les p’tits gars de Flush qui sont des gens très bien m’ont donné l’opportunité de faire mes armes sur la 2600 en vue d’une démo pour la Revision 2017. La coopération s’est très bien passée et on a pu se côtoyer lors de la party sans que ça se termine en pugilat sur le parking d’une zone commerciale de Sarrebruck. Je pense qu’on est même tous contents du résultat : une démo propre et originale sur une machine où les productions ne se bousculent pas. La musique en particulier est à des années-lumières des premières démos VCS grâce au talent de Glafouk et de l’existence d’un outil dédié : TIATracker.

Les capacités graphiques de la machine sont évidemment très limitées : résolution de 40×192 théoriquement (c’est bien 40, il ne manque pas un chiffre), même si .bin tourne en fait en 40×248, et seulement 1 couleur par ligne sur les deux « calques » (background et playfield, les pixels sur ce dernier pouvant être aussi transparents). Par contre le nombre de couleurs simultanées n’est limité que par la palette de 104 couleurs même si en pratique on peine à en utiliser beaucoup simultanément vu les autres contraintes. Outre les deux calques, on dispose de quelques sprites 1 bit de 8×192 ou 1×192 (player 1, player 2, missile et ball) qui peuvent éventuellement être doublés, triplés ou quadruplés sur l’axe horizontal et qui peuvent être utilisés pour ajouter des détails d’une couleur différente sur des images, comme les yeux rouges sur mon image du robot.

En pratique produire des graphismes pour la VCS est relativement simple. Voilà ma façon de procéder :

  • Tout d’abord se procurer la palette de la console. Attention, les couleurs diffèrent légèrement entre les versions PAL et NTSC du hardware, avec des couleurs plus vives dans le deuxième cas. Les démos Flush visent les consoles européennes et c’est donc la palette PAL qui fut choisie. Un lien pour télécharger la palette que j’ai utilisée est disponible en fin d’article.
  • Créer une nouvelle image en 320×192 (ou 320×248 si c’est une option) dans son logiciel de dessin préféré.
  • Créer deux calques pour le background et le playfield. On peut éventuellement en ajouter d’autres pour les sprites.
  • Définir une grille de 8×1 qui permettra de garder en tête la résolution particulière de la VCS.
  • Dessiner avec une brosse de 8×1 sur le calque playfield. C’est plus simple pour le calque background, puisque les lignes font forcément la largeur de l’écran.
  • S’assurer qu’une seule couleur par ligne est utilisée et que la grille de 8×1 est bien respectée pour le playfield.
  • Exporter les calques individuellement.
  • Redimensionner les images exportées en 40 pixels de large (algorithme « nearest neighbor / hard edges » évidemment).
  • Envoyer le tout à une personne qualifiée qui saura afficher ça sur la 2600 🙂

Je suis particulièrement content du logo Flush en simili-3D (voir en début d’article), qui je pense fait oublier un instant les limitations de la machine. J’avais proposé ça sans trop croire que ce soit techniquement possible quand je réfléchissais à des transitions pour le logo à l’aide d’Adobe Animate (Flash Professional pour les plus vieux). Il s’est avéré que c’était faisable et le résultat final est même supérieur à mon mockup d’origine ! Merci à Flewww, g012, Glafouk et p0ke pour ce petit projet très sympa qui ne sera d’ailleurs sûrement pas le dernier.


Poster un commentaire

Grotte de Namco, image pour la VIP 2017

Grotte De Namco (GFX for VIP 2017)

Je voulais vraiment soutenir la VIP 2017 en présentant une image dans la compétition de graphs, même si une fois de plus ça aura été un peu fait dans l’urgence. Le manque de finition trahit en effet le degré précipitation dans lequel cette image a vu le jour puisqu’elle aura été bouclé en un peu plus de deux heures. Malgré cela, elle n’a pas démérité dans la compétition puisqu’elle termine première dans la catégorie « newschool graphics« .

J’ai utilisé Clip Studio Paint Pro pour le gros du boulot et Photoshop pour les derniers ajustements. Le point de départ a été un petit croquis tout moche que j’avais fait il y a quelques années pour je ne sais plus trop quoi.


5 Commentaires

Low Poly Memories, GIF animé pour la Revision 2017

Ce petit billet est consacré à ma deuxième release lors de la Revision 2017. La party organise traditionnellement une compétition de GIF animés, dont les règles sont les suivantes : résolution imposée de 640×360 et taille maximale de 2 Mo.

M’étant occupé en priorité de mon image en pixel art, j’ai commencé à préparer cette animation un peu à la dernière minute – l’avant veille du début de la Revision pour être exact­­­ ! Heureusement la réalisation a été à peu près aussi rapide qu’espérée puisque les objets 3D sont très basiques et sans textures à proprement parler. C’est d’ailleurs ce style graphique et l’absence d’antialiasing qui a permis de caser le maximum d’étapes d’animation dans la limite des 2 Mo.

Un des éléments pour lequel j’ai tâtonné fut en fait la génération de l’animation du tunnel qui devait durer exactement 30 frames pour qu’elle boucle de manière synchronisée avec le reste. Vu mes maigres connaissances en programmation, j’ai dû me résoudre à simuler cet effet 2D avec de la 3D, en déplaçant une texture sur un cylindre aplati.

Puis survint une mauvaise surprise dans la dernière ligne droite : la réalisation à minuit passé que Blender ne supporte pas les textures animés quand on utilise OpenGL Render Animation (qui capture juste les frames rendues en OpenGL, donc très rapide). La mort dans l’âme, j’ai été contraint de faire manuellement un rendu OpenGL pour chacune des 120 images, opération qui s’est terminée dans la douleur vers 2h du matin le jour où commençait la Revision. Tout ça n’aura pas été en vain puisque l’animation a terminé 3e dans la catégorie 🙂

Exocet - Low Poly Memories (Revision 2017 Animated GIF competition)

Low Poly Memories sur Demozoo


6 Commentaires

L’Ankou, pixel art Sega Mega Drive pour la Revision 2017

Me voici de retour d’un week-end productif à Sarrebruck en Allemagne où se tenait la Revision, grosse demoparty traditionnellement tenue à Pâques et qui a pris le relais des mythiques Mekka & Symposium et Breakpoint (série qui dure depuis vingt ans quand même !).

L'Ankou (Sega Mega Drive pixel art)

Première release de ma part : une image au format Sega Mega Drive : 320×224 en 25 couleurs choisies dans une palette de 512, similaire à celle de l’Atari STF donc. Je n’avais jamais réalisé que le choix de couleurs sur la console de Sega était si limité (pour rappel, l’Amiga 500 ou l’Atari STE disposaient d’une palette de 4096 couleurs, et la Super Nintendo de 32 768), la preuve que les graphistes des jeux phares ont fait du bon boulot !

J’avais commencé à travailler sur cette image pour une démo Mega Drive qui est toujours en développement. C’est du domaine du secret défense donc je n’en dirai pas plus pour l’instant 😉

Le thème fait évidemment allusion à « l’ouvrier de la mort » dans le folklore breton (accessoirement c’est également l’un des personnages d’un album de Spirou et Fantasio). Son apparence précise varie considérablement selon les sources, ce qui laisse une place importante à la licence artistique.

Une fois de plus, j’ai utilisé uniquement Grafx2. Côté références, comme mes connaissances de la morphologie crânienne sont limitées, j’ai utilisé en plus des traditionnels ouvrages d’anatomie une petite application du nom de Handy qui permet d’observer des représentations 3D de visages et de mains sous tous les angles. C’est disponible sur Android, iOS et Windows 10 et je la recommande vu le prix modique.

L’image termine 2e dans la catégorie Oldskool Graphics ce qui fut une excellente surprise pour une image terminée sur place.

Étapes pour L'Ankou (pixel art Sega Mega Drive)

Quelques étapes de la réalisation