Cómo usar la herramienta Generador de contornos
- Suelta un sprite o una sprite sheet.
- Elige un color. 'Usar el color más oscuro' toma el color más oscuro que ya tiene el sprite.
- Define el grosor y elige exterior, interior o ambos.
- Cambia las esquinas: desactivadas dan el contorno clásico de pixel art con las diagonales cortadas; activadas las rellenan.
- Para sprite sheets, deja activado 'contornear cada fotograma', revisa la cuadrícula y descarga.
Qué obtienes
- PNG con el contorno y el lienzo ampliado para que nada se corte
- Sprite sheet con todos los fotogramas contorneados y agrandados en la misma medida
Consejos de quienes la usan para hacer juegos
- La mayoría del pixel art hecho a mano usa contornos de 1px sin esquinas diagonales. Activa las esquinas para contornos de 2px o más o para íconos de UI gruesos.
- Un contorno oscuro con tinte (morado profundo o azul marino) suele verse mejor que el negro puro sobre fondos variados.
- Un contorno interior en un tono más oscuro de los propios colores del sprite es una forma rápida de darle definición sin cambiar su tamaño.
- Al contornear una sprite sheet, cada fotograma crece según el grosor por cada lado. Actualiza el tamaño del fotograma en tu motor para que coincida.
Casos de uso
- Hacer que los sprites se lean bien sobre fondos cargados
- Agregar contornos de selección o de hover a objetos y unidades
- Contornear sprites generados con IA con un estilo uniforme
- Crear íconos de UI con contorno
Preguntas frecuentes
¿Qué hace la opción de esquinas?
Desactivada, usa solo los vecinos de arriba, abajo, izquierda y derecha, lo que deja vacías las esquinas diagonales: el aspecto típico del pixel art hecho a mano. Activada, también usa los vecinos diagonales y rellena esas esquinas para un contorno más redondo y pesado.
¿Por qué mi imagen se hizo más grande?
Un contorno exterior necesita espacio fuera del sprite, así que el lienzo crece según el grosor por cada lado. Los contornos interiores mantienen el tamaño original.
¿El contorno se va a filtrar entre fotogramas en una sprite sheet?
No con 'contornear cada fotograma' activado. Cada fotograma se recorta, se contornea y se vuelve a colocar con espacio extra, así que los fotogramas nunca se tocan.
¿Puedo hacer un resaltado de 'seleccionado'?
Sí. Usa un color brillante como amarillo o blanco con un contorno exterior y guárdalo como una imagen aparte para dibujarla debajo o encima del sprite en tiempo de ejecución.
¿Maneja píxeles semitransparentes?
Cualquier píxel con alfa mayor que cero cuenta como parte del sprite. Si el contorno sale irregular, primero limpia los bordes suaves con el Enfocador de pixel art.