Introducción al Desarrollo de Videojuegos con GameMaker · Module 2: Sprites, Objects, Events, Instances, and Rooms
Creating and Importing Basic Sprites
Lesson 6 of 60 · 50 min
Also available in: ES
Introduction: The Visual Identity of a 2D Game
In 2D game development, everything the player perceives on screen—be it a character, a terrain block, a projectile, or a user interface element—originates from a foundational graphical asset: the sprite. While objects hold the logic and code determining in-game behavior within GameMaker, sprites represent their visual manifestation in the game world.
A sprite can consist of a single static image (such as a stone block) or an ordered sequence of images known as frames or sub-images, which create the illusion of animation when played at a specific speed. Kicking off Module 2, we will focus on the visual cornerstones of our retro platformer: designing our first graphical assets in GameMaker's integrated image editor and importing external PNG files, all while precisely configuring two properties critical to gameplay: the origin point and the collision mask.
What Is a Sprite and Why Do We Use PNG?
Technically speaking, a sprite is a bitmap optimized for fast graphics card processing and efficient screen rendering. In modern 2D game development, the de facto standard for storing both individual sprites and sprite sheets is the PNG (Portable Network Graphics) format.
The technical advantages of using PNG over formats such as JPG, BMP, or GIF come down to three crucial factors:
| Feature | PNG Format | Other Formats (JPG / GIF / BMP) |
|---|---|---|
| Compression | Lossless. Pixel edges and color definitions remain completely intact. | JPG uses lossy compression, creating compression artifacts and blurriness around sharp edges. |
| Alpha Channel (Transparency) | Supports an 8-bit alpha channel (256 levels of per-pixel opacity). | JPG does not support transparency. GIF only supports 1-bit binary transparency (either fully opaque or 100% transparent, with no smooth anti-aliased edges). |
| Pixel Art Fidelity | Preserves indexed palettes and crisp geometric silhouettes without distortion. | BMP results in unnecessarily bloated file sizes; JPG destroys the crisp contrast between adjacent contrasting pixels. |
💡 Golden Rule: For 2D games with pixel art or flat vector aesthetics, always export and import your graphical assets as 32-bit PNG files (RGB with an Alpha channel). This ensures clean transparent backgrounds and razor-sharp contours.
Creating Sprites in the Asset Browser
To manage assets professionally right from the start, we will adopt an industry-standard naming convention. Sprite asset names should always begin with the prefix 'spr_' followed by a clear, descriptive snake_case name. For example: spr_player_idle, spr_block_ground, spr_coin.
To create a new sprite in GameMaker, follow these steps:
1. Locate the 'Asset Browser' panel on the right-hand side of your workspace. 2. Right-click the 'Sprites' folder (or create a group named Sprites if one does not already exist). 3. From the context menu, select 'Create' -> 'Sprite'. 4. The Sprite Inspector window will open in your workspace, ready to be renamed. Type 'spr_block_ground' and press Enter.
The Sprite Properties Inspector
When inspecting a sprite, GameMaker displays two key operational areas: the Sprite Inspector (where you configure pixel dimensions, animation speed, the origin point, and collision masks) and the 'Edit Image' button, which opens the integrated bitmap editor.
In the inspector, locate the dimensions field alongside the 'Resize Sprite' button (often indicated by a scale or gear icon). For our retro platformer, we will work with a 32x32 pixel base grid. Click 'Resize Sprite', uncheck 'Maintain Aspect Ratio' if active, enter a Width of 32 and a Height of 32, and click 'Apply'.
Drawing with GameMaker's Built-in Image Editor
GameMaker includes a capable bitmap editor that lets you produce production art or prototype ideas quickly without leaving the engine. Click the 'Edit Image' button in the 'spr_block_ground' window. This opens the canvas, featuring a drawing toolbar on the left and a color palette on the right.
Let's create the grass-topped dirt block we will use to build our game's ground surfaces:
1. Turn on the grid from the top bar (View -> Toggle Grid or the grid icon) and set it to 8x8 or 16x16 for visual alignment. 2. Select the 'Rectangle Tool' (hotkey R). 3. In the primary color swatch, pick an earthy brown tone (such as #5C3C24). 4. Fill the 32x32 canvas, leaving the top rows clear for the grass layer. 5. Switch your primary color to a vibrant green (#388724) and draw a 6-pixel-tall strip across the top edge to represent turf. 6. Select the 'Pencil Tool' (hotkey P) set to 1 pixel size to add organic detail: draw a few green pixels trickling down into the dirt as blades of grass, along with light and dark brown speckles across the dirt area to add a textured, rocky feel. 7. Close the 'Edit Image' tab in the top workspace bar. Your changes are automatically saved to the sprite asset.
Importing External Sprites in PNG Format
Developers and pixel artists often prefer dedicated external tools like Aseprite, Photoshop, Krita, GIMP, or Pixelorama, or work with commercially licensed and open-source asset packs. GameMaker provides two primary workflows for importing PNG assets: single-image import and sprite sheet / strip import.
Method 1: Single Image Import
To import an individual image asset (such as our idle character frame):
1. Create a new sprite in the Asset Browser and name it 'spr_player_idle'. 2. In the Sprite Inspector window, click the 'Import' button near the top. 3. A warning dialog will alert you that importing will overwrite any existing content in the current sprite. Confirm by clicking 'Yes'. 4. Use your operating system's file dialog to browse to your PNG file (for instance, 'player_stand_32x32.png') and select it. 5. GameMaker loads the image onto the canvas, automatically detecting its native dimensions while preserving alpha transparency.
Method 2: Importing from a Sprite Sheet / Strip
Artists commonly deliver multi-frame animations packaged as a single horizontal strip or grid sheet. GameMaker can slice these frames automatically:
1. Create a new sprite and name it 'spr_coin'. 2. From GameMaker's top menu bar, select 'Image' -> 'Import Strip Image' (or press Ctrl+I inside the sprite editor). 3. Select the PNG strip file containing your coin animation (for example, an image 128 pixels wide by 32 pixels tall containing 4 sequential 32x32 frames side by side). 4. The 'Convert to Frames' slicing window will appear. Enter the total frame count (Number of Frames = 4) and frames per row (Frames per Row = 4). 5. Inspect the preview overlay to confirm that the bounding boxes frame each coin cleanly without clipping outer pixels. 6. Click 'Convert'. Your sprite will now contain 4 separate sub-images indexed from 0 to 3, ready to animate.
The Origin Point: Concept and Mathematical Impact
A sprite's Origin Point is the exact internal pixel coordinate representing the instance's position (x, y) within the room. When you execute code instructing GameMaker to place an instance at coordinates x = 100, y = 200, the engine aligns the sprite's origin point directly over that coordinate on screen.
By default, GameMaker sets the origin point to Top Left (x = 0, y = 0). While this setup is ideal for static UI elements (HUDs) or grid-aligned terrain tiles, it introduces major issues for platformer characters:
1. **Horizontal scale flipping (image_xscale):** To make a character face left, we flip its horizontal scale to -1 in code. With the origin at Top Left (0, 0), the sprite flips around its left edge, causing it to instantly teleport 32 pixels to the left on screen. Centering the origin horizontally ensures the character flips around its own central axis cleanly. 2. **Ground alignment:** When simulating gravity and checking vertical collisions with solid platforms, setting the origin at the character's feet (Bottom Centre: x = 16, y = 32 on a 32x32 sprite) ensures that the instance's y coordinate matches the floor contact line, dramatically simplifying collision math.
Collision Masks: Defining Physical Boundaries
In GameMaker, what renders visually on screen is decoupled from the area evaluated by the collision engine. The invisible boundary used to check whether two instances touch is called the Collision Mask.
To access these settings, expand the collapsible 'Collision Mask' section in the Sprite Inspector. You will find three key settings: Mode, Type, and the Bounding Box coordinates.
Bounding Box Calculation Modes
The calculation mode dictates how GameMaker generates the bounds of the collision box:
| Mode | Behavior | Recommended Use |
|---|---|---|
| Automatic | Calculates the bounding box dynamically around all opaque pixels. If the animation frame changes size, the box shifts accordingly. | Single-frame static props or simple non-interactive scenery. |
| Full Image | Forces the bounding box to match the entire sprite canvas (0 to 32 on both X and Y axes). | Solid terrain blocks, modular tiles, and uniform grid hazards. |
| Manual | Grants full control to enter or drag specific boundaries (Left, Right, Top, Bottom) independently. | Player characters, enemies, and projectiles where tight, reliable gameplay hitboxes are required. |
Collision Mask Shapes (Type)
GameMaker supports several geometric shapes for evaluating collisions:
- **Rectangle:** Axis-Aligned Bounding Box (AABB). This is mathematically the fastest and most efficient shape to evaluate. It is the best choice for roughly 95% of 2D platformer assets. - **Rotated Rectangle:** An oriented bounding box that rotates alongside the sprite. Slightly more computationally expensive; useful for angled laser beams or rotating spaceships. - **Ellipse:** A circular or oval boundary. Excellent for round projectiles, wheels, or rolling boulders. - **Diamond:** A 45-degree diamond shape, useful in isometric projections. - **Precise (Slow):** Pixel-perfect collision checking. Checks whether opaque pixels from one sprite intersect opaque pixels of another. It is computationally expensive and strongly discouraged for platformer characters, as irregular pixel outlines snag on corners and cause noticeable performance drops with high instance counts.
💡 Level Design Warning: Never use 'Precise' collisions on your platformer player character. If your character sprite has a stray strand of hair or an upturned boot tip sticking out by a single pixel, that projection will catch on vertical walls while running or jumping, making controls feel sluggish and unpredictable. Always use consistent manual rectangular bounding boxes.
Hands-On Implementation: Configuring Project Assets
Let's put theory into practice by configuring the first three visual assets for our retro platformer. Ensure you have created the following three sprites with their designated technical settings:
### 1. Modular Ground Tile: spr_block_ground - **Dimensions:** 32 x 32 pixels. - **Origin:** Top Left (X: 0, Y: 0). - **Collision Mask - Mode:** Full Image. - **Collision Mask - Type:** Rectangle. - **Technical Rationale:** Ensures 32x32 blocks snap flush against one another without microscopic seams, while ensuring the collision footprint covers the entire block surface.
### 2. Player Idle Sprite: spr_player_idle - **Dimensions:** 32 x 32 pixels (if your character design is slimmer, such as 24x32, keep it centered on a 32x32 canvas). - **Origin:** Bottom Centre (X: 16, Y: 32). - **Collision Mask - Mode:** Manual. - **Collision Mask - Type:** Rectangle. - **Manual Bounding Box Values:** Set Left = 6, Right = 25, Top = 4, Bottom = 31. - **Technical Rationale:** A collision box slightly narrower than the character artwork prevents getting caught in narrow corridors and produces a more forgiving, responsive player experience (commonly referred to as a player-favoring hitbox).
### 3. Collectible Item: spr_coin - **Dimensions:** 16 x 16 pixels (or 32x32 scaled accordingly). - **Origin:** Middle Centre (X: 8, Y: 8). - **Collision Mask - Mode:** Automatic or Manual. - **Collision Mask - Type:** Ellipse (or Rectangle). - **Technical Rationale:** Centering the origin makes it effortless to spin, pulse, scale, or spawn sparkle particle effects directly from the center of the coin without positional offsets.
Asset Organization and Naming Best Practices
As your project scales, you will routinely handle hundreds of sprites. To prevent messy asset sprawl, adopt these practices from day one:
- **Asset Browser Folder Structure:** Inside the 'Sprites' folder, create dedicated subfolders organized by category: 'Player', 'Enemies', 'Environment', 'Items', and 'UI'. Group all related assets accordingly. - **Consistent Suffix Conventions:** Clearly identify animation states: spr_player_idle, spr_player_walk, spr_player_jump, spr_player_fall. - **Powers of Two:** Keeping sprite dimensions to powers of two (8, 16, 32, 64, 128) optimizes texture memory on the GPU and helps GameMaker pack assets into texture pages cleanly.
Practical Exercises
Complete the following exercises to solidify these fundamentals before moving on to object creation in the next lesson:
### Exercise 1: Creating a Floating Platform Block - **Objective:** Design a 32x16 pixel floating platform sprite using the built-in image editor. - **Instructions:** Create a sprite named 'spr_platform_block'. Resize its canvas to 32 pixels wide by 16 pixels tall. Using the image editor, illustrate a wooden plank or stone slab. Set the origin point to 'Top Left' (0, 0) and the collision mask to 'Full Image' mode with 'Rectangle' type. - **Verification Criteria:** Open the sprite preview and confirm the dark gray collision box covers the full 32x16 pixel area.
### Exercise 2: Importing an External Sprite with a Custom Hurtbox - **Objective:** Practice importing an external PNG and manually calibrating its collision boundary. - **Instructions:** Draw in an external editor (or create directly in GameMaker) a 32x32 hazard spike named 'spr_hazard_spikes'. Set the origin point to 'Bottom Centre'. Switch the collision mask to 'Manual' and lower the Top bound so it covers only the bottom 60% of the hazard, leaving the very tip of the spike non-lethal. - **Verification Criteria:** The semi-transparent red mask overlay should leave the tips of the spikes outside the collision area, allowing the player to graze the apex without triggering an unfair death.
### Exercise 3: Importing an Animated Strip - **Objective:** Import a 4-frame animation strip for a collectible item. - **Instructions:** Prepare a 64x16 pixel PNG strip containing four sequential 16x16 gem frames featuring slight shimmer or color changes. Create the sprite 'spr_gem', use 'Import Strip Image', slice the strip into 4 frames of 16x16 pixels, and set the origin to 'Middle Centre' (8, 8). - **Verification Criteria:** Pressing the 'Play' button in the Sprite Inspector should show the gem looping smoothly on its center point without jittering or shifting off-axis.
Summary
- A sprite is the 2D visual representation of an in-game asset, consisting of either a static image or a series of sub-images for animation.
- The PNG format is the industry standard for 2D sprites due to its lossless compression and full 8-bit alpha channel transparency support.
- The origin point defines the pivot coordinate for positioning, scaling, and rotating an instance within a room. Use 'Bottom Centre' for platformer characters and 'Top Left' for modular terrain tiles.
- The collision mask defines the physical zone checked for gameplay overlaps. Manual rectangular bounding boxes are strongly recommended for player characters over 'Precise' masks, which degrade performance and cause unwanted snagging.
- Consistent naming prefixes (such as spr_) and structured folder hierarchies keep game projects maintainable, scalable, and bug-free as you write GML code.
Practise what you learned
Exercise 1 · 1 point
In a 2D platformer, why is it recommended to set the origin point of a 32x32 character sprite to "Bottom Centre" instead of "Top Left"?
Exercise 2 · 1 point
Place the steps for importing a sprite strip into a GameMaker sprite asset in the correct chronological order:
- 1Select "Image" -> "Import Strip Image" from the top menu bar (or press Ctrl+I).
- 2Set the total number of frames and frames per row in the "Convert to Frames" dialog.
- 3Choose the PNG file containing the contiguous frame strip from the file explorer.
- 4Create a new sprite in the Asset Browser and assign it a descriptive name with a prefix (e.g., spr_coin).
- 5Click the "Convert" button to generate the indexed sub-images.
Exercise 3 · 1 point
To keep a GameMaker project organized and professional, sprite assets should always start with the prefix followed by a descriptive name. In addition, the golden rule for 2D art assets is to import them as 32-bit files to ensure clean edges and transparent backgrounds.
Sign in to save your progress — Sign in