Introducción al Desarrollo de Videojuegos con GameMaker · Module 2: Sprites, Objects, Events, Instances, and Rooms
Configuring Rooms and Layers
Lesson 10 of 60 · 50 min
Also available in: ES
Introduction: The Room as the Main Stage
In GameMaker, everything the player sees and experiences takes place inside a room. Far from referring only to a physical room inside a building, in the engine's terminology, a Room represents any scene in the game: a full platformer level, a title screen, a settings menu, a cutscene, or a Game Over screen. If sprites are the costumes and objects are the programmed actors, the Room is the theatrical stage where all elements converge and interact in real time.
Up to this point in the course, we have created sprites, configured objects, and explored the lifecycle of events and instances. However, for a game to come alive with visual and spatial coherence, we must exercise precise mathematical control over the space where those instances live. In this lesson, we will dive into the Room Editor, configure the spatial dimensions of the scene, adjust the design grid, and master the Layers panel—the organizational foundation determining what elements are drawn in front of or behind one another on screen.
Anatomy of the Room Editor and Spatial Dimensions
Opening any Room asset in the Asset Browser (such as the default room GameMaker creates, usually named 'Room1') transforms the workspace into the Room Editor. This environment consists of three essential areas: the central canvas view, the Inspector or Room Properties panel, and the Layers panel. For our retro 2D platformer project, exact control over pixel measurements is essential.
In the Room Properties panel, there are two crucial numeric fields: Width and Height. These values represent the overall scene resolution measured in game-space pixels. It is critical not to confuse room size with the game window size. A room can be 3,840 pixels wide by 1,080 pixels high (a sprawling level where the character runs to the right), while the monitor window might show only a portion of it through a camera (a concept we will explore in detail in Module 10). In the early testing and mechanic prototyping stages, we will work with contained room sizes to validate physics and platform placement without getting lost in an overwhelming space.
💡 Coordinate Convention: In GameMaker, the origin point (0, 0) of a room is always located in the top-left corner. Moving to the right increases positive X values, while moving downward increases positive Y values. If you place an object at X = 0 and Y = 0, it will sit directly against the top-left corner of the room.
The Design Grid
At the top bar of the Room canvas, you will find the Grid settings. The grid does not affect gameplay or alter code; it serves as a visual guide for the developer to snap instances into place with geometric precision. When designing grid-based levels—such as classic 8-, 16-, or 32-pixel block layouts—enabling Snap to Grid prevents floors and platforms from becoming misaligned by fractional pixels, eliminating invisible gaps that could break collision detection down the road.
The Layer System and Render Order
GameMaker manages visual depth using a layer system similar to those found in professional graphic design software like Photoshop or GIMP. Every element existing in a room must belong to a layer. The order in which layers are stacked in the list strictly determines which elements are drawn on top of others.
The golden rule of layer rendering is simple: layers at the top of the Layers panel list are drawn last in the rendering cycle, meaning they appear in the foreground, visually overlapping layers lower in the list. Conversely, layers at the bottom of the list are processed first, resting in the background of the scene.
Each layer has an internal numeric depth value. In modern GameMaker, a layer with a lower (or more negative) depth value renders on top of a layer with a higher (or more positive) depth value. For example, a layer with depth -100 renders above a layer with depth 0, which in turn renders above a layer with depth 500. Although the visual Layers panel manages this intuitively through drag-and-drop, understanding the correlation between list position and numeric depth is essential when manipulating layers via GML code.
Layer Types in GameMaker
In the Layers panel, you can click various icons to add specialized layers. The primary layer types are:
| Layer Type | Primary Purpose | Supported Elements | Retro Project Usage |
|---|---|---|---|
| Background Layer | Set solid colors or static/repeating landscape textures. | Sprites assigned as backgrounds or a solid RGB color. | Sky, distant mountains, and overall scene ambiance. |
| Instance Layer | Contain active entities with game logic and active events. | Instances of programmed objects (player, enemies, solid blocks). | Solid platforms, the player character, and collectible items. |
| Asset Layer | Place static decorative graphics that do not require code events. | Raw sprites with no associated logic. | Visual details like decorative foliage, signposts, or non-colliding rocks. |
| Tilemap Layer | Paint complex scenery efficiently using tilesets. | Tile sets divided into cells. | Massive platformer level layouts (covered in Module 6). |
| Filter / Effect Layer | Apply visual post-processing shaders over underlying layers. | Pre-built shaders (blur, color tints, fog, vignette). | Cave ambiance, rain, or stylized sunsets. |
Step-by-Step: Setting Up Our Game's Initial Room
Let's apply these concepts by setting up the base room for our platformer project. We will rename the default room or create a new one, establish a crisp 16:9 aspect ratio suitable for pixel art, and organize its initial layer structure.
Step 1: Creating and Renaming the Asset
In the Asset Browser, locate the 'Rooms' folder. If 'Room1' already exists, right-click it and select 'Rename' (or press F2). Assign the standardized technical name 'rm_level_1'. The 'rm_' prefix immediately identifies that this asset is a room, upholding the convention established with 'spr_' for sprites and 'obj_' for objects.
Step 2: Sizing the Room
Double-click 'rm_level_1' to open it. On the left or bottom panel of the workspace, find the 'Room Properties' panel. You will see the Width and Height input fields. For our platformer testing scene, enter the following values:
💡 Recommended dimensions for testing: Width = 960 pixels, Height = 540 pixels. This aspect ratio matches standard 16:9 high definition at half scale (an exact quarter of 1920x1080), allowing 32x32 pixel sprites to display at a crisp retro scale without requiring a complex camera setup at this stage.
Step 3: Creating and Configuring the Background Layer
By default, every new Room includes two layers: one called 'Background' and another called 'Instances'. Select the 'Background' layer in the list. Its properties will appear in the Inspector:
1. Background Color: By default, this is usually a dark gray. Click the color swatch and select a soft sky-blue tone (for example, RGB: 110, 180, 240) to simulate a clear outdoor atmosphere. 2. Background Sprite: If you have a graphic for the sky or clouds (such as 'spr_sky_background'), you can drag it from the Asset Browser into the 'Sprite' field of the layer properties. 3. Tiling: Check the 'Horizontal Tile' and 'Vertical Tile' boxes as needed. Enabling 'Horizontal Tile' repeats the graphic indefinitely along the X axis, making it ideal for skies spanning wide levels.
Step 4: Organizing Multiple Instance Layers
One of the most common mistakes beginners make is placing every game instance inside a single generic layer called 'Instances'. While the game will compile and run, this introduces unpredictable visual overlap issues: the character might render behind a platform, or an enemy might appear in front of a doorway they should be emerging from.
To avoid this, we organize our layers into functional hierarchies. We will rename and create the following instance layers by clicking the 'Create Instance Layer' icon:
• 'Instances_Blocks': Here we place instances of 'obj_block' that make up the solid floor and walls. • 'Instances_Items': Reserved for coins, gems, or keys the player can collect. • 'Instances_Player': Positioned above the previous layers, this is exclusively for 'obj_player'. This guarantees the character is always drawn in front of the ground they stand on and the collectibles they cross.
Interacting with Rooms and Layers via GML Code
Although most level layout work is done visually using the mouse, GameMaker provides a powerful set of built-in variables and global functions in GML to inspect room states and manipulate layers dynamically during execution.
Room Dimension Variables
There are two extremely useful read-only built-in variables: 'room_width' and 'room_height'. They return the exact width and height in pixels of the room where the instance is currently running its logic.
Let's look at a practical example: preventing the character from walking outside the horizontal edges of the room. Inside 'obj_player' in its 'Step' event, we can use 'room_width' alongside the mathematical 'clamp()' function to restrict its horizontal position.
// --------------------------------------------------------
// Object: obj_player
// Event: Step
// Purpose: Restrict player position within Room boundaries
// --------------------------------------------------------
// Previous movement code modifies the 'x' variable.
// Next, we clamp 'x' so it stays between 0 and the room width.
// We account for a 16-pixel margin corresponding to half the sprite.
var margen = 16;
x = clamp(x, margen, room_width - margen);Runtime Visibility and Render Order Control
In addition to modifying background properties, GML lets you hide or show entire layers at once using the 'layer_set_visible(layer_id, visible)' function. This technique is commonly used for fog systems, foreground decorative elements that need to fade when entering a building, or secret areas revealed by breaking a wall.
// --------------------------------------------------------
// Object: obj_palanca_secreta
// Event: Collision with obj_player
// Purpose: Reveal a hidden layer by toggling its visibility off
// --------------------------------------------------------
var id_capa_oculta = layer_get_id("Assets_Pared_Falsa");
// If the layer exists in the room, toggle its visibility
if (layer_exists(id_capa_oculta)) {
layer_set_visible(id_capa_oculta, false);
}Overview of GML Visual for Room Management
While this course prioritizes GML Code for its flexibility and indie industry standardization, GameMaker also provides an alternative node-based drag-and-drop system known as GML Visual. In GML Visual, actions such as changing rooms ('Go To Room') or toggling layer visibility have dedicated visual blocks with direct input fields. Everything built with code lines like 'room_goto(rm_level_2)' or 'layer_set_visible()' has a direct visual counterpart, ensuring that the core conceptual understanding of rooms and layers remains identical regardless of your chosen workflow.
Best Practices in Room Design
As projects grow, maintaining clean level architecture makes the difference between streamlined development and a maze of bugs. Keep the following guidelines in mind:
1. Consistent Naming: Always name your layers descriptively and consistently across all rooms (for example: 'Background', 'Instances_Solid', 'Instances_Entities', 'GUI'). If your scripts expect an entity layer to be called 'Instances_Entities', they will fail if a subsequent room names it 'Instances_Objects'. 2. Layer Locking: The Layers panel features a padlock icon next to each layer name. Once you have placed the floor or background, lock that layer to prevent accidentally moving or deleting platforms while tweaking enemy or player positions. 3. Temporary Layer Hiding: The eye icon lets you toggle layer visibility in the editor. This is immensely helpful when working on lower layers without foreground elements obstructing your view.
Practical Exercises
Put what you have learned into practice through the following structured exercises:
Exercise 1 (Base Scene Setup): Open the project we have been developing. Configure room 'rm_level_1' with a width of 960 pixels and a height of 540 pixels. Set the design Grid to 32x32 pixels and enable Snap to Grid. Verification: Dragging any instance onto the canvas should snap in exact 32-pixel increments, and the canvas rulers should mark the room boundaries at (960, 540).
Exercise 2 (Multi-Layer Structure): In 'rm_level_1', remove the single default instance layer and create two distinct instance layers named 'Instances_Blocks' (positioned below) and 'Instances_Player' (positioned above). In 'Instances_Blocks', place a continuous row of 'obj_block' objects to form the floor. In 'Instances_Player', place the 'obj_player' character. Verification: When launching the game with F5, the player sprite should render in front of the floor if both share the same Y coordinate, without being obscured by the block.
Exercise 3 (Boundary Clamping via GML Code): Open 'obj_player', navigate to its Step event, and add the code block utilizing 'clamp()' and the 'room_width' constant. Also add an equivalent line to restrict the vertical axis using 'room_height'. Verification: Run the game and move the player; verify that no matter how far you try to push past the edges, the character never leaves the view or disappears beyond the room boundaries.
Summary
- Rooms are universal spatial containers in GameMaker, used for gameplay levels, menu screens, and user interfaces.
- The origin coordinate (0, 0) of every Room is situated in the top-left corner, with X increasing to the right and Y increasing downward.
- The Layers panel order determines visual depth: layers placed higher in the list render on top of layers placed lower down.
- Separating elements into dedicated layers (backgrounds, solid blocks, entities, and foregrounds) ensures visual control and prevents layering glitches.
- Built-in variables like 'room_width' and 'room_height' allow you to synchronize entity logic with the physical boundaries of the scene.
Practise what you learned
Exercise 1 · 1 point
In what visual order are room layers rendered based on GameMaker's Layers panel?
Exercise 2 · 1 point
In GameMaker, a room's coordinate origin (0, 0) is located at the bottom-left corner.
Exercise 3 · 1 point
In the Room Properties panel, the field sets the total scene width in pixels, while sets the height. By convention, room assets are named using the prefix .
Sign in to save your progress — Sign in