5 fondamentaux pour créer des jeux web

Imaginez offrir aux joueurs une expérience de jeu rapide et accessible sans barrières telles que les téléchargements de marché mobile ou les inscriptions de compte. La capacité de rencontrer des joueurs partout via des navigateurs ou intégrée dans des applications natives via une vue web est à portée de main, et les possibilités avec jeux en ligne sont infinies.

Récemment, nous avons constaté une augmentation de l'engagement des joueurs sur les plateformes web, en particulier mobiles, et la tendance ne montre aucun signe de ralentissement. En 2023, le marché mondial des jeux de navigateur a généré environ 15,03 milliards de dollars américains de revenus. Malgré la croissance des genres de jeux sur console et mobile, en 2028, le segment devrait atteindre 22,33 milliards de dollars américains de revenus annuels.

Ce livre électronique complet aidera à la fois les créateurs en herbe et les développeurs expérimentés à explorer et à comprendre cinq fondamentaux pour créer des jeux web performants en utilisant Unity Web. Il comprend un aperçu des coulisses de la façon dont des titres populaires comme Prêt, partez, cuisinez !, Kasama : L'Éveil, SquadBlast et Projet Prismatic ont pris vie sur le web.

Il couvre les informations suivantes :

1. Prioriser la planification et le prototypage

2. Construire une interface utilisateur dynamique

3. Créer une expérience audiovisuelle cohérente

4. Optimiser. Optimiser. Optimiser.

5. Adoptez plusieurs plateformes web

1. Prioriser la planification et le prototypage

Un avantage clé de la plateforme web est la rapidité avec laquelle vous pouvez partager votre jeu avec des joueurs du monde entier. Cependant, pour garantir une excellente expérience, votre jeu doit être construit sur une base de conception solide.

Esquissant une vision

Avoir une vision claire aide à guider une équipe tout au long du processus de développement. Stratton Studios voulait repousser les limites de ce qui pouvait être réalisé dans un jeu basé sur un navigateur, tant du point de vue des performances que de la fidélité visuelle. Leur objectif était de fournir une expérience de joueur de premier ordre rivalisant avec les plateformes traditionnelles dans un environnement web.

« Cette vision était l'ancre qui nous a maintenus alignés pendant le prototypage et l'itération, et nous a aidés à faire des choix cohérents et réfléchis tout au long du développement, » déclare Josh Loveridge, le directeur général de Stratton Studios.

La première étape de la création du jeu était de s'assurer qu'ils pouvaient atteindre l'environnement vibrant qu'ils avaient imaginé tout en maintenant de bonnes performances, surtout compte tenu des limitations du matériel de milieu de gamme qu'ils visaient. Cela a fourni une base technique solide pour le reste du développement du jeu.

« Nous avons commencé par construire une scène de test avec une grande distance de rendu, ce qui nous a permis d'évaluer si nous pouvions rendre le feuillage dense, le terrain varié et les détails complexes qui étaient cruciaux pour l'esthétique du jeu », déclare Loveridge. En tirant parti de la nouvelle API graphique WebGPU, nous avons testé la scène pour nous assurer qu'elle non seulement avait l'apparence luxuriante que nous souhaitions, mais qu'elle fonctionnait également bien sur différents appareils.

Tester depuis le début

Au départ, l'équipe ULTRAHORSE s'est concentrée sur le développement de ses principales mécaniques de jeu. Ils voulaient peaufiner l'aspect tireur multijoueur en défilement horizontal pour s'assurer qu'il soit amusant et engageant. Ils ont commencé avec des écrans, des consoles et des PC plus grands pour obtenir la bonne sensation de base.

De là, nous sommes rapidement passés aux tests des joueurs. Même avec notre première version bêta, nous l'avons présentée aux joueurs en ligne via des services comme Antidote, et lors de premières bêta à des événements comme le WASD Expo à Londres," déclare le PDG et cofondateur Anatolijs Ropotovs. "Cela nous a permis de valider nos mécaniques de base et d'obtenir des retours immédiats sur ce qui fonctionnait et ce qui ne fonctionnait pas.

L'équipe PIGIAMA KASAMA fait écho à l'idée de prototypage rapide et de test précoce des idées. La création de Kasama : L'Éveil a commencé par définir le personnage et rédiger un plan narratif. Ils voulaient que l'histoire, le protagoniste et le gameplay se connectent profondément. Ils ont commencé par créer un environnement 3D simple dans Gravity Sketch VR, puis l'ont transféré dans Unity pour construire et tester leur mécanique de puzzle principale.

Cette approche pratique leur a permis de voir si le mécanisme fonctionnait bien avant d'y investir trop de temps. Une fois qu'ils étaient confiants dans les mécaniques et l'histoire, ils ont décidé de faire du jeu une aventure de puzzle, ce qui semblait être le choix parfait pour l'expérience qu'ils cherchaient à créer.

Nous passons par plusieurs itérations lors des tests jusqu'à ce que l'équipe se sente confiante que les interactions fonctionnent. Une fois que nous avons maîtrisé le gameplay de base, nous sommes passés à l'art conceptuel, en veillant à ce qu'il soit en accord avec l'histoire du jeu et l'ambiance générale," déclare Paride Stella, cofondateur de PIGIAMA KASAMA.

S'adapter aux obstacles

Comme c'est souvent le cas dans le développement de jeux, Stratton Studios a ajusté sa vision initiale alors qu'ils rencontraient des limitations techniques et découvraient de meilleures idées lors du prototypage.

Le perfectionnement pour garantir le meilleur résultat possible fait partie intégrante du processus créatif. Par exemple, un changement significatif que nous avons dû apporter concernait la conception des niveaux," explique Loveridge. "Au départ, nous avions imaginé des environnements plus ouverts et libres, mais au fur et à mesure de nos progrès, il est devenu clair que cette approche ne fonctionnerait pas efficacement avec le système de culling d'occlusion des tuiles hexagonales que nous étions en train de mettre en œuvre.

Pour maintenir la performance, en particulier dans un environnement basé sur le web, ils ont optimisé le processus de rendu en réduisant considérablement la topologie à l'écran. Cela les a amenés à restructurer la conception des niveaux en quadrants de tuiles hexagonales, ce qui les a aidés à mieux gérer la visibilité et le culling, puis à se concentrer sur des points de passage clairs. Ce gameplay amélioré a assuré que le jeu fonctionne sans accroc sur une large gamme d'appareils. L'ajustement était crucial pour équilibrer leur vision créative avec les exigences de performance technique.

Bien qu'une bonne planification puisse atténuer l'impact des défis qui surviennent pendant le développement, il est important de garder à l'esprit que cela ne préviendra pas entièrement les obstacles sur la route.

2. Construire une interface utilisateur dynamique

Bien que le web soit la plateforme la plus accessible pour atteindre les joueurs partout, tous les navigateurs ne sont pas créés égaux. Les variations de taille d'écran, l'orientation paysage par rapport à l'orientation portrait, et les considérations d'interface utilisateur pour l'application hébergeant votre jeu sont tous des aspects à garder à l'esprit lors de la conception de l'interface utilisateur de votre jeu.

Garder l'expérience du joueur à l'esprit

Alors que l'équipe Coatsink commençait à développer Ready, Set, Cook!, ils se sont rapidement rendu compte qu'il y avait beaucoup de choses à prendre en compte pour l'interface utilisateur. Au début, ils étaient préoccupés par le fait de s'assurer que les deux joueurs et les utilisateurs de vidéo appel non-joueurs pouvaient participer. Ils devaient affiner la fonctionnalité de spectating 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 était toujours une priorité pour nous lors de la conception d'autres aspects du jeu », explique Kamil Bazydlo, un designer junior chez Coatsink. « Ce n'est pas une fonctionnalité courante dans tous les genres de jeux sur d'autres plateformes, mais puisque 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. Puisque le jeu a été initialement créé pour ordinateur de 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 leurs écrans 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 énorme considération lorsque nous avons conçu les environnements pour soutenir cela», déclare Ross Furmidge, responsable de la programmation chez Coatsink.

Surmonter les défis de l'interface utilisateur

L'un des plus grands défis auxquels l'équipe ULTRAHORSE a été confrontée était de créer une expérience de jeu qui serait tout aussi agréable que vous utilisiez une souris et un clavier, une manette ou un écran tactile. C'était crucial pour leur vision de construire un véritable jeu multiplateforme.

Au départ, nous avons expérimenté différents styles de jeu, mais nous avons constaté que de nombreux formats de tireurs traditionnels favorisaient une méthode d'entrée par rapport aux autres. C'est en fait comme ça que nous sommes arrivés au format de jeu de tir défilant sur le côté pour SquadBlast," dit Ropotovs. Nous avons réalisé qu'un plan 2D permettait un ciblage précis avec une souris, un mouvement intuitif avec une manette et des contrôles tactiles simples et explicites sur les appareils mobiles.

Un défi inattendu est apparu alors que l'équipe passait du développement web sur PC au développement web mobile. Au départ, ils ont développé une expérience PC entièrement peaufinée, complète avec des éléments de souris survolés dans l'UX. Cela leur a permis de créer une interface riche et détaillée qui tirait parti d'écrans plus grands et d'un contrôle précis de la souris. Ils ont utilisé des infobulles, des états de survol et des structures de menu plus complexes pour transmettre des informations et des options au joueur.

Cela a conduit à des décisions difficiles concernant les informations à afficher et la manière de les présenter. L'équipe a dû rendre l'interface utilisateur plus explicite car elle ne pouvait pas compter sur les états de survol ou les infobulles complexes qui fonctionnent bien sur PC. Chaque élément devait être compréhensible d'un coup d'œil, ce qui les a forcés à affiner le langage visuel et l'iconographie.

Ajout en fonction de l'espace d'écran

L'équipe ULTRAHORSE a également rencontré des obstacles lors de la conception autour des entrées tactiles. Sur PC, ils pouvaient assumer un contrôle précis du curseur, mais sur mobile, ils devaient tenir compte de tapotements de doigt moins précis et de clics accidentels potentiels. Cela les a amenés à agrandir les cibles tactiles et à rendre l'espacement entre les éléments de l'interface utilisateur plus généreux, ce qui a encore réduit la quantité d'informations qu'ils pouvaient afficher à la fois.

Ils ont également découvert l'importance des composants d'interface utilisateur évolutifs et flexibles. Étant donné la variété des tailles et des rapports d'aspect des appareils mobiles, ils avaient besoin que leur interface utilisateur s'adapte en douceur à différentes configurations d'écran et à la résolution DPI. Cela les a amenés à développer un système d'interface utilisateur plus robuste qui pourrait s'ajuster automatiquement en fonction de l'espace d'écran disponible. L'utilisation de ce processus de simplification pour le web mobile a aidé à améliorer SquadBlast l'interface utilisateur sur toutes les plateformes.

Repenser les contrôles de jeu

Prêt, Partez, Cuisine ! peut être joué sur une grande variété d'appareils avec différentes tailles d'écran et rapports d'aspect, mais la zone d'affichage du jeu ne s'étend pas sur tout l'écran car elle réserve 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, donc ils n'apparaissent pas dans l'éditeur Unity lorsque les développeurs travaillent sur le jeu.

« Nous devions en tenir compte lors de la placement de tout élément d'interface utilisateur à l'écran, » déclare Bazydlo. Nous avons obtenu une estimation 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 rapport d'aspect le plus étroit à cibler.

Sur mobile, les contrôles spécifiques à l'appareil se trouvent en bas de l'écran. Puisque le jeu a été conçu en tenant compte de l'orientation paysage, l'équipe a utilisé la partie inférieure de l'écran pour afficher certains éléments HUD plutôt que pour des entrées de jeu critiques.

Lorsque le titre a été lancé en douceur aux États-Unis, l'équipe a intégré des analyses 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 constaté que lorsque le menu était un peu plus chargé et que son flux dans le jeu était trop long pour les utilisateurs dans le hall, ils abandonnaient rapidement. Dès qu'ils sont entrés dans le jeu, une majorité de joueurs ont continué à y jouer dans son intégralité," dit Furmidge. « C'était des données instrumentales pour nous, et les analyses ont été un facteur important dans beaucoup de nos prises de décision. »

3. Créer une expérience audiovisuelle cohérente

En tirant parti de graphismes avancés et d'un audio dynamique, les créateurs peuvent élever l'expérience de jeu, quelles que soient les optimisations requises pour les navigateurs. Bien que ce soit plus facile à dire qu'à faire et que les goulets d'étranglement courants doivent être soigneusement pris en compte, à mesure que la technologie évolue, le potentiel d'une haute fidélité visuelle et audio sur le web est plus prometteur que jamais.

Atteindre des niveaux plus élevés de complexité graphique

L'équipe de Stratton Studios cherchait à créer un jeu avec une haute fidélité visuelle et un environnement détaillé. Cela nécessitait plus de puissance graphique et de flexibilité que WebGL ne pouvait fournir.

« WebGL, bien que capable, présente certains goulets d'étranglement de performance et des limitations telles que l'absence de shaders de calcul et de skinning GPU qui nous auraient contraints à faire des compromis sur notre vision artistique », déclare Loveridge.

Ils ont décidé de passer à WebGPU pour atteindre des niveaux de complexité graphique beaucoup plus élevés, y compris des ombrages plus avancés, des effets d'éclairage et des textures complexes via des shaders de calcul. Cela leur a permis de rendre des environnements denses et luxuriants et de maintenir un taux de rafraîchissement élevé et constant, même dans un navigateur.

La performance améliorée de WebGPU, grâce à la capacité d'exploiter davantage la carte graphique des appareils, était essentielle pour offrir l'expérience riche et immersive qu'ils avaient imaginée, garantissant que les joueurs pouvaient profiter du jeu avec le niveau de détail et la fluidité généralement réservés aux jeux sur ordinateur de bureau et sur console.

Gérer la performance et WebGPU

Bien que WebGPU offrait les capacités avancées dont l'équipe de Stratton Studios avait besoin, il présentait également un ensemble unique de défis qu'ils devaient relever pour maintenir leur vision artistique. L'un des principaux défis était d'optimiser les performances sur une large gamme d'appareils. Étant donné que WebGPU est encore relativement nouveau, garantir des performances et une compatibilité constantes a nécessité un ajustement significatif, et ils ont intégré quelques dispositifs de sécurité.

Un autre défi était de gérer la complexité des shaders et des techniques de rendu qu'ils utilisaient. « Bien que WebGPU permette des techniques de rendu plus sophistiquées comme le skinning GPU et les shaders de calcul, il y a également un potentiel accru pour des goulets d'étranglement de performance s'ils ne sont pas gérés avec soin », déclare Loveridge. « Nous avons dû optimiser méticuleusement nos shaders et les rationaliser pour garantir que nous pouvions fournir des visuels de haute qualité sans provoquer de chutes de fréquence d'images ou d'autres problèmes de performance tels que des pics de collecte des ordures (GC). »

Étant donné que WebGPU est relativement nouveau, cela a parfois conduit à un comportement inattendu pour l'équipe, comme des écrans noirs aléatoires ou des pixels NaN provoquant un gonflement de l'éclat, en particulier sur des configurations matérielles moins courantes. Pour surmonter cela, ils ont investi du temps supplémentaire dans des tests rigoureux sur différents appareils et navigateurs, s'assurant que le jeu fonctionnait de manière cohérente et avait l'apparence souhaitée, quelle que soit la plateforme.

Pour relever ces défis, nous avons mis en place un système de surveillance des performances robuste qui nous a permis de détecter et de résoudre des problèmes en temps réel pendant le développement," déclare Loveridge. WebGPU nous a permis d'atteindre notre vision artistique, mais cela a nécessité une gestion minutieuse et un engagement à surmonter les obstacles liés au travail à la pointe de la technologie web.

Trouver la lumière

« Un bon éclairage fait toute la différence et est difficile à obtenir dans un jeu en ligne », déclare Stella, et l'équipe de PIGIAMA KASAMA voulait s'assurer que la qualité de l'éclairage correspondait au reste de la fidélité du jeu.

L'éclairage était également essentiel aux 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 de l'histoire. Nous voulions utiliser l'éclairage indirect autant que possible. C'est une façon de donner l'impression d'un éclairage de haute qualité sur des plateformes qui n'offrent généralement pas ce degré de fidélité," explique le cofondateur Matteo Fanchin.

L'un des défis les plus complexes de l'équipe était de passer à l'éclairage de 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 aplatir tout et donner l'illusion d'une lumière dynamique. Pour y parvenir," dit Stella, "il est essentiel de considérer la conception du jeu et la conception de l'environnement comme un processus global au lieu de les séparer. Chaque élément doit servir l'autre.

Ils ont utilisé Shader Graph pour développer le shader personnalisé, qui était particulièrement utile pendant ce que l'équipe appelle « la séquence Nightmare ». 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, le shader inverse cet effet, créant l'illusion que la lumière est activée et nettoyant la boue noire de la zone illuminée », déclare Fanchin.

En raison de leurs ressources limitées, ils ont également fait des choix artistiques pour améliorer la performance. Ils ont choisi de travailler avec des zones sombres pour cacher des éléments, ce qui 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.

Gérer le pipeline de production audio

À Kasama: L'Éveil, l'audio a influencé tout, du rythme du gameplay à la conception des environnements et des interactions. Il guide également 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 voix off 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.

L'équipe a exécuté un processus technique rigoureux en trois étapes pour la production audio avant de l'implémenter.

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

La première étape a nécessité l'unification de 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 uniques, 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 la cohérence des dynamiques audio et l'équilibre global dans différents environnements de lecture. Cette étape était cruciale pour minimiser les incohérences et garantir des expériences auditives cohésives, en particulier pour les séquences en boucle qui devaient se transitionner sans heurts dans le jeu.

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

Au deuxième stade, les fichiers audio haute fidélité originaux, généralement au format .AIFF et .FLAC, ont été convertis au format .OGG. Cette conversion a été effectuée avec un taux d'échantillonnage de 48 kHz et une profondeur de bit de 16 bits, conformément aux 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: Mise en œuvre et ajustement fin de l'unité

La dernière étape a impliqué l'intégration des fichiers audio traités dans Unity. Cela comprenait la sélection méticuleuse des 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. Les paramètres de compression Vorbis ont été ajustés pour atteindre un équilibre optimal entre la fidélité audio et l'utilisation des ressources.

De plus, des décisions prudentes ont été prises concernant le traitement des fichiers audio spécifiques 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 à la dernière étape a entraîné des gains significatifs en matière de stockage et de performance. En tirant parti du format OGG et en ajustant les paramètres de compression, les fichiers audio ont été compressés à 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 une performance audio fluide pendant le jeu.

4. Optimiser. Optimiser. Optimiser.

Pour éviter l'abandon des joueurs, vous voulez vous assurer qu'ils peuvent entrer dans votre jeu aussi rapidement que possible et avoir une excellente expérience tout au long. Les attentes sont élevées et le temps est essentiel, il est donc crucial d'optimiser, de tester et d'optimiser encore pour s'assurer que les utilisateurs restent engagés.

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 actifs non codés spécifiques à la plateforme. Ils les ont hébergés sur un serveur externe et les ont ensuite téléchargés lorsque la construction a été exécutée pour aider les utilisateurs à entrer dans le hall du jeu le plus rapidement possible.

Ils ont également utilisé le Addressable Asset System pour charger des actifs à la demande. Cela les a aidés à diviser les paquets 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 que les lobbies aident les joueurs à entrer tôt, le minimum pour chaque niveau, et quelques paquets communs avec des actifs communs pour différents niveaux », explique le développeur Andrei M. L'objectif est d'avoir le moins de fichiers à télécharger possible puisque HTTP/2 n'est pas partout, et nous voulons le moins d'actifs 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 a lancé le jeu. Dans un modèle web, lors d'un chargement, ils pouvaient déterminer si l'appareil était mobile, et, si c'était le cas, ils changeraient 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. C'est deux points de vue différents sur les actifs basés sur la même base de code," dit Andrei M.

Les studios Stratton ont pu réaliser des réductions significatives à la fois des tailles de fichiers et des temps de chargement tout au long du processus de développement. Au départ, le poids de leur jeu était d'environ 400 Mo, ce qui était beaucoup trop lourd pour une expérience basée sur le web.

« Grâce à une série d'optimisations, y compris la compression des actifs, le découpage du code et l'utilisation du système d'actifs adressables de Unity, nous avons réussi à réduire la taille de la charge utile initiale à 29 Mo », explique Loveridge.

Cette réduction drastique a non seulement considérablement réduit les temps de chargement, mais a également rendu Project Prismatic beaucoup plus accessible à un public plus large, garantissant des chargements initiaux plus rapides et une expérience de jeu globale plus fluide.

L'équipe ULTRAHORSE a réduit la taille du bundle de téléchargement initial de 200 Mo à 133 Mo au lancement. Ils l'ont ensuite divisé entre 21 Mo pour les paquets obligatoires et 112 Mo pour les paquets à la demande. « Le temps de charge du processeur est plus de trois fois plus rapide qu'au début », déclare Ropotovs. Le profilage, l'optimisation et la désactivation des bundles inutiles en faisaient une grande partie.

Optimiser les temps de chargement

Les studios Stratton se sont concentrés sur la réduction de la taille des charges utiles, l'amélioration de la livraison des actifs et l'optimisation de l'efficacité globale pour optimiser les temps de chargement. L'équipe a utilisé la compression d'actifs intégrée de Unity pour minimiser la taille des textures, de l'audio et d'autres actifs, ainsi que pour l'atlasage général des textures.

Ils ont mis en œuvre le chargement paresseux pour les ressources non essentielles, ce qui a permis au jeu de charger d'abord les composants critiques, puis de charger progressivement du contenu supplémentaire en arrière-plan selon les besoins via le framework Addressables.

Ils ont utilisé le système d'actifs adressables pour gérer et charger efficacement les actifs à la demande. Cela leur a permis de charger dynamiquement des ressources à mesure que les joueurs progressaient dans le jeu, garantissant que seules les données nécessaires étaient chargées à tout moment.

Le cadre de Cloud Content Delivery (CCD) d'Unity a aidé l'équipe à livrer des actifs depuis des serveurs géographiquement plus proches. Cela a réduit la latence et accéléré les temps de téléchargement pour les joueurs partout alors que les ressources se chargent en arrière-plan.

Ils ont veillé à ce que les ressources soient stockées localement sur l'appareil du joueur après le premier chargement, permettant des temps de chargement beaucoup plus rapides par la suite. L'équipe a également divisé le code en morceaux plus petits et plus gérables pour charger uniquement le code essentiel pour le gameplay initial et faire en sorte que des fonctionnalités et des modules supplémentaires se chargent de manière asynchrone.

Outils de test et de débogage

Pour remédier aux limitations de performance rencontrées lors de l'utilisation de WebGPU, l'équipe de Stratton Studios a utilisé le Débogueur de Cadres pour identifier les éléments les plus gourmands en ressources, tels que les textures haute résolution, les shaders complexes et les distances de dessin étendues. De là, ils ont mis en œuvre une série d'optimisations visant à réduire la charge sans sacrifier significativement la qualité visuelle.

« Nous avons utilisé des atlas de textures pour minimiser le nombre de chargements de textures, réduit le nombre de polygones dans les zones moins critiques, et employé des peintures mates pour les topologies lointaines afin d'économiser sur les coûts de rendu », déclare Loveridge. Nous avons également appliqué des techniques de niveau de détail (LOD) pour gérer le rendu des objets éloignés de manière plus efficace.

Le principal défi était de trouver un équilibre entre la performance et la qualité visuelle. « En se concentrant sur l'optimisation des aspects les plus exigeants du jeu et en utilisant intelligemment les outils disponibles dans Unity, nous avons pu offrir une expérience visuellement riche qui fonctionnait bien sur une large gamme d'appareils », déclare Loveridge. Cette approche nous a permis d'atteindre nos objectifs artistiques tout en veillant à ce que le jeu reste accessible et agréable pour tous les joueurs, quel que soit leur matériel.

Pour déboguer Project Prismatic, l'équipe s'est également appuyée sur le Unity Profiler pour suivre leurs indicateurs de performance, y compris l'utilisation du CPU et du GPU, l'allocation de mémoire et les taux de rafraîchissement. Cela les a aidés à identifier les goulets d'étranglement de performance et à optimiser les performances du jeu, en particulier dans les zones gourmandes en ressources.

Enfin, Unity Cloud Diagnostics les a aidés à collecter des rapports de plantage et des exceptions des utilisateurs sur le terrain. Cela leur a fourni des informations précieuses sur des problèmes qui n'ont peut-être pas été détectés pendant le développement.

5. Adoptez plusieurs plateformes web

Un conseil que nous entendons des experts du studio encore et encore est de "rencontrer les joueurs là où ils se trouvent." Développer pour le web vous donne l'opportunité d'offrir aux joueurs une expérience de jeu facile, rapide et accessible. Avec plus d'options matérielles, des vitesses de connexion plus rapides et des appareils puissants entre les mains de plus de joueurs que jamais, il est important de considérer toutes vos options pour le déploiement sur diverses plateformes web.

Ajustement fin sur les plateformes

En s'associant à Spatial pour une sortie web multiplateforme, l'équipe PIGIAMA KASAMA a adopté le Universal Render Pipeline (URP), le pipeline de choix de la plateforme. 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.

La performance peut être optimisée pour chaque plateforme, même sur des appareils d'entrée de gamme, et les développeurs peuvent utiliser leurs propres shaders. Il est conçu pour bien réussir à l'avenir. 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 URP soit également pris en charge là-bas," explique Jake Steinerman, responsable des relations avec les développeurs de Spatial.

Les serveurs de Spatial ont créé des versions individuelles pour chaque plateforme. Ils avaient des qualités cibles différentes pour certaines plateformes. « La profondeur de champ fonctionne plutôt bien sur WebGL, mais nous avons constaté qu'elle était moins performante sur certains appareils mobiles », déclare Fanchin. D'autre part, l'audio sur Android et iOS est beaucoup plus performant. Nous aurions pu utiliser des filtres et EQ, un outil audio qui permet aux développeurs d'ajuster le niveau de volume de fréquences spécifiques dans 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 puisque l'écran est généralement plus grand, et incorporé des textures de plus basse résolution sur les petits écrans mobiles," dit Stella. Dans l'ensemble, la sortie multiplateforme s'est déroulée sans accroc.

Rendu avec aisance

Les studios Stratton ont également tiré parti de l'URP pour trouver un équilibre entre performance et extensibilité. Une caractéristique clé était la capacité de l'URP à créer facilement des passes de pipeline de rendu personnalisées. Cette flexibilité a permis à l'équipe d'affiner le processus de rendu pour répondre à ses besoins spécifiques, d'optimiser certains effets visuels et de mettre en œuvre des shaders personnalisés qui ont amélioré l'apparence et la sensation globales du jeu sans compromettre les performances.

J'ai particulièrement apprécié la modularité de l'URP, qui nous a permis d'activer ou de désactiver certaines fonctionnalités en fonction des capacités de la plateforme cible. Cela a facilité l'optimisation du jeu pour différents appareils tout en maintenant une expérience visuelle cohérente," déclare Loveridge.

Profiter d'une sortie multiplateforme

Il y a de nombreux avantages à sortir un jeu sur plusieurs plateformes, même si cela peut ajouter des différences de flux de travail à prendre en compte lors de la planification.

En ayant SquadBlast disponible sur le web et d'autres plateformes, nous pouvons atteindre un public beaucoup plus large. Les joueurs peuvent facilement entrer dans un jeu sans avoir besoin de télécharger ou d'installer quoi que ce soit, ce qui réduit considérablement la barrière à l'entrée," déclare Ropotovs.

La distribution est également un facteur majeur pour l'équipe ULTRAHORSE, et avoir une version web ouvre un tout nouveau monde de canaux auxquels l'équipe n'aurait pas eu accès autrement.

Ils ont initialement lancé SquadBlast sur leur propre portail web à SquadBlast.com. Cela leur a donné un excellent terrain d'essai pour itérer rapidement, obtenir des retours immédiats des joueurs et apporter des améliorations rapides. De là, ils se sont étendus à de plus grands portails de jeux en ligne comme CrazyGames, ce qui a été un changement radical pour l'équipe.

Ces sites ont une portée massive - nous parlons de dizaines de millions d'utilisateurs actifs par mois. En mettant SquadBlast sur ces portails, nous avons pu présenter notre jeu à un public énorme que nous n'aurions peut-être jamais atteint par d'autres canaux de distribution," explique Ropotovs.

L'équipe voit également des opportunités avec d'autres plateformes qui intègrent des jeux en ligne, comme les applications de messagerie et les plateformes de médias sociaux. Comme le dit Ropotovs, "la portée potentielle ici est stupéfiante, et les optimisations beaucoup améliorées pour la technologie web mobile avec Unity 6 débloqueront toute une nouvelle génération de plateformes pour incorporer des jeux."

Conclusion

Dans cet e-book, nous avons couvert cinq fondamentaux pour créer des jeux web réussis. Nous avons demandé à nos experts leur meilleur conseil lors du développement pour le web.

Si vous envisagez de développer un jeu web, de porter votre jeu d'une autre plateforme vers le web, ou si vous recherchez uniquement de nouvelles informations, nous espérons que les idées des experts ont été précieuses et inspirantes.

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.