¿Qué hace que escalar pixel art sea diferente a otras imágenes?


13

Recientemente estuve entrenando a un desarrollador que es nuevo en la creación de juegos de pixel art, y me di cuenta de que hay una "sabiduría convencional" en torno al escalado de pixel art que no es obvio para un recién llegado, y que podría no estar bien documentado. Entonces, aquí hay un intento de arreglar eso ...


  1. He oído que solo debería escalar pixel art en un 200%, 300%, etc., no en tamaños intermedios como 120%

    • ¿Porqué es eso? ¿No debería escalar "simplemente funciona" como lo hace con otras imágenes?
    • ¿Qué sucede si realmente necesito hacer que mi personaje sea solo una fracción más grande o más pequeño para obtener la jugabilidad o apariencia correcta? ¿Cómo puedo solucionar esto?
  2. Me dicen que es "malo" usar pixel art a diferentes escalas en un juego, ¿por qué?

    • Por ejemplo, si amplié mi personaje para que cada sprite texel tenga píxeles de pantalla de 4x4, mientras que mi arte de fondo se amplía para que cada sprite texel tenga píxeles de pantalla de 6x6. ¿No es un píxel un píxel al final del día?

Respuestas:


31

Escalado por números enteros

Escalar en 2x, 3x ... n x es simple: cada píxel se convierte en un n x n cuadrado de píxeles, y el aspecto del sprite original se conserva perfectamente (incluidas todas las líneas afiladas, esquinas y zigzags de escalera) .

Sin embargo, nos encontramos con problemas al escalar pixel art en cantidades fraccionarias (por ejemplo, 1.5x) porque los píxeles son discretos por naturaleza. Realmente no podemos tener "medio píxel".

Para otros tipos de arte, a menudo podemos evitar mezclar píxeles de origen adyacentes donde el píxel debe estar "a medio color", y en altas resoluciones los artefactos generalmente no se notan. Pero en el arte de píxeles grandes y gruesos esto destruye rápidamente el aspecto nítido.

Por lo tanto, usualmente usaremos el filtro "Vecino más cercano" (también llamado filtrado de puntos) para que cada píxel después de escalar tome su color exactamente de un píxel en el sprite original.

Esto tiene otra arruga: dado que el número de píxeles después de escalar no es un múltiplo entero del número de píxeles de origen, algunos píxeles de origen se duplicarán más que otros (si se amplía) o se omitirán por completo (si se reduce).

Desafortunadamente, el software de edición de imágenes y el filtrado de texturas de GPU no son muy selectivos sobre dónde duplicar u omitir píxeles, solo siguen reglas básicas de redondeo, lo que puede hacer que el resultado se vea distorsionado y desigual.

Mira el ejemplo a continuación. En el medio, hemos ampliado el sprite de hongos en un 150% usando el filtrado de Vecino más cercano, y el resultado se ve inestable y desordenado. Un ojo es más grande que el otro, algunos contornos son gruesos, mientras que otros permanecen delgados, y los puntos redondeados se ven bloqueados ... no parece algo que un artista de píxeles dibuje a propósito.

Ejemplo de artefactos del uso de una escala no entera

Si realmente necesitamos que el sprite sea un 150% más grande (por ejemplo, para que el juego se sienta bien o para admitir resoluciones de pantalla alternativas ), entonces podemos volver a pintar las áreas problemáticas como el ejemplo de la derecha. Ahora se parece más a algo que un artista haría, y estilísticamente consistente con otro arte en el juego. (Aunque no soy un gran artista de píxeles, así que aún podría ser mejor 😉)

Desafortunadamente, no hay muchos atajos geniales para esto. Para escalas de números enteros, puede usar algoritmos de escalado de pixel art especialmente diseñados (una amplia variedad está disponible en herramientas como ImageResizer ) para obtener un punto de partida menos bloqueante que el vecino más cercano, pero aún requiere la atención de un artista y algo de grasa en el codo. Obtenga un resultado de alta calidad.


Aparte: las escalas fraccionarias también pueden aparecer en tiempo de ejecución .

Imagina que tu juego tiene una resolución NES (256 x 240) y quieres mostrarlo en una pantalla de 1080p.

1080 ÷ 240 = 4.5, por lo que algunos de los píxeles de origen o "texels" en su escena se expanden hasta 5 píxeles de pantalla, mientras que otros son solo 4, creando distorsiones como vimos anteriormente. En movimiento, tienden a hacer que los sprites se ondulen y brillen distraídamente, sin una causa obvia:

Ejemplo de un hongo en escala fraccional en movimiento, que muestra artefactos ondulantes

A menudo verá que la gente sugiere redondear las posiciones de la cámara o del objeto a coordenadas de píxeles enteros, pero eso realmente no soluciona el problema. El redondeo ya ocurre como parte del filtrado vecino más cercano: el problema es que algunos píxeles de la pantalla se redondean al mismo texel de origen (duplicándolo), mientras que otros no, lo que lleva a un resultado desigual.

La solución es usar una combinación de relleno / recorte o conjuntos de activos alternativos para volver a una relación de números enteros consistente de píxeles de pantalla a texels para cada resolución de pantalla que desee admitir; vea algunos ejemplos de Unity aquí . Este es otro caso en el que no hay una solución universal fácil, y tendrás que aplicar un poco de juicio y destreza para que tu juego se vea bien.

Mantener la escala de píxeles coherente

Esta "regla" se reduce a la coherencia estilística.

Cuando usa pixel art a diferentes escalas, puede parecer que los activos han sido combinados de diferentes juegos, en lugar de tener una estética unificada.

Ejemplo de escalar activos de manera diferente en un solo juego

En el ejemplo de la izquierda, reuní algunos sprites de Super Mario World, todos a la misma escala, y se ve muy bien.

En el medio, amplié Mario y el nivel al doble de la resolución del fondo, y el lunar para triplicar la resolución. Como utilicé escalas de números enteros, no obtenemos distorsiones ni ondas en ningún lado, pero aún se ve un poco divertido.

Por un lado, el fondo es mucho más detallado que el primer plano. Es capaz de representar curvas suaves y reflejos nítidos, lo que hace que el primer plano se vea particularmente "bloqueado" en contraste, en lugar de tener una sensación consistente de pixel art. Y los contornos del topo son notablemente más gruesos y más irregulares que el resto del primer plano.

A la derecha lo muestro nuevamente, al volver a pintar los activos en una escala de píxeles común, podemos traer una sensación más unificada e intencional con los nuevos tamaños de activos.

¿Pero tengo que hacerlo?

No en realidad no. Es tu juego, y puedes hacerlo como quieras.

Especialmente al crear prototipos y encontrar la diversión en tu juego, poder probar cosas rápido es más importante que hacer que se vea perfecto. Probablemente obtendrás el tamaño de cosas importantes como que tu personaje se equivoca muchas veces antes de encontrar lo mejor para tu juego, y sería una lástima tener que volver a pintar cada cuadro de animación cada vez que quieras probar algo diferente. Entonces, desde el principio, no te preocupes.

Para el juego lanzado, es una decisión decisiva. Ninguna policía de pixel art te prohibirá distribuir tu juego si no sigues las reglas, y muchos jugadores no podrían describir la diferencia. Pero la atención a estos detalles de píxeles es algo que muchos jugadores (y revisores) consideran una señal importante de calidad, así que conozca a su audiencia y decida qué es lo mejor para la experiencia que desea ofrecerles.

Una última consideración es que muchos juegos de pixel art tienen un juego de muy alta precisión. Piense en saltar entre plataformas de 1 bloque en los primeros juegos de Mega Man. En estas situaciones, una cuadrícula de píxeles consistente (y una cuadrícula de mosaicos) puede ser una señal importante para que el jugador juzgue y ejecute sus movimientos. La introducción de irregularidades en el arte podría hacer que el juego sea más difícil de aprender, lo que puede ser frustrante.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.