Generador de Normal Maps para Pixel Art
Este generador de normal maps para pixel art convierte siluetas y detalles pintados opcionales en normales tangenciales. Conserva la cuadrícula, comprueba la iluminación en movimiento y exporta un PNG transparente sin enviar el dibujo a un servidor.
Cómo Empezar
Prueba el farol incluido: el hueco transparente del asa, el marco metálico y los reflejos asimétricos permiten reconocer la dirección de la luz. Elige o arrastra tu propio PNG o WebP. Empieza con Detalle del Sprite a cero y un radio de bisel pequeño. Mueve la luz en ambos ejes, añade detalle cuando aporte algo, selecciona la convención Y del motor y descarga el normal PNG. Restablecer recupera los controles y la luz inicial conservando la imagen elegida.
Qué Es un Normal Map para Pixel Art
Un mapa de normales para sprites almacena una dirección de iluminación por píxel. Rojo y verde codifican X e Y tangenciales; azul representa Z hacia fuera de la superficie. Una zona plana se aproxima a RGB 128, 128, 255. El sprite sigue siendo una imagen plana: cambia su respuesta a las luces, pero no su contorno, colisión, geometría de sombras ni profundidad real. El relieve generado es una interpretación artística editable, no una reconstrucción tridimensional del personaje.
Por Qué Hay que Conservar los Píxeles
Los recursos pequeños dependen de cada píxel. La interpolación suave de un personaje 16×16 introduce colores y pendientes que el artista no dibujó. Conservar Píxeles usa el vecino más cercano, y los aumentos de 1× a 16× afectan únicamente a la presentación. El proceso y la exportación mantienen las dimensiones originales. Ajustar encaja imágenes grandes en la tarjeta; un aumento concreto permite revisar texeles desplazándose dentro de ella. No se aplica reducción de ruido automáticamente al sprite.
Bisel de Silueta y Sombreado Pintado
La contribución de silueta calcula una distancia aproximada hacia el interior desde el borde alfa, incluidos los huecos transparentes y los límites de la imagen. El radio define la extensión del perfil en píxeles originales. Lineal crea una rampa, Redondeada curva el borde, Suave produce un perfil acolchado y Marcada destaca una transición estrecha. Radio cero elimina el bisel. Detalle del Sprite añade variación de luminancia por separado, permitiendo introducir relieves interiores sin cambiar el borde.
El Color Pintado No Es Profundidad Física
Una camisa clara puede tener un pigmento brillante; un cinturón oscuro puede estar pintado sobre un torso plano. Detalle del Sprite interpreta esas diferencias como altura y puede crear bultos indeseados. Compara la silueta sola y la versión detallada con la misma luz. Si un reflejo pintado se convierte en una cresta falsa, reduce el detalle o prepara una imagen de altura dedicada con el conversor general. Intensidad amplifica las pendientes; Nivel refuerza la componente Z que mira hacia fuera.
Píxeles Transparentes y Canal Alfa
Los valores RGB completamente transparentes se excluyen del detalle de luminancia. Se extiende el detalle visible cercano para muestrear el borde y evitar que píxeles negros ocultos creen un reborde falso. El alfa parcial se conserva y aporta un perfil fraccional determinista. La vista iluminada siempre respeta el alfa original. Conservar Transparencia guarda esa máscara en la descarga; Fondo Normal Plano sustituye expresamente el exterior por vectores neutros opacos. El sprite de color puede mantener su transparencia de forma independiente.
Iluminación Dinámica para Sprites
La vista iluminada usa los colores originales y las direcciones generadas con una luz ilustrativa móvil. Arrastra o toca la vista, o utiliza los deslizadores horizontal y vertical con teclado. Un rasgo asimétrico facilita detectar canales invertidos. Sirve para prototipar antorchas, lámparas o luces que acompañan a un personaje 2D. La vista no está calibrada físicamente y no calcula oclusión, rugosidad del material ni todo el sistema de iluminación del motor.
Dirección Y: OpenGL y DirectX
La convención Y cambia el signo de la componente verde. G Y+ de estilo OpenGL y G Y− de estilo DirectX describen la misma superficie cuando se usa el decodificador correspondiente. La vista compensa esta elección, de modo que el formato de exportación no debería invertir aquí la luz. Invertir X actúa por separado en rojo. El nombre del motor es una orientación inicial: comprueba el renderizador y la importación con un borde conocido y una luz que se mueva verticalmente.
Godot, Unity 2D y Motores Propios
En Godot, consulta la documentación vigente de luces 2D para asignar una textura normal mediante CanvasTexture y activar las luces adecuadas. En Unity, el flujo depende del renderizador 2D, material del sprite y versión del paquete; revisa las texturas secundarias y la iluminación normal en sus documentos actuales. Un motor web propio debe leer vectores sin conversión sRGB y mantener la orientación UV. Empieza con filtrado cercano para pixel art y comprueba la escala de cámara y la importación final.
Problemas Habituales y Soluciones
Un sprite demasiado hinchado suele necesitar menos radio o contribución de silueta. Un interior ruidoso necesita menos detalle pintado, no más intensidad. Los bordes oscuros tras importar pueden proceder del alfa, relleno del atlas, filtrado o premultiplicación. Si solo falla la luz vertical, verifica verde antes de modificar el dibujo. Sobel y Scharr producen gradientes locales distintos; compáralos al tamaño de presentación definitivo. Conserva un PNG sin pérdida y evita JPEG para los vectores normales.
A Quién Ayuda Esta Herramienta
Desarrolladores independientes, artistas de píxeles, artistas técnicos y autores de sprites o conjuntos de tiles pueden probar iluminación dinámica para personajes, objetos e ilustraciones de interfaz. Es útil cuando no existe una malla de alta resolución para hornear. En esta versión, una hoja de sprites se trata como una sola imagen y no se aíslan los fotogramas automáticamente. Exporta fotogramas separados si el vecindario del bisel alcanza otros cuadros y conserva la correspondencia con el atlas de color.
Entrega de Recursos Reproducible
Guarda los ajustes JSON junto al sprite original y el PNG normal sin pérdida. El archivo contiene parámetros y nunca píxeles; cargarlo no sustituye el dibujo. Incluye convención Y y dimensiones en el nombre y revisa el resultado en el juego con varias luces. El navegador acepta PNG, WebP, JPEG y BMP dentro de los límites del sitio: 50 MB, 8192 píxeles por lado y 16,8 megapíxeles. Procesa imágenes autorizadas y conserva el original al experimentar.
Preguntas frecuentes
¿Puedo generar normales solo con la silueta?
Sí. Pon Detalle del Sprite a cero, mantén la contribución de silueta por encima de cero y elige un radio distinto de cero. Radio y detalle a cero producen un normal neutro.
¿Un sprite 32×32 seguirá midiendo 32×32?
Sí. El zoom no remuestrea la exportación. El PNG normal conserva el ancho y alto originales.
¿Por qué un reflejo pintado se convierte en un bulto?
Detalle del Sprite usa el brillo como pista de altura. Redúcelo o elimínalo si el color representa pintura o luz dibujada, no relieve.
¿Se conservan los huecos transparentes?
Conservar Transparencia guarda el alfa original, incluidos huecos y valores parciales. Fondo Normal Plano hace opaco el resultado y coloca normales neutros en el exterior.