¿Cómo puedo rotar sprites de pixel art sin que se arruine la estética?

11

Ahora estoy frente a una gran pregunta de "Diseño de juegos". Estoy haciendo un juego de pixel art-ish y el uso de la interpolación bilineal podría resolver muchos problemas de animación. Por otro lado, ya no es un "juego de píxeles".

Si uso la Interpolación Bilineal, la animación funciona pero parece "híbrida" y el estilo artístico se pierde. O estropeo mis animaciones o arruino el estilo artístico. Parece que no puedo tener ambas.

¿Hay alguna otra forma de resolver esto?

2d rotation pixel-art

— OC_RaizW
fuente

44

Ese es tu juego, tú decides :)

— Vaillancourt

¿Es la interpolación "mono-lineal" (generalmente llamada "interpolación lineal") una opción?

— Philipp

1

Reformulé la pregunta para que pareciera menos basada en la opinión.

— Philipp

¿esperar lo? no necesito aprobar esto? : D

— OC_RaizW

1

También existe la posibilidad de rotación por cizallamiento , que mueve los píxeles de entrada sin duplicarlos / elidirlos / mezclarlos.

— DMGregory

14

La rotación automática de pixel art por otros ángulos que 90 ° generalmente sale mal. Si desea mantener la estética del pixel art, por lo general no podrá redibujar su arte en cada ángulo.

Si usa un aspecto falso-retro donde sus sprites están en una resolución mucho más alta de lo que parecen, a veces puede escalarlos por un factor entero sin interpolación en su editor gráfico y luego rotarlos en interpolación lineal en tiempo de ejecución. Para evitar que sus sprites se desdibujen mientras está en la orientación original, asegúrese siempre de que la posición del dibujo se redondea al número entero más cercano (algunos motores gráficos / marcos / bibliotecas le permiten dibujar sprites en coordenadas de punto flotante, lo que a menudo resulta borroso). Pero eso generalmente sigue siendo un sustituto perezoso que no alcanza la calidad que puede alcanzar con el trabajo manual.

Aquí hay un ejemplo de un sprite en el tamaño original, ampliado por el factor 3 sin interpolación y luego rotado 30 ° con interpolación lineal:

— Philipp
fuente

1

¿Esencialmente cada "píxel" se convierte en 10x10 píxeles o algo así?

— John

2

@John sí, a eso me refiero con faux-retro. 10x10 puede ser un poco grande (dependiendo de la resolución de la plataforma de hardware a la que se dirige, por supuesto), pero esa es básicamente la idea. Tienes un sprite que se parece a una pieza de arte de 16x32 píxeles, pero en realidad es una textura de 48x96 con cada píxel "visible" que en realidad es de 3x3 píxeles del mismo color.

— Philipp

thaaat era casi lo mismo que estaba pensando ...

— OC_RaizW

el mismo enfoque fue en Starbound, cuando los píxeles "visibles" eran en realidad cuadrados de 3x3 píxeles reales

— trollingchar

15

Echa un vistazo a RotSprite .

RotSprite es un algoritmo de escala y rotación para sprites desarrollado por Xenowhirl. Produce muchos menos artefactos que los algoritmos de rotación del vecino más cercano y, al igual que EPX, no introduce nuevos colores en la imagen (a diferencia de la mayoría de los sistemas de interpolación).

Ejemplo de RotSprite

El algoritmo primero escala la imagen a 8 veces su tamaño original con un algoritmo Scale2 × modificado que trata los píxeles similares (en lugar de idénticos) como coincidencias. Luego calcula qué desplazamiento de rotación usar al favorecer los puntos muestreados que no son píxeles de límite. A continuación, la imagen girada se crea con un algoritmo de escalado y rotación del vecino más cercano que simultáneamente reduce la imagen grande a su tamaño original y gira la imagen. Finalmente, los detalles de un solo píxel pasados por alto se restauran si el píxel correspondiente en la imagen de origen es diferente y el píxel de destino tiene tres vecinos idénticos.

Puede implementar este algoritmo usted mismo como parte del código de dibujo de su juego, o usarlo para crear activos rotados de antemano. La herramienta de pixel art Aseprite ha integrado RotSprite como parte de su editor de sprites.

GIF de Rotsprite en acción

Además, eche un vistazo a este hilo de foros de Unity sobre cómo usar RotSprite en Unity, así como información más general sobre RotSprite.

— Rudey
fuente

Dios. Descargué eso para Unity y lo probé, y su resultado es mucho peor que el habitual renderizado de píxeles de

— Unity

@OC_RaizW Eso no debería suceder. Es posible que desee ponerse en contacto con el desarrollador del activo de Unity.

— Rudey

-4

arriba a la izquierda de la página hay una opción: selección automática: grupo y capa. elija la opción de capa y luego gire. así es como nadie te lo dice.

— Mahdi
fuente

44

¿De qué editor de imágenes estás hablando? La pregunta no menciona ninguna herramienta específica. Entonces, si conoce un editor de imágenes en el que girar un sprite de baja resolución con una pérdida de calidad mínima es tan fácil, díganos a cuál se aplican estas instrucciones.

— Philipp