Comment Coatsink a réduit le temps de chargement web pour Ready, Set, Cook! de 25%

Prêt, partez, cuisinez ! est un jeu de gestion de restaurant coopératif pour Messenger développé par Coatsink, le studio derrière Jurassic World Aftermath et Transformers : Champs de bataille. Voici ce qu'ils ont appris lors de leur première incursion dans le développement web mobile.

Comment un studio peut-il amener un jeu destiné à Messenger Rooms du bureau au mobile ?

Prêt, Partez, Cuisinez ! a été initialement conçu comme un jeu web de bureau, où les joueurs rejoignent des appels vidéo depuis leurs PC ou ordinateurs portables. Alors que Coatsink orientait le développement vers le mobile, ils ont collaboré avec Meta et Unity, qui avaient un partenariat stratégique existant pour faire fonctionner le runtime sur mobile. Ceci est l'une des principales mises à jour de Unity Web dans la prochaine version Unity 6, qui inclut également un support supplémentaire pour WebAssembly 2023, un accès anticipé à WebGPU et l'ajout de la chaîne d'outils Emscripten 3.1.38. L'année prochaine, les développeurs de jeux pourront profiter de l'écosystème de jeu massif de Meta avec le support de la plateforme Instant Games de Unity.

Tester une nouvelle plateforme

Ma chose préférée à propos de Ready, Set, Cook! est le temps minimal de clic pour jouer. Vous êtes en appel vidéo sur Messenger et, d'une simple pression sur un bouton, tout le monde est dans le lobby puis directement dans le jeu. Il n'y a pas de configuration », déclare Ross Furmidge, responsable de la programmation chez Coatsink.

Comme c'était la première fois que Coatsink développait un jeu web, l'objectif était d'essayer de tirer le meilleur parti du flux de travail de la plateforme. Ils l'ont traité comme un projet de R&D pour analyser la viabilité de la plateforme et leur force dans le développement web mobile.

L'équipe s'est principalement appuyée sur des fonctionnalités existantes. Ils ont pris des blocs de construction prêts à l'emploi, y compris Prefabs qui touchaient à l'interface utilisateur, aux gestionnaires de jeu, au réseau, aux interactifs, au lobby et aux instructions de jeu, et ont ajouté des fonctionnalités raffinées pour mieux indiquer ce que l'utilisateur devait faire. Ils ont également intégré de nouvelles fonctionnalités telles que la pause, la randomisation des cosmétiques, les ajustements du lobby et la messagerie, les changements de HUD, la prise en charge des ratios d'aspect flexibles et l'équilibrage de la difficulté, entre autres.

« Nous avons construit et équilibré le jeu autour de l'aspect Multiplayer et du plaisir avec Friends lors d'un appel vidéo », explique Furmidge. « Lorsque nous nous sommes plongés dans le projet, nous avons rencontré des défis communs pour les jeux passant du bureau au mobile. » Nous devions nous concentrer sur l'interface utilisateur et, en particulier pour le web, nous devions prendre en compte les temps de téléchargement sur les données mobiles car il n'est pas garanti qu'un joueur soit connecté au Wi-Fi.

Les résultats

• Réduit le temps de chargement du jeu de 25%
• Diminué la taille du fichier WebAssembly (Wasm) de 2,5%
• Réduction des temps de transfert et de déballage du jeu de 10%

Créer une orientation d'interface utilisateur dynamique

Alors que l'équipe de Coatsink commençait le projet, elle a rapidement réalisé qu'il y avait beaucoup de choses à prendre en compte pour l'interface utilisateur. Au début, ils se sont préoccupés de s'assurer que les joueurs et les utilisateurs de vidéoconférence non-joueurs puissent participer. Ils devaient affiner la fonctionnalité de spectateur existante qui maintient constamment les joueurs en ligne tout en offrant aux autres utilisateurs une expérience de visionnage positive.

« L'expérience de spectateur a toujours été une priorité pour nous lors de la conception d'autres aspects du jeu », explique Kamil Bazydlo, un jeune designer chez Coatsink. « Ce n'est pas une fonctionnalité courante dans tous les genres de jeux sur d'autres plateformes, mais comme les joueurs sont en appel vidéo, il était important de souligner la participation inclusive des utilisateurs tout au long du jeu. »

Ils ont également commencé à examiner l'orientation de l'écran dès le début. Étant donné que le jeu a été initialement créé pour le bureau, il a été conçu avec une orientation paysage. Lorsqu'ils sont passés au mobile, ils ont dû prendre en charge à la fois les perspectives paysage et portrait. Dans Messenger, les joueurs tiennent leur écran comme un téléphone puisqu'ils sont en appel vidéo, donc si le téléphone est tourné, la caméra se met de côté, ce qui n'est pas idéal. « C'était une considération importante lorsque nous avons conçu les environnements pour soutenir cela », déclare Furmidge.

Repenser les commandes de jeu

Prêt, Partez, Cuisinez! peut être joué sur une grande variété d'appareils avec différentes tailles d'écran et rapports d'aspect, mais la fenêtre du jeu ne s'étend pas sur tout l'écran car elle alloue de l'espace pour des éléments comme le flux vidéo de Meta et les contrôles de la plateforme. Ces éléments ne font pas partie de l'application de jeu elle-même, ils n'apparaissent donc pas dans l'éditeur Unity lorsque les développeurs travaillent sur le jeu.

« Nous devions en tenir compte lors du placement de tout élément d'interface utilisateur à l'écran », déclare Bazydlo. Nous avons obtenu la fourchette approximative de l'espace d'écran occupé par ces éléments de plateforme et avons travaillé avec notre équipe QA pour identifier quel serait le ratio d'aspect le plus étroit à cibler.

Sur mobile, les commandes spécifiques à l'appareil se trouvent en bas de l'écran. Étant donné que le jeu a été conçu pour une orientation paysage, l'équipe a utilisé la partie inférieure de l'écran pour afficher certains éléments de l'interface utilisateur plutôt que pour des commandes de jeu critiques.

Lorsque le titre a été lancé en douceur aux États-Unis, l'équipe a intégré des Analytics directement dans l'application, ce qui était essentiel pour identifier quand les joueurs quittaient le jeu. Au début, ils ont remarqué que les utilisateurs abandonnaient avant même que le jeu ne se charge.

« Nous avons vu que lorsque le menu était un peu plus chargé et que son flux vers le jeu était trop long pour les utilisateurs dans le lobby, ils se désengageaient rapidement. » Dès qu'ils sont entrés dans le jeu, la majorité des joueurs ont continué à y jouer dans son intégralité », déclare Furmidge. « C'était des données essentielles pour nous, et les Analytics ont été un facteur important dans beaucoup de nos prises de décision. »

Optimisation du temps de chargement

Les analytics de Coatsink ont montré que si la taille des fichiers du jeu était trop grande et prenait trop de temps à charger, les utilisateurs abandonneraient avant d'atteindre le menu principal ou le gameplay.

Le développeur de Coatsink, Andrei M., s'est concentré sur la réduction de la taille du fichier en utilisant les options à l'intérieur des Unity Build Settings. Par exemple, il a réglé le paramètre d'optimisation du code sur la taille du disque avec LTO, utilisé le format de compression Brotli, réglé la génération de code IL2CPP pour des constructions plus rapides (plus petites), mis le niveau de stripping géré à élevé, et plus encore. Avec ces optimisations pour le web, l'équipe a pu réduire considérablement le temps de chargement.

Ils ont ensuite utilisé l'outil WebAssembly (Wasm) de Unity, qui supprime les parties inutilisées du moteur Unity et génère un fichier .wasm optimisé. En réduisant la taille de ce fichier, il y avait moins à compresser, transférer et décompresser sur l'appareil au moment de l'exécution. « De cette façon, l'utilisateur entre directement dans le jeu une fois qu'il a terminé de télécharger les informations », explique Furmidge.

Ces pratiques d'optimisation de jeu ont conduit à une diminution de 4 Mo, ce qui correspond à une réduction globale de 2,5 % sur le fichier Wasm. Cela s'est traduit par une économie de 10 % sur les temps de transfert et de déballage. Bien que 4 Mo puisse sembler petit, dans le grand schéma des choses, cela a eu un grand impact pour un jeu fonctionnant sur les navigateurs mobiles.

Réduire la taille du fichier

Pour réduire la taille du fichier, l'équipe de Coatsink a utilisé AssetBundles, un fichier d'archive qui contient des ressources non codées spécifiques à la plateforme. Ils les ont hébergés sur un serveur externe, puis les ont téléchargés lorsque la construction s'est exécutée pour aider les utilisateurs à entrer dans le lobby du jeu aussi rapidement que possible.

Ils ont également utilisé le Addressable Asset System pour charger des ressources à la demande. Cela les a aidés à diviser les packages en groupes nécessaires pour différentes parties du jeu, et a grandement contribué à la réduction de 25 % du temps de chargement.

« De cette façon, nous avons le minimum d'actifs pour les halls afin d'aider les joueurs à entrer tôt, le minimum pour chaque niveau, et certains packages communs avec des actifs communs pour différents niveaux », explique Andrei M. L'objectif est d'avoir le moins de fichiers à télécharger possible, car HTTP/2 n'est pas partout, et nous voulons le moins d'éléments non requis à l'intérieur possible.

L'équipe a créé un flux de travail qui les a aidés à détecter si un utilisateur était sur mobile ou sur ordinateur de bureau lorsqu'il lançait le jeu. Dans un modèle web, lors d'un chargement, ils pouvaient déterminer si l'appareil était mobile et, le cas échéant, changeaient les répertoires de données et d'actifs pour utiliser des actifs optimisés pour la plateforme.

Nous avons créé notre propre système de double construction, qui a produit deux versions qui n'étaient pas complètement différentes. Il fait référence à différents atlas et modifie à la fois le type de compression et la taille. Ce sont deux vues différentes des actifs basées sur la même base de code," déclare Andrei M.

Répondre aux défis uniques de test et de débogage

Lorsqu'il s'agissait de tester et de déboguer le jeu, l'équipe a rencontré quelques difficultés en raison de la circonstance unique de faire fonctionner le jeu à l'intérieur de l'application Messenger plutôt que dans un navigateur web traditionnel. Bien qu'ils aient eu des versions qu'ils pouvaient exécuter dans les navigateurs en utilisant des lecteurs fictifs, ils ont tout de même dû approfondir pour les bugs qui n'apparaissaient qu'à l'intérieur de Messenger.

« Pour ces bugs, nous avons créé un système qui télécharge les journaux sur nos serveurs AWS dans les versions de développement, que nous pouvions ensuite lire », explique Furmidge.

L'équipe a également utilisé des outils de développement de navigateurs web pour détecter les erreurs dans la console et suivre les appels API. En tant que programmeur, c'était essentiel pour Furmidge.

« Dans la console du navigateur, vous pouvez taper les commandes et essayer de les exécuter manuellement », dit-il. « Étant donné que nous avions une bibliothèque JavaScript externe que nous avons construite pour faire le lien entre JavaScript et Unity, un plug-in natif, nous pouvions y accéder lorsque nécessaire. » Cela a été utilisé pour envelopper le SDK JavaScript de Meta afin de pouvoir communiquer avec leur serveur multijoueur node, une fonctionnalité que Unity travaille à publier sous forme de package dans de futures versions.

Pour aider à accélérer le développement, Andrei M. a également créé son propre wrapper local pour imiter les appels API de Meta dont il avait besoin. Il explique : « Je me suis concentré sur les appels API qui traitaient de la configuration du serveur local, des réponses programmables et de la latence. »

Devenir une extension naturelle de la plateforme

L'équipe de Coatsink voulait que l'expérience Ready, Set, Cook! soit fluide pour les utilisateurs de Messenger. De permettre aux joueurs de rejoindre rapidement des sessions de jeu à des temps de chargement courts, leur objectif ultime était d'agir comme une extension organique de la plateforme.

Une partie de cela consiste à offrir un gameplay intuitif où les joueurs peuvent progresser sans interruption, jouer sur plusieurs appareils et encourager leurs Friends depuis la ligne de touche. Pour ce faire, l'équipe a intégré des conseils défilants sur les fonctionnalités du jeu pendant le chargement, des animations pratiques sur la façon de jouer et des éléments interactifs. Ces fonctionnalités aident les joueurs à trouver le plaisir avec Friends tout en gérant le chaos dans la cuisine.

« Nous voulions naturellement nous adresser aux personnes qui utilisaient déjà Messenger et enrichir leurs expériences d'appels vidéo », déclare Nick Taylor, un producteur senior chez Coatsink. « Travailler avec Meta et Unity a été vraiment collaboratif et nous a donné l'opportunité de le faire en abondance. »

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.