Sprites GameMaker : facile, jusqu'à ce que ça ne le soit plus

Mettre un sprite dans GameMaker prend cinq secondes. Glissez un PNG dans l'IDE, c'est fait. Puis votre personnage flotte deux pixels au-dessus du sol. Ou les collisions sonnent faux. Ou votre cycle de marche joue à la mauvaise vitesse et vous ne comprenez pas pourquoi.

L'import est trivial. C'est tout ce qui vient après qui fait perdre des heures.

Ce guide couvre le flux complet des sprites GameMaker, de l'art jusqu'au moteur, puis le GML qui gère bien l'animation. Sprites dessinés dans Aseprite, générés par IA ou tirés d'une sprite sheet, le processus est le même.

Importer des sprites dans GameMaker

Trois façons d'entrer un sprite.

Glisser-déposer

Glissez un PNG de votre explorateur de fichiers vers l'Asset Browser de GameMaker. C'est tout. GameMaker crée une ressource sprite avec une sous-image. Bon pour les sprites statiques. Objets, interface, tout ce qui n'a qu'une frame.

Import Strip Image

C'est la méthode pour les animations. Dans le Sprite Editor, cliquez Image > Import Strip Image et choisissez votre bande de sprites. GameMaker demande le nombre de frames, leur largeur, leur hauteur et le nombre de frames par rangée.

Le hic, l'import attend une bande horizontale par défaut. Si votre sprite sheet est en grille (plusieurs rangées), réglez « frames per row » correctement, sinon vous obtenez des frames brouillées. Une grille 4x3 de frames 32x32 donne frame width 32, frame height 32, number of frames 12, frames per row 4.

Ajouter des frames une à une

Ouvrez une ressource sprite, cliquez Edit Image, puis Image > Import sur chaque sous-image. Fastidieux pour une animation, mais utile pour ajouter une ou deux frames à un sprite existant.

Méthode	Idéal pour	Animation
Glisser-déposer	Sprites seuls, prototypage rapide	Non (une frame)
Import Strip	Sprite sheets, cycles de marche, effets	Oui (découpe auto)
Ajout manuel de frames	Corriger une animation existante	Oui (manuel)

Le Sprite Editor : ce qui compte vraiment

Le Sprite Editor de GameMaker entasse plein de panneaux dans une fenêtre. La plupart ne servent jamais. Voici ce qui compte.

Point d'origine

L'origine est l'« ancre » du sprite, le point qui se place aux coordonnées x,y de l'objet dans la room. Ce seul réglage cause plus de frustration que tout le reste dans GameMaker.

Origine en haut à gauche (par défaut). Le x,y de l'objet est le coin supérieur gauche du sprite. Correct pour les tuiles et l'interface. Terrible pour les personnages, parce que « aller à x=100 » place les pieds à un drôle d'endroit.

Origine au centre. Le x,y est au centre du sprite. Mieux pour les projectiles et les effets.

Origine en bas au centre. Le bon choix pour les personnages. Le x,y est aux pieds du personnage. Posé sur une plateforme, il tient dessus. Si la taille du sprite change en cours d'animation, il ne flotte pas et ne s'enfonce pas.

Réglez l'origine dans la barre d'outils du Sprite Editor. Un menu offre des préréglages, ou cliquez sur l'aperçu pour la placer à la main.

// If you need to change origin in code (rare, but useful for debugging)
sprite_set_offset(spr_player_walk, sprite_get_width(spr_player_walk) / 2, sprite_get_height(spr_player_walk));

Ma recommandation honnête : bas au centre pour chaque personnage et chaque ennemi. Faites-le, point. Vous vous épargnez une douzaine de bogues d'alignement plus tard.

Sous-images

Les sous-images sont vos frames d'animation. La frame 0 est la première, la 1 la deuxième, et ainsi de suite. GameMaker les fait défiler tout seul quand l'objet se dessine.

Toutes les sous-images apparaissent en vignettes en haut du Sprite Editor. Cliquez une frame pour la modifier directement. Clic droit pour dupliquer, supprimer ou insérer.

Masque de collision

La forme invisible que GameMaker utilise pour les collisions. Indépendante de l'apparence du sprite, et le mauvais type donne un jeu qui semble cassé.

Masques de collision : choisir le bon

GameMaker offre quatre modes de masque de collision. La plupart des tutoriels passent vite dessus. Pas vous.

Automatic. GameMaker trace les pixels non transparents et crée un masque ajusté. Ça a l'air bien, mais ça change à chaque frame. Votre forme de collision bouge pendant l'animation. Une frame de coup d'épée a soudain une collision plus large qu'une frame d'attente. À éviter pour les personnages.

Full image. Tout le rectangle englobant sert de collision. Simple mais brouillon. La boîte de collision du personnage inclut tout l'espace transparent autour.

Manual. Vous définissez le rectangle vous-même. C'est ce que vous voulez pour la plupart des objets. Réglé une fois, il reste constant sur toutes les frames. La boîte de collision d'un personnage ne devrait pas changer parce qu'il donne un coup d'épée.

Precise. Collision au pixel près. Coûteux et presque jamais nécessaire en pixel art. Le seul vrai cas, un objet statique de forme irrégulière où le rectangle paraît clairement faux.

Type de masque	Performance	Idéal pour	À éviter pour
Automatic	Moyenne	Rarement utile	Personnages, objets mobiles
Full image	Rapide	Prototypage rapide	Tout ce qui a une marge transparente
Manual rectangle	Rapide	Personnages, ennemis, projectiles	Rien, c'est le choix par défaut
Precise (per-pixel)	Lente	Terrain statique irrégulier	Objets mobiles, gros sprites

Pour les jeux de plateforme et d'action, mettez le masque du personnage en Manual, puis tracez un rectangle un peu plus petit que le sprite visible. Les joueurs ne remarqueront pas le masque réduit. Ils remarqueront s'ils restent coincés sous un rebord parce que leur chapeau a accroché le plafond. Les boîtes de collision indulgentes donnent une meilleure sensation.

Animation en GML

GameMaker anime les sprites automatiquement. Il fait défiler les sous-images à chaque step. Mais les valeurs par défaut sont rarement celles que vous voulez.

image_speed

Contrôle la vitesse de l'animation. Une valeur de 1 signifie une frame par step. À 60 fps, un cycle de marche de 6 frames se termine en 0,1 seconde. Beaucoup trop vite.

// Create Event
image_speed = 0.15;  // ~9 frames per second at 60fps room speed

Valeur plus basse = animation plus lente. C'est un multiplicateur, pas des frames par seconde, ce qui en piège plusieurs.

// Common speeds for different animations
image_speed = 0.1;   // Idle breathing, slow and subtle
image_speed = 0.2;   // Walking, moderate pace
image_speed = 0.3;   // Running, noticeably quicker
image_speed = 0.5;   // Attack, fast and snappy

image_index

Le numéro de la frame courante. GameMaker l'incrémente tout seul, mais vous pouvez le régler à la main pour un contrôle précis.

// Reset to first frame (useful when switching animations)
image_index = 0;

// Jump to specific frame
image_index = 3;

// Check what frame we're on
if (image_index >= sprite_get_number(sprite_index) - 1) {
    // Last frame reached, do something
}

sprite_index

La ressource sprite assignée. C'est en la changeant qu'on passe d'une animation à l'autre.

// Step Event: switch sprites based on state
if (is_attacking) {
    sprite_index = spr_player_attack;
} else if (abs(hspeed) > 0) {
    sprite_index = spr_player_walk;
} else {
    sprite_index = spr_player_idle;
}

Tout assembler

Voici un patron qui gère l'état d'animation comme il faut. Le code de débutant assigne sprite_index à chaque frame sans vérifier s'il a changé, ce qui remet image_index à zéro et fait clignoter le sprite.

// Step Event: proper animation switching
var _target_sprite = spr_player_idle;
var _target_speed = 0.1;

if (is_attacking) {
    _target_sprite = spr_player_attack;
    _target_speed = 0.4;
} else if (abs(hspeed) > 1) {
    _target_sprite = spr_player_run;
    _target_speed = 0.25;
} else if (abs(hspeed) > 0) {
    _target_sprite = spr_player_walk;
    _target_speed = 0.2;
}

// Only change sprite if it's different, otherwise the animation resets
if (sprite_index != _target_sprite) {
    sprite_index = _target_sprite;
    image_index = 0;  // Start new animation from frame 0
}

image_speed = _target_speed;

Ça évite le bogue d'animation le plus courant dans GameMaker. Le sprite clignote parce que vous réassignez sprite_index à chaque frame.

Réglages de rendu au pixel près

Les sprites GameMaker paraissent flous dans certaines situations. Voici comment corriger ça.

Filtrage de texture

Allez dans Game Options > [Platform] > Graphics et vérifiez que le filtrage de texture est désactivé (ou réglé sur « Point »). Le filtrage linéaire lisse les pixels, l'inverse de ce qu'on veut en pixel art.

Vous pouvez aussi le régler par dessin en GML.

// Draw Event: force nearest-neighbor for this sprite
gpu_set_texfilter(false);
draw_self();

Mise à l'échelle entière

Dans les réglages de la room, la vue doit être mise à l'échelle par un nombre entier. Une vue de 320x180 affichée en 1280x720, c'est 4x. Des pixels propres. En 1366x768? C'est 4,26x. Une échelle fractionnaire donne des pixels de 4 px et d'autres de 5 px. C'est laid.

// In a camera/view setup script
var _scale = floor(display_get_width() / view_w);
surface_resize(application_surface, view_w * _scale, view_h * _scale);

Application surface

GameMaker dessine tout sur l'application surface, puis la met à l'échelle de la fenêtre. Si cette surface ne correspond pas à votre résolution en pixels, vous obtenez des artefacts de rendu sous-pixel.

// Room creation code
application_surface_draw_enable(false);

// Draw GUI Event (ensures clean scaling)
var _scale = floor(min(
    display_get_width() / camera_get_view_width(view_camera[0]),
    display_get_height() / camera_get_view_height(view_camera[0])
));
var _sw = camera_get_view_width(view_camera[0]) * _scale;
var _sh = camera_get_view_height(view_camera[0]) * _scale;
var _sx = (display_get_width() - _sw) / 2;
var _sy = (display_get_height() - _sh) / 2;

draw_surface_ext(application_surface, _sx, _sy, _scale, _scale, 0, c_white, 1);

C'est plus de code que la plupart des tutoriels en montrent. Mais le sauter, c'est pourquoi tant de jeux pixel art GameMaker ont des pixels de tailles inégales.

Bandes de sprites ou frames séparées

Importer une bande ou un PNG par frame?

Les bandes gagnent presque à tout coup. Un fichier par animation. Plus facile à gérer, plus facile à versionner, moins d'assets qui encombrent le projet. L'import de bande de GameMaker découpe pour vous.

Les frames séparées ont du sens quand vous itérez sur des frames précises en développement. Retoucher la frame 3 d'un cycle de marche sans réexporter toute la bande. Passé le prototypage, regroupez-les.

Avec des sprites générés par IA, vous obtenez normalement des frames séparées. Générez les poses du personnage, retouchez-les dans l'éditeur de pixel art, puis assemblez-les en bande avec tout éditeur d'images ou un créateur de sprite sheets avant d'importer dans GameMaker.

Exporter depuis Sprite AI (sprite-ai.art) vers GameMaker

Flux rapide pour amener des sprites générés par IA dans GameMaker.

Générez le sprite à la résolution cible (32x32 ou 64x64 conviennent bien à GameMaker)
Retouchez dans l'éditeur de pixel art au besoin. Corrigez les couleurs, nettoyez les bords
Exportez en PNG avec arrière-plan transparent
Pour une animation, générez chaque pose séparément avec un prompt constant
Assemblez les frames en bande horizontale (tout éditeur d'images fait l'affaire)
Dans GameMaker, Sprite > Import Strip Image, puis entrez les dimensions des frames

GameMaker se fiche d'où viennent vos sprites. Générés par IA, dessinés à la main, convertis de photos. Au final, ce sont des PNG. L'import est identique. Pour le détail des options d'export, le guide des formats d'export de sprites couvre les réglages PNG et la transparence.

Erreurs courantes (et leurs correctifs)

Les problèmes que je vois constamment dans les projets pixel art GameMaker.

Point d'origine différent entre les sprites d'animation. Vous avez spr_player_idle avec l'origine en bas au centre et spr_player_walk en haut à gauche. Au changement de sprite, le personnage se téléporte. Correctif : la même origine sur chaque sprite de cet objet. Chacun, sans exception.

Oublier image_speed. La valeur par défaut est 1, soit une frame complète par step. À 60 fps, votre cycle de marche de 8 frames se termine en 0,13 seconde. Personne ne voit les frames. Réglez toujours image_speed dans le Create Event.

Utiliser les masques de collision automatiques. La collision du personnage change de forme à chaque frame. Soudain, il traverse les murs à la frame 4 de l'attaque parce que le masque a rétréci. Utilisez des masques rectangulaires manuels.

Sprites flous. Le filtrage de texture est activé. Désactivez-le. Vérifiez Game Options, vérifiez votre code de dessin, vérifiez tout. Un seul mauvais réglage et votre pixel art propre devient de la bouillie.

Sprite qui clignote. Vous assignez sprite_index à chaque frame dans le Step Event, ce qui remet image_index à 0 à chaque frame. Vérifiez si le sprite a vraiment changé avant de le réassigner (voir le patron GML plus haut).

Échelle non entière. Votre vue est en 320x180 mais la fenêtre en 1366x768. Ce n'est pas un multiple entier. Certaines rangées de pixels seront plus épaisses que d'autres. Utilisez floor() pour calculer la plus grande échelle entière qui rentre.

Aide-mémoire : fonctions GML pour les sprites

// Get sprite info
sprite_get_width(sprite)       // Width in pixels
sprite_get_height(sprite)      // Height in pixels
sprite_get_number(sprite)      // Number of sub-images (frames)
sprite_get_xoffset(sprite)     // Origin X
sprite_get_yoffset(sprite)     // Origin Y

// Drawing
draw_self()                    // Draw current sprite at x,y
draw_sprite(sprite, subimg, x, y)        // Draw specific sprite/frame
draw_sprite_ext(sprite, subimg, x, y,    // Draw with transforms
    xscale, yscale, rot, colour, alpha)

// Animation control
image_speed = 0.2;             // Animation speed multiplier
image_index = 0;               // Current frame (set or read)
sprite_index = spr_something;  // Change sprite resource

// Flipping
image_xscale = -1;             // Mirror horizontally (face left)
image_xscale = 1;              // Normal (face right)

Et maintenant

Vous avez des sprites dans GameMaker, des animations qui tournent, des collisions qui marchent et des pixels propres. Ça couvre 90 % des besoins de la plupart des projets.

Pour aller plus loin :

Comment animer du pixel art : les techniques d'animation frame par frame, avant même d'arriver au moteur
Créateur de sprite sheets : emballer et organiser ses sprite sheets efficacement
Meilleurs moteurs de jeu pour le pixel art : si vous hésitez encore sur GameMaker
Formats d'export de sprites : réglages PNG, transparence et détails de format

Ou générez des sprites et commencez à bâtir. Toute la philosophie de GameMaker, c'est de faire tourner les choses vite. Ne laissez pas le perfectionnisme de configuration vous ralentir. Mettez quelque chose à l'écran, puis itérez.

Pour des sprites animés sans travail de frames manuel, envoyez votre sprite de base à l'animateur de Sprite AI, choisissez marche, course, attente ou attaque, et importez la sprite sheet obtenue via Import Strip Image de GameMaker. Comptez moins d'une minute par animation.

FAQ

Comment importer un sprite dans GameMaker?

Créez un nouvel asset sprite, cliquez Import, choisissez votre PNG. Pour une bande à plusieurs frames, utilisez Import Strip Image et entrez le nombre de frames et leurs dimensions. GameMaker découpe la bande tout seul. Sprite AI exporte dans le format de bande que GameMaker attend.

Pourquoi mes sprites GameMaker sont-ils flous?

Le filtrage de texture est activé. Le correctif est dans Game Options → Windows / macOS → Graphics → Texture Filtering → Off. Ou par sprite dans les réglages du texture group. Des bords de pixels propres exigent un échantillonnage au plus proche voisin, et c'est ce que « Off » donne.

Comment régler l'origine du sprite dans GameMaker?

Dans le Sprite Editor, cliquez le menu d'origine et choisissez un préréglage (Top Left, Middle Center, Middle Right, Bottom Center), ou cliquez sur le sprite pour placer un point personnalisé. Bottom Center est la norme pour les personnages de plateforme, Middle Center pour la vue du dessus, Top Left pour l'interface.

Quel FPS pour les animations pixel art dans GameMaker?

Réglez image_speed pour contrôler la vitesse de lecture. En pixel art, 8 à 12 FPS pour les animations de personnage (marche, attente), 15 FPS et plus pour les attaques rapides, 4 à 6 FPS pour les boucles d'ambiance lentes. image_speed = 0.5 joue à la moitié de la vitesse de la room (donc room à 30 fps → animation à 15 fps).

Peut-on générer des sprites par IA pour GameMaker?

Oui. Sprite AI produit des PNG aux dimensions exactes (16×16 à 128×128) avec transparence. Glissez dans GameMaker, réglez l'origine, terminé. Pour les animations, utilisez l'animateur pour générer directement des sprite sheets.

Sprites GameMaker : configuration au pixel près (2026)