Cómo Subcult Joint gestionó más de 2.000 hojas de sprites y más de 10.000 luces 2D en Cookie Cutter
Conoce sus herramientas 2D, además de la última actualización de la versión Unity LTS que desbloqueó nuevas posibilidades para este beat-em-up rompedor de moldes.
¿Cómo puede un equipo pequeño mostrar la animación dibujada a mano en todas las plataformas? Subcult Joint pasó seis años trabajando en Cookie Cutter, que incluye miles de recursos de alta resolución realizados con técnicas de animación tradicionales y optimizados en Unity. El estudio necesitaba equilibrar unos efectos visuales nítidos con una jugabilidad ágil, por lo que utilizó ampliamente 2D Lights para añadir profundidad a sus gráficos y a un diseño de juego centrado en la exploración.
Siga leyendo para saber cómo lograron esta visión y cuál fue el cambio sorpresa de última hora que desbloqueó unas capacidades de gestión de activos más rápidas y les ayudó a llevar su configuración de iluminación al siguiente nivel.
El artista, animador, educador de Unity Learn y fundador de Subcult Joint, Stefano Guglielmana, comenzó a trabajar en Cookie Cutter en 2018. Se inspiró en un personaje rechazado de un proyecto anterior de Unity: Cherry, un androide de voz dura. "Me enamoré de su diseño, así que empecé a crear animaciones para ella", dice. Stefano tenía una visión clara de la jugabilidad metroidvania beat-em-up de Cookie Cutter, pero necesitaba el apoyo de un desarrollador para hacerla realidad. Tras conseguir financiación, contrató al programador Francesco Bizzini y a un grupo de artistas y diseñadores para colaborar en el proyecto.
Los resultados:
- Vendió 60.000 ejemplares y generó 1.200.000 dólares al mes de su lanzamiento.
- Gestión sencilla de más de 2.000 hojas de Sprite y más de 50 atlas de Sprite
- Ilumina el juego con más de 10.000 luces 2D
- Actualización satisfactoria a Unity 2022 LTS a mitad de proyecto
This content is hosted by a third party provider that does not allow video views without acceptance of Targeting Cookies. Please set your cookie preferences for Targeting Cookies to yes if you wish to view videos from these providers.
Empaquetar el contenido
Los efectos visuales dibujados a mano de Cookie Cutterson uno de sus principales argumentos de venta. Stefano sabía que serían complicados de crear, pero ese esfuerzo extra merecería la pena. "El atractivo visual es lo que hace que nos enamoremos de los videojuegos", afirma. "En Subcult Joint admiramos a los maestros de Studio Ghibli y Disney. No estamos a ese nivel, pero con Cookie Cutter queríamos forzar nuestras habilidades de animación y hacer un juego realmente genial."
Este proyecto es extremadamente ambicioso para un equipo pequeño. La mayoría de los recursos artísticos (más de 1.000 fondos, sprites, animaciones y efectos de partículas) son visualmente complejos y se han creado minuciosamente con técnicas de animación tradicionales. Entre el personaje del jugador (Cherry) y los PNJ (27 tipos de enemigos estándar y cinco jefes gigantescos), cada personaje de Cookie Cutter tiene entre 20 y 40 animaciones. Cada una de estas animaciones individuales puede tardar entre ocho y 48 horas en completarse. Los distintos artistas utilizaron diferentes DCC, pero Stefano creó la mayoría de los recursos en Adobe Photoshop.
Una vez que Stefano terminaba una ilustración, utilizaba el importador de PSD para convertirla en una textura de 8K antes de optimizarla en el editor para evitar problemas de desbordamiento de la memoria de vídeo. El uso inteligente de los ajustes de importación de texturas ayudó a reducir el tamaño de las texturas por plataforma, y siguiendo las mejores prácticas, como la potencia de dos, se consiguieron más optimizaciones.
"Después de terminar mi trabajo en Photoshop, creé manualmente mis hojas de Sprite colocando las celdas de animación una a una en un nuevo archivo, siempre en un múltiplo de 512 x 512, siguiendo la regla de la potencia de dos en Unity", dice Stefano. "A partir de ahí, el editor de hojas de Sprite de Unity facilitó el corte de la hoja o la realización de otros trucos moviendo el pivote o el píxel de la hoja por fotograma". Estos flujos de trabajo garantizaron que los efectos visuales de Cookie Cutterse optimizaran en todas las plataformas con los mínimos problemas de rendimiento.
Al final del proyecto, Subcult Joint había reunido más de 2.000 Sprite Sheets en más de 50 Sprite Atlases, organizándolos por personajes. "Sprite Atlases facilitó enormemente la exportación del juego a las distintas consolas manteniendo una tasa de imágenes por segundo sólida", afirma Stefano. "Nos hemos centrado sobre todo en alcanzar los 60 FPS para que la jugabilidad y el rendimiento general sean fluidos como la mantequilla. Esto realmente optimizó el uso de la memoria de forma asombrosa e hizo que los tiempos de carga fueran aún más rápidos".
Personalización del juego
Stefano quería evitar errores comunes en los que ha visto caer a otros juegos centrados en la animación. "Los juegos con muchas animaciones pueden resultar toscos. A veces el animador quiere flexionar, y acaba castigando la jugabilidad", explica. "Con Cookie Cutter, hemos prestado la misma atención a la jugabilidad, para que el juego se sienta tan fluido como las animaciones cuando tienes el mando en las manos".
Con esto en mente, necesitaba una forma de trabajar en el Editor y retocar la jugabilidad rápidamente, sin riesgo de romper el proyecto. Esto condujo a lo que Francesco llama uno de los mayores obstáculos técnicos en la parte de programación: Construir un sistema flexible en Unity que funcione con poca intervención de código.
"Mi objetivo era ofrecer a los diseñadores una forma de personalizar cualquier aspecto del juego directamente desde el Editor", afirma. Gracias a la extensibilidad de Unity, Francesco pudo añadir sus propias personalizaciones para salvar la brecha de conocimientos entre él y los artistas menos técnicos del equipo.
Para hacer posible una jugabilidad contundente y combos de acción brutales, Francesco implementó la herramienta visual de terceros ActionGraph para crear y estructurar modularmente máquinas de estado finito en Unity. Cuando se cargan los sprites de una animación, ActionGraph permite añadir lógica de juego a cada fotograma, lo que permite a los artistas modificar sobre la marcha ajustes como los colisionadores o el número de daños. Por ejemplo, Stefano puede utilizar ActionGraph para añadir una caja de impacto a un ataque y configurarla para que esté activa en fotogramas específicos, activar y desactivar contadores de salto, activar la generación y el gasto de recursos de combate, etc., sin necesidad de que intervenga un programador.
Francesco también programó una serie de personalizaciones de su propio Editor para permitir que más miembros del equipo de artistas de Subcult Joint contribuyeran al proyecto. Basado en el sistema de visualización xNode, UpWire permite a los artistas gestionar fácilmente las entradas humanas y de IA, editar los colisionadores, añadir efectos visuales a nodos de animación específicos y mucho más.
"Lo construí para que fuera un auténtico editor de combate", explica. "Maneja todas las variables del juego, de modo que los movimientos específicos sólo pueden ejecutarse si el jugador ha desbloqueado esa habilidad, arma o mejora, y está en la posición correcta: ataques aéreos frente a ataques terrestres, por ejemplo". UpWire también gestiona ajustes como la fuerza física, la traslación de la posición y la rotación del cuerpo, para que los artistas puedan experimentar con las mecánicas de combate más fácilmente.
Timeline EZ Events, otra de las herramientas personalizadas de Francesco, permite a los diseñadores enviar mensajes y llamar a funciones directamente en el Editor casi sin límites de parámetros, incluyendo Objetos de Escena, y añadir múltiples funcionalidades a un GameObject. Por ejemplo, el equipo puede crear una palanca que desbloquee una puerta al tirar de ella y, al mismo tiempo, ocultar un marcador de "puerta bloqueada" en el mapa y el minimapa.
Para ayudar a los diseñadores a trabajar en el minimapa de Cookie Cutter, algo crucial en cualquier juego centrado en la exploración, Francesco creó EzMiniMapPro. "Se utiliza para crear mapas de zonas de juego y cuenta con algunas personalizaciones y optimizaciones útiles para la generación de imágenes", explica Francesco. "En tiempo de ejecución, admite marcadores superpuestos animados y máscaras de exploración automáticas basadas en lo que ve la cámara. La máscara se puede escribir y restaurar a través de SaveGame".
La creación e implementación de estas personalizaciones requirió trabajo, pero dio rienda suelta a la libertad creativa de todo el equipo, lo que permitió a todos los miembros de Subcult Joint participar en el diseño, las mecánicas y el equilibrio de la jugabilidad de Cookie Cutter.
Diseñar el mundo
El enorme mundo de Cookie Cutter, la Megaestructura, cuenta con nueve zonas para explorar. Una vez finalizado el arte conceptual de una zona, el diseñador de niveles de Subcult Joint, Gabriel Raymond Roy, creaba un laberinto para que los jugadores lo descubrieran.
"Un buen diseñador de niveles sabe crear caminos primarios y secundarios que resulten entretenidos de explorar y también de desandar", dice Stefano. "Cada callejón sin salida debería tener algún tipo de recompensa para el jugador, y cada zona abierta debería tener encuentros con enemigos para que los jugadores puedan cultivar materiales".
Una vez delimitada la zona en gris, Stefano y los diseñadores dotaron a la escena de detalles ambientales y dispusieron los sprites dibujados a mano en capas a lo largo de cuatro puntos del eje Z. Cookie Cutter utiliza una vista de cámara en perspectiva sin paralaje codificado, de modo que cuando el jugador se mueve, puede ver elementos "mal colocados" en perspectiva. Cherry se sitúa en el punto "predeterminado" junto a GameObjects interactivos como enemigos, objetos y plataformas, mientras que los elementos no interactivos de primer plano, fondo y "lejanos" añaden profundidad simulada a la vista de la escena.
This content is hosted by a third party provider that does not allow video views without acceptance of Targeting Cookies. Please set your cookie preferences for Targeting Cookies to yes if you wish to view videos from these providers.
Iluminar la megaestructura
"Intentamos dar a cada zona una personalidad única, aunque con la ambientación ciberpunk y nuestro amor por las perchas y las fábricas de Metal, no estoy seguro de hasta qué punto tuvimos éxito", bromea Stefano.
Para dar a cada zona su propio sabor visual, Subcult Joint hizo un uso intensivo de las luces 2D Spot y Freeform en URP. El mundo de Cookie Cutterestá iluminado por más de 10.000 de ellas. "Cada luz del juego ilumina nuestros Sprites en tiempo real, creando una sensación de densidad y cohesión entre los personajes, las animaciones y los entornos", dice Stefano. "En los lugares oscuros, los personajes están a la sombra, y bañados de luz cuando se exponen a las saturadas y contaminadas claraboyas de las zonas exteriores. Me encantan estos detalles".
Subcult Joint utilizó las Luces 2D de Unity directamente, sin gestión especial, aplicándolas a través de las mismas capas del eje Z que los Sprites ambientales. "Las luces 2D predeterminadas son increíbles a la hora de iluminar tu área de juego, y es genial poder decidir a qué capas pueden afectar", explica Stefano. "Queríamos que la capa predeterminada estuviera siempre clara para el jugador, para que supiera dónde podía caminar y dónde no. Luego añadimos luces al fondo, al primer plano y a las capas lejanas".
La llamativa iluminación 2D de Cookie Cutterdesempeña un papel importante en el diseño general del juego. Como metroidvania, es un título centrado en la exploración. La iluminación se utiliza para proporcionar señales ambientales al jugador. "La iluminación cuenta una historia: muestra al jugador adónde ir, conduciéndole por el camino principal u ocultando caminos secundarios opcionales", explica Stefano.
Las luces parpadeantes atraen la atención del jugador. Stefano nos cuenta cómo creó este efecto: "Lo bonito de las Luces 2D es que puedes animarlas", dice. "Crear luces parpadeantes es muy sencillo: Seleccionas la luz, vas a la Ventana de Animación, creas otra Animación, y juegas con la intensidad - 0, 9, 0, 9 - y copias esa animación en otras luces si quieres crear el mismo efecto en otro lugar."
This content is hosted by a third party provider that does not allow video views without acceptance of Targeting Cookies. Please set your cookie preferences for Targeting Cookies to yes if you wish to view videos from these providers.
Ventajas adicionales con una actualización de última hora
Casi al final del desarrollo de Cookie Cutter, los problemas de desbordamiento de la memoria de vídeo se convirtieron en un obstáculo para la versión de PlayStation 5. Subcult Joint se dio cuenta de que tenía que actualizar su versión de Unity para solucionar el problema.
Hacerlo tan cerca del lanzamiento no era lo ideal, pero no llegar al público masivo de PlayStation no era una opción, así que se arremangaron y se pusieron manos a la obra para trasladar el proyecto a 2022 LTS. Esta versión de soporte a largo plazo les dio acceso a nuevas herramientas de perfilado y depuración, como el Memory Profiler actualizado.
"La nueva función de comparación de instantáneas del Memory Profiler nos ayudó a identificar y resolver los persistentes problemas de desbordamiento de la memoria de vídeo", afirma Francesco. "2022 LTS también es más rápido para importar texturas, y la actualización hizo que nuestro juego fuera mucho más estable al final".
Resultó que el cambio a la última versión de Unity les permitió añadir una capa final de pulido visual a Cookie Cutter que no habría sido posible de otro modo, ya que ahora tenían acceso al sistema 2D Lights listo para producción. Esto significaba revisar y arreglar individualmente las miles de luces 2D del juego, hasta entonces experimentales, en función de los nuevos parámetros, un proceso que, afortunadamente, se agilizó con las nuevas funciones.
Con los atlas de sprites actualizados de 2022 LTS, Subcult Joint pudo enviar cientos de animaciones dibujadas a mano a diferentes plataformas de destino con mayor facilidad y eficacia. Y la versión completa de las luces 2D del URPayudó a añadir aún más profundidad y ambiente a los entornos.
"Utilizamos el nuevo 2D Light Explorer para seleccionar cada luz y hacer los ajustes manualmente", explica Stefano. "Habíamos estado utilizando principalmente luces Spot y Freeform, y 2022 LTS tenía una función de desvanecimiento actualizada para las luces Freeform que era mucho más atractiva que la antigua. Fue mucho trabajo, pero pudimos arreglar problemas periféricos y mejorar aún más el juego."
Cookie Cutter, el primer juego de Subcult Joint, es un ejemplo de la magia que se produce cuando artistas y programadores trabajan al unísono. Este pequeño equipo creó un juego metroidvania visualmente ambicioso y exitoso que vendió más de 60.000 copias en su primer mes, y fueron capaces de ceñirse a su visión original sin comprometer los gráficos ni la jugabilidad.
La actualización a 2022 LTS no sólo ayudó a Subcult Joint a resolver los problemas técnicos persistentes, sino que les permitió maximizar el alcance de la plataforma Cookie Cuttery elevar el juego a su máximo potencial.
Impulsa tus ambiciones con Unity 2022 LTS
Unity 2022 LTS, creado tras años de comentarios y pruebas por parte de los usuarios, ofrece nuevas funciones y mejoras estables para que puedas crear con confianza utilizando la última tecnología. Optimice su juego para las plataformas más recientes y ofrezca imágenes de alta calidad en todos los dispositivos.
Explore el estudio de caso
Rellene este formulario para acceder a las últimas historias de creadores.