Comment Subcult Joint a géré plus de 2 000 feuilles de sprites et plus de 10 000 éclairages 2D dans Cookie Cutter

Découvrez leurs outils 2D, ainsi que la mise à niveau de la dernière phase de la version Unity qui a ouvert de nouvelles possibilités pour ce beat-em-up révolutionnaire.

Comment une petite équipe présente l'animation dessinée à la main sous son meilleur jour sur toutes les plateformes ? Subcult Joint a travaillé pendant six ans sur Cookie Cutter, qui inclut des milliers de ressources haute résolution créées avec des techniques d'animation traditionnelles et optimisées dans Unity. Le studio avait besoin d'équilibrer des visuels nets avec une expérience de jeu fluide, et il a beaucoup utilisé 2D Lights pour ajouter de la profondeur à ses graphismes et à sa conception de jeu axée sur l'exploration.

Lisez la suite pour découvrir comment ils ont concrétisé cette Vision et le changement surprise de dernière minute qui a permis de débloquer des capacités de gestion des ressources plus rapides et de faire passer leur configuration d'éclairage au niveau supérieur.

L'artiste, animateur, formateur Unity Learn et fondateur de Subcult Joint Stefano Guglielmana a commencé à travailler sur Cookie Cutter en 2018. Il s'est inspiré d'un personnage rejeté d'un précédent projet Unity : Cherry, un Android qui parle dur. « J'étais amoureux de son design, alors j'ai commencé à créer des animations pour elle », dit-il. Stefano avait une Vision claire pour le gameplay incroyable de Cookie Cutter à Metroidvania, mais avait besoin du soutien d'un développeur pour y arriver. Après avoir obtenu un financement, il a engagé le programmeur Francesco Bizzini et une liste d'artistes et de concepteurs pour collaborer sur le projet.

Résultats :

• Vendu à 60 000 exemplaires et généré 1 200 000 USD dans le mois suivant le lancement

• Gérez facilement plus de 2 000 feuilles de sprites et plus de 50 atlas de sprites

• Illuminé le jeu avec plus de 10 000 éclairages 2D

• Mise à niveau réussie vers le LTS Unity 2022 à mi-parcours du projet

Emballage du contenu

Les visuels dessinés à la main de Cookie Cutter sont un argument de vente majeur. Stefano savait qu'ils seraient compliqués à créer, mais cet effort supplémentaire en vaudrait la peine. « Les bonbons pour les yeux sont ce qui nous fait tomber amoureux des jeux vidéo », dit-il. « Chez Subcult Joint, nous admirons les grands noms du Studio Ghibli et de Disney. Nous ne sommes pas à ce niveau, mais avec Cookie Cutter, nous voulions développer nos compétences en animation et créer un jeu vraiment cool. »

Ce projet est extrêmement ambitieux pour une petite équipe. La majorité des ressources artistiques (plus de 1 000 arrière-plans, sprites, animations et effets de particules) sont visuellement complexes et soigneusement créées à l'aide des techniques d'animation traditionnelles. Entre le personnage du joueur (Cherry) et les PNJ (27 types d'ennemis standard et cinq boss gigantesques), chaque personnage de Cookie Cutter a 20 à 40 animations. Chacune de ces animations individuelles peut prendre de huit à 48 heures. Différents artistes se sont appuyés sur quelques DCC différents, mais Stefano a créé la plupart des ressources dans Adobe Photoshop.

Une fois une illustration terminée, Stefano utilisait le PSD Importer pour la convertir en texture 8K avant de l'optimiser dans l'éditeur pour éviter les problèmes de débordement de mémoire vidéo. L'utilisation intelligente des paramètres d'importation des textures a permis de réduire la taille des textures par plateforme et, en appliquant les bonnes pratiques, comme la puissance de deux, d'obtenir d'autres optimisations.

« Après avoir terminé mon travail dans Photoshop, j'ai créé manuellement mes feuilles de sprites en plaçant les cellules d'animation une par une dans un nouveau fichier, toujours dans un multiple de 512 x 512, en suivant la règle de la puissance de deux dans Unity », explique Stefano. « À partir de là, l'éditeur de feuilles de sprites de Unity a permis de découper la feuille ou de réaliser d'autres astuces en déplaçant le pivot ou le pixel de la feuille par image. » Ces flux de production garantissent que les visuels de Cookie Cutter sont optimisés sur toutes les plateformes avec un minimum de problèmes de performances.

À la fin du projet, Subcult Joint avait rassemblé plus de 2 000 feuilles de sprites dans plus de 50 atlas sprites, en les classant par personnage. « Les atlas Sprite ont permis d'exporter facilement le jeu vers les différentes consoles cibles tout en conservant une fréquence d'image solide », explique Stefano. « Nous nous concentrons sur l'explosion de 60 FPS pour que l'expérience de jeu et les performances générales restent fluides comme du beurre. Cela a vraiment optimisé l'utilisation de la mémoire de manière incroyable et réduit les temps de chargement. »

Personnalisation de l'expérience de jeu

Stefano voulait éviter les pièges courants dans lesquels il a vu tomber d'autres jeux axés sur l'animation. « Les jeux avec beaucoup d'animations peuvent être maladroits. Parfois, l'animateur veut faire preuve de flexibilité, et il finit par punir l'expérience de jeu », explique-t-il. « Avec Cookie Cutter, nous étions tout aussi attentifs à l'expérience de jeu, pour que le jeu soit aussi fluide que les animations quand vous avez la manette entre les mains. »

Dans cette optique, il avait besoin d'un moyen de travailler dans l'Éditeur et d'ajuster rapidement l'expérience de jeu, sans risquer de casser le projet. Ceci a conduit à ce que Francesco appelle l'un des plus grands obstacles techniques du côté de la programmation : Création d'un système flexible dans Unity qui fonctionne avec une mauvaise intervention du code.

« Mon objectif était de donner aux concepteurs un moyen de personnaliser n'importe quel aspect du jeu directement depuis l'éditeur », explique-t-il. Grâce à l'extensibilité intégrée de Unity, Francesco a pu ajouter ses propres personnalisations pour combler le fossé de connaissances qui le sépare des artistes moins techniques de l"équipe.

Pour permettre une expérience de jeu percutante et des combos d'action brutaux, Francesco a implémenté l'outil visuel tiers ActionGraph pour concevoir et structurer de façon modulaire des machines à états finis dans Unity. Lorsque les sprites d'une animation sont chargés, ActionGraph permet d'ajouter une logique d'expérience de jeu à chaque image, ce qui permet aux artistes d'ajuster des paramètres tels que des collisionneurs ou des chiffres d'endommagement à la volée. Par exemple, Stefano peut utiliser ActionGraph pour ajouter une hitbox à une attaque et la configurer pour qu'elle soit active sur des images spécifiques, activer et désactiver des compteurs de saut, déclencher la génération de ressources de combat et les dépenses, etc., sans impliquer un programmeur.

Francesco a également programmé un certain nombre de personnalisations de son propre éditeur pour permettre à une plus grande partie de l'équipe centrée sur l'artiste de Subcult Joint de contribuer au projet. Basé sur le système de visualisation xNodes, UpWire permet aux artistes de gérer facilement les entrées humaines et IA, de modifier des collisionneurs, d'ajouter des effets visuels à des nœuds d'animation spécifiques, et plus encore.

« Je l'ai conçu pour en faire un véritable éditeur de combat », explique-t-il. « Il gère toutes les variables du jeu, de sorte que des mouvements spécifiques ne peuvent être exécutés que si le joueur a déverrouillé cette capacité, cette arme ou cette amélioration, et qu'il est dans la bonne position - attaques aériennes versus attaques au sol, par exemple. » UpWire gère également des paramètres tels que la force physique, la translation de position et la rotation du corps, afin que les artistes puissent expérimenter les mécanismes de combat plus facilement.

Timeline EZ Events, un autre outil personnalisé de Francesco, permet aux concepteurs d'envoyer des messages et d'appeler des fonctions directement dans l'Éditeur sans presque aucune limite de paramètres, y compris les objets scène, et d'ajouter plusieurs fonctionnalités à un GameObject. Par exemple, l'équipe peut créer un levier qui déverrouille une porte lorsqu'elle est tirée tout en cachant un marqueur de « porte verrouillée » sur la carte et la minicarte.

Francesco a conçu EzMiniMapPro pour aider les concepteurs à travailler sur la minicarte de Cookie Cutter, élément crucial pour obtenir de bons résultats dans tout jeu axé sur l'exploration. « Cette solution est utilisée pour créer des cartes pour les zones de jeu et offre des personnalisations et des optimisations utiles pour la génération d'images », explique Francesco. « Lors de l'exécution, il prend en charge les marqueurs animés en superposition et les masques d'exploration automatiques basés sur ce que la caméra voit. Le masque peut être écrit et restauré via SaveGame. »

La création et l'implémentation de ces personnalisations ont demandé beaucoup de travail, mais elles ont libéré la liberté créative au sein de l'équipe, offrant à tous les membres de Subcult Joint un siège à la table sur la conception, les mécanismes et l'équilibre de l'expérience de jeu de Cookie Cutter.

Concevoir le monde

Le monde immense de Cookie Cutter, la Megastructure, propose neuf zones à explorer. Une fois les illustrations conceptuelles d'une zone finalisées, le concepteur de niveaux de Subcult Joint, Gabriel Raymond Roy, mettait chaque zone en boîte grise pour créer un labyrinthe à découvrir.

« Un bon level designer sait créer des chemins primaires et secondaires divertissants à explorer et à retracer », déclare Stefano. « Chaque impasse devrait avoir une sorte de récompense pour le joueur, et chaque zone ouverte devrait avoir des rencontres avec des ennemis pour que les joueurs puissent cultiver du matériel. »

Une fois une zone grise, Stefano et les concepteurs ont habillé la scène avec des détails environnementaux, en disposant les sprites dessinés à la main en couches sur quatre points de l'axe Z. Cookie Cutter utilise une vue en perspective sans parallaxe codée, de sorte que lorsque le joueur se déplace, il peut voir les éléments « mal placés » en perspective. Cherry se place sur le point « par défaut » aux côtés des GameObjects interactifs comme les ennemis, les objets et les plateformes, tandis que les éléments non interactifs de premier plan, d'arrière-plan et « éloignés » ajoutent une profondeur simulée à la vue de la scène.

Éclairage de la mégastructure

« Nous avons essayé de donner à chaque domaine une personnalité unique, mais avec le cadre cyberpunk et notre amour des cintres et des usines métalliques, je ne sais pas trop à quel point nous avons réussi », plaisante Stefano.

Subcult Joint a utilisé massivement Spot et Freeform 2D Lights dans l'URP pour donner à chaque zone sa propre saveur visuelle. Le monde de Cookie Cutter est illuminé par plus de 10 000 d'entre eux. « Chaque lumière du jeu illumine nos sprites en temps réel, créant une sensation de densité et de cohésion entre les personnages, les animations et les environnements », explique Stefano. « Dans les endroits sombres, les personnages sont ombragés et baignés de lumière lorsqu'ils sont exposés aux lucarnes saturées et contaminées des zones extérieures. J'aime tellement ces détails ! »

Subcult Joint a utilisé les éclairages 2D Unity prêts à l'emploi, sans gestion particulière, en les appliquant sur les mêmes couches de l'axe Z que les sprites environnementaux. « Les éclairages par défaut 2D éclairent la zone de votre expérience de jeu et c'est formidable de pouvoir décider quelles couches ils peuvent affecter » explique Stefano. « Nous voulions que la couche par défaut soit toujours claire pour le joueur, afin qu'il comprenne où il peut marcher et où il ne peut pas marcher. Puis nous avons ajouté des lumières à l'arrière-plan, au premier plan et aux couches éloignées. »

L'éclairage 2D accrocheur de Cookie Cutter joue un rôle important dans la conception globale du jeu. En tant que Metroidvania, c'est un titre axé sur l'exploration. L'éclairage est utilisé pour fournir des repères environnementaux au joueur. « L'éclairage raconte une histoire : il indique au joueur où aller, le conduisant dans le sentier principal ou cachant des sentiers secondaires facultatifs » explique Stefano.

Les lumières scintillantes sont utilisées pour attirer l'œil du joueur. Stefano explique comment il a créé cet effet : « Ce qui est magnifique avec les 2D Lights, c'est qu'on peut les animer », dit-il. « La création de lumières scintillantes est très simple : Vous sélectionnez l'éclairage, allez dans la fenêtre Animation, créez une autre animation, jouez avec l'intensité 0, 9, 0, 9 et copiez cette animation sur d'autres éclairages si vous voulez créer le même effet ailleurs. »

Libérer les avantages bonus grâce à une mise à niveau de dernière minute de la version

Vers la fin du développement de Cookie Cutter, les problèmes de débordement de mémoire vidéo sont devenus un obstacle pour la compilation PlayStation 5. Subcult Joint s'est rendu compte qu'il devait mettre à niveau Unity pour résoudre le problème.

Faire cela si près du lancement n"était pas idéal, mais ne pas toucher le vaste public de PlayStation n"était pas une option: ils se sont donc retroussés les manches et se sont mis au travail pour déplacer le projet vers Unity 2022 LTS, la version la plus récente à l"époque. Cela leur a donné accès à de nouveaux outils de profilage et de débogage tels que le profileur de mémoire mis à jour.

« La nouvelle fonctionnalité de comparaison d'instantanés du Profileur de mémoire nous a aidés à identifier et à résoudre les problèmes persistants de débordement de mémoire vidéo », déclare Francesco. « Le LTS 2022 est également plus rapide pour importer des textures, et la mise à niveau a rendu notre jeu beaucoup plus stable au final. »

Il s'est avéré que le passage à la dernière version Unity leur a permis d'ajouter une dernière couche de peaufinage visuel à Cookie Cutter, ce qui n'aurait pas été possible autrement, puisqu'ils avaient désormais accès au système 2D Lights prêt pour la production. Il s'agissait de revoir et de corriger individuellement les milliers d'éclairages 2D expérimentaux du jeu basés sur les nouveaux paramètres. Un processus qui, heureusement, a été rendu plus rapide grâce aux nouvelles fonctionnalités.

Grâce aux Atlas Sprite mis à jour du LTS 2022, Subcult Joint pouvait déployer des centaines d'animations dessinées à la main sur différentes plateformes cibles plus facilement et plus efficacement. Et la version intégrale de l'URP 2D Lights a permis d'ajouter encore plus de profondeur et d'ambiance aux environnements.

« Nous avons utilisé le nouveau 2D Light Explorer pour sélectionner chaque lumière et effectuer des ajustements manuellement », explique Stefano. « Nous utilisions principalement les éclairages Spot et Freeform, et le LTS 2022 avait en fait une fonctionnalité de réduction mise à jour pour les éclairages Freeform qui était beaucoup plus esthétique que l'ancienne. C'était beaucoup de travail, mais nous avons pu résoudre les problèmes périphériques et améliorer encore le jeu. »

Le premier jeu Cookie Cutter de Subcult Joint est un exemple de la magie qui opère lorsque les artistes et les programmeurs peuvent travailler en lockstep. Cette petite équipe a créé un jeu Metroidvania visuellement ambitieux et réussi qui s'est vendu à plus de 60 000 exemplaires dès son premier mois, et elle a pu coller à sa Vision originale sans faire de compromis sur les graphismes ou l'expérience de jeu.

La mise à niveau vers la dernière version Unity a non seulement permis à Subcult Joint de résoudre les problèmes techniques qui subsistaient encore avant la sortie, mais aussi d'optimiser la portée de la plateforme de Cookie Cutter et d'élever le jeu à son plein potentiel.

Possibilités étendues avec Unity 6

Unity 6 a été conçue pour vous remettre des outils de création plus rapides et plus simples, quels que soient les types des vos joueurs. Téléchargez la dernière version Unity dans le Unity Hub