Cómo importar una hoja de sprites en Godot
Godot 4 lee una hoja de sprites de tres formas diferentes, y elegir mal puede obligarte a rehacer dos veces la configuración de animación. Esta guía explica AnimatedSprite2D con SpriteFrames, regiones de AtlasTexture y el atajo hframes/vframes en un Sprite2D sencillo: para qué sirve cada uno y qué hacer cuando tu hoja no tiene una cuadrícula real.
Importar la textura en el proyecto
Godot importa recursos observando el sistema de archivos. Copia tu PNG en cualquier ubicación del directorio del proyecto y aparecerá en el panel FileSystem, con un .import creado junto a él. Nunca lo editas a mano: cambias ajustes en Import y pulsas Volver a importar.
Antes de nada, configura el filtrado, porque es el ajuste más visible para pixel art. En Godot 4 el filtro de textura está en el nodo, no en la importación, dentro de CanvasItem → Texture → Filter. Configúralo en Nearest y los bordes de píxeles siguen definidos. Configurarlo por nodo resulta tedioso; cambia el valor predeterminado del proyecto: Project Settings → Rendering → Textures → rendering/textures/canvas_textures/default_texture_filter → Nearest. Cada CanvasItem que siga en Inherit lo detecta después.
Mientras estés en el panel Import, deja Mipmaps desactivado para sprites 2D cerca de su tamaño real; Godot 4 solo comprime a formatos VRAM cuando eliges VRAM Compressed. El valor predeterminado Lossless es el que necesitas para pixel art; la compresión VRAM introduce precisamente los bloques que más se notan en colores planos.
Método 1: AnimatedSprite2D y SpriteFrames
Es la ruta para cualquier contenido animado y el punto de partida de la mayoría de los proyectos. AnimatedSprite2D es un nodo que contiene un SpriteFrames recurso: colección nombrada de animaciones, cada una con texturas ordenadas, FPS y opción de bucle.
- Añade un AnimatedSprite2D a tu escena.
- En Inspector, haz clic en el Sprite Frames propiedad y elige New SpriteFrames. Se abre un panel SpriteFrames en la parte inferior del editor.
- Renombra la animación predeterminada de default a algo significativo — walk, idle. Harás referencia a estas cadenas desde el código.
- Añade fotogramas con uno de los dos botones de la barra de herramientas: Añadir fotogramas desde una hoja de sprites (el icono de cuadrícula) o Añadir fotogramas desde archivos (el icono de archivo).
- Define los FPS y el interruptor de bucle y reproduce en el panel para comprobar el ritmo antes de conectar código.
Añadir fotogramas desde una hoja de sprites
Al elegir el icono de cuadrícula se abre un diálogo donde seleccionas el PNG y describes su distribución: Horizontal y Vertical recuentos, además de Separation y Offset si hay márgenes o huecos. La vista previa se actualiza y después seleccionas celdas en el orden deseado. Mayús-clic selecciona un rango.
Dos detalles: el orden de selección determina el de fotogramas, así que seleccionar desordenado reproduce desordenado. Además, este diálogo supone una cuadrícula uniforme, como Grid By Cell Count de Unity. No detecta contenido ni tiene equivalente a Automatic. Si no hay cuadrícula real, no puede salvarla.
Añadir fotogramas desde archivos
Selecciona varios PNG individuales y se convertirán en fotogramas según el orden alfabético de Godot. Completa los números de los nombres con ceros iniciales: walk_01.png mediante walk_12.png — o el fotograma 10 queda justo después del 1. Es la vía más fácil de configurar y por eso dividir previamente en archivos suele ser más cómodo en Godot.
Método 2: regiones de AtlasTexture
Un AtlasTexture es un recurso que apunta a una región de una textura grande y se comporta como textura independiente donde Godot la admite. Se crea poniendo una propiedad de textura en New AtlasTexture, asignando la hoja a su atlas propiedad, y escribir el region rectángulo (x, y, ancho, alto).
Es la opción más flexible y manual. Resulta útil si los sprites están en posiciones arbitrarias, varios nodos necesitan distintas partes de una textura o generas regiones desde datos en código:
- Un tema de interfaz que extrae piezas nine-patch e iconos de una textura compartida.
- Un conjunto de piezas o catálogo de objetos donde un script crea AtlasTextures a partir de un manifiesto JSON exportado junto con la hoja.
- Sprites estáticos puntuales para los que crear otro archivo parece excesivo.
El filter_clip propiedad merece atención: activarla evita muestrear fuera de la región y corrige la franja del sprite vecino en el borde.
Método 3: hframes y vframes en Sprite2D
Un simple Sprite2D tiene tres propiedades que le permiten leer una hoja sin recursos adicionales: hframes, vframes, y frame. Configura hframes en 4 y vframes en 4, y Godot divide la textura en una cuadrícula de 4×4; configurar frame a un índice de 0 a 15 muestra esa celda.
Es el método más ligero y se anima fácilmente desde una pista de AnimationPlayer sobre el frame propiedad, o desde unas líneas en _process. Para una hoja exportada por una herramienta, realmente es todo lo que necesitas.
Por qué las hojas irregulares rompen los tres métodos y cómo corregirlo
Todos los métodos anteriores comparten una suposición: puedes describir la hoja mediante cálculos. Add Frames from Sprite Sheet necesita cantidades. hframes/vframes necesitan cantidades. AtlasTexture necesita rectángulos explícitos, que puedes definir correctamente, pero solo midiendo cada uno a mano.
Los generadores rompen esa suposición. Pedir «un ciclo 4×4» produce aspecto de cuadrícula porque han visto miles, no porque calculen límites. La separación deriva por columna y acumula error; las poses tienen tamaños variables y quedan descentradas. Con hframes en 4, la primera columna parece bien, la segunda algo recortada y la cuarta atraviesa al personaje.
La solución fiable es leer la hoja, no describirla. En fondo transparente, cada píxel es sprite —alfa mayor que cero— o fondo —alfa cero—; las filas y columnas transparentes marcan los límites reales. Corta por el centro de esos huecos y ajusta cada pieza a su contenido: obtendrás fotogramas independientes de cualquier cuadrícula supuesta.
Eso es lo que hace la pestaña Corte mágico de nuestro Divisor de hojas de sprites hace, con varias pasadas de ajuste para separar piezas que aún contienen dos sprites o demasiado relleno. Exporta PNG individuales y cárgalos con Añadir fotogramas desde archivos. Cuando la detección automática tiene dificultades —sprites que se tocan, un resplandor que abarca el lienzo, un personaje con partes separadas—, la pestaña Manual y preajustes permite arrastrar cada línea de la cuadrícula a la separación correcta: seis arrastres para una hoja de dieciséis fotogramas.
Si tu hoja tiene fondo uniforme en lugar de transparencia, pásala por eliminación de fondos primero. Hacerlo una vez sobre toda la hoja es una operación coherente; hacerlo después en dieciséis fotogramas ofrece dieciséis oportunidades de divergencia.
PNG individuales frente a una hoja
| Una hoja | PNG individuales | |
|---|---|---|
| Esfuerzo de configuración | Bajo si la cuadrícula es real, alto si no | Siempre bajo |
| Editar un fotograma | Vuelve a exportar y dividir la hoja | Sustituye un archivo |
| Ordenación de fotogramas | Orden de clics en el diálogo | Orden por nombre de archivo: añade ceros a la izquierda |
| Llamadas de dibujo | Se agrupa bien por lotes: una textura | Más texturas salvo que se agrupen en atlas |
| Gestiona distribuciones irregulares | No | Sí: cada archivo es su propio fotograma |
En la mayoría de los proyectos 2D, la diferencia de llamadas de dibujo no es el cuello de botella y gana la comodidad de los archivos individuales. Si llegas a un punto donde los cambios de textura importan, la solución es empaquetar los fotogramas terminados en un atlas como paso de compilación, no crearlos desde el principio como una mega hoja recortada a mano.
Preguntas frecuentes
Mi pixel art se ve borroso en Godot 4. ¿Qué olvidé?
El filtro de textura. Configura rendering/textures/canvas_textures/default_texture_filter en Nearest en Project Settings y revisa Texture Filter del nodo en Inherit, no Linear explícito. Si sigue suave, el viewport puede escalar de forma fraccionaria: revisa stretch y scale en Display → Window.
¿Debo usar AnimatedSprite2D o AnimationPlayer controlando Sprite2D?
AnimatedSprite2D para animaciones sencillas fotograma a fotograma: está diseñado para ello y requiere menos configuración. AnimationPlayer cuando necesites animar otras cosas sincronizadas con los fotogramas: posiciones de cajas de impacto, activación de sonidos, emisión de partículas o visibilidad de nodos. Muchos proyectos terminan usando ambos.
Una pequeña parte del siguiente fotograma aparece en el borde de mi sprite.
Filtración de textura por muestreo fuera de la región. Cambia el filtro a Nearest, activa filter_clip si usas AtlasTexture, y confirma división exacta de celda y textura. Uno o dos píxeles transparentes entre sprites eliminan el problema permanentemente.
¿Puedo cambiar los fotogramas desde el código en lugar de usar el panel de animación?
Sí. En un Sprite2D, asigna al frame propiedad directamente. En un AnimatedSprite2D, llama a play("walk") o configura frame mientras está en pausa. Controlar fotogramas manualmente es habitual en barras de salud basadas en estados de sprites.
Corta primero la hoja en fotogramas
Todos los importadores de Godot suponen una cuadrícula uniforme. Si la tuya no lo es, divídela en el navegador y carga los resultados con Add Frames from File(s). Corte mágico lee el canal alfa; Manual y preajustes te permite colocar tú las líneas. Nada sale de tu equipo.
Abrir Divisor de hojas de sprites