Introducción al Desarrollo de Videojuegos con GameMaker · Módulo 6: Animaciones, sprites, fondos y tilemaps.
Configuración de fondos estáticos y parallax
Clase 28 de 60 · 50 min
También disponible en: EN
Introducción al espacio visual y la profundidad en dos dimensiones
En los videojuegos de plataformas en dos dimensiones, la pantalla representa un corte transversal del mundo ficticio. En los módulos anteriores hemos creado un personaje jugable (obj_player) con físicas de movimiento horizontal, salto y detección precisa de colisiones sobre bloques sólidos. No obstante, si el escenario solo muestra las plataformas sobre un color plano o una imagen fija, el mundo suele percibirse rígido, artificial y carente de vida. Para sumergir al jugador en una atmósfera convincente, es fundamental dotar a la escena de profundidad espacial.
El cerebro humano calcula distancias basándose en cómo se desplazan los elementos en el campo visual relativo. Cuando caminamos por el campo, las briznas de hierba a nuestros pies parecen deslizarse a gran velocidad, los árboles a media distancia se desplazan con moderación, mientras que las cordilleras lejanas y el cielo parecen permanecer casi inmóviles. Este fenómeno óptico natural recibe el nombre de paralaje o, en su adopción anglosajona dentro de la industria del videojuego, efecto parallax. A través de este mecanismo, transformamos un plano bidimensional plano en un diorama multicapa con volumen aparente.
En esta clase aprenderás a trabajar con las capas de fondo (Background Layers) en el editor de Rooms de GameMaker, a configurar patrones repetitivos continuos (tiling horizontal y vertical) y a controlar las capas tanto de manera estática y automática como de forma programada mediante GML Code sincronizado con la cámara de juego. Esta estructura servirá de antesala para la introducción de los Tilemaps en las próximas clases del módulo.
Capas de fondo en el Editor de Rooms de GameMaker
Desde las versiones modernas de GameMaker, el entorno de diseño de niveles (Room Editor) se estructura sobre un sistema robusto de capas apiladas verticalmente en el panel de capas (Layer Panel). El orden en que se apilan estas capas determina estrictamente el orden de renderizado: las capas situadas en la parte inferior de la lista visual se dibujan primero (al fondo), mientras que las situadas arriba se dibujan encima de todo lo demás.
GameMaker ofrece diferentes naturalezas de capa: capas de instancias (donde vive obj_player y los bloques), capas de activos gráficos (Asset Layers), capas de mosaicos (Tilemap Layers) y capas de fondo (Background Layers). Una capa de fondo está optimizada específicamente para renderizar un color uniforme o una imagen de sprite repetitiva con mínimo coste computacional.
| Propiedad en Inspector | Tipo de valor | Función técnica dentro del motor |
|---|---|---|
| Colour | Color RGB / Hex | Tinta base sobre la cual se dibuja la escena. Si no hay sprite, llena todo el espacio visible. |
| Sprite | Sprite Asset | Recurso gráfico asignado como textura de fondo a lo largo de toda la superficie del nivel. |
| Horizontal Tile | Booleano (Casilla) | Repite el sprite de fondo indefinidamente a lo largo del eje horizontal (eje X). |
| Vertical Tile | Booleano (Casilla) | Repite el sprite de fondo indefinidamente a lo largo del eje vertical (eje Y). |
| Stretch | Booleano (Casilla) | Deforma el sprite para forzarlo a coincidir exactamente con el tamaño de la Room. |
| Horizontal Speed (hspeed) | Numérico real | Aplica un desplazamiento continuo automático de píxeles por frame en el eje horizontal. |
| Vertical Speed (vspeed) | Numérico real | Aplica un desplazamiento continuo automático de píxeles por frame en el eje vertical. |
Para nuestro proyecto retro de plataformas, evitaremos la propiedad 'Stretch', ya que estirar una ilustración pixel art deforma la relación de aspecto y rompe la consistencia del tamaño de píxel (pixel scale). En su lugar, utilizaremos sprites diseñados para enlazarse sin costuras visibles en sus extremos, activando la repetición horizontal ('Horizontal Tile').
Principios físicos y matemáticos del efecto Parallax
El principio que rige el parallax consiste en mover las distintas capas del fondo a una fracción de la velocidad de la cámara principal. Consideremos una cámara centrada en el jugador que se desplaza hacia la derecha a 4 píxeles por fotograma. Si un fondo se desplaza a esa misma velocidad, se percibe como si estuviera a la misma distancia que el personaje. Si el fondo permanece inmóvil respecto a la cámara, simula encontrarse a una distancia virtual infinita (como el sol o la luna).
Matemáticamente, la posición en pantalla de cualquier capa de fondo se define mediante la ecuación de proyección relativa:\n\nPosicionCapa = PosicionCamara * FactorParallax\n\nDonde el 'FactorParallax' es un coeficiente normalizado que oscila habitualmente entre 0.0 y 1.0. Un factor de 0.0 significa que el fondo ignora el movimiento de la cámara, simulando distancia cósmica infinita. Un factor de 0.8 significa que la capa se desplaza casi al mismo ritmo que el terreno de juego, correspondiendo a elementos inmediatamente detrás del jugador.
Adicionalmente, existe el parallax de primer plano (Foreground Parallax). Si colocamos ramas, vigas oxidadas o neblina por delante de la capa de instancias (con un factor superior a 1.0, por ejemplo 1.2 o 1.3), dichos elementos parecerán rozar la lente de la cámara al pasar velozmente, aportando una dimensión volumétrica integral tanto por detrás como por delante de la acción.
Método 1: Parallax ambiental continuo sin código
GameMaker permite implementar comportamientos cinéticos básicos de fondo directamente desde el editor visual de la Room, sin requerir una sola línea de código GML. Esto es sumamente útil para elementos atmosféricos que poseen movimiento propio autónomo, tales como bancos de nubes impulsados por el viento, corrientes de agua subterráneas o cintas transportadoras industriales.
Para configurar este comportamiento paso a paso en tu nivel:
1. Abre la sala principal del juego (por ejemplo, rm_nivel_1) en el Workspace.\n2. En el panel superior izquierdo 'Layers', crea una nueva capa de tipo Background haciendo clic en el icono correspondiente ('Create Background Layer').\n3. Nombra a esta capa 'Background_Nubes' y arrástrala para que quede justo por encima de la capa 'Background_Cielo'.\n4. En el panel de propiedades de la capa (Layer Inspector), selecciona tu sprite spr_bg_nubes.\n5. Marca la casilla 'Horizontal Tile' para garantizar que las nubes se repitan indefinidamente sin cortes.\n6. En el campo 'Horizontal Speed', introduce el valor -0.25.
💡 Un valor negativo en Horizontal Speed desplaza la textura hacia la izquierda, simulando viento que viaja hacia el oeste. Mantén valores fraccionales bajos (entre 0.1 y 0.5); velocidades elevadas generan ruido visual excesivo que desconcentra al jugador de las amenazas del juego.
Al iniciar el juego con F5, notarás que las nubes se mueven con suavidad de manera perpetua, independientemente de si el jugador camina o permanece quieto. No obstante, este método tiene una limitación técnica: las nubes no reaccionan al desplazamiento de la cámara del jugador. Para crear fondos que acompañen el viaje del héroe a través de un escenario extenso, debemos coordinar las posiciones de las capas mediante código GML.
Método 2: Parallax interactivo sincronizado con la cámara mediante GML
Para lograr que los fondos respondan dinámicamente al avance del jugador por el mundo, es necesario alterar la posición física de las capas de fondo en cada fotograma del ciclo de juego. En GameMaker, cada capa tiene un identificador único (ID de capa) que podemos manipular con las funciones nativas layer_x() y layer_y().
Para mantener nuestro proyecto ordenado y desacoplado, no introduciremos esta lógica dentro de obj_player ni dentro de los objetos de colisión. Crearemos un objeto gestor específico: obj_parallax_manager. Este objeto actuará como controlador ambiental invisible dentro del nivel.
Paso 1: Organización de las capas en la Room
Dentro de rm_nivel_1, organiza la lista de capas de abajo hacia arriba en el siguiente orden estricto:
• Fondo_0_Cielo (Capa de fondo: sprite spr_bg_cielo, Horizontal Tile activado)\n• Fondo_1_Montanas (Capa de fondo: sprite spr_bg_montanas, Horizontal Tile activado)\n• Fondo_2_Bosque (Capa de fondo: sprite spr_bg_bosque, Horizontal Tile activado)\n• Instances (Capa de instancias: donde se colocan obj_player y obj_bloque)\n• PrimerPlano_Hojas (Capa de fondo o de assets opcional por delante de las instancias)
Paso 2: Creación e inicialización del controlador de parallax
Crea un nuevo objeto en la carpeta de gestores (Managers u Objects) y nómbralo obj_parallax_manager. No necesita sprite asignado. En su evento Create, capturaremos las referencias a las capas de fondo mediante la función layer_get_id(). Esta función busca el nombre de texto de la capa y almacena su dirección en memoria, evitando búsquedas por cadena de texto en cada frame, lo cual optimiza drásticamente el rendimiento.
// ====================================================================
// OBJETO: obj_parallax_manager
// EVENTO: Create
// PROPÓSITO: Cachear los identificadores de capas de fondo y definir
// factores de profundidad para el efecto parallax.
// ====================================================================
// Obtener los IDs de las capas creadas en el Room Editor
capa_cielo = layer_get_id("Fondo_0_Cielo");
capa_montanas = layer_get_id("Fondo_1_Montanas");
capa_bosque = layer_get_id("Fondo_2_Bosque");
// Factores de movimiento relativo horizontal (0.0 = quieto con cámara, 1.0 = igual al suelo)
// Entre menor sea el valor, más lejano parece el elemento visual.
factor_cielo = 0.95; // Se desplaza al 5% de velocidad aparente (casi estático en el horizonte)
factor_montanas = 0.65; // Montañas a distancia media-lejana
factor_bosque = 0.30; // Colinas y árboles inmediatamente detrás de las plataformas
// Posición inicial de referencia para evitar saltos bruscos
cam_x_previa = 0;
cam_y_previa = 0;Nota que los factores están configurados desde la perspectiva del posicionamiento de la capa: al situar layer_x(capa, cam_x * factor), si el factor es 0.95, la capa acompaña a la cámara casi en su totalidad, produciendo un desfase relativo minúsculo (el cielo parece infinito). Por el contrario, un factor de 0.30 produce un desplazamiento mayor respecto al visor de la cámara, creando la sensación de estar más cerca.
Paso 3: Actualización de posiciones en el evento Step
Para evitar tartamudeos o temblores gráficos (fenómeno conocido como jittering), la actualización de las posiciones de fondo debe realizarse en el evento Step o preferentemente en Step Normal después de calcular la cámara, o bien en End Step. Dado que la cámara de la vista se vincula a view_camera[0], leemos sus coordenadas exactas en tiempo real:
// ====================================================================
// OBJETO: obj_parallax_manager
// EVENTO: Step (o End Step)
// PROPÓSITO: Sincronizar las coordenadas de las capas con la posición
// actual de la cámara activa de la Room.
// ====================================================================
// 1. Obtener las coordenadas actuales de la cámara principal (View 0)
var _cam_x = camera_get_view_x(view_camera[0]);
var _cam_y = camera_get_view_y(view_camera[0]);
// 2. Aplicar la nueva posición en X a cada capa de fondo registrada
// Validamos primero que la capa exista en la Room activa para evitar errores
if (layer_exists(capa_cielo)) {
layer_x(capa_cielo, _cam_x * factor_cielo);
}
if (layer_exists(capa_montanas)) {
layer_x(capa_montanas, _cam_x * factor_montanas);
}
if (layer_exists(capa_bosque)) {
layer_x(capa_bosque, _cam_x * factor_bosque);
// Si el nivel tiene saltos verticales pronunciados, también podemos aplicar parallax en Y:
layer_y(capa_bosque, _cam_y * 0.15);
}En GameMaker Visual (anteriormente Drag and Drop), esta misma lógica se implementa arrastrando el bloque de acción 'Function Call' para invocar layer_x y pasando como argumentos la variable de capa y el cálculo matemático del producto de la cámara. Sin embargo, en GML Code la escritura es directa, legible y mucho más fácil de ajustar numéricamente durante las fases de pulido.
Combinación de Parallax relativo y movimiento continuo
Uno de los efectos visuales más elegantes de los clásicos de 16 bits consiste en combinar el movimiento reactivo a la cámara con una deriva constante por viento. Por ejemplo, desear que las nubes lejanas se muevan lentamente solas, pero que al mismo tiempo, si el personaje corre a toda velocidad hacia la derecha, la perspectiva de la cámara también afecte sutilmente la posición de esas nubes.
Para lograr esta fusión matemática sin alterar la configuración interna del editor, agregamos un acumulador de tiempo o desplazamiento autónomo dentro del mismo controlador GML:
// ====================================================================
// OBJETO: obj_parallax_manager
// EVENTO: Create (Fragmento de adición para deriva constante)
// ====================================================================
deriva_nubes = 0; // Acumulador de distancia por viento
velocidad_viento = 0.2; // Píxeles por frame que avanza el viento hacia la izquierda
// ====================================================================
// OBJETO: obj_parallax_manager
// EVENTO: Step (Fragmento actualizado para capas con viento)
// ====================================================================
var _cam_x = camera_get_view_x(view_camera[0]);
// Incrementar la deriva temporal del viento
deriva_nubes += velocidad_viento;
// Asignar posición combinando la posición de la cámara con el viento acumulado
if (layer_exists(capa_cielo)) {
// El operador resta hace que las nubes viajen de derecha a izquierda
layer_x(capa_cielo, (_cam_x * factor_cielo) - deriva_nubes);
}Al sumar un acumulador propio (deriva_nubes), el fondo posee un movimiento cinético independiente pero sigue retrocediendo o acelerando coherentemente cuando la cámara enfoca hacia nuevos horizontes del nivel.
Consideraciones de rendimiento y optimización gráfica
Aunque las capas de fondo son muy eficientes, un uso descuidado de imágenes gigantescas puede saturar la memoria gráfica (VRAM) y provocar pérdidas de cuadros por segundo (framerate drops), especialmente en dispositivos móviles o consolas portátiles. Para mantener un rendimiento óptimo de 60 fotogramas estables, considera los siguientes estándares de producción:
1. Dimensiones de Sprites de Fondo: No crees una imagen única del tamaño de todo el nivel (por ejemplo, una imagen de 10000x1080 píxeles). En su lugar, diseña un módulo continuo (seamless) de 320x180, 480x270 o 640x360 píxeles y permite que GameMaker lo repita automáticamente mediante la opción 'Horizontal Tile'. El consumo de memoria pasará de cientos de megabytes a apenas un par de kilobytes.
2. Grupos de Textura (Texture Groups): En las opciones de cada Sprite de fondo, asegúrate de asignarlos al Texture Group adecuado. Agrupar los fondos del 'Nivel_Bosque' en su propia página de textura evita que GameMaker tenga que cargar recursos de otros niveles que no se están utilizando.
3. Capas Vacías o Desactivadas: Si en una sala cerrada (como una cueva o calabozo interior) no hay cielo visible, desactiva la visibilidad de la capa o elimínala en esa Room específica. Nunca dejes capas invisibles procesando cálculos matemáticos innecesarios en segundo plano.
Ejercicios prácticos de consolidación
Pon a prueba y consolida lo aprendido a través de las siguientes actividades prácticas orientadas a tu proyecto en desarrollo:
Resumen
- Las capas de fondo (Background Layers) en GameMaker permiten renderizar colores sólidos o patrones de texturas repetitivas (tiling) con un impacto mínimo en el rendimiento.
- El efecto parallax se basa en la ley óptica según la cual los objetos más lejanos al observador parecen desplazarse más lentamente en el campo visual que los objetos cercanos.
- Es posible aplicar desplazamientos continuos automáticos a las capas de fondo directamente desde el Inspector de la Room mediante las variables hspeed y vspeed, ideal para corrientes de aire, nubes y efectos ambientales.
- Mediante las funciones de GML layer_get_id(), layer_x() y layer_y(), sincronizamos con total precisión la posición de cualquier capa de fondo en función de la coordenada actual de la vista activa (view_camera[0]).
- Multiplicar la posición horizontal de la cámara por diferentes factores decimales normalizados (entre 0.0 y 1.0) permite jerarquizar la distancia virtual de cada capa gráfica.
- Un diseño modular con texturas repetitivas 'seamless' en tamaños contenidos optimiza la memoria de texturas (VRAM) en comparación con el uso ineficiente de imágenes gigantescas estiradas.
Practica lo aprendido
Ejercicio 1 · 1 punto
¿Por qué se desaconseja utilizar la propiedad 'Stretch' en las capas de fondo para un proyecto de plataformas retro en pixel art?
Ejercicio 2 · 1 punto
Ordena las capas de la sala (Room) de abajo hacia arriba en el panel de capas, desde la que se dibuja primero al fondo hasta la que se dibuja por delante de todas las demás.
- 1Fondo_2_Bosque
- 2Fondo_0_Cielo
- 3PrimerPlano_Hojas
- 4Instances
- 5Fondo_1_Montanas
Ejercicio 3 · 1 punto
En la fórmula de proyección del parallax, asignar un factor de hace que la capa ignore el movimiento de la cámara simulando una distancia infinita. En cambio, para un efecto de primer plano que pase por delante de la acción, se emplea un factor a 1.0. Para modificar la posición horizontal de dicha capa mediante GML en cada fotograma, se utiliza la función .
Ingresa para guardar tu progreso — Ingresar