El pixel art es eterno, pero esto no significa que las herramientas y técnicas para trabajar con él deberían permanecer en el nivel de 1993.
El desarrollador británico de juegos Cardboard Sword está trabajando en el juego de plataformas de sigilo bidimensional
The Siege and the Sandfox , creado en Unreal Engine 4 con Paper2D. El equipo publica una serie
de diarios de desarrollo que presentan a otros desarrolladores cómo usar estas herramientas en sus propios juegos.
Una de las principales características técnicas de
The Siege and the Sandfox es el uso de mosaicos y sprites dibujados a mano con mapas normales, lo que le permite utilizar métodos de iluminación tridimensionales en este juego con un arte de píxeles bidimensional bastante tradicional.
Una de las directoras de arte de Cardboard Sword, Kate Duke-Cox, le dijo recientemente a Gamasutra cómo la compañía llegó a usar esta técnica, por qué se adapta al juego y cómo puede aplicar técnicas similares en sus propios juegos 2D.
Añade una sensación de profundidad
¿Cuáles son los beneficios de los mapas normales en comparación con la iluminación plana tradicional en un juego 2D?Kate Duke-Cox : la tarea del director de arte está completamente dedicada a encontrar un estilo individual y lograr el efecto deseado. Queríamos que nuestro arte fuera rico, profundo y "convexo". Las normales permitieron alcanzar este objetivo, dando una sensación de forma y fuerza al mundo y sus objetos.
Esta imagen, publicada por Keith Duke Cox en Twitter en agosto de 2017, es un impresionante ejemplo de una técnica.Por ejemplo, el uso de normales da a las fuentes de peligro un aspecto más tangible. La luz responde más correctamente a la superficie, y sin normales, se creó una sensación de una "hoja de papel" muy plana.
Cuando se usan correctamente, los mapas normales pueden agregar a los objetos en la escena una sensación de profundidad y peso que las imágenes 2D planas no pueden lograr.El uso de mapas normales es más una solución visual que una opción de juego funcional. Queríamos que el jugador se sumergiera más profundamente en el entorno, de modo que el parkour ofreciera una sensación de profundidad y autenticidad física, en lugar de la impresión de patrones de corte de papel típicos de algunos juegos de píxeles. Si se adhiere a colores brillantes y simples o estilo retro, entonces la iluminación plana es bastante adecuada.
¿Qué te atrajo inicialmente a usar mapas normales para iluminación 2D? ¿Cómo lo descubriste o dónde viste una implementación de calidad?La aplicación de valores normales a gráficos 2D fue una continuación natural de su uso en 3D, lo que no era posible en sistemas más antiguos que nos inspiraron a diseñar. Por supuesto, no fuimos los primeros en usarlos en juegos modernos de pixel art, pero los resultados fueron diferentes.
Al principio, nos negamos a usar este efecto, porque en muchos de los efectos que vimos, destruyó el encanto y la estética del pixel art, dándole demasiado brillo metálico. En nuestro primer intento de crear mapas normales de píxeles dibujados a mano para pixel art, obtuvimos normales muy detallados; después de todo, este es su objetivo principal en gráficos 3D. Pero cada ficha en nuestro juego tiene un tamaño de solo 32x32 píxeles, por lo que no quedan demasiados píxeles para transmitir información de superficie. Como resultado, el resultado se convirtió en un caos ruidoso.
Pero luego vimos el arte de Gwenael Masset para
Dead Cells , en el que el pixel art con normales se hizo muy bien, y decidimos darle una segunda oportunidad. [Aquí hay
un artículo sobre el uso de modelos 3D en este juego bidimensional.] Esta vez no usamos el mapa normal para los detalles finos de las superficies que se pueden ver en los gráficos 3D. Ahora el mapa normal se usaba para "crear" grandes formas de pixel art.
Esculpir formularios usando mapas normales
¿Puede hablar brevemente sobre el proceso de desarrollo de un activo, en particular sobre las diferencias de crear un activo 2D sprite simple similar?Por lo general, el pixel art se dibuja teniendo en cuenta la dirección "general" de la luz. En nuestro caso, para la mayoría de los sprites y las fichas de primer plano, la luz principal cayó desde arriba y ligeramente a la derecha, y las fichas de fondo tenían una "luz de cámara" más general para simular habitaciones oscuras y no distraer al jugador del primer plano.
Esto significaba que cuando se trataba de representar los valores normales para sprites y azulejos, los detalles y materiales de las superficies ya estaban seleccionados. Descubrimos que este enfoque en realidad funcionó muy bien. Él quiso decir que todas las formas y detalles que tuvimos que imitar en las normales ya eran muy obvios y notables.
Dependiendo de la naturaleza del sprite al que se agregaron las normales, usamos una combinación de dibujar los colores de las esquinas de las normales de la "esfera de los mapas normales" (de hecho, esta es una esfera que sirve como una paleta de todos los ángulos posibles que se pueden dibujar en el mapa de normales tangentes) y dibujar en canales RGB separados escala de grises con otras herramientas como ND, Crazybump o AwesomeBump. Ayudaron con algunas formas y mezclaron correctamente diferentes partes de las normales.
Utilizamos Nvidia TextureTools para Photoshop para ajustar / normalizar vectores después de terminar de dibujar un mapa normal.
¿Cuáles son los beneficios de dibujar mapas normales manuales como este con herramientas preconstruidas como Sprite DLight?Cuando comenzamos a buscar formas de crear valores normales para un objeto 2D sin un modelo de alta poli, encontramos aplicaciones que, en cierta medida, realizaban esta tarea.
Estudiamos los tutoriales para descubrir cómo se crean los mapas normales, pero descubrimos que hacen suposiciones basadas en los valores de color de los píxeles, que no dan resultados completamente precisos o completamente incorrectos, o requieren múltiples imágenes en escala de grises para simular la luz de diferentes direcciones, esencialmente creando los canales normales del mapa de forma independiente.
El programa no puede saber qué altura y ángulo tiene un píxel en un sprite, especialmente cuando se trata de un juego de pixel art con una paleta muy limitada, donde se utiliza un color para indicar las profundidades y ángulos de un objeto. Sin embargo, vale la pena agregar que en realidad no usamos estos programas, sino que simplemente evaluamos las perspectivas para su aplicación.
Existen dos métodos estándar para la generación automatizada acelerada de mapas normales: conversión de escala de grises y reconocimiento de formas. Realizamos pruebas con los tres métodos y descubrimos que el método de dibujo manual definitivamente brinda los mejores resultados.
La conversión de escala de grises y el reconocimiento de formas pueden crear efectos mejor de lo que se muestra aquí, pero incluso con mucho trabajo y tiempo, aún no son tan precisos y buenos como el dibujo manual.
Usar mapas normales en juegos nativos en 2D
¿Qué consejo puedes dar a los desarrolladores que quieren seguir tu propio camino?Crear valores normales en 2D de forma manual no es tarea fácil. El trabajo en todos los mosaicos de primer plano y de fondo tomó alrededor de 3 meses-hombre. Por lo tanto, para obtener resultados de alta calidad, prepárese para invertir mucho tiempo.
Las normales creadas rápidamente para gráficos 2D, especialmente el pixel art, generalmente se ven mal. Los sistemas como "crear una solución con un solo botón" a menudo conducen a la creación de activos débiles que, cuando se representan en un juego, se ven aún peor que los píxeles sin luz. Pruebe en una pequeña parte del juego (una pequeña muestra del primer plano, el fondo, los objetos y los personajes) y descubra qué le conviene y el estilo de su juego.
Por otro lado, en términos de representación, los costos de agregar normales a nuestro mundo son muy pequeños. Para casi todo el mundo del juego, teníamos dos mapas normales de 2k. No ocupan mucha memoria, y algunas texturas adicionales para el pase de representación normal no afectan demasiado las llamadas de extracción. Las fuentes de iluminación dinámicamente solo realizan la iluminación, no proyectan sombras sobre todo en el juego, por lo tanto, también son muy económicas.
Si aún no comprende cómo funcionan las normales del espacio tangente y lo que significan, incluso un breve estudio le permitirá dibujarlas mucho más fácilmente.
Para usar este método, tenía que adaptar los activos existentes y no implementarlo desde el comienzo del desarrollo. ¿Puedes dar consejos a aquellos que intentan complementar los gráficos de sprites ya preparados con mapas normales?Si tuviéramos que hacerlo de nuevo, entonces haríamos lo mismo: primero crear gráficos difusos, y luego dibujar las normales usando pixel art como referencia.
Quizás dibujaríamos algunos objetos de manera un poco diferente. Hubo problemas en el arte de los píxeles cuando un píxel podía indicar, por ejemplo, un clavo o remache, pero este píxel en el mapa normal puede corresponder solo a una esquina, por lo que podríamos hacer que algunos elementos sean más grandes para transmitir mejor los ángulos de la imagen.
Si utiliza una resolución inferior a la que utilizamos en nuestros juegos de fichas (32x32), entonces quizás el tamaño lo limite demasiado. Con una resolución de 16x16 u 8x8, probablemente no podrá transferir forma o volumen solo si una loseta no es una parte grande, como una piedra o un bloque de concreto.
En pixel art, los gradientes claros no se ven tan bien como las superficies voluminosas con ángulos agudos. Si su estilo gráfico lo permite, sugiero usar más ángulos que gradientes en superficies normales. Por ejemplo, si tiene un barril, asegúrese de que cada tabla individual en la que está compuesto tenga su propio ángulo y que el barril sea más octogonal que redondeado.
¿Tienes algún consejo para aquellos desarrolladores que quieran usar estas técnicas fuera de Unreal? Por ejemplo, en Unity o en Gamemaker.Antes de comenzar, verifique la orientación del mapa normal. El enfoque para dibujar normales es el mismo para todos los motores, solo lo que significa cada canal de color del mapa es diferente.
Por lo general, solo el eje Y (canal verde) cambia en diferentes motores. Unreal usa las normales del sistema de coordenadas del lado Y de DirectX, pero Unity usa las Y normales del sistema de coordenadas del lado derecho OpenGL (como nos parece), por lo que el canal verde debe estar al revés.
Sin embargo, si pintó incorrectamente, lo más frecuente es que un simple giro del canal verde sea suficiente. Verá que el canal se confunde si la imagen se enciende opuesta al resultado esperado.