Gamelab Studio generates production-ready spritesheets (PNG images with every animation frame arranged in a grid). GameMaker is one of the most popular 2D game engines, known for powering indie hits like Undertale, Hyper Light Drifger, and Hotline Miami. It has robust built-in support for importing spritesheets as animated sprites. The workflow is clean: export your spritesheet from Gamelab, rename it with GameMaker's strip convention or use the Convert to Frames dialog, and your character is animating in seconds.
In this guide, we walk through the full process from downloading the spritesheet PNG and its metadata out of Gamelab Studio, to getting a fully animated sprite playing in GameMaker. We cover two methods: the quick Strip Image path (best for single-row spritesheets) and the more flexible Convert to Frames path (best for multi-row grid layouts).
What You Get from Gamelab Studio
When you generate a spritesheet in Gamelab Studio, the platform produces a single PNG image containing all of your animation frames laid out in a uniform grid. Every spritesheet comes with built-in metadata that tells you exactly how the grid is structured, no guesswork required. These values map directly to GameMaker's import settings.
1. Open Your Asset in Gamelab Studio
Navigate to gamelabstudio.co and open the project containing your spritesheet. If you haven't generated one yet, use the Asset Wizard to create an image, animate it, and extract a spritesheet. The whole pipeline runs inside the app.
2. Download the Spritesheet PNG
Once your spritesheet is ready, click the Download button on the spritesheet card. This saves a single PNG file to your machine, for example,
warrior_idle.png. The image contains every frame arranged in a grid with consistent cell dimensions.
3. View the Spritesheet Metadata
Gamelab Studio displays the full grid metadata for every spritesheet you generate. There are two places to find it:
On the Spritesheet Card, Click the Metadata button (the ⓘ icon) directly on the spritesheet card. A compact overlay will appear showing all the values you need for GameMaker.
In the Inspector, Click the spritesheet preview to open the full-screen Inspector. In the toolbar at the top, click the Metadata button to see the same information. The Inspector also has a Grid toggle that overlays numbered frame boundaries directly on the spritesheet image, so you can visually confirm each frame is correct. Switch to Preview mode to see the animation play back frame-by-frame at the configured FPS.
The metadata dialog shows these fields:
- Frame Width / Frame Height — Pixel dimensions of a single frame (e.g. 128 × 128 px). In GameMaker this maps to the frame size in the Convert to Frames dialog
- Columns — Number of frames per row (e.g. 6). In GameMaker this maps to
Frames per row - Rows — Number of rows in the sheet (e.g. 4)
- Frame Count — Total number of animation frames. In GameMaker this maps to
Number of framesand theimgnumargument insprite_add() - FPS — Playback speed (e.g. 10). In GameMaker this maps to
Frame Speedin the Sprite Editor - Duration — Total animation length in seconds
- Padding — Spacing between frames in pixels (usually 0)
Keep these values handy—you will enter them into GameMaker in the next steps.
Method A: Strip Image Import (Fastest)
This is the fastest way to get an animated sprite running in GameMaker. If your spritesheet has only one row of frames (Rows = 1), you can use GameMaker's strip image naming convention to auto-import the animation with zero manual configuration. Just rename the file and drag it in.
4. Rename the PNG with the Strip Suffix
GameMaker recognizes a special filename convention for animated sprites: the file must end with
_stripN where N is the total number of frames. Check the Frame Count value from the Gamelab metadata and rename your downloaded PNG accordingly.
For example, if your spritesheet has 8 frames, rename the file:
warrior_idle.png → warrior_idle_strip8.png
GameMaker calculates each frame's width by dividing the total image width by N. Since Gamelab Studio produces uniform grids, this division will always land exactly on your frame boundaries.
5. Drag the Strip into GameMaker
Open your GameMaker project and drag the renamed PNG file directly into the Sprites folder in the Asset Browser. GameMaker will automatically:
- • Detect the
_strip8suffix - • Divide the image into 8 equal-width sub-images
- • Remove the
_strip8from the sprite name (so it becomeswarrior_idle) - • Open the Sprite Editor showing all frames in the timeline at the bottom
After importing, the Sprite Editor will show each frame split out as individual sub-images along the bottom timeline:
Alternatively, you can use the Import button inside the Sprite Editor to select the strip file.
6. Set the Frame Speed
In the Sprite Editor, look for the Frame Speed section (visible below the animation preview). Set the value to match the FPS from the Gamelab metadata (e.g. 10) and make sure the dropdown is set to "Frames per second". This tells GameMaker how fast to cycle through your animation frames at runtime.
You can use the Play button in the Sprite Editor's preview to verify the animation looks correct before moving on.
7. Set the Origin
Click the Origin dropdown in the Sprite Editor and set it to Middle Centre (or whichever anchor point makes sense for your game). The origin is where the sprite's x/y position will be pinned in the room. For most characters, middle-centre or bottom-centre works well.
8. Assign to an Object and Run
Create a new Object (or open an existing one), and set its Sprite property to your newly imported sprite. Place an instance of the object in a Room and press F5 to run the game. Your Gamelab-generated character will be animating automatically.
GameMaker plays sprite animations by default using the Frame Speed you configured. No code is required for basic playback.
Method B: Convert to Frames (For Grid Layouts)
If your spritesheet has multiple rows (a grid layout), the strip naming convention won't work because it only handles horizontal strips. Instead, use GameMaker's Convert to Frames dialog which lets you specify the exact grid dimensions. This method works with any spritesheet layout Gamelab produces.
9. Import the PNG Without the Strip Suffix
Keep the original filename from Gamelab (e.g.
warrior_idle.png)—do not add a _stripN suffix. In GameMaker, right-click the Sprites folder in the Asset Browser, select Create → Sprite, name it (e.g. spr_warrior_idle), then click Import and select your PNG file. The full spritesheet will load as a single frame.
10. Open the Image Editor
In the Sprite Editor, click the Edit Image button to open the Image Editor. This is GameMaker's built-in graphics tool where you can also perform frame manipulation.
11. Convert to Frames
In the Image Editor's menu bar, go to Image → Convert to Frames. A dialog will appear with a grid overlay on your spritesheet. Enter the following values from the Gamelab metadata:
- Number of frames — Set to Frame Count from the Gamelab metadata (e.g. 24)
- Frames per row — Set to Columns from the Gamelab metadata (e.g. 6)
- Frame width — Set to Frame Width from the Gamelab metadata (e.g. 128)
- Frame height — Set to Frame Height from the Gamelab metadata (e.g. 128)
The Convert to Frames dialog shows a preview of how your spritesheet will be split into individual frames:
Leave the Horizontal Offset and Vertical Offset at 0 (Gamelab spritesheets always start at the top-left corner with no padding by default). Verify the frame count matches what you expect, then click Convert.
12. Verify the Frames
Close the Image Editor and return to the Sprite Editor. You should now see all your animation frames displayed in the frame timeline at the bottom of the window. Scrub through them or hit Play to confirm the animation matches what you saw in Gamelab Studio's Inspector preview.
13. Configure Frame Speed and Origin
Set the Frame Speed to the FPS value from the Gamelab metadata (e.g. 10, using "Frames per second" mode). Set the Origin to your preferred anchor point. Then assign the sprite to an Object, place it in a Room, and run—your animation will play automatically.
Method C: Import Strip via Inspector
GameMaker also offers an Import Strip button in the Inspector panel when a sprite is selected. This is functionally identical to Method B's "Convert to Frames" but accessible without opening the Image Editor. Select your sprite in the Asset Browser, open the Inspector panel, and click Import Strip. The same dialog appears where you enter frame count, frames per row, and frame size.
Controlling Animation in GML Code
Once your sprite is imported and assigned to an object, GameMaker handles basic animation playback automatically. But for any real game, you'll want code control over animation speed, switching between animations, and detecting when an animation finishes.
Basic Playback Control
GameMaker uses
image_speed as a multiplier on the Frame Speed you set in the Sprite Editor. A value of 1 plays at normal speed, 0 freezes the animation, and 0.5 plays at half speed:
// Create Event image_speed = 1; // normal playback (uses Sprite Editor FPS)
You can also override the sprite's base animation speed at runtime using
sprite_set_speed():
// Set animation to play at exactly 10 FPS (matching Gamelab metadata) sprite_set_speed(sprite_index, 10, spritespeed_framespersecond);
Switching Between Animations
In GameMaker, each animation is typically stored as a separate sprite resource. Import each Gamelab spritesheet (idle, run, attack, etc.) as its own sprite, then switch between them by changing
sprite_index. Always reset image_index when switching to avoid frame-mismatch glitches:
// Step Event
var _target_sprite = spr_warrior_idle;
if (abs(hspeed) > 0) {
_target_sprite = spr_warrior_run;
}
if (sprite_index != _target_sprite) {
sprite_index = _target_sprite;
image_index = 0;
}
Loading Spritesheets at Runtime
If you need to load sprites dynamically (e.g. for user-generated content or DLC), use the
sprite_add() function. The image must be in strip format (all frames in one horizontal row), and you specify the frame count as the second argument:
// Create Event — load a Gamelab spritesheet at runtime
spr_loaded = sprite_add("sprites/warrior_idle_strip8.png", 8, false, false, 64, 64);
sprite_set_speed(spr_loaded, 10, spritespeed_framespersecond);
sprite_index = spr_loaded;
// Clean Up Event — prevent memory leaks
sprite_delete(spr_loaded);
The
sprite_add() arguments are: filename, number of sub-images, remove background (false for transparent PNGs), smooth edges, x origin, y origin. Set the origin to half the frame width and height for centre-anchoring (e.g. 64, 64 for a 128×128 frame).
Tips and Best Practices
Use Transparent Backgrounds
When exporting from Gamelab Studio, enable Remove Background before generating your spritesheet. This gives you a transparent PNG that composites cleanly over any game scene. When importing into GameMaker, keep the
removeback option set to false—GameMaker will respect the PNG's alpha channel natively.
Verify with the Inspector Before Exporting
Before you download, use Gamelab Studio's Inspector to sanity-check your spritesheet. Open the Inspector by clicking the spritesheet preview, toggle Grid on to see numbered frame boundaries, and switch to Preview mode to watch the animation play back at the configured FPS. If a frame looks off or the timing is wrong, you can regenerate the spritesheet before bringing it into GameMaker.
Prefix Your Sprite Names
GameMaker best practice is to prefix sprite resource names with
spr_ (e.g. spr_warrior_idle, spr_warrior_run). This makes it easy to distinguish sprites from objects, sounds, and other asset types in your code and the Asset Browser. Sprite names can only contain letters, numbers, and underscores, and must start with a letter.
Choose the Right Collision Mask
After importing your Gamelab spritesheet, configure the collision mask in the Sprite Editor. For most 2D characters, Rectangle with Automatic mode works well and is the fastest to resolve. If your sprite has irregular geometry (e.g. a flying dragon), consider Precise (per frame)—but be aware this is significantly more expensive for collision calculations.
Single-Row Spritesheets Are Simplest
If you know you'll be using GameMaker, consider keeping your spritesheets to a single row when generating in Gamelab Studio. This lets you use the
_stripN naming convention for instant drag-and-drop import with no manual configuration. Multi-row grids work fine too (via Convert to Frames), but the strip path is fastest.
Multiple Animations from One Character
Gamelab lets you generate multiple animations of the same character (idle, walk, attack, etc.). Each animation produces its own spritesheet with its own metadata. Import each one as a separate GameMaker sprite resource, then switch between them in code using
sprite_index:
// Step Event — state-based animation switching
switch (state) {
case PLAYER_STATE.IDLE:
if (sprite_index != spr_warrior_idle) {
sprite_index = spr_warrior_idle;
image_index = 0;
}
break;
case PLAYER_STATE.RUN:
if (sprite_index != spr_warrior_run) {
sprite_index = spr_warrior_run;
image_index = 0;
}
break;
case PLAYER_STATE.ATTACK:
if (sprite_index != spr_warrior_attack) {
sprite_index = spr_warrior_attack;
image_index = 0;
image_speed = 1.5; // play attack faster
}
break;
}
Automate with the Gamelab MCP Server
If you have the Gamelab MCP server connected to your editor, you can generate and download spritesheets without ever leaving your IDE. Ask your AI assistant to create an asset, animate it, and extract a spritesheet—it will call the Gamelab API and save the resulting PNG directly into your project folder, ready to import into GameMaker.
Quick Reference
Use this table to map Gamelab metadata fields to their corresponding GameMaker properties:
Gamelab Metadata GameMaker Property Where ──────────────── ────────────────── ───── Frame Count _stripN suffix (N) Filename for strip import Frame Count Number of frames Convert to Frames dialog Columns Frames per row Convert to Frames dialog Frame Width Frame width Convert to Frames dialog Frame Height Frame height Convert to Frames dialog FPS Frame Speed (FPS) Sprite Editor → Frame Speed Frame Count imgnum argument sprite_add() function FPS sprite_set_speed() value GML Code (runtime)
Choosing Between Methods
Scenario Recommended Method ──────────────────────────────── ────────────────── Single-row spritesheet (Rows = 1) Method A: Strip Image (_stripN) Multi-row grid spritesheet Method B: Convert to Frames Quick import from Inspector panel Method C: Import Strip button Loading sprites at runtime sprite_add() in GML code
That is all it takes. Generate your sprites in Gamelab Studio, check the metadata and grid overlay in the Inspector, download the PNG, rename it or use Convert to Frames in GameMaker, set the frame speed, and hit play. For the full GameMaker sprite documentation, see the official Sprite Editor manual and the Strip Images reference.