Aller au contenu

Pixel art : créer ses sprites de jeu avec Aseprite

Par Baptiste P.

9 min de lecture
Lien copié dans le presse-papiers

Le pixel art est plus populaire que jamais. Celeste, Stardew Valley, Dead Cells, Blasphemous, certains des jeux les plus acclamés de ces dernières années utilisent du pixel art. Ce n'est pas un choix par défaut ou par nostalgie : c'est un style artistique à part entière, avec ses propres règles et sa propre esthétique. Et le meilleur outil pour le faire, c'est Aseprite.

Aseprite : l'outil de référence#

Aseprite est un éditeur de sprites dédié au pixel art. Il coûte 19,99 USD sur Steam (ou gratuit si tu le compiles toi-même depuis le code source sur GitHub).

Pourquoi Aseprite et pas Photoshop ?#

CritèreAsepritePhotoshop
Grille pixelNativeConfiguration manuelle
Animation spriteTimeline dédiée, onion skinningPossible mais pénible
PalettesGestion native, palettes indexéesBasique
Export spritesheetUn clicPlugin nécessaire
Prix20 USD (one-time)24 EUR/mois
Poids15 Mo2 Go

Aseprite est conçu pour le pixel art. Tout le workflow, de la création du canvas à l'export du spritesheet, est optimisé pour les sprites de jeux vidéo.

L'interface en 2 minutes#

  • Canvas : la zone de dessin (zoom avec molette, scroll avec barre espace)
  • Palette : à droite, les couleurs disponibles
  • Timeline : en bas, les frames d'animation
  • Outils : à gauche (crayon, gomme, sélection, remplissage, ligne)
  • Layers : calques pour séparer les éléments (corps, yeux, vêtements)

Raccourcis essentiels :

RaccourciAction
BCrayon (outil principal)
EGomme
GRemplissage
LLigne
URectangle
MSélection rectangulaire
ZZoom
XInverser couleur avant/arrière
Alt + clicPipette (prélever une couleur)

Les fondamentaux du pixel art#

Résolution et taille de sprite#

UsageRésolution spriteExemple
Style NES (8-bit)16x16 ou 16x24 pxMega Man, original Zelda
Style SNES (16-bit)32x32 ou 32x48 pxChrono Trigger, Secret of Mana
Style GBA / moderne low-res48x48 ou 64x64 pxCeleste, Dead Cells
Style HD pixel art96x96 ou 128x128 pxOctopath Traveler

Commence petit : un sprite de 16x16 ou 32x32 force à faire des choix de design. Chaque pixel compte. C'est là que tu apprends. Un sprite de 128x128 c'est juste du dessin numérique avec une grille, c'est pas du pixel art, c'est du painting.

Les lignes en pixel art#

La règle d'or : évite les "jaggies" (escaliers irréguliers). Une ligne diagonale en pixel art doit avoir des segments réguliers.

  • Bon : 1-1-1-1 (45°), 2-2-2-2 (environ 30°), 1-2-1-2 (environ 60°)
  • Mauvais : 1-3-1-2-4-1 (irrégulier, l'œil accroche)

Les courbes#

Les courbes suivent le même principe : des segments qui progressent de manière régulière. Pour un cercle, la séquence typique est : 5-3-2-1-1-1-2-3-5 (en partant du haut, pour un quart de cercle).

Aseprite a un outil cercle (Shift+U) qui génère des cercles pixel-perfect.

L'anti-aliasing (à doser)#

L'anti-aliasing (AA) utilise des pixels de couleur intermédiaire pour adoucir les bords. En pixel art, l'AA manuel (2 à 3 nuances) donne un résultat propre. L'AA automatique (Photoshop) crée des bordures floues qui cassent le style pixel. Honnêtement, le AA automatique fait peur aux puristes, mais utiliser une nuance intermédiaire de temps en temps rend les sprites plus lisses sans perdre le feeling rétro.

Les palettes de couleurs#

Pourquoi limiter sa palette ?#

Les meilleurs pixel arts utilisent des palettes limitées (8 à 32 couleurs). La contrainte force la créativité et assure la cohérence visuelle. Un sprite avec 200 couleurs ressemble à du pixel art amateur ; un sprite avec 16 couleurs bien choisies a du style.

Palettes classiques#

PaletteCouleursStyle
Pico-816Rétro, couleurs vives
Endesga 3232Moderne, polyvalente
Sweetie 1616Doux, pastel
DB32 (DawnBringer)32Réaliste, saturé
Game Boy4Monochrome vert

Tu peux importer ces palettes dans Aseprite (fichier .gpl ou .ase) via Palette → Load Palette.

Créer sa propre palette#

Règles de base :

  1. Hue shifting : quand tu assombris une couleur, décale légèrement la teinte vers le bleu/violet. Quand tu l'éclaircis, décale vers le jaune. Les ombres froides + lumières chaudes donnent un rendu naturel.
  2. Ramps : crée des rampes de 3 à 5 nuances par couleur (ombre foncée → ombre → base → lumière → highlight)
  3. Saturation : réduis la saturation dans les ombres et les highlights. Les couleurs les plus saturées sont au milieu de la rampe.

Créer un personnage : workflow complet#

Étape 1 : Silhouette (5 min)#

Dessine la silhouette en une seule couleur (noir ou couleur de base). Le personnage doit être reconnaissable uniquement par sa forme. Si la silhouette est confuse, aucun détail ne la sauvera.

Étape 2 : Couleurs de base (10 min)#

Remplis les grandes zones avec les couleurs de base de ta palette. Corps, cheveux, vêtements, accessoires. Pas d'ombres encore, juste les couleurs plates.

Étape 3 : Ombres (15 min)#

Ajoute une couleur d'ombre pour chaque zone. Décide d'une direction de lumière (typiquement : haut-gauche) et ombre tout de manière cohérente.

Technique : utilise un nouveau calque en mode Multiply pour expérimenter avec les ombres sans toucher aux couleurs de base.

Étape 4 : Highlights (10 min)#

Ajoute une couleur de lumière sur les surfaces qui font face à la source de lumière. Avec parcimonie : trop de highlight donne un aspect plastique.

Étape 5 : Détails (10 min)#

Yeux, bouche, détails de vêtement, accessoires. C'est la phase où le personnage prend vie. En 32x32, chaque pixel de détail a un impact énorme.

Étape 6 : Outline (5 min)#

Deux écoles :

  • Outline noir : style classique (Mega Man, Cave Story). Lisible, contrasté.
  • Selout (selective outline) : l'outline prend la couleur de la zone adjacente mais plus foncée. Plus doux, plus moderne (Celeste, Dead Cells).

Animation de sprites#

Les frames essentielles d'un personnage#

AnimationFramesPriorité
Idle (repos)2-4Haute
Walk4-8Haute
Run6-8Haute
Jump3-5Haute
Attack4-8Moyenne
Death4-6Moyenne
Hurt2-3Basse

L'onion skinning#

L'onion skinning affiche les frames précédentes et suivantes en transparence. C'est indispensable pour l'animation : tu vois d'où vient le mouvement et où il va.

Active-le dans Aseprite : View → Onion Skinning (ou bouton en bas de la timeline).

Le cycle d'animation : walk#

Pour un walk cycle en 6 frames (à 12 FPS = 0,5 seconde par pas) :

  1. Contact : pied avant étendu, pied arrière derrière
  2. Low point : le corps descend, pied avant à plat
  3. Pass : le pied arrière passe devant
  4. Contact (inversé) : miroir de la frame 1
  5. Low point (inversé)
  6. Pass (inversé)

Astuce : anime le corps d'abord (torse, jambes), puis les bras en opposition, puis la tête en dernier.

Export pour les moteurs de jeu#

Spritesheet#

Un spritesheet est une image unique contenant toutes les frames d'animation disposées en grille. C'est le format standard pour les moteurs de jeu.

Dans Aseprite : File → Export Sprite Sheet

  • Layout : By Rows (horizontal, le plus courant)
  • Borders : Padding 1 px entre les frames (évite le bleeding en jeu)
  • Output : PNG
  • Data : JSON (contient les coordonnées de chaque frame pour le moteur)

Pour Unity#

  1. Importe le PNG dans Unity
  2. Sprite EditorSlice → Grid By Cell Size → entre la taille de chaque frame
  3. Crée un Animator Controller avec les animations

Pour Godot#

  1. Importe le PNG
  2. Utilise un noeud AnimatedSprite2D avec les frames du spritesheet
  3. ou importe le JSON d'Aseprite avec le plugin "Aseprite Wizard"

Pour plus d'infos sur l'export des jeux vidéo, consulte la doc du moteur que tu choisis.

FAQ#

Faut-il savoir dessiner pour faire du pixel art ?#

Non, pas au sens classique. Le pixel art est une compétence distincte du dessin traditionnel. Des notions de composition, de couleur et d'anatomie basique aident, mais beaucoup de pixel artists autodidactes ont appris sans formation en dessin.

Quelle taille de canvas pour un jeu ?#

Ça dépend de la résolution cible du jeu. Pour un jeu qui s'affiche en 320x180 (upscalé en plein écran), des sprites de 16 à 32 px sont proportionnels. Pour un jeu en 640x360, des sprites de 32 à 64 px fonctionnent bien. La règle : le personnage principal doit faire entre 5 et 15 % de la hauteur de l'écran.

Aseprite ou Piskel (gratuit en ligne) ?#

Piskel est gratuit et fonctionne dans le navigateur. C'est parfait pour tester le pixel art sans engagement. Mais dès que tu deviens sérieux (palettes, calques, export), Aseprite justifie largement ses 20 USD.

Peut-on vivre du pixel art ?#

Les pixel artists expérimentés travaillent comme freelances pour des studios indie, vendent des asset packs sur itch.io, ou créent leurs propres jeux. Les tarifs freelance varient de 25 à 75 EUR/heure selon l'expérience et la complexité. Les asset packs populaires sur itch.io génèrent des revenus passifs.

BP

Baptiste P.

Chroniqueur digital & gaming

Lien copié dans le presse-papiers

À lire aussi