Créer des sprites de jeu de combat : poings, pieds et balayages

Les sprites de jeu de combat sont parmi les plus difficiles à réussir dans un jeu 2D. Le héros d’un jeu de plateforme se contente de marcher, de sauter et peut-être d’une attaque. Un combattant a besoin d’une douzaine d’attaques qu’on distingue d’un coup d’œil, d’une garde accroupie qui ne se relève jamais par accident, et du même visage et de la même tenue dans chacune d’elles. Les joueurs regardent ces personnages pendant des heures, donc le moindre défaut se voit.

Ce guide explique ce qui rend les sprites de jeu de combat différents, les coups dont un combattant de base a besoin, comment les attaques faibles, moyennes et fortes doivent se distinguer frame par frame, et comment garder le même combattant sur toute sa liste de coups. Chaque planche de l’article est un vrai résultat de 8 frames du créateur de sprites IA de ce site, obtenu avec le sélecteur de coups de combat présenté à la fin.

Ce qui rend les sprites de jeu de combat différents

Trois points séparent une planche de sprites de combat d’une animation de personnage ordinaire.

• Toujours en vue de côté. Les combattants sont dessinés de profil strict, face à l’adversaire. Le jeu retourne le sprite quand les personnages changent de côté : on dessine donc une seule direction, jamais une vue de trois quarts.
• Chaque attaque a trois phases. Le démarrage est la préparation avant le coup, la phase active est le moment où l’attaque peut toucher, et la récupération est le retour en garde. Les joueurs lisent ces phases pour savoir quand bloquer et quand punir : elles doivent se voir dans le dessin, pas seulement dans le code.
• La garde est un contrat. Chaque attaque normale commence et finit dans la même posture, pour que le jeu puisse enchaîner les coups sans que le personnage saute d’une pose à l’autre. Une attaque accroupie commence et finit accroupie.

Si vous n’avez jamais fait de sprite sheet, le guide pour créer une sprite sheet couvre la taille des cellules, le nombre de frames et l’import dans le moteur. Cet article part de là et se concentre sur ce qui est propre aux jeux de combat.

La liste de coups d’un combattant de base

Les jeux de combat 2D classiques utilisent six boutons d’attaque : faible, moyen et fort, pour le poing et pour le pied. Combinés à trois postures (debout, accroupi et sauté), cela donne 18 attaques normales. En ajoutant les animations de déplacement et de réaction, un combattant minimal ressemble à ceci :

Animation	Nombre	Frames par planche	Notes
Garde au repos	1	6–8	Tourne en boucle. Juste une légère respiration.
Avancer et reculer	2	8	Reculer peut être la marche avant jouée à l’envers.
S’accroupir	1	6	La garde accroupie d’où part chaque attaque basse.
Saut	1	8	Impulsion, montée, sommet, chute, réception.
Normaux debout	6	6–8	Faible, moyen et fort, au poing et au pied.
Normaux accroupis	6	6–8	Les mêmes boutons, en bas.
Normaux sautés	6	6–8	En l’air, vers l’avant et le bas.
Touché, garde, chute	3+	6–12	La chute reste sur sa dernière frame.

Cela fait environ 25 planches par personnage avant le moindre coup spécial. C’est aussi pourquoi la cohérence compte ici plus qu’ailleurs : 25 planches dessinées un peu différemment ressemblent à 25 personnes différentes.

Faible, moyen et fort doivent se distinguer

L’erreur la plus courante dans les sprites de combat, ce sont trois coups de poing qui sont en fait le même coup à des vitesses différentes. Dans un jeu de combat, la force n’est pas l’effort. C’est le type d’attaque, et chaque type a une forme différente au fil des frames.

Les attaques faibles sont rapides et courtes. Le poing ou le pied part et revient presque sans préparation, le corps tourne à peine, et le personnage retrouve vite sa garde. Sur la planche ci-dessus, la plupart des huit frames montrent la garde ; le bras n’est tendu qu’un instant.

Les attaques fortes engagent tout le corps. La préparation ramène le poing à la hanche, les hanches et les épaules pivotent dans le coup, le bras va jusqu’à l’extension complète, et la récupération est assez lente pour que l’adversaire punisse un coup raté. Comparez les deux planches : le poing fort fait un pas en avant et garde le bras tendu deux frames, le faible non.

Le moyen se situe entre les deux : une courte préparation, une extension droite complète et une récupération normale.

Une répartition pratique pour une planche de 8 frames :

• Faible : 1 de garde, 1 de démarrage, 2 actives, 3 de récupération, 1 de garde.
• Moyen : 1 de garde, 2 de démarrage, 2 actives, 2 de récupération, 1 de garde.
• Fort : 1 de garde, 2 de démarrage, 2 actives, 2 de récupération, 1 de garde, avec le plus grand changement de pose sur les frames actives.

Les trois forces peuvent avoir le même nombre de frames. Ce qui change, c’est leur répartition, et le rythme s’ajuste dans le moteur en donnant une durée plus longue aux frames actives.

Les coups accroupis restent accroupis

Une attaque accroupie se fait entièrement depuis la garde accroupie. La première frame est accroupie, la dernière aussi, et le personnage ne se relève jamais entre les deux. Une planche qui commence debout, s’accroupit puis se relève est un autre coup, et elle casse les enchaînements parce qu’elle ne part pas de la posture où le coup précédent s’est terminé.

Le pied fort accroupi est l’exemple classique. Dans la plupart des jeux de combat, c’est un balayage : la jambe avant glisse au ras du sol pour faire tomber l’adversaire. Regardez ce qui ne bouge pas sur la planche ci-dessus : les hanches ne remontent jamais, la tête reste à la même hauteur basse et la jambe revient en garde accroupie à la fin. Le poing fort accroupi a en général la forme inverse, un uppercut montant qui envoie le poing au-dessus de la tête.

Les attaques sautées

Les attaques sautées se font en l’air, vers l’avant et le bas, car elles visent un adversaire debout en dessous. La planche doit contenir le saut lui-même (impulsion, montée, l’attaque au sommet, chute et réception) pour que l’attaque suive l’arc du saut.

Deux détails rendent les planches de saut utilisables en jeu. Gardez le personnage à la même taille en l’air qu’au sol, et laissez le moteur déplacer le sprite verticalement plutôt que de dessiner la hauteur dans les frames, sauf si vous voulez figer l’arc. Si vous dessinez la hauteur, gardez exactement la même ligne de sol sur la première et la dernière frame pour que la réception ne saute pas.

Un même combattant pour tous les coups

Regardez bien les planches de cet article. Elles viennent toutes de la même description, « karatéka en kimono blanc », mais le poing faible porte une ceinture blanche et les autres une noire. Chaque planche a été faite à partir du texte seul, donc chacune est une lecture différente de la description par le générateur. Sur une liste de 25 planches, ce genre de petite différence suffit à faire d’un combattant plusieurs personnes.

Les combattants dessinés à la main règlent ce problème avec une planche de référence et une réutilisation stricte des parties du corps. Avec un générateur IA, l’équivalent est une image de référence. Faites la première planche, puis utilisez une de ses frames comme référence pour tous les autres coups : le générateur dessine alors le même personnage au lieu de le réinventer à chaque fois. Sur SpriteGen, c’est le bouton Action suivante d’une planche terminée : il garde la première frame de ce personnage comme ancre et vous laisse décrire le coup suivant. Gardez cette même référence pour créer un ensemble cohérent de coups pour votre combattant.

Les jeux de combat adorent aussi les costumes alternatifs. Avec une image de référence en place, décrivez le changement en même temps que le coup, par exemple « le même combattant en kimono rouge avec un bandeau noir, poing fort ». Le changement s’applique à toutes les frames et le reste du personnage reste comme sur la référence.

Une règle pour éviter les ennuis : créez vos propres personnages. Les sprites extraits de jeux de combat commerciaux, ou de nouveaux sprites de leurs personnages, ne sont pas à vous pour être publiés.

Créer des sprites de jeu de combat avec SpriteGen

Le créateur de sprites dispose d’un sélecteur de coups de combat pensé pour ce travail.

1. Décrivez le combattant. Par exemple « karatéka en kimono blanc avec une ceinture noire ». Si vous avez déjà le personnage, ajoutez-le comme image de référence.
2. Choisissez « Vue de côté » comme perspective.
3. Ouvrez « Coup de combat » dans la zone des actions et choisissez trois choses : la posture (Debout, Accroupi ou Sauté), l’attaque (Poing ou Pied) et la force (Faible, Moyen ou Fort). « Pied fort (Accroupi) » devient un balayage bas et « Poing fort (Accroupi) » un uppercut montant.
4. Choisissez le nombre de frames. 8 frames suffisent pour la plupart des normaux ; prenez 12 pour un coup fort que vous voulez plus fluide.
5. Générez, puis utilisez Action suivante pour compléter la liste de coups avec le même combattant.

Vous pouvez aussi écrire le coup dans la description comme l’écrivent les joueurs. « Pied fort accroupi », « cr.HK » et « 2HK » sont compris, tout comme LP, MP, HP et LK, MK, HK pour les six boutons.

Chaque planche sort en PNG transparent avec des cellules régulières, prête à être découpée dans Unity, Godot, GameMaker ou Phaser. Les étapes d’import pour chaque moteur sont les mêmes que pour n’importe quelle sprite sheet. Pour un combattant, réglez l’animation pour qu’elle se joue une fois au lieu de boucler, et faites durer les frames actives un peu plus longtemps que les autres pour que les coups paraissent solides.

Prêt à créer votre combattant ? Ouvrez le créateur de sprites, décrivez votre personnage, choisissez un coup de combat et générez votre première planche.