16 Couleurs

16 Couleurs – graphisme & jeu vidéo


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

Publicités


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.


Poster un commentaire

Des exemples d’automatisation de traitement d’images avec ImageMagick

J’avais l’an dernier évoqué ImageMagick, un logiciel de traitement d’images en ligne de commande aussi puissant que parfois difficile d’approche. Dans ce nouveau billet je présente quelques exemples d’utilisation du programme qui m’ont permis d’économiser pas mal de temps ces derniers mois.

À la base le logiciel se contrôle comme suit, après avoir ouvert une fenêtre de ligne de commande dans Windows (ou Mac ou Linux) :

convert image1.jpg actions image2.jpg

On ouvre l’image image1.jpg, effectue une ou plusieurs manipulations dessus puis la sauvegarde sous le nom d’image2.jpg.

Créer un GIF animé

Créer un GIF animé avec ImageMagickUn cas de figure assez fréquent : une animation est exportée d’un logiciel quelconque (Animate, After Effects…) sous la forme d’une suite d’images et on souhaite la convertir en GIF animé. Une opération somme toute très basique, mais étonnamment pas si simple en pratique : l’exportation native de GIF animé dans Animate n’est souvent pas exploitable (une couleur sombre est systématiquement choisie comme transparente même si on ne veut pas de transparence), Adobe Media Encoder pas vraiment idéal en pratique (aucune optimisation du GIF donc un résultat au poids rapidement énorme) et Photoshop trop lent si on veut pouvoir enchaîner les conversions. Avec ImageMagick il suffit de taper la commande suivante dans le répertoire où se situe les images :

convert *.png -loop 0 -layers optimize -set delay 3 anim.gif
  • -loop 0 permet à l’image de boucler de manière perpétuelle.
  • -layers optimize indique à ImageMagick qu’il doit optimiser l’animation en actualisant seulement les pixels qui changent d’une frame à l’autre.
  • -set delay 3 indique la durée de chaque frame en centièmes de seconde. Ici 0.03 seconde, donc un framerate d’environ 33 images par seconde.

En laissant la fenêtre Command Prompt ouverte, on peut obtenir un nouveau GIF animé à chaque fois qu’on réexporte les images en appuyant juste sur la flèche du haut puis Entrée.

Recolorer en blanc une série d’image avec une couche alpha

Recolorer en blanc une série d'image avec une couche alphaUne requête un peu plus spécifique mais qui s’est manifestée lors du développement d’un jeu pour Peak : une centaine de sprites en 32 bit devaient être recolorés en blanc tout en conservant la transparence. Facilement réalisable avec Photoshop, mais pas beaucoup plus compliqué avec ImageMagick avec l’avantage de la flexibilité et de la rapidité. Attention, cette commande remplace tous les PNG dans le répertoire.

FOR %a in (*.png) DO convert %a -brightness-contrast "100 0" %a
  • FOR %a in (*.png) DO crée une boucle qui traitera tous les PNG du répertoire (%a est la variable pour les noms de fichiers, répétée telle quelle à la fin de la commande, d’où l’écrasement des fichiers d’origine).
  • -brightness-contrast « 100 0 » augmente la luminosité au maximum et réduit le contraste au minimum, donc toutes les valeurs deviennent blanches.

Redimensionner une série d’images et les recolorer avec une palette prédéfinie

Redimensionner une série d’images et les recolorer avec une palette prédéfinie avec ImageMagick

Ici j’exporte une animation sous forme d’une série d’images que je souhaite ensuite convertir vers une résolution et une palette spécifiques à un ordinateur 8 bit. La commande mogrify utilisée est d’un usage similaire à convert, à la différence que les images d’origine sont systématiquement écrasées.

mogrify -filter "Box" -resize "160x200!" -dither None -remap c:\tmp\nouvelle_palette.png *.png
  • -filter « Box » choisit le filtre « Box » pour la commande resize qui suit. Ce filtre donne les meilleurs résultats dans ce cas de figure (réduction de pixel art sans bavure). Voir la documentation très détaillée sur ce sujet.
  • -resize « 160×200! » indique la résolution souhaitée. Le point d’exclamation signifie que le ratio d’origine sera ignoré.
  • -dither None pour éviter de dithering (dégradés) lors de la conversion.
  • -remap c:\tmp\nouvelle_palette.png : les images sont recolorées avec la palette issue de cette image.

Tripler la résolution d’une série d’images

Tripler la résolution d'une série d'images avec ImageMagick

Drag & drop avec ImageMagickImageMagick permet ici de redimensionner et renommer les images avec un simple drag and drop des fichiers sur une icône du bureau Windows, ce qui est extrêmement pratique. Je me sers de ce script pour modifier pour Twitter des captures d’écran en 320×200 (généralement réalisées pour Demozoo ou Mobygames) qui font un peu timbre-poste sur nos écrans modernes. Il suffit de créer un fichier .BAT avec le contenu suivant :

if [%1]==[] goto :eof
:loop
convert %1 -scale 300%% "%~dpn1_x3%~x1"
shift
if not [%1]==[] goto loop

Le format est un peu différent puisqu’il s’agit de supporter le drag and drop de plusieurs fichiers sur l’icône du fichier .bat.

  • if [%1]==[] goto :eof vérifie si la liste des fichiers transférée n’est pas vide et termine le script si c’est le cas.
  • :loop : label de la boucle
  • convert %1 -scale 300%% triple la résolution
  • « %~dpn1_x3%~x1 » ajoute « _x3 » à la fin du nom de fichier pour éviter d’écraser l’image d’origine. La syntaxe un peu cryptique permet juste de manipuler les différents éléments du nom de fichier (voir ici pour plus de détails).
  • shift : on itère dans la boucle
  • if not [%1]==[] goto loop : on continue tant qu’on n’a pas traité tous les fichiers

Pour changer l’icône du fichier batch, le plus simple est de placer sur le bureau non pas directement le fichier batch, mais plutôt un raccourci vers celui-ci. Il suffit ensuite de faire un clic droit sur l’icone et de cliquer sur « changer l’icône » dans l’onglet « raccourci ».

Il est possible d’effectuer des opérations beaucoup plus complexes avec ImageMagick mais j’espère que ces quelques exemples simples auront aidé à vous convaincre de l’utilité du programme. La prise en main est ardue mais heureusement il existe une documentation en ligne très complète qui permet de ne pas avoir à trop tâtonner.

La documentation officielle pour aller plus loin (en anglais) :


4 Commentaires

5 conseils pour concevoir des jeux pour l’Apple Watch

Peak-Brain-Training-Apple-Watch

En début d’année j’ai eu l’opportunité de pouvoir me rendre chez Apple à Cupertino pour assister à un atelier dédié à la réalisation d’applications pour l’Apple Watch, alors encore à l’état de prototype. Pouvoir prendre en main la montre quelques mois avant sa sortie a évidemment été un gros avantage pour pouvoir proposer une application compatible et testée dès la sortie de la montre, en l’occurrence une extension pour notre application d’entraînement cérébral Peak. Ci-dessous quelques réflexions sur la conception d’applications, en particulier des jeux, pour l’Apple Watch et autres smartwatches :

  • Avoir conscience des limites : le framework WatchKit a été conçu en priorité pour les applications “sérieuses” et n’est pas idéal pour du contenu riche : en particulier, les animations ne sont pas réellement supportées en dehors de transitions standards entre les écrans, et il faut donc utiliser des séries d’images style GIF animé. Dans ce cas il faudra évidemment veiller à les utiliser avec parcimonie pour éviter que l’application ne devienne trop lourde. La mise en page est elle réalisée avec des « groupes » qui imposent d’autres contraintes, comme l’impossibilité de se chevaucher (sauf à sacrifier l’arrière plan pour l’un des éléments).
  • Exploiter la bordure : l’Apple Watch a été conçue de manière à ce que l’écran se confonde avec la bordure noire qui l’entoure afin de donner l’impression que la surface d’affichage occupe toute la face avant de la montre (Nokia avait auparavant utilisé la même astuce sur ses Lumia). Pour entretenir l’illusion il faut avoir recours au noir pur comme couleur de fond et ne pas hésiter à coller les éléments contre le bord de l’écran. Ça aura l’air pataud sur les mockups, mais beaucoup plus élégant sur la montre.Une interface pour l'Apple Watch, sans et avec la bordure

 

  • Être bref : l’Apple Watch ne doit pas être vue comme un mini-smartphone, mais comme un appareil complètement nouveau qui permet un accès instantané aux notifications et des interactions rapides avec des informations contextuelles. La durée d’utilisation optimale d’une application ou d’un jeu est donc de quelques dizaines de secondes, ce qui limite énormément le type de contenu qui fonctionne de manière satisfaisante sur l’Apple Watch.
  • Savoir rester simple : Visuellement, l’idéal est de proposer une seule information clé ou un unique centre d’intérêt par écran et d’utiliser quelques couleurs vives qui ressortiront bien sur un fond noir. Attention aussi à ne pas demander une précision irréaliste à des utilisateurs parfois en mouvement : Apple recommande de ne pas utiliser plus de trois boutons côte à côte.
  • Ne pas réinventer la roue : Apple a imaginé une expérience utilisateur pour l’Apple Watch très cohérente et il est généralement préférable de ne pas trop en dévier pour ne pas perturber les utilisateurs (voir le guide d’Apple à ce sujet). À moins d’avoir une bonne raison, mieux vaut utiliser les boutons standards et la fonte San Francisco, cette dernière ayant été dessiné pour une lisibilité optimale même dans des petites tailles.

Comme lors de la sortie de chaque appareil au format réellement innovant, il faudra un certain temps avant que les développeurs trouvent leurs marques et puissent proposer des jeux qui tirent parfaitement partie du hardware. On se rappelle que les premiers jeux third-party de la Nintendo DS n’exploitaient pas vraiment le double écran ou le stylet, et les premiers jeux pour iPhone imposaient souvent l’utilisation de ces d-pads virtuels que je trouve insupportables. Il faudra probablement attendre quelques mois avant de voir débouler les premiers jeux pour smartwatch parfaitement adaptés au support.

Quelques pages intéressantes sur le site d’Apple :

  • L’extension Apple Watch pour Peak est disponible sur iTunes


7 Commentaires

Jeux Android avec Python, Pygame et PGS4A : l’installation

Python PGS4A + Android Un peu plus tôt cette année, j’ai suivi un très bon MOOC d’initiation au langage de programmation Python puisque je ne désespère pas d’être un jour en mesure de créer mes propres petits jeux, dans la continuité des exactions en GFA Basic que j’avais commises  sur Atari ST il y a de cela une bonne décade.

Python m’a semblé un bon choix puisqu’outre un nom de bon goût, c’est aussi un langage de programmation assez facile à apprendre et à comprendre. Si l’utiliser pour réaliser une application complexe ou un gros jeu de A à Z n’est pas vraiment courant, mine de rien son usage est très répandu comme langage de script, en particulier dans de nombreux logiciels de graphisme (entre autres : Blender, Maya, Modo, Cinema 4D et même la dernière version de 3DS Max). De bonnes bases en Python sont donc un gros plus pour qui veut faire un peu de technical art.

Il s’avère qu’il y a même moyen d’utiliser Python pour réaliser des applications Android. Certes, c’est un peu du bricolage puisque certaines fonctions ne sont pas ou mal supportées et j’imagine sans peine qu’il y a des problèmes de compatibilité plus ou moins insolvables. D’ailleurs si le but est de réaliser des jeux mobiles sans trop se prendre la tête, il est évident que des solutions clé en main comme GameMaker ou Construct 2 sont des choix beaucoup plus sensés.

En ce qui me concerne, l’installation de l’environnement de développement Python+Android a été un peu douloureuse, au point que j’ai bien failli jeter l’éponge à un moment. Heureusement la persévérance paye parfois puisque tout a fini par se mettre en place et fonctionner correctement, sur Windows 8.1 32 bit et 64 bit du moins… J’ai donc décider de partager mon expérience dans l’espoir que ça puisse être utile à d’autres.

Je ne prétends pas comprendre les aboutissements de toutes les étapes ci-dessous et certaines d’entre elles peuvent s’avérer parfaitement inutiles (en particulier en ce qui concerne le SDK Android) mais comme la manip fonctionne, if it ain’t broke, don’t fix it 🙂

Téléchargements et installations

Pour commencer il va falloir télécharger et installer les logiciels suivants :

  1. Python 2.7 32 bit dans C:\Python27\
  2. La librairie orientée jeu PyGame
  3. L’IDE PyCharm Community Edition (ou votre IDE Python préféré, mais je ne garantis rien !)
  4. Pygame Subset For Android (PGS4A) 0.9.4, à installer dans C:\PGS4A. J’ai d’abord essayé avec la 0.9.6 mais ça ne fonctionnait pas, donc achtung !
  5. La dernière version de Java SE Development Kit (JDK) pour Windows x86

Ensuite il faut ajouter les répertoires suivants au path de Windows : C:\Python27\ et %JAVA_HOME%/bin (instructions détaillées ici).

Android SDK

Android SDK ManagerL’étape suivante consiste à installer les API nécessaires au SDK Android fourni avec PGS4A. Pour celà il faut :

  • Lancer SDK Manager.exe dans C:\PGS4A\android-sdk\
  • Effectuer une mise à jour des  SDK Tools. Fermer et redémarrer SDK Manager.
  • Installer les mises à jours Android 4.0.3 (API 15), Android 2.2 (API 8) et extras: Android Support Library.  Fermer et redémarrer SDK Manager.
  • Installer tous les extras sauf Google Play Services for Fit, Android Support Repository, Google Web Driver et Intel x86 Emulator Accelerator.

PGS4A

Enfin il faut configurer PGS4A, en exécutant android.py installsdk dans PyCharm. L’absence de message d’erreur à ce stade est bon signe puisque l’installation se termine ici !

Créer une application Android

Par la suite, pour créer une application Android à partir d’un programme Python, il faut copier tous les fichiers source (.py évidemment, mais aussi toutes les images, fontes et sons nécessaires) dans C:\PGS4A\app\ , renommer le fichier Python principal en main.py et exécuter les deux commandes suivantes dans PyCharm :

  • android.py configure app (pour configurer l’application Android)
  • android.py build app release (pour compiler l’application Android)

Si tout se passe bien, le fichier APK apparaîtra dans C:\PGS4A\bin\ . J’utilise ensuite Dropbox pour le copier sur mon smartphone, mais il existe plein d’autres méthodes. À propos, attention de bien autoriser l’installation d’applications obtenues hors de Google Play sur le smartphone ou la tablette (cocher « Unknown sources » dans Settings > Security).

Les articles ci-dessous m’ont été très utiles lors de l’installation des différents logiciels. Dans le premier on trouve également un exemple de source qui vous permettra de tester si tout fonctionne correctement.


7 Commentaires

Tutoriel pixel art : bus londonien

Tuto pixel art London Bus

usa-uk-f Click here for the English version!

 

Pour ce premier tutoriel de pixel art, penchons-nous sur le Routemaster, le bus à impériale londonien quasi-mythique. Construit de 1954 à 1968, sa longévité sera exceptionnelle puisqu’il restera en service sur certaines lignes jusqu’en 2005. Durant sa longue carrière il s’imposera peu à peu comme l’un des symboles les plus populaires de Londres avec les black cabs et Big Ben. Voilà pour l’introduction historique.

Comme dans tout tutoriel, les techniques exposées ici sont éminemment subjectives et basées sur mes goûts personnels plutôt que sur des règles immuables. La méthode de travailler décrite ci-dessous fonctionne pour moi, mais je ne doute pas que chacun y trouvera matière à redire et saura découvrir des alternatives plus efficaces. De plus, la progression présentée ici est idéale, en pratique les choses sont souvent un peu plus chaotiques et les différentes étapes se chevauchent toujours un peu.

Pixel Art London Bus AnimD’un point de vue technique, j’ai utilisé le logiciel GrafX2, mais n’importe quel logiciel de dessin avec un support basique du pixel art fera l’affaire (Photoshop, Promotion, Paint Shop Pro, GraphicsGale, GIMP… Voir mon article sur le sujet).

1 – Référence et croquis

Tuto pixel art 1

Première étape, parfaitement optionnelle mais rarement inutile : la collecte de référence. Même dans le cas d’un style cartoon ou simplifié, cela permet de s’assurer que le résultat final soit à peu près crédible.

La réalisation d’un croquis sur papier est elle aussi complètement facultative mais permet de tester rapidement différentes options. Retranscrire les images de référence sur papier force en plus à en comprendre la structure et la logique, avec comme conséquence un gain de temps et d’assurance lors des étapes suivantes.

2 – Cubisme

Tutoriel pixel art 2

Je commence généralement par ébaucher le sujet à l’aide des formes basiques avec des couleurs rapidement choisies. Cela permet de juger très vite de l’équilibre de l’ensemble, du contraste général et de l’interaction des couleurs sans se perdre dans les détails.

Cette étape impose aussi de déterminer les dimensions du sujet, la décision la plus importante du projet. Trop petit, on est vite limité et on peinera à intégrer les détails que l’on souhaite. Trop grand, la charge de travail explose, pour un résultat qui n’est plus forcément proche du pixel art. Dans ce cas précis, je décide de la taille du bus en extrapolant à partir des… roues. J’ai une bonne idée de la taille que celles-ci doivent faire, et le reste suit, même si d’autres paramètres sont à prendre en compte comme le nombre de fenêtres (4 fenêtres de n pixels séparés par un pixel, plus 2 pixels à chaque extrémités = la longueur du bus). À cette étape il faut vraiment raisonner en terme de pixels pour choisir les dimensions optimales.

3 – Contour

Tutoriel pixel art 3

La pertinence de cette étape dépend évidemment du style désiré, mais dans mon cas le style de pixel art que j’ai en tête nécessite un contour sombre, donc on n’y coupera pas. Dessiner le contour aide de toute façon à se donner une bonne idée du niveau de détail possible et d’affiner la silhouette, comme l’arrondi à l’avant et à l’arrière du toit. Je ne réfléchis pas encore aux couleurs à ce moment là, ça sera pour juste après.

4 – Premier jet des couleurs

Tutoriel pixel art 4

Je choisis à présent les couleurs qui me semblent satisfaisantes à l’œil et qui correspondent à l’atmosphère, au style et au message que je veux faire passer. Cette étape permet aussi de rationaliser l’usage des couleurs : quelles teintes sont les plus importantes et les plus utilisées (ce ne sont pas forcément les mêmes), lesquelles peuvent être partagées entre différents éléments, etc. En pixel art on essaye généralement d’optimiser l’usage de la couleur pour utiliser le plus petit nombre de teintes possible, souvent des puissances de 2 qui correspondent aux limitations techniques des sasfépus (4, 8, 16 ou 32 couleurs par exemple).

5 – Détails

Tutoriel pixel art 5

J’ajoute à présent les détails que je peux me permettre vu la résolution mais j’évite d’inclure trop de choses ou de faire du remplissage, le résultat sera souvent fouillis (Saint-Éxupéry disait que « la perfection est atteinte, non pas lorsqu’il n’y a plus rien à  ajouter, mais lorsqu’il n’y a plus rien à  retirer  »). Pour le pixel art il est vraiment nécessaire de simplifier le sujet autant que possible pour le rendre parfaitement lisible malgré sa petite taille. Chaque détail doit avoir sa raison d’être et aider à la compréhension de l’image. Je fais également attention au contraste des couleurs des éléments de petite taille qui ne doivent pas attirer l’attention plus que nécessaire.

6 – Antialiasing

Tutoriel pixel art 6

J’ajoute maintenant l’anti-aliasing pour limiter les effets d’escalier et arrondir les angles. La technique n’est pas très compliqué mais demande un peu d’expérience et de recul. Il faut trouver le bon équilibre entre un anti-aliasing trop parcimonieux (résultat trop pixellisé) et un anti-aliasing trop lourd (effet flou ou baveux). Surtout, il faut être cohérent et appliquer les mêmes règles partout. C’est aussi le moment idéal pour finaliser la couleur du contour, qui peut varier selon qu’il soit exposé ou non à la lumière. Dans le cas de mon bus, l’éclairage provient principalement du haut et un peu de la gauche. Les contours de ces côtés là peuvent donc être un peu plus clairs.

7 – Peaufinage de la palette

Tutoriel pixel art 7

Je suis maintenant très proche du résultat final. Je modifie un peu les couleurs pour introduire un peu de variation dans les dégradés : j’ajoute un soupçon de bleu sur une des teintes d’un dégradé, puis une pincée de rouge sur la suivante, etc. Ceci permet d’obtenir un résultat un peu plus organique et moins clinique. Je souhaite également donner des couleurs assez chaudes à l’image et j’ajoute donc un peu de rouge et de vert aux gris. Plus généralement, sur la plupart de mes images et sauf raison particulière j’évite les couleurs de base (appelées aussi « couleurs de codeurs » !) et les gris parfaitement équilibrés qui donnent un rendu trop artificiel. Pour finir, j’ajuste légèrement le contraste, la luminosité et la saturation de l’ensemble pour obtenir les couleurs les plus percutantes possibles même si les changements ne sont pas toujours perceptibles à l’œil nu 😉 C’est la seule étape où j’ai éventuellement recours à Photoshop. Voilà, c’est fin prêt, agitez et servez bien chaud avec de la custard !

usa-uk-f Click here for the English version!