Descargue nuestro nuevo proyecto de muestra 2D: Cripta perdida
Pusimos a prueba nuestras nuevas herramientas 2D para crear una demo de desplazamiento lateral en 2D. En este post mostramos cómo estas herramientas 2D integradas pueden ayudarte a crear visuales de alta gama con Unity.
Equipos altamente cualificados llevan años creando magníficos juegos 2D con Unity, pero queríamos que todo el mundo, desde artistas individuales a grandes equipos, pudiera disponer de aún más herramientas 2D para crear juegos de gran aspecto. Y muchos de ellos estarán listos para la producción como parte de Unity 2019.3, que actualmente está disponible en versión beta.
Creamos Lost Crypt utilizando el conjunto completo de herramientas 2D. Esta animada escena incluye animación, efectos de luz, terreno orgánico, sombreadores y posprocesamiento, todo ello realizado de forma nativa en 2D. Muestra cómo equipos y proyectos de todos los tamaños, dirigidos a cualquier plataforma, pueden ahora obtener resultados más atractivos y bellos con mayor rapidez.
Lost Crypt debería funcionar bien en cualquier ordenador de sobremesa y también hemos implementado controles en pantalla con el nuevo Input System por si quieres ejecutarlo en un dispositivo iOS o Android. En nuestras pruebas funcionó a 30 FPS en dispositivos comunes como un iPhone 6S.
Una vez que hayas descargado Lost Crypt de la Tienda de Activos, te recomendamos que empieces con un Nuevo Proyecto en blanco y selecciones 2D, luego importa el proyecto desde Mis Activos en el Gestor de Paquetes, o haciendo clic en Mis Activos en tu página de la Tienda de Activos. El proyecto incluye todos los paquetes 2D que necesitas. Entonces sobrescribirá los ajustes del proyecto, cambiando los ajustes de renderizado al Renderizador 2D dentro del Universal Render Pipeline.
Una vez importada, verás la Escena Principal. Cuando hagas clic en Jugar, deberías poder jugar normalmente utilizando las flechas del teclado y la barra espaciadora para saltar.
Los scripts y la lógica del juego son bastante sencillos, ya que el objetivo principal de la demo era hacer uso de las herramientas 2D para materializar el arte conceptual de la demo.
Hemos dividido la demostración en varias tareas y hemos elegido qué herramientas 2D aprovechar para ese reto visual.
El personaje se diseñó en Photoshop y se importó directamente con el 2D PSD Importer. Abre el archivo Sara.psb con el Sprite Editor para ver la configuración y el rig del personaje. Si abres el archivo con Photoshop, verás cómo hemos mantenido intactas las distintas partes y los nombres de las capas.
Una de las funciones disponibles con Universal Render Pipeline es el nuevo material Sprite-Lit. Comparado con el material habitual Sprite-Default, este permite a los Sprites reaccionar a las condiciones de iluminación 2D.
Importamos los mapas Normales del personaje en el Editor de Sprite, utilizando el menú desplegable Texturas Secundarias. Puedes añadir mapas de Normales y Máscaras a personajes animados en 2D, Sprites normales, tilemaps y formas de Sprite.
El personaje tiene solucionadores 2D IK en las piernas para ayudar al animador a centrarse en posicionar el tobillo y las puntas de los pies correctamente, entonces las piernas seguirán de forma realista.
Una vez riggeado el personaje, realizamos las diferentes animaciones con la herramienta Animación y Animator para controlar esos estados. Puedes ver cómo funciona la herramienta en esta charla de la GDC 2019.
La cola de caballo del personaje es un GameObject hijo diferente y es controlado por Física 2D. Reacciona de forma realista al movimiento porque cada hueso de la cola de caballo tiene un componente Hinge Joint 2D con algunas restricciones. Eso permite que su pelo se mueva libremente sin rizarse demasiado ni reaccionar de forma exagerada al movimiento del personaje.
Una de las posibilidades más potentes de disponer de iluminación dinámica en los Sprites es alterar la apariencia del entorno. Utilizando los mismos sprites, puedes cambiar el ambiente, la hora del día o la oscuridad de una zona, lo que abre un sinfín de mecánicas de juego, desde mecánicas de sigilo hasta mundos llenos de vida.
Controlamos las luces en la Escena con simples scripts que mantienen un valor de gradiente de Color (color de la luz del día a la noche) y las luces y materiales cambian de color siguiendo el parámetro de Tiempo en el GameObject padre. Con este tipo de configuración, puedes controlar visualmente cómo se mezclan las distintas luces entre sí.
Uno de los retos a los que se enfrentaban los desarrolladores de juegos en 2D en sus inicios era crear con eficacia terrenos orgánicos como colinas, pendientes o terrenos irregulares, lo que sólo era posible mediante hojas de azulejos cuidadosamente elaboradas. Años más tarde, esto era más fácil de conseguir utilizando múltiples Sprites que representaban partes del terreno, pero el flujo de trabajo o el rendimiento podían ser mejores.
Con 2D Sprite Shape puedes generar terreno y colliders de forma similar a como lo harías en una aplicación de dibujo basada en vectores. Puedes ajustar los pinceles (Sprite Shape Profiles) y empezar a crear sin preocuparte de tener que ajustar muchos Sprites o colliders mientras iteras sobre el entorno.
Lost Crypt también utiliza algunos de los extras de Sprite Shape como el script NodeAttach para unir elementos a la spline, de forma que sigan la spline. En esta demo, las rocas utilizan este script y el ConformingSpline en la capa de las flores para seguir la forma de la spline de la hierba. Puede utilizar esta función para el juego o para elementos decorativos como hicimos en la capa de hierba en primer plano.
Tilemaps es probablemente una de las herramientas 2D más esenciales, no sólo para ahorrar espacio de memoria con pequeños trozos de gráficos que pueden ser "tile-able" y repetible, sino porque también es crucial para el diseño de niveles.
En Lost Crypt, utilizamos el 2D Tilemap Editor (disponible a través del Package Manager) para recrear el interior de la cripta, donde utiliza algunas herramientas adicionales de Tilemap Extras (disponibles en GitHub) para hacer más eficiente el proceso de diseño de niveles. Por ejemplo, hemos utilizado Rule Tile, un tipo de baldosa que permite pintar baldosas como si fueran pinceles. Selecciona automáticamente la baldosa adecuada en función de las baldosas vecinas o de los extremos.
Algunos elementos habituales en los juegos son los efectos de fuego, así que añadimos uno en Lost Crypt. Comenzamos creando algunas antorchas GameObject usando el Sistema de Partículas y Shader Graph para 2D y usamos el nodo Sprite-Lit Master para el shader de salida. Hicimos la animación de fuego en una hoja de Sprite tradicional que el Sistema de Partículas utiliza para reproducir la animación.
El sombreador que hicimos para la llama utiliza un color de tinte HDR para aumentar la intensidad del resplandor alrededor del objeto utilizando el post-procesado de Volumen. El GameObject padre contiene algunas partículas de chispas y algunas luces que iluminan la alcoba.
Otro caso de uso común para los shaders son los reflejos y refracciones (por ejemplo, agua, hielo, espejos o monitores que muestran otra zona del nivel) son bastante habituales en los juegos.
Conseguimos el efecto de agua en la cripta totalmente con Shader Graph. Expusimos varios parámetros (como el color del agua, la velocidad de las olas y la distorsión, el efecto de ondulación, etc.), que nos permitieron ajustar el aspecto final en la Escena. Para proyectar una imagen reflejada del entorno, añadimos una cámara adicional que emitiría la imagen en una textura que sería leída por el Shader Graph. Además, añadimos una pasada de bloom de postprocesado para que las cáusticas del agua resplandecieran, lo que da a la superficie del agua un bonito efecto.
Una forma de animar el entorno era hacer que las ramas de los árboles se balancearan con el viento. Para conseguir este efecto, decidimos tener un único sombreador para el follaje de cada árbol Prefab, lo que crearía variedad y evitaría la repetición.
En el gráfico Vegetación iluminada por el viento, puede ver cómo hemos creado dos efectos. Uno es el efecto de animación o balanceo, que creamos desplazando la posición de los vértices siguiendo unos parámetros que modifican un patrón de ruido. El segundo efecto utiliza el canal G o verde para ajustar el tono de la luz del borde alrededor del follaje.
Los Estilos de Mezcla de Luces son una colección de propiedades en el Renderizador 2D que describen como las luces deben afectar a los Sprites. Por ejemplo, puedes crear un estilo de mezcla que sólo afecte a un canal concreto. Cuando añadas una luz en la escena que utilice ese estilo de mezcla, sólo afectará a las áreas del Sprite que dicte la información del canal del mapa de máscaras.
En el ejemplo de abajo, la luz paramétrica utiliza nuestro estilo de mezcla Iluminación directa, que sólo afecta a las áreas indicadas en el canal R del mapa de máscara de ese Sprite.
Lost Crypt tiene una breve cinemática cuando nuestro aventurero coge la varita mágica en la cripta. Para hacer el momento un poco más especial, cambiamos el ambiente del entorno y generamos partículas en el momento adecuado con Timeline, ya que queremos observar el cambio a la noche. Para seguir las partículas que vuelan hacia el bosque, cambiamos las cámaras de Cinemachine por una cámara de mezcla de pistas de animación.
El anillo brillante que aparece cuando agarras la varita utiliza luces de tipo Sprite. El gráfico del anillo simplemente se expande y se desvanece, creando un aura que ilumina el entorno.
Conseguimos el efecto de brillo de partículas principalmente con el efecto Bloom en el post-procesado de Volumen. Además, el material/sombreador para las partículas y la estela utiliza un color HDR para definir cuánta intensidad debe aplicar el efecto de post-procesado a este objeto.
Fíjate bien en el bosque, puedes ver algunas criaturas espectrales. Para ello, creamos un sombreador que pudiera utilizarse para otros fantasmas. Son transparentes pero un efecto fresnel añade algo de brillo en los bordes del Sprite haciendo que se tambaleen como criaturas flotantes.
Un efecto interesante en el shader es el seguimiento de la posición de transformación del GameObject varita. Por ejemplo, cuando la varita está cerca de los necrófagos, éstos se vuelven más brillantes. Para conseguirlo, adjuntamos un pequeño script a la varita que actualiza su posición en el shader del material.
Los engendros también tienen una pequeña animación que cambia de un gráfico a otro. Para ello, creamos un mapa de máscaras con gráficos diferentes en cada canal: R con una visual, G con la visual alternativa y B para el efecto fresnel.
Para terminar de pulir la imagen, añadimos algunos efectos de postprocesamiento incluidos en Universal Render Pipeline. Por ejemplo, creamos un GameObject vacío y le adjuntamos el componente Volumen. En Lost Crypt utilizamos bloom, balance de blancos y viñeta, pero hay muchos otros efectos que se pueden utilizar en proyectos 2D como motion blur, corrección de color o efectos de grano de película.
Esperamos que la demostración de Lost Crypt le ayude a comprender cómo puede utilizar nuestro conjunto integrado de herramientas 2D para casos de uso similares. Si tienes alguna pregunta sobre la Cripta Perdida, puedes ponerte en contacto con nosotros en el foro.
Si tienes preguntas específicas sobre nuestras herramientas 2D, consulta los hilos dedicados en la sección 2D del foro y en Funciones beta y experimentales.
¿Quieres ver entre bastidores la Cripta Perdida en tiempo real? Apúntate a nuestro animado seminario web en el que Andy Touch, Evangelista de Contenidos Globales, te explicará cómo utilizamos las luces 2D, los sombreadores y el posprocesamiento en Lost Crypt. El equipo 2D de I+D también se unirá a nosotros para responder a sus preguntas sobre el conjunto de herramientas 2D o el propio proyecto.
Hay un número limitado de plazas, así que asegúrate de inscribirte pronto y añadir un recordatorio en tu calendario.