El antialiasing en el pixel art

Qué es

Los píxeles son cuadrados, así que cualquier línea que no sea perfectamente recta o con un ángulo limpio se convierte en una escalera. En una curva suave, como el borde de un escudo o la parte de arriba de una cabeza, esos escalones pueden verse dentados con un zoom de 1×.

El antialiasing manual (a menudo abreviado AA) suaviza un escalón colocando uno o dos píxeles de un color intermedio en la esquina donde salta la línea. El ojo los mezcla, y la curva se lee más suave de lo que realmente son los píxeles. El color suele tomarse de la rampa existente, en algún punto entre la línea y lo que tiene al lado.

Es un efecto hecho a mano: unos pocos píxeles elegidos, no un filtro sobre todo el sprite.

Cuándo ayuda

• Curvas largas y suaves. Un círculo o una pendiente que avanza dos o tres píxeles cada vez es lo que más gana.
• Sprites grandes. A partir de 64 px hay sitio para píxeles intermedios sin perder detalle.
• Líneas interiores. Las líneas entre partes de un sprite están sobre colores conocidos, así que el tono intermedio es fácil de elegir y siempre correcto.

Cuándo no usarlo

• Sprites pequeños. A 16 o 24 px cada píxel lleva forma. Ahí un píxel intermedio suele leerse como una mancha o un detalle suelto.
• El borde exterior, sobre fondos desconocidos. Una silueta con antialiasing está mezclada para un solo color de fondo. Pon el sprite sobre otro y los píxeles suaves se ven como un halo tenue.
• Paletas muy limitadas. Con cuatro u ocho colores puede que no haya ningún tono entre otros dos. Entonces los escalones se quedan duros, y eso forma parte del estilo.
• Estilos marcados y toscos. Algunos juegos quieren que se vea cada escalón. Es una elección, no un error.

Errores comunes

• Demasiado. Aplicar antialiasing a cada escalón hace que todo el sprite parezca borroso, como si se hubiera ampliado con el filtrado activado.
• Longitud equivocada. La serie de píxeles intermedios debe corresponder al escalón que suaviza. Un solo píxel al final de un escalón largo hace poco; una serie larga junto a un escalón corto abomba la línea.
• Bandas. Alinear los píxeles intermedios en una segunda línea paralela hace que el borde parezca doble.
• Suavizado del motor. El filtrado bilineal deshace el antialiasing hecho a mano. Pon el filtro de textura en nearest (vecino más cercano).

Cómo lo hace Pixor

Pixor dibuja líneas de un píxel de ancho sin esquinas en L, y tiene un ajuste de antialiasing con tres niveles. 0 deja duras todas las líneas. 1 suaviza solo la silueta. 2 suaviza las esquinas de cada línea, no solo el borde exterior. Prueba 0 para sprites pequeños y fondos recargados, y 1 o 2 para sprites más grandes donde las curvas tienen sitio. El ajuste forma parte del aspecto en el grafo de Estilo, y el manual de ajustes lo lista con las demás opciones de línea.

Relacionado

• Contornos: las líneas que suaviza el antialiasing
• Selout: contornos de color que ya suavizan un borde
• Tamaños de sprite: cuánto sitio tiene un sprite para píxeles intermedios