Conozca Dragon Crashers: nuestro último proyecto de muestra en 2D
En el ciclo de lanzamiento de 2019 de Unity, hicimos realidad nuestra visión de empoderar a los artistas y creadores 2D con un conjunto completo de herramientas 2D. El lanzamiento de nuestros paquetes 2D incluyó animación esquelética de personajes y cinemática inversa (IK), diseño de niveles con mapas de mosaicos, formas spline y herramientas de pixel art. Visite nuestro sitio web 2D para obtener una descripción general.
Desde entonces, nuestro equipo 2D ha optimizado esos flujos de trabajo y perfeccionado la tecnología gráfica: el Renderizador 2D dentro del Canal de Renderizado Universal. No hay mejor manera de poner a prueba estas herramientas y ver cómo pueden hacer que sus imágenes 2D brillen que explorando un nuevo proyecto de muestra. Dragon Crashers ahora está disponible de forma gratuita en Asset Store.
Dragon Crashers es un proyecto de muestra oficial realizado en Unity 2020.2 que muestra el conjunto nativo de herramientas 2D y tecnología gráfica de Unity. La jugabilidad es una versión vertical de un juego de rol inactivo de desplazamiento lateral, popular hoy en día en las plataformas móviles.
Mientras el grupo de héroes ataca automáticamente a sus enemigos, puedes activar ataques especiales simplemente tocando o haciendo clic en los diferentes avatares.
El proyecto de muestra se ha probado en plataformas de escritorio, móviles y web.
Además de la información compartida en este artículo, únete a nuestro seminario web de descripción general de Dragon Crashers el 14 de abril a las 11:00 a. m. EST (5:00 p. m. CET) para obtener consejos clave y una guía en vivo de nuestro desarrollador de contenido global, Andy Touch. Llévame a la sección de registro.
Asegúrate de tener Unity 2020.2 o 2020 LTS para obtener el proyecto en Asset Store. Primero, inicie un nuevo proyecto 2D, luego vaya a Administrador de paquetes > Mis activos para importar Dragon Crashers. Verá algunos mensajes emergentes de Configuración del proyecto; acéptelos todos.
Si encuentra algún problema, infórmenos en el forodedicado a Dragon Crashers 2D.
Una vez importado el proyecto, debería ver una nueva opción en la barra de menú que ofrece accesos directos a las escenas del proyecto. Selecciona Cargar menú del juego y presiona Jugar para probarlo.
Recomendamos utilizar configuraciones de pantalla de alta definición en la vista del juego, como la configuración Full HD (1920×1080) o 4K UHD (3840×2160).
Nuestro grupo de héroes y enemigos base son diversos y están adornados con diferentes atuendos, accesorios y variaciones. Sin embargo, todos son bípedos que tienen una constitución similar.
Para evitar animar cada uno de ellos con sus respectivas restricciones IK 2D, creamos un maniquí. El animador utilizó este maniquí, mientras que el artista de personajes creó pieles y accesorios únicos para los personajes.
El prefabricado de maniquí (PV_Character_Base_Bipedal.prefab) se utilizó para crear variantes de prefabricado para cada personaje. La única diferencia entre esas variantes es el recurso de la biblioteca de sprites, donde intercambiamos la apariencia visual del personaje bípedo.
Todos los recursos de la biblioteca de sprites de personajes tienen la misma categoría y etiqueta para definir las partes del cuerpo y sus variantes. Por ejemplo, los enemigos caballero y esqueleto tienen una categoría llamada “boca”, con variantes de sprites etiquetadas como “boca abierta”, “boca con dientes” y “boca normal” utilizadas durante la animación.
Para aplicar las animaciones a todos los personajes, asegúrese de que el recurso visual o PSB de cada personaje tenga una plataforma similar. En otras palabras, deben tener huesos nombrados de la misma manera, unidos a partes del cuerpo de la misma Categoría y Etiqueta. Para ahorrar tiempo, puedes copiar el esqueleto del maniquí (o los huesos del personaje de referencia) y pegarlo en los diferentes personajes. Esta opción está disponible en el Editor de aspectos, parte del Editor de sprites.
Los prefabricados incluyen características que hacen que los personajes sean más animados, como cinemática inversa y mapas normales y de máscara para una mejor integración en el entorno iluminado en 2D.
No es necesario fijar el diseño de tu nivel en piedra tan temprano en el proceso durante la creación del prototipo. Las herramientas de creación de mundos 2D incluidas en Unity te permiten divertirte diseñando niveles y luego iterarlos fácilmente. El editor de mapas de mosaicos y Sprite Shape ayudan a automatizar tareas, como configurar colisionadores para que se ajusten a las formas de los objetos o del terreno, mientras que la vista de escena es tu campo de juego para hacer que el juego sea más emocionante y estéticamente agradable.
El aspecto más importante es tener todos tus “pinceles” listos en la Paleta de Mosaicos, que puede contener mosaicos repetibles, mosaicos animados, mosaicos isométricos o hexagonales, o incluso GameObjects que los rendericen todos de manera eficiente, con un solo renderizador (Tilemap Renderer). Para todos los elementos de la cuadrícula, consulte la paleta de mosaicosPalette_GroundAndWalls.
Otra característica que a menudo se pasa por alto y que puede ser útil en el diseño de niveles es el modo de dibujo de sprites. Los sprites en mosaico utilizados para capas de fondo pueden cubrir un área grande de la escena con un sprite pequeño para crear un agradable efecto de paralaje.
Una cuadrícula de mapa de mosaicos podría no ser la solución más práctica para agregar objetos de aspecto más orgánico o elementos basados en splines a su proyecto. En su lugar, recomendamos una herramienta basada en splines, como 2D Sprite Shape, que dibuja de forma muy similar a un software de dibujo vectorial. Úselo como accesorio de fondo o como parte del juego. El SpriteShape Renderer le permite renderizar de manera eficiente muchos sprites adjuntos al spline o borde de sus formas. Consulte PrefabP_MineCartTracks_Apara observar cómo se dibujan las pistas con la línea spline, y la ilustración de la estructura de soporte está hecha a partir de la textura de relleno del perfil de forma de Sprite.
PrefabP_BridgeoP_MineCartTracks_Bson otros ejemplos que demuestran cómo el borde de una forma de Sprite no necesita ser una línea simple, sino que representa elementos más elaborados: en este caso, un puente y una vía férrea.
Con el Renderer 2D, utilice el sombreador Sprite-Lit para obtener efectos de iluminación avanzados. Aprovecha al máximo estos efectos dándole a tus sprites texturas secundarias.
Se pueden agregar mapas normales en el Editor de Sprites. Estas imágenes RGB representan la dirección XYZ hacia la que mira el píxel y señalan a las luces 2D cuánto afectarlas. Los mapas de máscara también se pueden aprovechar mediante el recurso de datos 2D Renderer (RenderData_2D.asseten el proyecto), parte de la función Estilos de fusión de luz. El estilo de combinación de luces llamado “Fresnel” se utiliza para acentuar la luz del borde alrededor de los personajes y sprites. Para lograr el efecto Fresnel, por ejemplo, seleccione utilizar la información del canal R de los mapas de máscara. En este proyecto en particular, solo tenemos un estilo de combinación de luces, por lo que los tres canales (R, G y B) se ven iguales (blanco y negro). Esto hace que el proceso de creación de mapas de máscara sea más conveniente.
Shader Graph se usa con frecuencia en la demostración para animar accesorios sin sobrecargar la CPU. Puedes observar elementos como el viento moviendo las telarañas (prefabricadoP_SpiderWeb_Blur), los cristales brillando (P_Crystals_Cluster), así como la animación del flujo de lava (P_Lava_Flowing_Vertical), que aprovechan una textura de mapa de flujo para controlar la dirección de las coordenadas UV de la textura principal. La textura de flujo utiliza los colores rojo y verde para indicar la dirección XY que siguen los píxeles en cada fotograma. Abra SubGraph FlowMap para aprender cómo lograr este efecto.
En la misma escena de batalla del dragón, hay otra técnica de animación de sombreado llamada “recorte alfa animado”, que crea una animación suave a partir de una sola textura. Esto se logra mostrando un rango específico de píxeles en cada cuadro en función de sus valores alfa. Los efectos visuales como la salpicadura de lava (ParticleSystem_Splatters) o la animación de impacto (P_VFX_HitEffect)se realizaron utilizando esta técnica con Shader Graph.
El estilo artístico de la demostración se creó teniendo en cuenta las luces 2D y sus múltiples posibilidades. Como puedes ver, los sprites mejorados por los mapas Normales y los mapas Máscara hechos a mano son relativamente planos. Algunos sprites, como el piso del mapa de mosaicos, son en escala de grises, lo que significa que están coloreados usando la opción Color del Renderizador de Mapa de Mosaicos combinada con las áreas iluminadas del entorno.
Las luces 2D en tiempo real te permiten pasar más tiempo en la escena final del juego en Unity Editor. Observar los resultados directos mientras compones tu escena con luces y objetos, o incluso poder jugar el nivel a medida que avanzas, te permite establecer mejor el estado de ánimo y la atmósfera deseada para tu juego.
Además, puedes aumentar la inmersión animando esos elementos. Por ejemplo, el prefabP_Lantern_HangingFromPostmuestra cómo adjuntar una luz a un objeto animado o darle al personaje de la bruja un bastón con partículas Sprite-Lit.
Otro beneficio de usar luces 2D en su proyecto es la capacidad de reutilizar elementos. Los entornos y los accesorios pueden verse muy diferentes según las condiciones de iluminación, lo que permite recrear muchos niveles diferentes con los mismos sprites.
Para crear, estructurar, gestionar e iterar el juego, nuestro proyecto de demostración utilizó una combinación deobjetos programablesyprefabricados.
Los siete personajes, independientemente de si son héroes o villanos, heredan su estructura central de la Unidad Prefabricada base y utilizan el mismo código de comportamiento. Para diferenciar valores entre caracteres, utilizamos objetos programables para diferentes "bloques" de valores basados en unidades. Los valores codificados dificultan el equilibrio del juego para quienes no son programadores y hacen que la jugabilidad sea rígida, por lo que configuramos valores de unidad como "Cantidad de daño de ataque", "Tiempo de recuperación de habilidad en segundos" y "Salud de la unidad" en objetos programables; para que cualquiera que trabaje en el proyecto pueda hacer ajustes rápidos. Luego, el código de juego gestiona esos cambios de valor de forma dinámica.
Cada prefabricado de unidad tiene un script central 'UnitController' que actúa como el 'cerebro' de la unidad y maneja las referencias de scripts prefabricados internos y la secuencia de comportamiento. Cuando el Dragón es atacado, por ejemplo, el 'UnitController' ejecuta eventos de comportamiento relacionados, como la transición a una animación de estremecimiento, reproducir un efecto de sonido de rugido y reducir la cantidad de salud del Dragón. Estos comportamientos básicos se adhieren al concepto de encapsulación y solo manejan sus propios propósitos y tareas respectivos. Por ejemplo, UnitHealthBehaviour solo maneja la lógica, incluyendo la configuración y eliminación de valores de salud de una unidad, y reporta devoluciones de eventos importantes, como 'HealthChanged' o 'HealthIsZero'. Sin embargo, 'UnitController' envía valores a 'UnitHealthBehaviour' según los escenarios y acciones que ocurren durante el juego.
En algunos casos, los sistemas externos a las Unidades podrían requerir una actualización si ocurre un evento específico. Para estas configuraciones se utilizan delegados.
Por ejemplo: Cuando la bruja recibe daño de un ataque y 'UnitHealthBehaviour' ejecuta el evento 'HealthChanged(int healthAmount)', entonces 'UIUnitHealthBehaviour' suscrito externamente puede actualizar la barra de salud de la bruja de acuerdo con ese valor.
El uso de delegados nos permite aislar y probar áreas sin depender de otros sistemas. Por ejemplo, esto incluyó probar el rendimiento del Sistema de visualización de números de daños emergente en una escena separada, sin necesidad de simular el juego de batalla.
La funciónTimelinede Unity se utilizó en dos áreas: Escenas lineales y secuencias de habilidades de cada unidad.
Las escenas lineales tienen lugar al principio y al final de una batalla. Manejan secuenciación para una variedad de áreas, como transiciones de cámara (usandoCinemachine), animaciones de personajes (usandoAnimator), clips de audio, efectos de partículas y animaciones de UI. Cada pista estaba vinculada a la instancia de escena relevante.
Se incorporó unaseñal de Timelineal final de las cinemáticas de introducción para invocar un evento de Unity cuando finaliza la escena. Esto 'indica' cuándo comenzar la lógica del juego de batalla.
Se utilizó la Timeline para crear secuencias de habilidades prefabricadas integradas para cada unidad. Esto permite que cada Unidad tenga sus propias habilidades especiales que están conectadas y asociadas a su personaje; similar a las habilidades de los campeones en un juego MOBA.
Cada unidad contiene dos líneas de tiempo de habilidades: un ataque automático "básico" y un ataque "especial" activado manualmente. El script 'UnitAbilitiesBehaviour' maneja la lógica de ambas líneas de tiempo de habilidades en términos de la habilidad que se está reproduciendo actualmente, la cola de secuencia de habilidades y el inicio/detención de los tiempos de reutilización de las habilidades (dependiendo de la lógica de juego de alto nivel, como si se está reproduciendo la escena de introducción o si una unidad ha muerto). Pistas de la Timeline de habilidades vinculadas a los sistemas locales del prefabricado de unidad, incluido el animador del personaje para la animación de ataque y los sistemas de partículas para efectos visuales. Esto permitió que tanto el programador como el artista crearan, reprodujeran e iteraran la habilidad específica de una Unidad de forma aislada utilizandoel Modo de Edición Prefabricadaantes de aplicar los cambios a cada instancia de la Unidad Prefabricada en el juego.
Las señales de la Timeline se usaban cuando una habilidad debía aplicar algún tipo de modificador de valor a la salud de una unidad objetivo. Cuando el caballero balancea su espada, por ejemplo, queremos que el daño se aplique tan pronto como la espada alcance un punto crítico en la animación, en lugar de al principio o al final del movimiento de la espada. A medida que los tiempos de las animaciones y los efectos visuales se iteraban durante el desarrollo, el artista reposicionó la señal "Habilidad sucedió" en el nuevo punto deseado de la secuencia en un flujo de trabajo muy rápido, sin depender de que el programador cambiara ningún valor en el código.
Esto también nos permitió agregar múltiples señales de 'Habilidad sucedida' en un ataque continuo, como el dragón escupiendo fuego al grupo de héroes.
Andy Touch,desarrollador sénior de contenido global, organizó un seminario web en el que se realizó una demostración en el editor del flujo de trabajo de creación de personajes que se utilizó para crear el proyecto. En este seminario web se explicó cómo:
- Exportar un personaje 2D desde Photoshop a Unity
- Configurar el rig de sprites de un personaje
- Configurar IK para las extremidades de un personaje
- Utilice el intercambio de sprites para obtener diferentes efectos visuales de los personajes
- Utilice prefabricados anidados para accesorios de armas
- Aplicar mapas Sprite Normal y Mask para estilos de iluminación 2D
- Secuenciar habilidades de personajes usando la Timeline
Como muestra de agradecimiento por explorarDragon Crasherscon nosotros, nos gustaría compartir un conjunto de fondos de pantalla, fondos de Zoom y otros elementos visuales para inspirarte durante tu viaje de desarrollo de juegos 2D. Consigue los fondosde Dragon Crasheraquí.
Para aquellos que comienzan un nuevo proyecto 2D, ya hay algunas guías excelentes en el blog y los foros. Si no está familiarizado con las herramientas, le recomendamos que consulte lapágina web 2D,el blog y la presentación 2D Tips Lightning Roundpara obtener sugerencias útiles. Para obtener más información, consulte una inmersión profunda en nuestro sistema de animación esqueléticaaquí,o nuestro proyecto anterior,Lost Crypty suseminario webcorrespondiente. Como siempre, también recomendamos revisar nuestradocumentaciónmás reciente y, por supuesto, la secciónRenderizador 2Dpara obtener más información sobre características o API específicas.