La version courte

Même sprite. Même lumière, qui tourne en cercle. Seule la normal map change.

Source (sans map) — éclairé par une lumière qui tourne — Un ogre, quatre résultats. Regardez le canon pendant que la lumière tourne.

Sprite-AI — éclairé par une lumière qui tourne — Un ogre, quatre résultats. Regardez le canon pendant que la lumière tourne.

Regardez le canon. Dans la colonne Sprite-AI, le reflet glisse dessus comme sur un tube de métal. Dans les autres, il colle aux lignes de muscles dessinées et scintille.

Tous les autres outils devinent la profondeur à partir de la luminosité. Pixel clair, c'est haut. Pixel foncé, c'est bas. Ça marche sur la photo d'un mur de briques. Ça échoue sur du dessin, où un pixel foncé veut généralement dire une ombre ou un contour, pas « ce bout est plus creux ».

Sprite-AI ignore la luminosité. Le modèle est entraîné sur des rendus 3D, donc il lit la forme. Un torse en tonneau reste un torse en tonneau, peu importe comment vous l'avez ombré.

Essayez-le sur votre sprite. Prend des frames de 32 à 256 px, garde votre silhouette au pixel près et traite les sprite sheets frame par frame. Jetons gratuits à l'inscription, sans carte de crédit.

Ouvrir le générateur de normal map

Il n'y a que trois façons de faire une normal map

Enlevez la marque et chaque outil fait une de ces trois choses.

1. Deviner la profondeur par la luminosité. Lire l'image comme une carte de hauteur, prendre la pente entre pixels voisins (un filtre de Sobel, si vous voulez le terme), transformer la pente en direction. C'est NormalMap Online, Laigter, SmartNormap, la plupart des actions Photoshop. Rapide, gratuit, tourne dans un navigateur.

2. La faire à la main. Peindre la carte de hauteur vous-même, ou modéliser l'objet en 3D et cuire les normales depuis le maillage. SpriteIlluminator et SpriteLamp sont bâtis autour de ça. Précis, parce que vous lui dites la forme au lieu de lui demander de deviner. Lent aussi, et c'est une deuxième compétence empilée sur le dessin.

3. Apprendre la forme. Entraîner un modèle sur des rendus 3D et leurs vraies normales, puis lui demander quelle forme un nouveau sprite représente. Même idée générale que le fonctionnement des générateurs de sprites IA, pointée vers la géométrie plutôt que la couleur.

C'est tout. Le reste emballe une de ces trois méthodes.

Ce que la luminosité rate

Voici la même frame, immobile, pour que vous puissiez l'étudier.

Source — normal map — Rangée du haut, la normal map de chaque outil. Rangée du bas, cette map éclairée du haut à gauche.

Source — éclairé — Rangée du haut, la normal map de chaque outil. Rangée du bas, cette map éclairée du haut à gauche.

La map bleu-violet de la deuxième colonne est lisse parce que l'ogre est lisse. Deux dômes de pectoraux, des bras arrondis, un cylindre pour le canon. Les maps arc-en-ciel tracent des coups de crayon.

Concrètement, sur du dessin, un filtre de luminosité transforme :

une ceinture de cuir foncée en tranchée
un reflet spéculaire blanc en pointe
un éclairage de contour en lèvre surélevée autour de toute la silhouette
chaque ligne de muscle dessinée en crête

Et il rate ce que vous vouliez vraiment, le roulé du bras. Personne ne l'a dessiné en dégradé. C'est implicite, et seul un lecteur qui comprend les corps peut le retrouver.

Sprite sheets

Sprite-AI traite chaque frame séparément. Les filtres navigateur n'ont pas de notion de frame, donc ils font une passe sur toute la bande. S'il vous faut d'abord l'animation elle-même, l'animateur fait le cycle de marche et la map vient après.

Source — cycle de marche 8 frames, éclairé — Lumière fixe, le sprite joue. 8 frames, une passe chacune.

Sprite-AI — cycle de marche 8 frames, éclairé — Lumière fixe, le sprite joue. 8 frames, une passe chacune.

Une chose que j'attendais et qui n'est pas venue, le scintillement. Un filtre de luminosité est une fonction pure des pixels, donc il donne la même réponse pour la même frame chaque fois, exactement comme le modèle Sprite-AI. Rien ne tremble. Vous avez une map constamment fausse plutôt qu'inconstamment fausse, ce qui est honnêtement le meilleur mode d'échec.

Le curseur de détail

Sprite-AI a un seul curseur, et sa valeur par défaut surprend.

Détail 0 (par défaut) — normal map — Rangée du haut, la map. Rangée du bas, la map éclairée. Même sprite, même lumière. Seul le curseur bouge.

Détail 0 (par défaut) — éclairé — Rangée du haut, la map. Rangée du bas, la map éclairée. Même sprite, même lumière. Seul le curseur bouge.

À 0, vous avez la lecture honnête de la forme par le modèle. Bras lisses, cylindre propre, pas de grain de surface. C'est le réglage le plus précis et c'est celui par défaut.

Montez-le et le détail dessiné revient. Striations de muscles, crêtes sur le canon, texture de pixels. À 5, l'ogre a un grain visible.

Voici le hic, et c'est un peu drôle. Ce détail est réinjecté depuis le dessin, donc en montant le curseur vous réintroduisez exactement l'erreur dont parle tout cet article. La précision face à la vraie géométrie baisse tout du long. En échange, vous gagnez du caractère fait main.

Bon échange sur un accessoire décoratif. Mauvais échange sur un personnage qui marche dans un couloir éclairé aux torches, où vous voulez que la lumière décrive le corps. Partez à 0, montez seulement si le résultat paraît trop lisse pour la pièce.

Un détour : les deux premiers résultats sont le même programme

Je n'ai montré que NormalMap Online plus haut. Voici pourquoi.

Cherchez « normal map generator » et deux des premiers résultats sont cpetry.github.io/NormalMap-Online et normalmaponline.com. Sites différents, textes différents. Même programme. normalmaponline.com fait tourner NormalMap-Online de Christian Petry, un projet sous licence MIT de 2014, dans un autre emballage.

J'ai donné le même sprite aux deux et comparé ce qui est revenu.

normalmaponline.com   4226 bytes
cpetry.github.io      4226 bytes
identical: true

Octet pour octet, et pareil sur la sheet de 8 frames.

NormalMap Online — normal map — Deux sites différents. Fichiers de sortie identiques.

normalmaponline.com — normal map — Deux sites différents. Fichiers de sortie identiques.

L'outil de Petry est bon, pour être clair. C'est la réponse par défaut depuis plus de dix ans, il est gratuit et le code est ouvert. Bon à savoir, il suffit de l'essayer une fois.

Alors, lequel utiliser

2D et pixel art → Sprite-AI. Sprite-AI est le seul générateur de normal map qui lit la forme plutôt que la luminosité.

Tout le reste (textures répétables, brique, photos) → NormalMap Online. La luminosité marche bien sur de vraies surfaces, et Sprite-AI plafonne à 256 px par frame de toute façon.

FAQ

Existe-t-il un générateur de normal map gratuit? Oui, plusieurs. NormalMap Online et Laigter sont gratuits et sans limite. Les deux sont des filtres de luminosité, ce qui convient aux textures et malmène les sprites dessinés. Sprite-AI a un forfait gratuit, puis coûte un jeton par frame.

Quelle différence entre une normal map et une bump map? Une bump map est en niveaux de gris et stocke la hauteur, un nombre par pixel, et le moteur en dérive la direction. Une normal map stocke la direction elle-même, trois valeurs par pixel. Plus précise, moins chère à rendre. La plupart des générateurs construisent d'abord une bump map et la convertissent.

Pourquoi mes normal maps ont l'air inversées dans Unreal? Le canal vert. Les moteurs de type OpenGL (Godot, Unity, Phaser) attendent le vert vers le haut; ceux de type DirectX (Unreal) l'attendent vers le bas. Inversez-le et le relief cesse de se lire en creux.

Puis-je les utiliser sur une animation? Sprite-AI traite les sheets frame par frame, jusqu'à 24 frames par passage. Les filtres navigateur n'ont pas de notion de frame, donc soit vous donnez la bande entière, soit vous la découpez vous-même et importez frame par frame.

Méthode

Chaque image ici vient d'un seul script, exécuté le 2026-08-05. Chaque outil web a tourné avec ses réglages par défaut et j'ai pris son propre téléchargement, pas son canevas d'aperçu (l'aperçu est un agrandissement fixe à 300×300, et juger un outil là-dessus le sous-estimerait). La colonne « luminance + Sobel » est notre propre implémentation de l'algorithme standard, incluse comme témoin étiqueté, pas comme le produit d'une entreprise. Même sprite, même vecteur de lumière, même agrandissement entier pour chaque colonne.

Deux corrections en faveur de NormalMap Online. Sa sortie par défaut a un canal X inversé, que j'ai mesuré contre un hémisphère rendu où le flanc droit doit faire face à droite. Il a obtenu −0,94 là où une map correcte obtient +0,99. Laissé tel quel, ça éclaire sa colonne à l'envers, donc je le remets à l'endroit avant le rendu. Et son canevas d'aperçu est un agrandissement fixe, donc chaque figure utilise le vrai téléchargement. Les deux l'auraient fait paraître pire qu'il ne l'est, et ni l'un ni l'autre n'a de rapport avec l'argument.

Les deux outils navigateur sont gratuits et prennent environ trente secondes si vous voulez vérifier tout ça vous-même.

Générateurs de normal map comparés : un sprite, quatre outils

La version courte

Il n'y a que trois façons de faire une normal map

Ce que la luminosité rate

Sprite sheets

Le curseur de détail

Un détour : les deux premiers résultats sont le même programme

Alors, lequel utiliser

FAQ

Méthode

Articles liés

Générateurs de sprites : manuel ou IA, comparatif

Générateurs de sprites IA : comment ça marche vraiment

12 principes d'animation adaptés aux sprites pixel art