Cómo usar la herramienta Generador de sombras
- Suelta un sprite.
- Elige sombra paralela (copia desplazada detrás del sprite) o sombra proyectada (silueta aplanada sobre el suelo).
- Ajusta el desplazamiento, o la altura y la inclinación, y luego el color y la opacidad.
- Revísala sobre los fondos de vista previa verde, oscuro y claro.
- Descarga el PNG.
Qué obtienes
- PNG con la sombra integrada y un lienzo a su medida
- Sombra semitransparente con un solo valor de alfa (sin acumulación)
Consejos de quienes la usan para hacer juegos
- En una sombra proyectada, la dirección del sol es la inclinación: positiva se inclina a la derecha y negativa a la izquierda. Mantenla igual para todos los sprites de una escena.
- Una sombra con color (morado oscuro o azul) suele verse mejor que el negro sobre pasto o arena.
- Si tu motor dibuja las sombras por su cuenta, expórtalas por separado: pon la opacidad al 100% en una copia y úsala como máscara.
- La expansión agranda la sombra paralela en píxeles enteros, lo que se percibe como suavidad sin agregar desenfoque.
Casos de uso
- Darles una sombra paralela pixelada a íconos y botones de UI
- Asentar personajes y props en escenas top-down y de vista lateral
- Hacer que el texto de un título resalte sobre un fondo cargado
- Imágenes fijas para páginas de tienda y tráilers
Preguntas frecuentes
¿Cuál es la diferencia entre sombra paralela y sombra proyectada?
Una sombra paralela es la silueta del sprite desplazada, como si flotara sobre el fondo. Una sombra proyectada se voltea, se aplana y se inclina debajo de los pies del sprite, como si la luz le pegara de costado.
¿Las sombras tienen desenfoque?
No. Los bordes se mantienen duros. La opción de expansión agranda la silueta en píxeles enteros en lugar de desenfocarla.
¿Por qué la sombra es semitransparente?
Para que se vea el suelo a través. Todos los píxeles de la sombra tienen el mismo alfa, así que las partes que se superponen no se oscurecen más.
¿Dónde empieza la sombra proyectada?
En la fila opaca más baja del sprite, que normalmente son los pies. Usa el ajuste de separación si el sprite tiene espacio vacío debajo.
¿Se sube mi imagen?
No. Todo corre en tu navegador.