Tuto pixel art - les sprites de Pokémon

Les sprites principales (front et back) des Pokémons de Sacred Phoenix se réalisent en pixel art selon les standards de 4G, soit en 96×96 pixels pour le front et le back.

A terme, nous souhaitons utiliser une base HD (192×192) avec des animations en 5G, mais il s'agit de notre idéal . Rendre cette ambition réelle demandera beaucoup de travail.

Pour avoir les sprites au complet d’un Pokémon, il faut faire :
• Son Battler front (96×96)
• Son Battler back (96×96)
• Son OW en spritesheet 4×4 (128×128 la plupart du temps, exceptionnellement 192×192, voire 256×256 si très grand gabarit comme certains Légendaires ou Mégas)
• Son icône en spritesheet 2×1 (64×32, le gabarit peut exceptionnellement monter jusqu'à 40×80 si le Pokémon est vraiment gros ou tiré de l'icône 8G.)

Chaque sprite doit aussi avec une version shiny, ce qui fait un total de 8 (2×2 fixes et 2×2 spritesheets animées)

Le travail de pixel art Pokémon se fait sur ce gabarit (la partie dédiée aux OW et aux icônes peuvent être agrandis si la place est insuffisante):



Voici un exemple de planche complétée: la Sprite de Cerbyllin, de Minisange (petit Pokémon) et de Dragapult (grand Pokémon qui vole)

(Cette planche est upscalée x1)

Au niveau de la taille du remplissage du carré, c’est un peu plus délicat à gérer que pour les humains… Il faut ici grandement s’inspirer des sprites officielles de Pokémon pour savoir quelle échelle prendre.

Taille du Pokémon sur les canevas front et back :
• Un petit Pokémon (Toudoudou, Flabébé) prendra 3/8ème de la hauteur de sprite.
• Un Pokémon de gabarit moyen (1 mètre de hauteur) prendra les 5/8ème de la hauteur.
• Un gros Pokémon (forme évoluée finale) prendra 7/8ème de la hauteur.
• Seuls les mégas de taille honorable et les très gros Pokémons (Wailord) réussiront à empiler les 96 pixels de large.
!!! Inspirez-vous et prenez modèle sur les sprites de Pokémons officiels, ça aide beaucoup en tant qu'étalon de mesure. !!!

Positionnement du Pokémon :
=> Front et Back : si le Pokémon ne vole pas et n'est pas dans une position de vol, ses pieds doivent toucher le sol. Sinon, il peut flotter de quelques pixels par rapport à la ligne du bas.
=> OW : Sauf si le Pokémon vole, ses pieds doivent être sur la ligne du bas sur 2 des 4 frames, et avoir 1 pixel d'espacement vertical sur les 2 autres frames. Le schéma est 0-0-1-1 ou 0-1-0-1.
=> OW : Si un Pokémon vole ou lévite, on peut faire un pattern de type 1-2-3-2 ou 2-3-4-3 sur l'axe vertical par rapport à la ligne du bas.
=> Icone : Le Pokémon est toujours centré, qu'il vole ou pas.
=> Dans tous les cas, le Pokémon doit être centré sur l'axe horizontal. En cas de largeur impair d'un sprite plus ou moins symétrique, centrer côté gauche (16ème colonne en partant de la gauche pour une case en 32×32).

À noter qu’il n’est pas exclu sur le long-terme de :
• Redimensionner les battlers de tous les Pokémons présents à Keltios sur une base 150 ou 200 % (selon ce qui s’adaptera le mieux à l’écran de combat).
• Et / ou en faire des sprites animées dans le style 5G.

Arcanin et Méga-Arcanin en HD pour Sacred Phoenix, suivi du back d'Archille de Pokémon Uranium animé par mes soins.

Cela arrivera en temps et en heure si les racines du projet plongent très profond. C’est un travail de longue haleine qui ne sera entrepris que si le fan-game prend de l’ampleur, mais cela fait partie de mes ambitions.

 

Le choix des couleurs :

Sur le choix de la palette de couleurs, j’utilise en général entre 20 et 30 couleurs différentes pour un Pokémon, avec possibilité d’utiliser d’une à trois couleurs semi-transparentes (cas de la membrane de Méga-Lugia par exemple.)
Dans les cas extrêmes, ça peut monter jusqu'à 45 couleurs (cas d'un Pokémon qui a toutes les couleurs de l'arc-en-ciel).
Ce nombre de couleurs correspond à une palette unifiée entre le front, le back, l'OW et l'icône. Individuellement, chaque sprite ne les utilise pas toute.

Dans l'exemple de Minisage ci-dessous, pour la version non-shiny :


- Le back et le front utilisent 17 couleurs sur les 21 disponibles, dont 3 qui lui sont exclusifs
- L'OW en utilise 12
- L'icone en utilise 14

La palette shiny, qui correspond à un basculement des couleurs (certaines peuvent être communes et donc identiques), a obligatoirement le même nombre de couleurs utilisées.


Ne vous bridez pas à 16 couleurs (noir et transparent inclus) contrairement à ce qu'affirment certains tutos : ces restrictions datent du temps de la Game Boy Advance. Le format PNG gère 1 milliard de combinaisons (et 256 couleurs pour le GIF) avec un poids très léger (3 Ko la sprite en moyenne). La vraie limite est la palette que le Pixel Artiste se sent capable de gérer.

Cependant, il est important de bien maitriser sa palette de couleur et de savoir lesquelles on a choisi : cela facilite énormément la transition Pokémon normal <=> Pokémon shiny. (Il suffit de remplacer la plupart des couleurs par une autre.)
Une astuce consiste d’ailleurs à mettre sur un coin de sa sprite chaque couleur utilisée afin de garder un référencement de sa palette. (Cela sera bien entendu effacé sur la sprite finale.)


Sprite de Minisange (zoom ×4) avec la palette de couleur référencée en bas à droite. Total : 21 couleurs sans compter le transparent, dont 12 communes entre le shiny et le non-shiny.
La sélection correspond aux 12 couleurs communes.

Organisation de la palette :

La palette est organisées comme suit:
• Sur l'axe horizontal, listée du plus clair au plus foncé (ou inversement si vous préférez)
• Sur l'axe vertical : par teinte. C'est ce qu'on appelle une rampe de couleur.
• Il n'y a pas de limite au nombre de rampe tant que vous arrivez à les gérer. En général, on en a entre 4 et 6.
• On peut retrouver deux rampes presque identiques mais distinctes s'il s'agit d'une colorisation de deux zones distinctes. (Exemple : 2 rampes de gris pour le Minisange shiny : l'une pour son ventre, l'autre pour son bec).
• Il n'y a pas de limite au nombre de couleurs d'une rampe tant que vous arrivez à les gérer. (Je suis monté jusqu'à 10.) Mais ne pas hésiter à fusionner deux couleurs presque identiques si elle est utilisée dans une même zone.
• À l'inverse, s'il y a besoin de créer une teinte intermédiaire, pipeter la teinte de notre choix, mettre le canal alpha de la couleur pipetée à 128/255 (50%), puis coloriser un pixel de la teinte supérieure ou inférieure avec cette couleur et un mode de mélange normal. Cela permettra d'obtenir une nouvelle couleur qui est exactement entre les deux.
• S'il y a besoin de modifier une couleur, il suffit juste avec la baguette magique de sélectionner la couleur cible avec un mode de sélection global et 0% de tolérance. Le fait d'avoir une palette unifiée et toutes les sprites sur la même image permet de tout modifier d'un coup.
• La palette shiny est un clone de la palette normale avec certaines couleurs modifiées. (Lors de la génération du shiny et de sa palette, mettre leurs sprites sur un calque distinct afin de ne pas interférer avec les sprites non shiny.)

 

Gestion du shiny :


Normal à gauche, shiny à droite

Les sprites shiny sont obtenus par commutation de la palette de couleur. Il est donc impératif que chaque couleur qui est amenée à changer entre les deux versions ait une teinte unique afin d'éviter tout croisement de couleur.

Par exemple, le masque de Minisange devient gris sur le shiny. Sachant que son bec et ses pattes sont gris dans les deux versions, il devient tentant de réutiliser la même couleur pour le masque du visage de la version shiny.
C'est une erreur, car cela ne permet plus de changer la palette de couleurs dans le sens inverse. Il faut donc dédier une rampe de gris pour le masque du shiny et qui n'entrera en conflit avec aucune des couleurs des pattes et du bec.
Pour la même raison, il faut éviter un croisement de couleurs entre la version normale et le shiny. Sauf si la couleur est identique pour un même endroit, deux endroits différents doivent toujours avoir une couleur différente entre les deux version => Ne pas hésiter à très légèrement modifier la teinte (genre +1/255 de rouge, de vert ou de bleu) pour s'assurer de cela.


Un cas de croisement de couleur où les gris foncé ont été intervertis avec les gris clair : engendrant des couleurs identiques, mais positionnés à des endroits différents entre les deux versions. Cela fait perdre la réciprocité de la commutation de la palette.

Bien sûr, si deux couleurs sont strictement identiques entre le normal et le shiny (même teinte et même positionnement), il s'agit de couleurs communes et n'y a pas besoin de les commuter.
Les couleurs communes sont toujours placées en premier dans mes rampes de couleurs.


Les couleurs communes de ce Fakemon soit le noir pur et le blanc pur: la sélection est exactement la même entre les deux versions.