Arreglar Sprite Sheets Borrosos
Si tu sprite sheet se ve nítido como archivo PNG pero borroso dentro del juego, normalmente el problema no es la exportación. Suele ser texture filtering, mipmaps, compresión, escala fraccionaria o muestreo de frames. Esta guía te da una lista de comprobación para Unity, Godot, Phaser y CSS antes de volver a empaquetar el mismo arte.
Diagnóstico en 30 Segundos
Abre el PNG exportado directamente en el navegador o en un visor de imágenes al 100%. Si ahí se ve nítido, el sheet está bien y el blur aparece después de importarlo. Si ya se ve borroso en el archivo, los frames fuente fueron escalados, suavizados o exportados al tamaño incorrecto antes del empaquetado. Esa diferencia ahorra tiempo: el blur de runtime se corrige en el motor; el blur de origen requiere reexportar los frames.
PNG nítido, borroso en el motor
Revisa filter mode, mipmaps, compresión, escala de cámara y pixel snapping. No vuelvas a empaquetar hasta verificar esos ajustes.
PNG borroso antes de importar
Reexporta el arte fuente a resolución nativa. Evita redimensionar pixel art con interpolación bilinear antes de subirlo a una herramienta de sprite sheets.
El Blur Suele Aparecer Después de Exportar
Cinco Causas Comunes
Los sprites borrosos casi siempre vienen de uno de estos cinco puntos. Revísalos en este orden porque los dos primeros resuelven la mayoría de casos de pixel art sin cambiar la imagen del sprite sheet.
Filtrado linear o bilinear
El motor mezcla píxeles vecinos al escalar o mover el sprite. Para pixel art, usa nearest, point o pixel-art filtering.
Mipmaps en arte 2D pequeño
Los mipmaps crean versiones reducidas de la textura. Sirven en 3D, pero pueden suavizar sprites pixel art y atlas de UI.
Compresión de textura
La compresión con pérdida puede manchar bordes duros y añadir artefactos de color. Desactívala para pixel art o UI nítida.
Escala o cámara fraccionaria
Renderizar un sprite de 16x16 a 23.5 píxeles o mover la cámara por subpíxeles fuerza muestreo entre texels.
Padding y bleeding entre frames
Si los frames están demasiado cerca, el renderer puede tomar píxeles del frame vecino. Añade padding o extrusion si tu motor filtra atlas.
Ajustes del Motor que Debes Revisar Primero
Unity: Usa Point Filtering y Desactiva Compression
En Unity, selecciona la textura importada del sprite sheet y revisa el Inspector. Para pixel art, pon Filter Mode en Point, Compression en None y considera desactivar Generate Mip Maps para sprites 2D. Si aún se ve suave, revisa la escala de cámara y canvas. Pixel Perfect Camera o escala entera pueden evitar muestreo subpixel cuando la cámara se mueve.
Importación de textura
Filter Mode: Point. Compression: None. Max Size suficientemente alto para el sheet original. Mip Maps desactivados para pixel art 2D típico.
Render de escena
Usa escala entera o Pixel Perfect Camera si los sprites se suavizan o vibran al moverse incluso con la importación correcta.
Godot: Usa Texture Filtering en Nearest
En Godot 4, el pixel art borroso suele venir del filtro de textura por defecto del canvas o de ajustes de importación del proyecto. Cambia texture filter a Nearest en el sprite, canvas item o valor por defecto del proyecto. Si sigue inestable, verifica escala y pixel snapping.
Texture filter
Pon CanvasItem texture filtering en Nearest, por nodo o en project settings, especialmente para AnimatedSprite2D y Sprite2D de pixel art.
Importación y escala
Evita escala no entera en sprites pixel art. Si el sheet es uniforme, confirma también que hframes y vframes coinciden con la cuadrícula real.
Phaser y CSS: Activa Renderizado Pixelado
En Phaser 3, usa pixelArt: true en la configuración del juego para proyectos de pixel art. Eso cambia el muestreo de textura para que los sprites escalados sigan nítidos. Si aún ves suavidad, revisa camera zoom, roundPixels y si el canvas está siendo escalado por CSS. Para CSS sprites, usa image-rendering: pixelated y mantén background-size alineado con las dimensiones reales del sheet.
Phaser 3
Usa pixelArt: true, evita zoom fraccionario de cámara y considera roundPixels para sprites en movimiento que vibran en subpíxeles.
CSS sprites
Usa image-rendering: pixelated en el elemento o imagen. Mantén width, height y background-position como enteros exactos.
Cuándo Reempaquetar Sí Ayuda
Si filtering y scaling están correctos pero aún ves artefactos en los bordes, entonces reempaquetar puede ayudar. Añade padding entre frames para que el renderer tenga píxeles seguros alrededor de cada rectángulo. Mantén tamaños de frame consistentes si el motor corta por filas y columnas. Si tu motor no entiende datos de trim, usa frames uniformes en lugar de frames recortados.
Añade padding para atlas
Dos a cuatro píxeles de padding pueden evitar que frames vecinos sangren durante filtrado o movimiento de cámara.
Haz exacta la matemática de cuadrícula
Si el sheet se corta por frameWidth y frameHeight, cada celda debe coincidir exactamente con ese tamaño.
FAQ sobre Sprite Sheets Borrosos
Reempaqueta Solo Después de Corregir Runtime
Usa Sprite Sheet Maker para exportar PNG limpios y metadatos, luego aplica los ajustes correctos de filtering, escala y padding en tu motor para una reproducción nítida.