Blog Metlivi

Comment créer un cycle de marche basique en pixel art sans connaître l'anatomie

Si l'anatomie vous semble encore peu familière, construisez la marche sous forme d'une boucle de masses simples et de quatre poses répétables. Commencez avec un personnage de profil, bloquez les jambes et le torse avec des couleurs contrastées, puis animez huit images : contact, descente (« down »), passage (« passing ») et montée (« up »), puis la même séquence avec l'autre jambe vers l'avant. Vérifiez la boucle à petite taille avant d'ajouter des vêtements, de l'ombrage ou des détails. Cela permet de garder l'accent sur la lisibilité du mouvement plutôt que sur un dessin peaufiné.

15 octobre 20267 min de lecturePar Metlivi Editorial Team
Section 1

Définir un point de départ petit et fixe

Choisissez une zone de travail adaptée au personnage que vous avez déjà ; 32 × 32 pixels est un exemple pratique utilisé dans un tutoriel de cycle de marche en pixel art, et non une taille imposée. Conservez les dimensions du canevas ainsi que la largeur et la hauteur globales du personnage de manière cohérente d'une image à l'autre. Placez un repère horizontal pour le sol sous les pieds et déterminez un point d'ancrage stable, comme le centre du torse. Ces repères permettent de repérer plus facilement tout décalage indésirable.

Pour le premier jet, représentez la tête sous la forme d'un ovale ou d'un bloc, le torse comme une forme compacte unique, et chaque bras et jambe comme une ligne épaisse ou une forme étroite. Utilisez différentes couleurs temporaires pour les membres au premier plan et à l'arrière-plan afin de pouvoir les distinguer lorsqu'ils se chevauchent. Il s'agit d'un schéma de travail, et non d'une représentation exacte des proportions. L'artiste pixel Raymond Schlitter décrit l'utilisation d'un mannequin à code couleur pour séparer la tête, le cou, le torse, les bras et les jambes avant d'affiner un sprite plus grand. SLYNYRD : « Pixelblog - 50 - Human Walk Cycle »

Section 2

Planifier les quatre poses avant de dessiner les détails

Une structure utile pour un cycle de marche comporte quatre poses : contact, descente, passage et montée. Dessinez-les pour un pas, puis répétez le schéma en inversant la jambe motrice. Lors du contact, le pied avant s'étend vers l'avant et le pied arrière vers l'arrière. À la descente, le pied avant supporte le poids du personnage et le corps s'abaisse. Au passage, les jambes se croisent visuellement tandis que le pied arrière avance, et le corps s'élève. À la montée, la jambe qui avance se balance vers l'avant en direction du contact suivant.

Pour une boucle de huit images, organisez les dessins dans cet ordre : contact gauche, descente, passage, montée, contact droit, descente, passage, montée. La seconde moitié inverse la jambe qui mène ; elle doit être perçue comme la partenaire de la première moitié, et non comme une simple image dupliquée. Un exemple détaillé de pixel art nomme ces moments clés et utilise huit images comme compromis entre économie et fluidité ; d'autres nombres d'images peuvent convenir à d'autres styles de sprites. SLYNYRD : « Pixelblog - 50 - Human Walk Cycle »

Section 3

Construire les jambes avec des formes simples

Dessinez la première pose de contact avec les jambes suffisamment écartées pour être lisibles à la taille d'affichage réelle du sprite. Gardez les pieds sur le repère du sol. Sur l'image suivante, fléchissez légèrement la jambe d'appui et abaissez légèrement le torse. Au passage, rapprochez les pieds et placez le pied oscillant sous le corps. Sur la pose de montée, levez le talon ou le pied qui avance, tandis que l'autre jambe soutient la silhouette. Effectuez ensuite le contact opposé et poursuivez la séquence.

Traitez chaque membre comme une forme continue de la hanche au pied. Il n'est pas nécessaire de faire correspondre chaque os à des pixels : conservez une longueur de jambe globalement constante et rendez la flexion du genou visible par un changement de direction ou de contour. Sur un minuscule sprite, cela peut ne représenter qu'un décalage d'un ou deux pixels. Si les jambes forment un seul bloc illisible, accentuez leur écartement ou utilisez les couleurs temporaires premier/arrière-plan pour clarifier celle qui passe devant. Un tutoriel sur les sprites basse résolution note que les marches à quatre images peuvent fonctionner pour les petits personnages, tandis que l'alternance de l'ombrage des jambes peut aider un cycle de quatre images à distinguer les deux jambes motrices. Manning Leonard Krull : « Tutorial: Walking animation for low-res sprites »

Section 4

Garder le torse et les bras lisibles

Ancrez le torse et la tête autour du même centre général d'une image à l'autre. Laissez le corps s'abaisser vers la pose de descente et monter vers la phase de passage ou de montée du pas, mais modérez l'oscillation : une variation d'un seul pixel peut déjà être flagrante sur un petit canevas. Pour les bras, essayez de balancer le bras opposé à la jambe avant. Si la jambe droite avance, le bras gauche peut se balancer vers l'avant ; inversez l'association pour le contact suivant. Gardez les mains et les pieds suffisamment simples pour qu'ils se distinguent bien des membres.

Il s'agit de formes de départ à tester, et non de mesures universelles. Un personnage emmitouflé, un sprite de très petite taille ou un design fortement stylisé peuvent nécessiter moins de séparation entre les membres ou un balancement des bras plus subtil. Un tutoriel pratique de pixel art recommande également de simplifier les mains et les pieds, de faire varier la teinte du membre arrière pour suggérer la profondeur, et d'adapter les proportions au style visé pour le personnage. Clip Studio Tips : « Astuces et configuration pour créer un cycle de marche - Pixel Art »

Section 5

Ajouter les détails de pixels une fois le mouvement fonctionnel

Lisez la boucle brute avant d'ajouter un visage, des plis, des reflets ou des accessoires. Veillez à ce qu'il y ait une distinction nette entre les deux poses de contact, un passage lisible des jambes sous le torse, et une tête qui reste alignée sans faire d'embardées latérales. Si le sprite semble marcher sur place ou donner des coups de pied, ajustez d'abord la forme brute des membres. Les détails risquent de masquer les problèmes de mouvement tout en ralentissant chaque correction.

Une fois les silhouettes au point, restaurez la palette du personnage et peaufinez un élément à la fois. Gardez les modifications localisées : si seule la jambe arrière change de plan, modifiez sa couleur ou son chevauchement sans décaler la tête et le torse. Les cheveux, une manche ample ou un petit accessoire peuvent bouger légèrement avec le corps, mais cela reste facultatif. Dans un exercice de pixel art en quatre images, Pinnguaq montre comment ajouter un léger mouvement à de petits détails tels que les cheveux et la décoration d'un chapeau après avoir établi le cycle de base. Pinnguaq : « Pixel Art 4A: Animation Basics In GraphicsGale »

Section 6

Vérifier la boucle, puis ajuster le timing

Prévisualisez l'animation en continu et parcourez-la image par image. Comparez d'abord l'image huit avec l'image un : le torse, la tête, la position au sol et la silhouette globale doivent s'enchaîner sans à-coup visible. Vérifiez ensuite que les deux poses de contact correspondent bien à des pas opposés, et que le pied posé ne semble pas sauter à une hauteur différente. Si le personnage semble trop osciller, réduisez le mouvement vertical ; si les jambes se confondent, améliorez leur espacement ou leur chevauchement.

Ne modifiez qu'une chose par passage, puis relancez la lecture. Le délai d'affichage des images dans une chronologie détermine la durée pendant laquelle chaque dessin reste à l'écran : testez donc la vitesse en cours de lecture plutôt que de juger les dessins uniquement sous forme d'images fixes. Le guide de Pinnguaq recommande de vérifier à la fois l'aperçu animé et les images individuelles, et de modifier le délai d'image pour ajuster la vitesse. Pinnguaq : « Pixel Art 4A: Animation Basics In GraphicsGale »

Section 7

Quand utiliser moins ou plus d'images

Huit images vous laissent l'espace nécessaire pour montrer les quatre poses principales pour les deux côtés. Si le sprite est minuscule, un cycle de deux ou quatre images peut être plus lisible, car il y a moins de micro-changements à dessiner ; si les transitions semblent trop brusques et que la zone de travail le permet, ajoutez des images entre les poses clés. Aucun nombre d'images unique ne convient à tous les sprites. Le guide d'Adafruit décrit des marches simples de jeux vidéo utilisant environ six images et des versions plus fluides pouvant aller jusqu'à douze images, tandis que le tutoriel basse résolution aborde les options à deux, quatre et huit images. Adafruit : « Pixel Art for LED Matrix Displays », Manning Leonard Krull : « Tutorial: Walking animation for low-res sprites »

Terminez lorsque la marche est parfaitement lisible à sa taille finale et que la transition entre la dernière et la première image semble continue. Sauvegardez cette version brute avant d'ajouter des images supplémentaires ou des mouvements secondaires : cela vous offre une référence claire vers laquelle revenir si les détails ajoutés finissent par nuire à la lisibilité du mouvement.

Section 8

Sources

À lire aussi

Continuer sur ce thème