Comment PIGIAMA KASAMA a réduit de 218 Mo le jeu en ligne Kasama : L'Éveil

Kasama: L'Éveil est un jeu d'aventure épisodique, axé sur l'histoire, basé sur le web, créé par PIGIAMA KASAMA. Pour créer ce jeu pour le web, l'équipe a dû optimiser les performances sur tous les appareils tout en maintenant une haute fidélité visuelle. Voici comment ils ont donné vie à leur Vision.

Comment un studio peut-il offrir une expérience visuellement époustouflante et émotionnellement engageante sur le web ?

Après avoir passé deux ans à créer des jeux pour d'autres marques, l'équipe de PIGIAMA KASAMA était convaincue qu'un jeu original axé sur la narration trouverait un public sur le web. Tandis que Kasama: The Awakening a commencé comme un jeu de combat VR et sur ordinateur, ils ont décidé d'adapter le jeu en une aventure de puzzle épisodique.

Pour découvrir Kastania, nous avons intégré le jeu ci-dessous pour que vous puissiez en profiter sur les navigateurs de bureau. Pour mobile, veuillez consulter l'application de Spatial.

En tant que développeurs Unity de longue date, les fondateurs du studio Matteo Fanchin et Paride Stella voulaient trouver un partenaire de développement et de lancement de plateforme qui partageait des priorités similaires telles que la liberté de création, une haute fidélité visuelle, de grandes expériences pour les joueurs, et support multiplateforme.

Nous avons trouvé que Spatial est la plateforme ultime pour le contenu généré par les utilisateurs (UGC). En combinant ses capacités de simplification des processus et l'accessibilité qu'il offre aux joueurs avec la flexibilité que nous avons lors de la création avec Unity, nous avons pu repousser les limites audio, visuelles et expérientielles pour un jeu web », déclare Fanchin.

L'équipe Spatial fait écho à la valeur que l'équipe PIGIAMA KASAMA a apportée à la collaboration. Jake Steinerman, responsable des relations avec les développeurs, déclare : « Nous avons conçu la plateforme de manière à ce que les créateurs puissent avoir des expériences de très haute qualité sur le web, mobile et VR. » Quand nous avons vu les premières versions de Kasama : L'Éveil et d'autres travaux que l'équipe a réalisés, nous savions que nous devions les soutenir."

Remettre en question le statu quo

Bien que l'équipe PIGIAMA KASAMA ait de la créativité, de l'expertise et le soutien de Unity et Spatial, leur vision a apporté de nombreux défis. L'un des principaux obstacles était d'optimiser le jeu pour les performances sur différents appareils tout en maintenant une haute fidélité visuelle. « Les limitations de WebGL nous ont obligés à être innovants dans la façon dont nous avons mis en œuvre les graphismes, les mécaniques de jeu et l'expérience utilisateur globale », explique Stella.

Pour répondre à leurs attentes visuelles et de performance, ils devaient compresser la taille de la construction sans sacrifier la qualité. Ils ont sélectionné le Universal Render Pipeline (URP), Shader Graph, le système d'animation de Unity, et la compression d'animation intégrée pour y parvenir.

Les résultats

• Réduction de la mémoire de texture du jeu de 264 Mo à 140 Mo
• Réduisez le nombre de sommets de maillage de 550 000 à 351 000
• Mémoire audio réduite de 86 Mo à 9 Mo
• Réduction de la taille du sprite pour l'interface utilisateur de 45 Mo à 28 Mo
• Réduit le nombre de matériaux uniques utilisés de 75 à 57
• Amélioration des performances de 4 FPS au début à un minimum de 30 FPS sur les appareils bas de gamme
• Amassé plus de 80 000 lectures au cours des sept premières semaines suivant le lancement

Maximiser les ressources limitées

Leur approche de conception était d'être très attentifs à leurs restrictions de ressources dès le début, mais aussi d'avoir la flexibilité et la capacité d'augmenter ou de diminuer la fidélité visuelle à leur discrétion. La puissance de calcul et les limitations de mémoire se sont avérées être leurs plus grands défis, et pour maintenir les performances, ils ont dû réduire la résolution de certaines textures. « Nous avons mis la texture de la plus haute qualité là où elle était la plus visible », déclare Stella.

L'équipe a utilisé le moins de ressources possible et cette approche a affecté tout. Ils ont gardé les polygones bas et la taille des textures petite pour limiter autant que possible le nombre de matériaux. Ils ont également optimisé les UV, des coordonnées de texture bidimensionnelles qui correspondent aux informations de sommet pour une géométrie.

« Étant donné que les mouvements de la caméra sont connus et très restreints, nous avons réussi à procéder à une élimination agressive des occlusions sur toutes les géométries avant le processus de texturation afin que chaque polygone et pixel soit utilisé au maximum », déclare Fanchin. Ce processus empêche Unity d'effectuer des calculs de rendu pour les GameObjects qui sont complètement cachés à la vue.

L'animation était un autre domaine où l'équipe a réduit la taille. Ils ont utilisé le type d'animation humanoïde du système d'animation Unity, ainsi que le système de réaffectation d'animation Mecanim. De plus, le processus de compression d'animation intégré de Unity les a aidés à optimiser les performances en réduisant le poids global des animations dans le projet. C'était particulièrement utile pour réduire les animations de capture de mouvement pour la performance faciale du personnage, qui ont tendance à être trop détaillées et lourdes.

Trouver leur lumière

Un bon éclairage fait toute la différence et est difficile à réaliser dans un jeu web," dit Stella, et l'équipe voulait s'assurer que la qualité de l'éclairage correspondait au reste de la fidélité du jeu. L'éclairage était également essentiel pour les mécaniques de jeu. L'équipe l'a utilisé pour créer de la tension, guider le mouvement des joueurs et mettre en évidence des zones ou des objets importants dans le jeu. Les effets dynamiques ont souligné les moments clés et les transitions dans l'histoire.

Nous voulions utiliser l'éclairage pré-calculé autant que possible. C'est une façon de donner la perception d'un éclairage de haute qualité sur des plateformes qui n'offrent généralement pas ce degré de fidélité », déclare Fanchin.

L'un des défis les plus complexes de l'équipe était de faire la transition de l'éclairage dans l'environnement sans chargement de scène et de créer des changements d'éclairage dynamiques lorsque les lumières sont allumées. Ils ont utilisé un shader personnalisé qui manipulait les lightmaps en temps réel pour tout rendre plat et donner l'illusion d'une lumière dynamique. Stella explique que, « pour y parvenir, il est essentiel de concevoir le jeu et l'environnement comme un processus global plutôt que de les séparer. » Chaque élément doit servir l'autre."

Ils ont utilisé Shader Graph pour développer le shader personnalisé, ce qui a été particulièrement utile pendant ce que l'équipe appelle "la séquence Cauchemar." Il couvre la carte de boue noire tout en neutralisant simultanément l'éclairage, rendant l'environnement en noir et blanc.

« Lorsque le joueur allume la lumière, l'ombrage inverse cet effet, créant l'illusion que la lumière est activée et nettoyant la substance noire de la zone illuminée », déclare Fanchin.

Ce shader personnalisé a également été extrêmement utile lors d'un autre chapitre, dans lequel un grand nombre de châtaignes explosent. Manipuler les châtaignes comme des Entities individuelles était impraticable, alors ils les ont regroupées en un seul maillage et ont utilisé le shader pour gérer les secousses et les explosions.

Chaque châtaigne est mappée sur la grille UV de gauche à droite, correspondant à la séquence d'explosion, les châtaignes au sommet des piles explosant en premier. Le shader sélectionne des groupes prédéfinis de châtaignes par index, tandis qu'un autre script place des explosions de système de particules aux emplacements précis où les châtaignes sont sur le point de détoner.

« Cette approche nous a permis de gérer efficacement une grande quantité de géométrie et des dynamiques complexes sans surcharge de performance, garantissant ainsi le respect des exigences de performance web », explique Stella.

En raison des limitations de taille de construction, ils ont également fait certains choix artistiques pour améliorer les performances. Ils ont choisi de travailler avec des zones sombres pour cacher des éléments. Cela les a aidés à optimiser le nombre de polygones et de maillages skinnés. « Nous avons ajouté beaucoup plus de détails aux zones plus claires », déclare Fanchin.

Gestion du pipeline de production audio

La conception sonore a influencé tout, du rythme du jeu à la conception des environnements et des interactions, et guide les joueurs tout en approfondissant leur connexion émotionnelle à l'histoire. L'équipe PIGIAMA KASAMA a créé et produit des bandes sonores pour correspondre à l'ambiance et au rythme de chaque épisode. Ils ont également travaillé avec des artistes de doublage et ont engagé un linguiste pour inventer une langue. Leur objectif était de créer une expérience auditive qui améliore la qualité immersive du jeu.

Chaque fois qu'une expérience ou un produit a un mauvais son, vous l'entendez. Si l'audio est bon, il est invisible », déclare Stella.

Ils ont exécuté un processus technique rigoureux en trois étapes pour la production audio avant de l'intégrer dans le jeu.

Étape 1: Unification et mixage/mastering des clips audio

La première étape consistait à unifier plusieurs clips audio, en particulier pour les sons en boucle tels que les paysages sonores ambiants et la bande sonore du jeu. Ce processus s'est étendu à certains effets sonores ponctuels, qui ont été superposés et consolidés en pistes uniques. Ces modifications ont été intégrées lors de la phase de mixage et de mastering, garantissant que les clips unifiés maintenaient une cohérence dans les dynamiques audio et l'équilibre global à travers différents environnements de lecture. Cette étape était cruciale pour minimiser les incohérences et garantir des expériences auditives cohérentes, en particulier pour les sequences en boucle qui devaient se fondre harmonieusement dans le jeu.

Étape 2: Conversion de format vers des normes de compression optimisées

Au cours de la deuxième étape, les fichiers audio haute fidélité d'origine, généralement aux formats AIFF et FLAC, ont été convertis au format OGG. T un taux d'échantillonnage de 48 kHz et une profondeur de bits de 16 bits, respectant les normes de l'industrie pour maintenir un équilibre entre la qualité audio et l'efficacité des performances. Le codec de compression Vorbis a été utilisé, ce qui a permis une réduction significative de la taille des fichiers sans compromettre la qualité audio perceptuelle.

Étape 3: Unity implémentation et ajustement

La dernière étape a consisté à intégrer les fichiers audio traités dans Unity. Cela comprenait la sélection minutieuse de méthodes de chargement appropriées (par exemple, le streaming pour les pistes plus longues ou le préchargement pour les effets sonores critiques) afin d'optimiser les performances pendant le jeu. L'équipe a affiné les paramètres de compression Vorbis pour trouver un équilibre entre la fidélité audio et l'utilisation des ressources.

De plus, des décisions prudentes ont été prises concernant le traitement de certains fichiers audio en Mono ou en stéréo, en fonction de leur rôle dans la conception sonore et des effets de spatialisation souhaités dans le jeu.

Le processus d'optimisation rigoureux mis en œuvre dans la phase finale a entraîné des gains significatifs en termes de stockage et de performance. En tirant parti du format OGG et en ajustant les paramètres de compression, les ressources audio ont été compressées à environ 10 Mo au total. Cela représente une réduction substantielle par rapport aux 500 Mo estimés si des fichiers AIFF non compressés avaient été utilisés, ou à l'empreinte de 100 Mo pour les équivalents MP3. Ces résultats ont non seulement minimisé la taille globale du jeu, mais ont également assuré une utilisation efficace de la mémoire et des performances audio fluides pendant le jeu.

Déploiement sur plusieurs plateformes

En s'associant avec Spatial pour une sortie web multiplateforme, l'équipe PIGIAMA KASAMA a adopté URP, le pipeline de choix de la plateforme. En tant que designer avec 15 ans d'expérience en CGI, Stella a utilisé de nombreux outils à des fins diverses et a été impressionnée par les capacités de l'URP.

URP fonctionne très bien. J'ai rapidement appris à l'utiliser pour atteindre notre objectif avec Kasama: L'Éveil. Je pense que cela a accompli à peu près tout ce à quoi j'avais pensé, donc je suis très heureux", dit-il.

La flexibilité et l'efficacité du pipeline de rendu étaient particulièrement importantes pour l'équipe lors du déploiement sur des plateformes web, car la compatibilité multiplateforme et la personnalisation les ont aidés à évoluer facilement.

Les performances peuvent être optimisées pour chaque plateforme, même sur les appareils bas de gamme, et les développeurs peuvent utiliser leurs propres shaders. Il est conçu pour bien réussir à l'avenir », explique Steinerman. « D'un point de vue de la plateforme Spatial, alors que nous commençons à prendre en charge les futures versions de Unity, nous nous attendons à ce que l'URP soit également pris en charge là-bas. »

Les serveurs de Spatial ont créé des versions individuelles et optimisé chaque plateforme. Ils ont aidé l'équipe PIGIAMA KASAMA avec leur build WebGL, et leurs builds séparés pour Android et iOS natif. Ils avaient des qualités cibles différentes pour certaines plateformes.

La profondeur de champ fonctionne assez bien sur WebGL, mais nous l'avons trouvée moins performante sur certains appareils mobiles. D'autre part, l'audio sur Android et iOS est beaucoup plus performant », déclare Fanchin. « Nous aurions pu utiliser des filtres et un égaliseur, un outil audio qui permet aux développeurs d'ajuster le niveau de volume de fréquences spécifiques au sein d'une source audio, mieux sur Android, mais cela n'aurait pas fonctionné sur WebGL. »

Ils ont ajusté certains éléments pour être conformes à chaque plateforme, tandis que d'autres ont été adaptés spécifiquement pour la plateforme. Pour WebGL, nous avons utilisé une texture de plus haute résolution car l'écran est généralement plus grand, et incorporé des textures de plus basse résolution sur les écrans mobiles plus petits. Dans l'ensemble, la sortie multiplateforme s'est déroulée sans accroc", conclut Stella.

Inclure les joueurs dans le voyage

Après avoir décidé de créer un jeu web, l'équipe PIGIAMA KASAMA devait trouver un moyen de développer du contenu de haute qualité en portions gérables. Ils ont choisi un système de sortie épisodique qui leur a permis de recueillir les commentaires des joueurs après chaque épisode, qu'ils pouvaient intégrer dans les futurs épisodes. Cela les a également aidés à tester et à itérer très rapidement.

« Nous avons établi une feuille de route flexible qui nous permet d'ajuster le processus de développement en fonction des retours des joueurs et des nouvelles technologies », explique Stella. Chaque épisode est planifié avec l'avenir à l'esprit, garantissant que la narration et les mécaniques de jeu peuvent évoluer naturellement au fil du temps.

Choisir ce calendrier de sortie a également apporté plusieurs défis. L'équipe doit garantir la cohérence entre les épisodes, tant en termes de qualité que de narration. Gérer les attentes des joueurs est également un obstacle potentiel, car les sorties épisodiques nécessitent un équilibre délicat entre fournir suffisamment de contenu pour satisfaire les joueurs tout en les gardant engagés pour le prochain épisode.

Dans l'ensemble, l'équipe a beaucoup appris et est impatiente de mettre en pratique ces connaissances dans le deuxième épisode. « Nous sommes fiers de continuer à montrer la qualité de l'expérience qu'un développeur peut créer pour WebGL », déclare Fanchin. « En tant que petit studio, nous sommes ravis de voir ce que nous pouvons accomplir avec les avancées technologiques telles que Unity 6 et WebGPU. »

Possibilités élargies 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 Unity 6 dans le Unity Hub.