Remplacer ses placeholders par de beaux sprites grâce à l'IA, en 3 étapes

Quand je prototype de nouveaux jeux, je crée généralement des placeholders pour les premières itérations, jusqu’à obtenir une version jouable qui me satisfait. Et comme je suis développeur et pas artiste, même quand je crée ces placeholders, ce sont de vilains rectangles ou cercles. Mais si je pouvais avoir des placeholders qui ont de l’allure ?

Suivez-moi dans ce parcours où j’explore et vous montre le chemin pour se passer de placeholders grâce à l’IA générative.

1. La description

D’abord, il faut savoir ce que vous cherchez. Par exemple, disons que nous voulons quelques sprites d’UI et aussi des fleurs pour le jeu lui-même. Vous trouverez facilement des prompts d’assets de jeu sur internet pour démarrer, puis vous pourrez essayer vous-même quelques modifications pour obtenir quelque chose de proche de ce que vous voulez. Un élément clé du prompt est de préciser que vous voulez une spritesheet ou une asset sheet et isolate on white background (ou une autre couleur si votre jeu a une teinte dominante particulière, mais le blanc convient bien de manière générale).

Pour cet exemple, j’ai utilisé ce prompt :

game asset sheet, flower top view, in the style of detailed character illustrations, 2d game art, hyper-realistic details, rounded shapes, bright colors, bold shapes, subtle gradients, Tim Shumate, isolate on white background, cinematic lighting, disney style

Mon outil préféré ici, c’est Midjourney : j’ai essayé d’autres IA génératives d’images, mais je n’ai jamais obtenu une qualité globale et des variations de sprites aussi bonnes qu’avec Midjourney. Ça pourrait changer à l’avenir, vu le nombre de nouveaux outils publiés chaque semaine (voire chaque jour, devrais-je dire).

Ah, une dernière astuce pour cette partie : en utilisant exactement le même prompt plusieurs fois, vous pouvez obtenir des résultats trèèèès différents, alors n’hésitez pas à appuyer des tonnes de fois sur le bouton pour relancer jusqu’à obtenir ce qui vous plaît ! (ce n’est peut-être plus le cas avec un prompt précis sur MidJourney 6, mais c’est une autre histoire).

2. Le chemin vers le sprite unique

Maintenant que vous avez une spritesheet, il est temps de la découper ! J’ai étudié plus de 15 langages de programmation par le passé, mais je débute en Python, donc j’apprends encore, et je ne sais pas manipuler des fichiers et des images avec. Mais il est facile d’installer un environnement Python sur n’importe quel ordinateur et de lancer du code en quelques étapes, alors je me suis lancé… et j’ai demandé à chatGPT d’écrire le code à ma place !

La première fois, j’ai seulement demandé de charger la spritesheet, puis de la découper en fonction du nombre de sprites qu’elle contient, comme un tableau avec des colonnes et des lignes. Évidemment, ce n’était pas suffisant, car l’IA générative ne crée pas une grille parfaite de sprites. J’ai donc amélioré le code pour utiliser un algorithme DFS (Depth First Search, ou parcours en profondeur) : dès qu’il y a un pixel coloré, on part de celui-ci et on étend la zone jusqu’à avoir récupéré tous les pixels colorés, puis on la découpe, on l’écrit dans un fichier PNG et on cherche la suivante.

C’était… extrêmement… simple… et puissant de découper la spritesheet de cette façon !

Mais attendez, ces fichiers PNG… leurs sprites ont un fond blanc, ça ne sert à rien du tout !

3. Tout est dévoilé

Je me demandais quelle serait la meilleure façon de retirer le fond de l’image, puis je me suis évidemment souvenu du site remove.bg, qui fait exactement ça pour n’importe quelle photo : il pourrait aussi le faire pour des sprites, non ?

Eh bien, oui. Ils ont même une API que vous pouvez appeler en ligne de commande, avec 50 essais en basse résolution par mois (ils appellent ça des « free previews »). J’ai de nouveau demandé à chatGPT d’utiliser cette API pour rendre la spritesheet transparente avant de la découper (bien sûr, on utilise l’API avant le découpage, sinon on consommerait beaucoup d’appels d’API pour rien) et… c’est tout !

En combinant deux IA génératives différentes et un outil d’IA en ligne, vous avez maintenant un outil pour générer des sprites uniques et transparents pour votre prototype, avec une seule méthode à appeler.

J’ai été stupéfait de voir à quel point c’était simple, et je suis sûr que quelqu’un en a déjà fait un outil depuis, mais en attendant, vous pouvez trouver le script SpriteSplitter dans ce dépôt sur mon github.

À bientôt,