Introducción al Desarrollo de Videojuegos con GameMaker · Módulo 2: Sprites, objetos, eventos, instancias y rooms.
Configuración de Rooms y capas (Layers)
Clase 10 de 60 · 50 min
También disponible en: EN
Introducción: La Room como escenario principal
En GameMaker, todo lo que el jugador ve y experimenta ocurre dentro de una habitación o Room. Lejos de referirse únicamente a una «habitación» física de una casa, en la terminología del motor una Room representa cualquier escena del juego: un nivel completo de plataformas, la pantalla de título, un menú de configuración, una cinemática o la pantalla de Game Over. Si los sprites son los disfraces y los objetos son los actores programados, la Room es el escenario teatral donde todos los elementos convergen e interactúan en tiempo real.
Hasta este punto del curso, hemos creado sprites, configurado objetos y comprendido el ciclo de vida de los eventos y las instancias. Sin embargo, para que un videojuego cobre vida con coherencia visual y espacial, necesitamos controlar con precisión matemática el espacio donde habitan esas instancias. En esta clase profundizaremos en el Editor de Rooms, aprenderemos a configurar las dimensiones espaciales de la escena, ajustaremos la cuadrícula de trabajo y dominaremos el panel de capas (Layers), el pilar organizativo que determina qué elementos se dibujan delante o detrás en la pantalla.
Anatomía del Editor de Rooms y dimensiones espaciales
Al abrir cualquier recurso de tipo Room en el Asset Browser (por ejemplo, la habitación que GameMaker crea por defecto llamada comúnmente 'Room1'), el área de trabajo se transforma en el Editor de Rooms. Este entorno se compone de tres paneles esenciales: la vista central del lienzo (Canvas), el Inspector o panel de propiedades de la habitación (Room Properties), y el panel de Capas (Layers). Para nuestro proyecto de plataformas 2D con estética retro, el control exacto de las medidas en píxeles es indispensable.
En el panel de propiedades de la Room encontramos dos campos numéricos determinantes: Width (Ancho) y Height (Alto). Estos valores representan la resolución total de la escena medida en píxeles de espacio de juego. Es fundamental no confundir el tamaño de la habitación con el tamaño de la ventana donde se ejecuta el juego. Una habitación puede medir 3840 píxeles de ancho por 1080 píxeles de alto (un nivel largo por el que el personaje correrá hacia la derecha), mientras que la ventana del monitor puede mostrar únicamente una porción mediante una cámara (concepto que abordaremos detalladamente en el Módulo 10). En las fases iniciales de prueba y diseño de mecánicas, trabajaremos con habitaciones de tamaño contenido para validar la física y la colocación de plataformas sin perdernos en un espacio gigantesco.
💡 Convención de coordenadas: En GameMaker, el punto de origen (0, 0) de la Room se sitúa siempre en la esquina superior izquierda. Conforme nos desplazamos hacia la derecha el valor del eje X aumenta en números positivos; conforme nos desplazamos hacia abajo, el valor del eje Y aumenta. Si colocas un objeto en X = 0 e Y = 0, aparecerá pegado a la esquina superior izquierda de la habitación.
La cuadrícula (Grid) de diseño
En la barra superior del lienzo de la Room se encuentra la configuración de la cuadrícula o Grid. La cuadrícula no afecta la jugabilidad ni altera el código; es una guía visual para el desarrollador que permite encajar instancias con precisión geométrica. Al diseñar niveles basados en cuadrículas —como los clásicos de 8, 16 o 32 píxeles por bloque— activar el ajuste automático a la cuadrícula (Snap to Grid) evita que los suelos queden desalineados por fracciones de píxel, eliminando huecos invisibles que provocarían fallos en la detección de colisiones futuras.
El sistema de capas (Layers) y el orden de renderizado
GameMaker gestiona la profundidad visual mediante un sistema de capas similar al que se utiliza en programas de diseño gráfico profesional como Photoshop o GIMP. Cada elemento que existe en una Room debe pertenecer obligatoriamente a una capa. El orden en el que se apilan las capas en la lista determina de forma estricta qué elementos se dibujan sobre otros.
La regla de oro del renderizado por capas es la siguiente: las capas situadas en la parte superior de la lista del panel Layers se dibujan al final del ciclo de renderizado, lo que significa que aparecen en primer plano, cubriendo visualmente a las capas que están por debajo en la lista. Por el contrario, las capas situadas en la parte inferior de la lista se procesan primero, quedando relegadas al fondo de la escena.
Cada capa posee un valor numérico interno de profundidad llamado 'depth'. En GameMaker moderno, una profundidad con valor numérico menor (o más negativo) se dibuja por encima de una profundidad con valor numérico mayor (o más positivo). Por ejemplo, una capa con profundidad -100 se renderiza sobre una capa con profundidad 0, y esta a su vez sobre una capa con profundidad 500. Aunque el panel visual de capas gestiona esto de manera gráfica e intuitiva mediante arrastrar y soltar, comprender la correlación entre posición en la lista y profundidad numérica es esencial cuando interactuamos con capas desde código GML.
Tipos de capas disponibles en GameMaker
En el panel de capas podemos hacer clic en varios iconos para añadir capas con finalidades especializadas. Los tipos principales son:
| Tipo de Capa | Propósito principal | Elementos que admite | Uso en el proyecto retro |
|---|---|---|---|
| Background Layer (Fondo) | Establecer colores planos o texturas de paisaje estáticas/cíclicas. | Sprites asignados como fondo o un color sólido RGB. | Cielo, montañas distantes y ambientación general de la escena. |
| Instance Layer (Instancias) | Contener entidades vivas con lógica y eventos activos. | Instancias de objetos programados (personaje, enemigos, bloques). | Plataformas sólidas, el personaje jugador y objetos recolectables. |
| Asset Layer (Recursos) | Colocar gráficos decorativos que no requieren eventos de código. | Sprites planos sin lógica asociada. | Detalles visuales como vegetación de adorno, postes o piedras sin colisión. |
| Tilemap Layer (Mosaicos) | Pintar escenarios complejos de manera eficiente usando hojas de tiles. | Tile sets divididos en celdas. | Estructura masiva de niveles de plataformas (se abordará en el Módulo 6). |
| Filter / Effect Layer | Aplicar postprocesamiento visual sobre las capas subyacentes. | Shaders predefinidos (desenfoque, tintes de color, niebla, viñeteado). | Atmósferas de cuevas, lluvia o atardeceres estilizados. |
Paso a paso: Configurando la habitación inicial de nuestro juego
Vamos a aplicar estos conceptos configurando la habitación base para nuestro proyecto de plataformas. Renombraremos la habitación predeterminada o crearemos una nueva, estableceremos una resolución nítida de proporción 16:9 apta para pixel art y organizaremos su estructura de capas inicial.
Paso 1: Creación y renombrado del recurso
En el Asset Browser, localiza la carpeta 'Rooms'. Si ya existe 'Room1', haz clic derecho sobre ella y selecciona 'Rename' (o presiona F2). Asigna el nombre técnico normalizado 'rm_nivel_1'. El prefijo 'rm_' identifica de forma inmediata que este recurso es una habitación, manteniendo la disciplina que establecimos con 'spr_' para sprites y 'obj_' para objetos.
Paso 2: Dimensionamiento de la habitación
Haz doble clic en 'rm_nivel_1' para abrirla. En la parte izquierda o inferior de la interfaz, busca el panel 'Room Properties'. Verás las casillas Width y Height. Para nuestro escenario de pruebas de plataformas, configuraremos los siguientes valores:
💡 Dimensiones recomendadas para la prueba: Width = 960 píxeles, Height = 540 píxeles. Esta proporción equivale a la resolución estándar 16:9 en alta definición a escala media (un cuarto exacto de 1920x1080), permitiendo que los sprites de 32x32 píxeles se aprecien con un tamaño retro perfecto sin requerir una cámara compleja en esta etapa.
Paso 3: Creación y configuración de la capa de fondo (Background)
De forma predeterminada, toda Room nueva incluye dos capas: una llamada 'Background' y otra llamada 'Instances'. Selecciona la capa 'Background' en la lista. Observarás que el inspector muestra sus propiedades:
1. Color de fondo: Por defecto suele ser un gris oscuro. Puedes hacer clic en la casilla de color y seleccionar un tono azul cielo suave (por ejemplo, RGB: 110, 180, 240) para simular una atmósfera exterior despejada. 2. Sprite de fondo: Si cuentas con un sprite representativo para el cielo o las nubes (por ejemplo, 'spr_fondo_cielo'), puedes arrastrarlo desde el Asset Browser hasta el campo 'Sprite' de las propiedades de la capa. 3. Repetición (Tiling): Activa las casillas 'Horizontal Tile' y 'Vertical Tile' según corresponda. Si activas 'Horizontal Tile', el gráfico se duplicará indefinidamente a lo largo del eje X, ideal para cielos que cubren niveles extensos.
Paso 4: Organización de múltiples capas de instancias
Uno de los errores más comunes de los principiantes es colocar todas las instancias del juego dentro de una única capa genérica llamada 'Instances'. Si bien el juego compila y funciona, esto ocasiona problemas de solapamiento visual impredecible: a veces el personaje se dibuja por detrás de una plataforma, o un enemigo aparece por encima de la puerta por la que debería salir.
Para evitar esto, organizaremos nuestras capas creando jerarquías funcionales. Renombraremos y crearemos las siguientes capas de instancias haciendo clic en el icono 'Create Instance Layer':
• 'Instances_Blocks': Aquí colocaremos las instancias de 'obj_bloque' que conformarán el suelo y las paredes sólidas. • 'Instances_Items': Reservada para monedas, gemas o llaves que el jugador debe recoger. • 'Instances_Player': Capa situada por encima de las anteriores donde colocaremos exclusivamente a 'obj_jugador'. De este modo, garantizamos que el personaje siempre se dibuje por delante del suelo que pisa y de los coleccionables que atraviesa.
Interacción con Rooms y Capas mediante GML Code
Aunque la mayor parte de la colocación de escenarios se realiza visualmente mediante el ratón, GameMaker dispone de un potente conjunto de funciones y variables globales en GML para consultar el estado de la habitación y manipular capas dinámicamente durante la ejecución.
Variables de dimensión de la Room
Existen dos variables incorporadas de solo lectura extremadamente útiles: 'room_width' y 'room_height'. Devuelven exactamente el ancho y el alto en píxeles de la habitación en la que la instancia se encuentra ejecutando su lógica.
Veamos un ejemplo práctico: queremos evitar que el personaje se salga de los límites laterales de la habitación. En el objeto 'obj_jugador', dentro del evento 'Step', podemos utilizar 'room_width' junto con la función matemática 'clamp()' para restringir su posición horizontal.
// --------------------------------------------------------
// Objeto: obj_jugador
// Evento: Step
// Propósito: Limitar la posición del jugador a los bordes de la Room
// --------------------------------------------------------
// El código de movimiento previo modifica la variable 'x'.
// A continuación, forzamos a que 'x' no sea menor que 0 ni mayor que el ancho de la room.
// Tomamos en cuenta un margen de 16 píxeles correspondiente a la mitad del sprite.
var margen = 16;
x = clamp(x, margen, room_width - margen);Control de visibilidad y orden de renderizado en tiempo real
Además de modificar las propiedades de los fondos, GML permite ocultar o mostrar capas enteras de golpe mediante la función 'layer_set_visible(layer_id, visible)'. Esta técnica es comúnmente utilizada para sistemas de niebla, elementos decorativos de primer plano que deben desvanecerse al entrar en una casa, o zonas secretas del nivel que se revelan al romper una pared.
// --------------------------------------------------------
// Objeto: obj_palanca_secreta
// Evento: Collision con obj_jugador
// Propósito: Revelar una capa oculta apagando su visibilidad
// --------------------------------------------------------
var id_capa_oculta = layer_get_id("Assets_Pared_Falsa");
// Si la capa existe en la habitación, alternamos su visibilidad
if (layer_exists(id_capa_oculta)) {
layer_set_visible(id_capa_oculta, false);
}Visión general de GML Visual en la gestión de Rooms
Aunque en este curso priorizamos GML Code por su flexibilidad y estándar en la industria independiente, cabe mencionar que GameMaker ofrece su alternativa visual basada en bloques arrastrables conocida como GML Visual. En GML Visual, acciones como cambiar de habitación ('Go To Room') o modificar la visibilidad de una capa disponen de bloques predefinidos con campos visuales directos. Todo lo que construimos con líneas de código como 'room_goto(rm_nivel_2)' o 'layer_set_visible()' posee un equivalente directo en bloques visuales, garantizando que el entendimiento conceptual de las habitaciones y capas sea idéntico sin importar el método de entrada elegido.
Buenas prácticas en el diseño de Rooms
A medida que los proyectos crecen, mantener el orden en el diseño de escenarios marca la diferencia entre un desarrollo ágil y un laberinto de fallos. Considera siempre las siguientes pautas:
1. Nomenclatura coherente: Nombra siempre tus capas de forma descriptiva en todas las habitaciones (por ejemplo: 'Background', 'Instances_Solid', 'Instances_Entities', 'GUI'). Si tus scripts asumen que la capa de entidades se llama 'Instances_Entities', fallarán si en la siguiente habitación la llamas 'Instances_Objetos'. 2. Bloqueo de capas (Locking): El panel de capas incluye un icono de candado al lado de cada nombre. Una vez hayas diseñado el suelo o el fondo, bloquea esa capa para evitar mover o borrar accidentalmente plataformas mientras ajustas la posición de los enemigos o del jugador. 3. Ocultar capas temporalmente: El icono del ojo permite ocultar capas en el editor. Es de gran ayuda para trabajar en capas inferiores sin que los elementos de primer plano entorpezcan la vista del desarrollador.
Ejercicios prácticos
Pon en práctica lo aprendido mediante los siguientes ejercicios estructurados:
Ejercicio 1 (Configuración del escenario base): Abre el proyecto que venimos desarrollando. Configura la habitación 'rm_nivel_1' con un ancho de 960 píxeles y un alto de 540 píxeles. Ajusta la cuadrícula de diseño (Grid) a 32x32 píxeles y activa el ajuste automático (Snap to Grid). Comprobación: Al arrastrar cualquier instancia al lienzo, debe desplazarse en saltos de 32 píxeles exactos y la regla del lienzo debe marcar el límite en (960, 540).
Ejercicio 2 (Estructura de capas multicapa): En 'rm_nivel_1', elimina la capa única de instancias predeterminada y crea dos capas de instancias distintas llamadas 'Instances_Blocks' (colocada abajo) e 'Instances_Player' (colocada arriba). En 'Instances_Blocks', sitúa una hilera continua de objetos 'obj_bloque' para formar el piso. En 'Instances_Player', coloca al personaje 'obj_jugador'. Comprobación: Al reproducir el juego con F5, el sprite del jugador debe renderizarse por encima del suelo si se colocan en la misma coordenada Y sin quedar tapado por el bloque.
Ejercicio 3 (Control de límites mediante GML Code): Abre el objeto 'obj_jugador', accede a su evento Step e incorpora el bloque de código que utiliza la función 'clamp()' y la constante 'room_width'. Añade además una línea análoga para restringir el eje vertical usando 'room_height'. Comprobación: Ejecuta el juego y desplaza al jugador; verifica que por más que intentes avanzar hacia los extremos, el personaje nunca abandona la vista ni desaparece fuera de los límites de la pantalla.
Resumen
- Las Rooms son los contenedores espaciales universales en GameMaker, utilizadas para niveles, pantallas de menú e interfaces.
- El origen de coordenadas (0, 0) de toda Room se sitúa en la esquina superior izquierda, incrementando X hacia la derecha e Y hacia abajo.
- El orden de la lista de Layers define la jerarquía visual: las capas superiores de la lista se dibujan encima de las capas inferiores.
- Separar los elementos en capas dedicadas (fondos, bloques sólidos, entidades y primer plano) garantiza control, orden visual y evita colisiones erróneas.
- Variables integradas como 'room_width' y 'room_height' permiten sincronizar el comportamiento lógico de las entidades con los límites físicos del escenario.
Practica lo aprendido
Ejercicio 1 · 1 punto
¿En qué orden se renderizan visualmente las capas de una Room según el panel Layers de GameMaker?
Ejercicio 2 · 1 punto
En GameMaker, el punto de origen de coordenadas (0, 0) de una Room se ubica en la esquina inferior izquierda.
Ejercicio 3 · 1 punto
En el panel Room Properties, el campo define el ancho total de la escena en píxeles, mientras que define la altura. Por convención técnica, los recursos de tipo Room se nombran con el prefijo .
Ingresa para guardar tu progreso — Ingresar