Introducción al Desarrollo de Videojuegos con GameMaker · Módulo 2: Sprites, objetos, eventos, instancias y rooms.
Creación e importación de sprites básicos
Clase 6 de 60 · 50 min
También disponible en: EN
Introducción: La identidad visual de un videojuego 2D
En el desarrollo de videojuegos bidimensionales, todo lo que el jugador percibe en pantalla como un personaje, un bloque de suelo, un proyectil o un elemento de interfaz tiene su origen gráfico en un recurso fundamental: el sprite. Si bien los objetos contienen la lógica y el código que determinan el comportamiento dentro de GameMaker, los sprites constituyen su representación visual en el mundo del juego.
Un sprite puede estar compuesto por una única imagen estática (como un bloque de piedra) o por una secuencia ordenada de imágenes denominadas fotogramas o subimágenes (sub-images), que al reproducirse a una velocidad determinada generan la ilusión de movimiento. En este inicio del Módulo 2, nos centraremos en los pilares visuales de nuestro proyecto de plataformas retro: diseñaremos nuestros primeros recursos gráficos mediante el editor interno de GameMaker e importaremos archivos externos en formato PNG, configurando con precisión milimétrica dos propiedades determinantes para la jugabilidad: el punto de origen y la máscara de colisión.
¿Qué es un Sprite y por qué utilizamos el formato PNG?
Técnicamente, un sprite es un mapa de bits (bitmap) optimizado para ser procesado por la tarjeta gráfica y renderizado en pantalla de manera eficiente. En el desarrollo moderno en 2D, el estándar de facto para almacenar sprites individuales y hojas de sprites (sprite sheets) es el formato PNG (Portable Network Graphics).
Las ventajas técnicas de utilizar PNG frente a otros formatos como JPG, BMP o GIF radican en tres factores determinantes:
| Característica | Formato PNG | Otros formatos (JPG / GIF / BMP) |
|---|---|---|
| Compresión | Sin pérdida (lossless). Los bordes y colores de los píxeles se conservan intactos. | JPG utiliza compresión con pérdida, generando artefactos y borrosidad alrededor de los bordes. |
| Canal Alfa (Transparencia) | Soporta canal alfa de 8 bits (256 niveles de opacidad por píxel). | JPG no admite transparencia. GIF solo soporta transparencia binaria (opaco o 100% transparente sin degradados). |
| Eficiencia en Pixel Art | Mantiene paletas reducidas y formas geométricas nítidas sin distorsión. | BMP no comprime eficientemente el peso del archivo; JPG destruye el contraste nítido de los píxeles adyacentes. |
💡 Regla de oro: En videojuegos 2D con estética pixel art o arte vectorial plano, exporta e importa siempre tus recursos gráficos en formato PNG de 32 bits (RGB con canal Alfa). Esto asegura fondos transparentes limpios y contornos completamente nítidos.
Creación de Sprites en el Árbol de Recursos (Asset Browser)
Para gestionar los recursos de forma profesional desde el comienzo, implementaremos una convención de nomenclatura estándar de la industria. Los nombres de los sprites deben comenzar siempre con el prefijo 'spr_' seguido del nombre descriptivo del elemento en minúsculas y separado por guiones bajos. Por ejemplo: spr_player_idle, spr_block_ground, spr_coin.
Para crear un nuevo sprite en GameMaker, sigue estos pasos:
1. Localiza el panel 'Asset Browser' en el lado derecho de tu espacio de trabajo. 2. Haz clic derecho sobre la carpeta 'Sprites' (o crea un grupo llamado Sprites si no existe). 3. En el menú contextual emergente, selecciona 'Create' -> 'Sprite'. 4. Se abrirá de inmediato la ventana del Inspector de Sprites en el área de trabajo y el recurso quedará listo para ser renombrado. Escribe inmediatamente 'spr_block_ground'.
El Editor de Sprites y la ventana de propiedades
Al seleccionar un sprite, la interfaz de GameMaker presenta dos áreas clave: el inspector de propiedades del sprite (donde se configura el tamaño en píxeles, la velocidad de animación, el punto de origen y la máscara) y el botón 'Edit Image', que da acceso al editor gráfico integrado.
En el inspector, observará un campo de dimensiones con un botón denominado 'Resize Sprite' (representado frecuentemente con un icono de escala o engranaje). Para nuestro videojuego de plataformas de estética retro, estableceremos una cuadrícula base de 32x32 píxeles. Haz clic en 'Resize Sprite', desmarca la casilla 'Maintain Aspect Ratio' si estuviera activa, escribe un ancho (Width) de 32 y un alto (Height) de 32, y pulsa 'Apply'.
Diseño con el Editor Gráfico Integrado de GameMaker
GameMaker incluye un potente editor de dibujo bitmap que permite crear arte final o prototipar rápidamente sin salir del motor. Haz clic en el botón 'Edit Image' dentro de la ventana de 'spr_block_ground'. Se abrirá el lienzo de dibujo con la barra de herramientas a la izquierda y la paleta de colores a la derecha.
Vamos a crear el bloque de tierra con hierba que usaremos para construir los suelos de nuestro juego:
1. Activa la cuadrícula desde la barra superior (menú View -> Toggle Grid o icono de rejilla) y configúrala a 8x8 o 16x16 para tener referencias geométricas precisas. 2. Selecciona la herramienta 'Rectangle Tool' (tecla de acceso rápido R). 3. En la paleta de colores primaria, selecciona un tono marrón tierra (#5C3C24 o similar). 4. Rellena el lienzo de 32x32 píxeles dejando la parte superior libre para la capa de césped. 5. Cambia el color a un verde intenso (#388724) y dibuja una franja de 6 píxeles de alto en el borde superior del bloque para representar la capa de hierba. 6. Utiliza la herramienta de lápiz ('Pencil Tool', tecla P) con un tamaño de 1 píxel para añadir pequeñas imperfecciones: algunos píxeles verdes descendiendo hacia la tierra a modo de briznas, y algunos píxeles marrón claro y oscuro dentro del bloque para otorgarle textura rocosa. 7. Cierra la pestaña de 'Edit Image' en la barra superior de GameMaker. Los cambios se guardan de forma instantánea en el sprite.
Importación de Sprites externos en formato PNG
A menudo, los desarrolladores y artistas trabajan con herramientas especializadas como Aseprite, Photoshop, Krita, GIMP o Pixelorama, o bien adquieren paquetes de gráficos comerciales y libres creados por la comunidad. GameMaker ofrece dos métodos principales para importar gráficos PNG: la importación de archivos de imagen única y la importación de hojas de sprites (sprite sheets).
Método 1: Importación de imagen única
Para importar un gráfico individual (por ejemplo, el personaje en reposo):
1. Crea un nuevo sprite en el Asset Browser y nómbralo 'spr_player_idle'. 2. En la ventana del Inspector del sprite, localiza el botón 'Import' en la parte superior. 3. Aparecerá un cuadro de advertencia indicando que la importación sobrescribirá cualquier contenido existente en el sprite actual. Confirma haciendo clic en 'Yes'. 4. Navega en el explorador de archivos de tu sistema operativo hasta encontrar tu archivo PNG (por ejemplo, 'player_stand_32x32.png') y selecciónalo. 5. GameMaker cargará la imagen reemplazando el lienzo en blanco, detectando automáticamente sus dimensiones originales y respetando la transparencia del canal alfa.
Método 2: Importación desde una Hoja de Sprites (Sprite Sheet / Strip)
Los artistas suelen entregar las animaciones en una sola tira de imágenes contiguas. GameMaker permite recortar y separar estos fotogramas automáticamente:
1. Crea un sprite y nómbralo 'spr_coin'. 2. En la barra de menú superior de GameMaker, selecciona 'Image' -> 'Import Strip Image' (o mantén pulsado Ctrl+I mientras estás en el editor del sprite). 3. Selecciona el archivo PNG que contiene la tira de la moneda (por ejemplo, una imagen de 128 píxeles de ancho por 32 píxeles de alto que contiene 4 fotogramas de 32x32 píxeles en fila horizontal). 4. Se abrirá la ventana de corte 'Convert to Frames'. Aquí debes indicar la cantidad de fotogramas (Number of Frames = 4) y el número de fotogramas por fila (Frames per Row = 4). 5. Comprueba en la vista previa que las cajas de selección coincidan exactamente con cada moneda sin recortar bordes. 6. Haz clic en 'Convert'. El sprite contendrá ahora 4 subimágenes indexadas desde el 0 hasta el 3, listas para animarse.
El Punto de Origen: Concepto y repercusión matemática
El punto de origen (Origin Point) de un sprite es la coordenada exacta dentro de la imagen que representa la posición de la instancia en la room (x, y). Cuando mediante programación le ordenamos a GameMaker: 'coloca a spr_player_idle en la posición x = 100, y = 200', el motor ubicará exactamente el punto de origen del sprite sobre esas coordenadas de la pantalla.
Por defecto, GameMaker sitúa el punto de origen en la esquina superior izquierda (Top Left: x = 0, y = 0). Aunque esta configuración es útil para elementos de interfaz fija (HUD) o baldosas estáticas de mapa, resulta sumamente perjudicial para personajes en juegos de plataformas por las siguientes razones:
1. **Inversión de escala horizontal (image_xscale):** Para hacer que el personaje mire hacia la izquierda, invertiremos su escala a -1 mediante código. Si el origen está en Top Left (0, 0), al invertir la escala el personaje pivotará sobre su borde izquierdo, saltando bruscamente 32 píxeles hacia la izquierda en pantalla. Si el origen está en el centro horizontal, rotará exactamente sobre su propio eje sin desplazarse. 2. **Alineación con el suelo:** Al aplicar gravedad y comprobar colisiones verticales con plataformas, tener el origen en la base del personaje (Bottom Centre: x = 16, y = 32 para un sprite de 32x32) hace que la coordenada 'y' coincida exactamente con la línea de contacto de los pies con la plataforma, simplificando drásticamente los cálculos físicos.
Máscaras de Colisión: Delimitación física de los gráficos
En GameMaker, una cosa es lo que se dibuja visualmente en pantalla y otra completamente distinta es el área que el motor de físicas y colisiones evalúa para determinar si dos elementos chocan entre sí. Esta área invisible se denomina Máscara de Colisión (Collision Mask).
Para acceder a esta sección, haz clic en el apartado colapsable 'Collision Mask' dentro del inspector del sprite. Te encontrarás con tres parámetros configurables: Mode (Modo), Type (Tipo) y los valores del cuadro delimitador (Bounding Box).
Modos de cálculo del cuadro delimitador (Mode)
El modo determina cómo GameMaker calcula las dimensiones de la caja de impacto:
| Modo | Comportamiento | Uso recomendado |
|---|---|---|
| Automatic | Calcula la caja en base a los píxeles opacos. Si la imagen cambia de tamaño o animación, la caja puede variar. | Objetos estáticos de una sola subimagen o decorados simples. |
| Full Image | La caja ocupa absolutamente todo el lienzo del sprite (de 0 a 32 en X e Y). | Bloques sólidos perfectos, suelos modulares y casillas de rejilla cuadrada. |
| Manual | Permite al desarrollador escribir o arrastrar con el cursor los límites exactos (Left, Right, Top, Bottom). | Personajes principales, enemigos y proyectiles donde se requiere control milimétrico de la jugabilidad. |
Tipos de forma de colisión (Type)
GameMaker permite elegir diferentes geometrías para procesar las colisiones:
- **Rectangle:** Caja rectangular alineada con los ejes (AABB - Axis-Aligned Bounding Box). Es matemáticamente la más rápida y eficiente de calcular. Ideal para el 95% de los elementos de plataformas 2D. - **Rotated Rectangle:** Caja rectangular orientable. Ligeramente más costosa computacionalmente, utilizada para naves espaciales o rayos láser que giran en cualquier ángulo. - **Ellipse:** Forma ovalada/circular. Excelente para proyectiles esféricos, ruedas o bolas rodantes. - **Diamond:** Rombo geométrico, útil en perspectivas isométricas. - **Precise (Slow):** Comprobación por píxel. Compara si un píxel opaco de un sprite toca un píxel opaco de otro. Es computacionalmente muy pesada y desaconsejada para personajes y plataformas complejas, ya que puede generar problemas de atasco en esquinas y caídas de rendimiento notables con muchas instancias.
💡 Aviso de diseño de niveles: Nunca utilices colisión 'Precise' para el personaje de un plataformas. Si el sprite de un personaje tiene un mechón de pelo o la punta de una bota que sobresale por un píxel, ese saliente se enganchará con las paredes al caminar o saltar, provocando que el control se sienta tosco e impreciso. Emplea siempre rectángulos manuales consistentes.
Implementación práctica: Configurando los recursos del proyecto
Vamos a aplicar de forma integral todo lo expuesto preparando los tres primeros recursos visuales de nuestro proyecto de plataformas retro. Asegúrate de tener creados los siguientes tres sprites con su configuración técnica idónea:
### 1. Sprite de suelo modular: spr_block_ground - **Dimensiones:** 32 x 32 píxeles. - **Origen:** Top Left (X: 0, Y: 0). - **Collision Mask - Mode:** Full Image. - **Collision Mask - Type:** Rectangle. - **Razón técnica:** Garantiza que los bloques de 32x32 se acoplen perfectamente lado a lado sin fisuras invisibles, y que la colisión cubra exactamente el volumen visible de cada bloque de terreno.
### 2. Sprite de personaje en reposo: spr_player_idle - **Dimensiones:** 32 x 32 píxeles (si tu diseño de personaje es más estilizado, por ejemplo 24x32, respétalo dentro de un lienzo de 32x32). - **Origen:** Bottom Centre (X: 16, Y: 32). - **Collision Mask - Mode:** Manual. - **Collision Mask - Type:** Rectangle. - **Ajuste del cuadro delimitador manual:** Configura Left = 6, Right = 25, Top = 4, Bottom = 31. - **Razón técnica:** Una caja de colisión ligeramente más estrecha que el dibujo del personaje previene atascos en túneles estrechos y hace que la experiencia de juego sea mucho más permisiva y agradable para el usuario (lo que comúnmente se conoce como 'hitbox generosa').
### 3. Sprite de objeto coleccionable: spr_coin - **Dimensiones:** 16 x 16 píxeles (o 32x32 escalado convenientemente). - **Origen:** Middle Centre (X: 8, Y: 8). - **Collision Mask - Mode:** Automatic o Manual. - **Collision Mask - Type:** Ellipse (o Rectangle). - **Razón técnica:** Centrar el origen en el medio exacto facilita que la moneda pueda rotar, encogerse o emitir efectos de brillo desde su centro sin desviarse de su posición.
Buenas prácticas de organización y nomenclatura
A medida que un proyecto crece, un desarrollador puede llegar a manejar cientos de sprites. Para evitar el caos organizativo, sigue estrictamente estas directrices desde la primera lección:
- **Estructura de carpetas en el Asset Browser:** Dentro de la carpeta 'Sprites', crea subcarpetas organizadas por categoría: 'Player', 'Enemies', 'Environment', 'Items', 'UI'. Arrastra cada recurso a su carpeta correspondiente. - **Consistencia de sufijos:** Identifica el propósito de cada animación con claridad: spr_player_idle, spr_player_walk, spr_player_jump, spr_player_fall. - **Potencias de base dos:** Mantener las dimensiones de los sprites en múltiplos de 2 (8, 16, 32, 64, 128) optimiza la memoria de texturas en la GPU y facilita el empaquetado automático de GameMaker en las páginas de texturas (Texture Pages).
Ejercicios prácticos
Realiza los siguientes ejercicios para asimilar de manera práctica los conocimientos antes de avanzar a la creación de objetos en la próxima lección:
### Ejercicio 1: Creación del bloque de plataforma flotante - **Objetivo:** Diseñar un sprite de plataforma flotante de 32x16 píxeles con el editor interno. - **Instrucciones:** Crea un sprite llamado 'spr_platform_block'. Modifica su tamaño a 32 píxeles de ancho por 16 píxeles de alto. Mediante el editor integrado, dibuja una tabla de madera o una losa de piedra. Configura el punto de origen en 'Top Left' (0, 0) y su máscara de colisión en modo 'Full Image' de tipo 'Rectangle'. - **Criterio de comprobación:** Abre la vista previa del sprite y confirma que el recuadro gris oscuro cubra exactamente la totalidad de los 32x16 píxeles.
### Ejercicio 2: Importación de sprite externo con recorte manual de caja de colisión - **Objetivo:** Practicar la importación de un PNG externo y optimizar manualmente su caja de daño. - **Instrucciones:** Dibuja en un programa externo (o crea en GameMaker) una figura que represente una espina o trampa dañina (32x32 píxeles) y nómbrala 'spr_hazard_spikes'. Configura el origen en 'Bottom Centre'. Cambia la máscara de colisión a 'Manual' y reduce el margen superior (Top) para que cubra solo el 60% inferior de la espina, dejando la punta libre. - **Criterio de comprobación:** La máscara visualizada en rojo semitransparente debe dejar la parte superior de las puntas por fuera de la zona de colisión, permitiendo al futuro jugador rozar levemente la punta sin morir injustamente.
### Ejercicio 3: Importación de tira animada (Strip) - **Objetivo:** Importar una secuencia animada de 4 fotogramas para un objeto coleccionable. - **Instrucciones:** Crea una tira PNG de 64x16 píxeles en total, compuesta por 4 gemas consecutivas de 16x16 píxeles con variaciones de color o brillo. Crea el sprite 'spr_gem', utiliza la herramienta 'Import Strip Image', divide la tira en 4 fotogramas de 16x16 y sitúa el origen en 'Middle Centre' (8, 8). - **Criterio de comprobación:** Al pulsar el botón 'Play' en la ventana del inspector del sprite, la gema debe animarse de forma fluida y en bucle sobre su centro sin saltos de posición.
Resumen
- Un sprite es la representación visual bidimensional de los elementos del juego y puede contener una imagen estática o múltiples subimágenes para animación.
- El formato PNG es el estándar absoluto para sprites 2D debido a su compresión sin pérdida y a su soporte completo para canal alfa de transparencia.
- El punto de origen determina las coordenadas exactas de posicionamiento, escala y rotación del sprite en la room. Se recomienda usar 'Bottom Centre' para personajes de plataformas y 'Top Left' para bloques de escenario.
- La máscara de colisión (Collision Mask) define el área física que detecta impactos. Se recomienda usar cuadros delimitadores de tipo 'Rectangle' manuales para personajes, evitando colisiones 'Precise' que dañan el rendimiento y la jugabilidad fluida.
- La estandarización de nombres (como el prefijo spr_) y la organización por carpetas garantizan un proyecto profesional, escalable y libre de errores al momento de programar en GML.
Practica lo aprendido
Ejercicio 1 · 1 punto
En un videojuego de plataformas, al configurar un sprite de personaje de 32x32 píxeles, ¿por qué se recomienda cambiar el punto de origen de «Top Left» a «Bottom Centre»?
Ejercicio 2 · 1 punto
Ordena cronológicamente los pasos explicados en la lección para importar una tira de imágenes (Sprite Sheet / Strip) en un sprite de GameMaker:
- 1Hacer clic en el botón 'Convert' para generar las subimágenes indexadas.
- 2Crear un nuevo sprite en el Asset Browser y asignarle un nombre descriptivo con prefijo (por ejemplo, spr_coin).
- 3Especificar el número de fotogramas y la cantidad por fila en la ventana emergente 'Convert to Frames'.
- 4Seleccionar en la barra de menú superior 'Image' -> 'Import Strip Image' (o pulsar Ctrl+I).
- 5Elegir el archivo PNG que contiene la tira de fotogramas contiguos en el explorador de archivos.
Ejercicio 3 · 1 punto
Para mantener un proyecto ordenado y profesional en GameMaker, los recursos gráficos deben comenzar siempre con el prefijo seguido del nombre descriptivo. Además, la regla de oro para gráficos 2D establece que deben importarse siempre en formato de 32 bits para preservar contornos nítidos y fondos transparentes.
Ingresa para guardar tu progreso — Ingresar