Escalando mi plataforma de pixel art de 720p a 1080p

Estoy desarrollando un juego de plataformas 2D de pixel art para PC y teléfono inteligente, pero estoy atrapado en un problema técnico.

Elegí tener una resolución de mosaico de 32x32 y una resolución de sprite de 64x64 caracteres. Los niveles se dividen en secciones que llamo "pantallas", y en cada pantalla tengo 40x22.5 mosaicos, aproximados a 40x23, por lo que la resolución mínima es 1280x720.

En el juego, tengo una mecánica de doble salto, así que necesito tener un buen rango de visión vertical en cada "pantalla".

Aquí viene el problema: 1280x720 no es una resolución muy alta. En los monitores HD, la ventana no sería grande, y si amplío la resolución en 2x, será en 2560x1440 y la ventana sería mucho más grande que un monitor HD real. Si intento tamaños entre 1280x720 y 2560x1440, los gráficos comienzan a tartamudear o se deforman.

¿Cómo puedo resolver este problema? ¿Hay alguna solución que no requiera que vuelva a dibujar todos los mosaicos y los sprites en formato 16x16?

Para cualquiera que se pregunte por qué esto es un problema para el pixel art, aquí hay un ejemplo rápido con una escena de Super Mario World:

Si solo escalamos un juego de pixel art de 720 a 1080 en tiempo de ejecución (como lo haría una cámara de juego típica), obtenemos artefactos debido a la relación no entera de píxeles de pantalla por texel fuente. Echa un vistazo a la inconsistencia en los números del ejemplo a escala de la derecha, y cómo se ven la hoja y la oreja de Mario.

Es jugable, pero ha perdido esa encantadora nitidez del pixel art. Y en movimiento, estos artefactos pueden arrastrarse a través de un sprite , haciendo que se vea brillante.

El uso de un modo de filtrado que combina píxeles adyacentes evitará las ondas, pero difuminará y desenfocará el diseño de píxeles, por lo que tampoco es muy deseable.

Desafortunadamente, la relación de 1.5x entre 720p y 1080p es el peor de los casos que podemos encontrar.

Como notará, la escala 1x es demasiado pequeña y 2x es demasiado grande, por un margen igual de ancho en ambos sentidos, y no hay una relación de escala numérica completa entre nosotros para que podamos elegir.

Sus opciones se reducen a:

• Tolere la escala 1x , mostrando su juego en una ventana 1/3 más pequeña que la pantalla, agregando bordes decorativos si necesita llenar el espacio.

  • Es posible que pueda extender el recorte, mostrando más de su escena a la vez en pantallas de alta resolución. Esto reduce el relleno / letterboxing necesario, pero tendrá que evaluar si afecta cómo juega el juego

    (por ejemplo, ¿les da a los jugadores en algunos dispositivos una ventaja injusta o les permite detectar secretos que no deberían ver tan fácilmente?)

• Amplíe 2x y recorte su escena , para que el jugador vea menos de la escena a la vez (aproximadamente 3/4 por lo que pudieron ver antes).

  Esto también puede afectar la forma en que se juega el juego, por ejemplo. al dificultar que el jugador vea los lugares a los que necesita saltar dos veces.

  • Es posible que pueda compensar esto con la lógica de la cámara, haciendo que la vista panorámica siga o anticipe al reproductor, por lo que el contenido importante todavía es visible en una pantalla en el recorte más pequeño, pero no hay una mejor cámara universal para usar.

    Si decide seguir esta ruta, intente compartir algunos detalles de su juego y cámara actual, y una escena de ejemplo. Con eso, podríamos ayudar a ajustar el comportamiento de la cámara para compensar (o su juego podría simplemente requerir más visibilidad)

• Cree activos alternativos con una resolución diferente . (Sí, esto es mucho trabajo, pero te da la mayoría de las opciones para controlar la apariencia del juego)

  Esto no significa que tenga que desechar sus activos existentes que se ven geniales en 720p. Este artículo describe el intercambio contextual entre diferentes conjuntos de activos para admitir una gama más amplia de resoluciones de objetivos (en Unity, pero el principio también se puede aplicar en juegos que no son de Unity).

  • Como notará, volver a dibujar todos sus activos a la mitad ( 16x16 mosaicos, 32x32 caracteres ) le permitirá manejar 720p a escala 2x y 1080p a escala 3x, con el mismo número de mosaicos que se muestra ahora. Sin embargo, es posible que la resolución de mosaico pequeño sea más restrictiva visualmente.

  • También podría dibujar un conjunto de activos alternativo de "gran formato" que sea un 150% más grande ( 48x48 mosaicos, 96x96 caracteres ), que manejaría 1080p a escala 1x. (Usaría sus activos existentes para 720p o 1440, etc.). La resolución más grande debería ayudarlo a conservar la fidelidad de su arte actual, para que no tenga que sacrificar el estilo y los detalles que tiene ahora.

    

  • Una tercera opción es dibujar un conjunto de activos solo un poco más pequeño ( 24x24 mosaicos, 48x48 caracteres ), que puede manejar 1080p a una escala de 2x, y nuevamente podría significar menos sacrificio de detalles que reducir a la mitad todos los tamaños de activos.

    Las tres opciones te permitirán mantener tu encuadre y juego exactamente igual a 720 y 1080, pero a costa de duplicar aproximadamente el trabajo de los activos.

Entonces, desafortunadamente no hay una victoria fácil aquí, solo diferentes compensaciones.

Desarrollando específicamente la opción de @ DMGregory de crear activos alternativos en diferentes resoluciones:

La mejor solución que conozco es probablemente la menos útil para usted en este momento: desarrolle sus activos artísticos en formato vectorial y rastrínelos según sea necesario más adelante. Esto no es una bala mágica; la mayoría de las veces encontrará que necesita hacer alguna pequeña modificación artesanal después de rasterizar.

La siguiente mejor opción que conozco es probar varios algoritmos de escala de imagen, específicamente, algoritmos de escala de pixel art . Como antes, esto no es una pancea; seleccionar un algoritmo de escala específico es altamente específico del contexto. Tiene tanto que ver con la "sensación" de su juego como con el arte en sí mismo e incluso con un buen algoritmo + emparejamiento de arte, probablemente necesitará ajustar algunos sprites a mano.

En ambos casos, la idea es utilizar una herramienta para hacer la mayor parte del trabajo por usted y centrar el esfuerzo humano en los detalles restantes. Como dijo @DMGregory, "no hay una victoria fácil aquí, solo compensaciones diferentes".

Original:

Escamoso: