Bonjour,
Les Pokémon Dorés ont été, en 2016, la première rareté spéciale ajoutée au jeu. Nous avons ensuite ajouté de nouvelles raretés, mais nous n'avions que très peu retouché aux Pokémon Dorés (aka, on avait changé une valeur de contraste et la couleur des contours en 2018).
Cette année marque les 10 ans de PokExp. Nous avons pris la décision de retravailler sur des aspects du jeu, en plus d'ajouter de nouvelles fonctionnalités inédites. Cette première mise à jour marque une refonte totale du design des Pokémon Dorés. Mais laissez-moi vous expliquer les changements !
La génèse des dorés
A cette époque, nous avions créé un premier générateur, qui fonctionnait de la manière suivante :
- On lui donnait un sprite
- Il passait en nuance de gris le sprite
- Il ajoutait un peu de contraste & de luminosité
- Il ajoutait les coutours
- Il passait le sprite en jaune avec un calque et une addition de pixels
Malheureusement, ce système donnait un design très terne, avec un rendu plutôt moutarde que doré.
Comment on a revu le générateur ?
Le plus gros défaut a corrigé était le rendu moutarde. Comment appliquer un aspect doré, qui ne tend pas vers un jaune ignoble.
Le dorée, c'est une palette de couleur qui s'étend d'un jaune pâle, à du orange foncé.
Le dégradé qu'on a décidé d'utiliser pour les sprites
Pour appliquer un dégradé sur une image colorée avec plusieurs nuances, il a fallu réfléchir à une stratégie de coloration précise mais surtout universelle, pour être compatible avec 1650 sprites.
Nous avons fait des tests via Photoshop sur de la coloration. Passage noir & blanc, courbe de transferts de dégradés etc. Nous avons, au bout de plusieurs heures de tests, réussi à avoir un résultat concluant sur le rendu.
L'étape suivante était de passer de ce rendu Photoshop à un script permettant de tout générer. Et c'est un enfer de mathématiques qui a commencé, avec des interpollations entre couleurs, des conversions dans plusieurs types de couleur...
L'enfer des "types de couleur"
En informatique & dans le vrai monde, il est possible de décrire une couleur de plusieurs façons, pour donner des caractérisiques différentes. Le plus connu reste l'héxadécimale, une manière d'encoder les canaux rouge-vert-bleu facilement.
Mais quand on veut jouer avec des saturations & la luminance des couleurs, on a besoin de 2 autres formats :
- HSL : Hue - Saturation - Lightness
- LAB : un format complexe qui contient une luminosité en pourcentage simple et universelle
Nous avons pris le sprite, récupéré toutes les couleurs, récupéré leur luminosité, il a fallu commencer à trier les couleurs, les réappliquer et modifier pixel par pixel.
Le nouveau fonctionnement
- On prend le sprite d'origine
- On sélectionne toutes les couleurs & on applique un équivalent sur notre dégradé de couleur
- On calcule ensuite plusieurs paramètres liés à la luminosité du pixel
- On fait le rendu, on ajoute les bordures
- Hop on enregistre
Le rendu final
Bon, je vous ai longuement décrit le fonctionnement, mais ce qui est intéressant c'est le rendu. Je ne vais pas vous montrer les itérations ici, si un jour cela vous intéresse je ferais un article plus détaillé.
Voici quelques exemples de Avant <-> Après générés
Ces nouveaux sprites seront disponibles dans la prochaine version, qui arrivera dans les prochains jours !
J'espère que le nouveau rendu vous plaira.
Bon jeu,
Et à bientôt,
Loris