Comment utiliser l'outil Générateur d'ombres
- Déposez un sprite.
- Choisissez ombre portée (copie décalée derrière le sprite) ou ombre projetée (silhouette aplatie au sol).
- Réglez le décalage, ou l'écrasement et l'inclinaison, puis la couleur et l'opacité.
- Vérifiez le rendu sur les fonds d'aperçu vert, sombre et clair.
- Téléchargez le PNG.
Ce que vous obtenez
- PNG avec l'ombre intégrée et un canevas qui la contient
- Ombre semi-transparente avec une seule valeur alpha (pas d'empilement)
Conseils tirés de nos propres jeux
- Pour une ombre projetée, l'inclinaison donne la direction du soleil : positive, elle penche à droite ; négative, à gauche. Gardez la même pour tous les sprites d'une scène.
- Une ombre colorée (violet foncé ou bleu) rend en général mieux que le noir sur de l'herbe ou du sable.
- Si votre moteur dessine lui-même les ombres, exportez-les à part : mettez l'opacité à 100 % sur une copie et utilisez-la comme masque.
- L'étalement agrandit l'ombre portée de pixels entiers, ce qui donne une impression de douceur sans ajouter de flou.
Cas d'usage
- Donner une ombre portée pixel art aux icônes et boutons d'UI
- Ancrer personnages et décors au sol dans les scènes en vue de dessus et de côté
- Faire ressortir un texte de titre sur un fond chargé
- Images fixes pour page de store et trailer
FAQ
Quelle différence entre ombre portée et ombre projetée ?
Une ombre portée est la silhouette du sprite décalée, comme s'il flottait au-dessus du fond. Une ombre projetée est retournée, aplatie et inclinée sous les pieds du sprite, comme si la lumière venait de côté.
Les ombres sont-elles floutées ?
Non. Les bords restent francs. L'option d'étalement agrandit la silhouette de pixels entiers au lieu de la flouter.
Pourquoi l'ombre est-elle semi-transparente ?
Pour laisser voir le sol. Chaque pixel d'ombre reçoit le même alpha, donc les parties qui se chevauchent ne deviennent pas plus sombres.
Où commence l'ombre projetée ?
À la ligne opaque la plus basse du sprite, normalement les pieds. Utilisez le réglage d'écart si le sprite a de l'espace vide en dessous.
Mon image est-elle envoyée sur un serveur ?
Non. Tout tourne dans votre navigateur.