LoLTracker

 

/tech : Kayn arrive à Particle Town

kayn_particle_town_header
 
La sortie de Kayn a nécessité la création d'un nouvel outil d'édition d'effet visuels. Avec plus de 110 000 effets visuels différent, il faut des outils robustes, et Kayn fut l'occasion de terminer le développement d'un tout nouvel outil.
 
/tech : Kayn arrive à Particle Town
 
/tech est une nouvelle série sur le Nexus. Elle s'intéresse à la technologie utilisée dans League of Legends. Si vous aimez cette histoire, jetez un œil au blog des ingénieurs de Riot Games (en anglais) pour découvrir d'autres articles détaillés.
 
 
Une faux n'est-elle pas censée servir à moissonner ? Si. Elle sert à moissonner des kills sur la voie du bas.
 
L'un des plus grands défis que l'on rencontre lors du développement d'un jeu de l'ampleur de League of Legends, et qui évolue aussi souvent, c'est d'apporter d'importantes modifications aux outils utilisés pour créer le jeu sans qu'il y ait le moindre problème. Bonjour, je suis John « Riot Jengles » Englund, concepteur technique, et je travaille sur nos outils artistiques. Je suis ici pour vous expliquer comment nous avons réussi à mettre en service un tout nouvel outil d'édition d'effets visuels juste à temps pour la sortie de Kayn, notre nouvel assassin jungler qui peut traverser les murs et infester des champions. (Mais pas les miens ! Je joue avec des carrys AD immobiles et je compte adopter une politique stricte du « toujours bannir Kayn » dans la sélection des champions.)
 
Une équipe fidèle à son nom
 
La mission de notre équipe est de créer des outils et des technologies qui permettent aux Rioters d'offrir le meilleur aux joueurs (par « meilleur », nous entendons tout ce que cette équipe considère comme meilleur dans le cadre de son activité). Pour ce faire, nous mettons à disposition des logiciels visant à rendre la boucle itérative de la création du contenu aussi efficace que possible. C'est pourquoi notre équipe « Content Efficiency » (efficacité du contenu) porte bien son nom ! Nous sommes responsables de la plateforme principale qui héberge toutes les données du jeu, ainsi que des outils qui permettent aux designers et aux infographistes de modifier les propriétés des champions, des skins, des sorts et bien plus encore.
 
À la fin de l'année dernière, nous avons décidé qu'il était temps de créer un nouvel outil d'édition d'effets visuels. Pourquoi ? League of Legends compte plus de 110 000 effets visuels différents. Ces effets contribuent grandement à donner vie aux actions dans le jeu. D'ailleurs, les joueurs nous expliquent souvent l'importance que ces effets visuels ont dans leur appréciation ou non des champions, des skins, des objets, des effets sur la carte, etc.
 
 
Contrairement aux personnages animés, les effets visuels ne sont pas créés en concevant des poses qui s'articulent les unes aux autres. Les effets visuels sont animés de façon procédurale, et générés par le jeu sur une période déterminée. Les effets se composent d'un ou plusieurs systèmes de particules. Ce sont des ensembles d'émetteurs de particules dont le comportement et l'apparence sont définis par l'infographiste spécialisé dans les effets visuels, et ce, au moyen de textures, de la géométrie et de nombreuses fonctions. Si vous voulez en apprendre davantage sur les effets visuels, consultez cet article de RiotPhoenix, un infographiste spécialisé dans les effets visuels de Kayn qui nous a aidés à développer et à tester le nouvel outil.
 
Vous pouvez voir à quel point les effets visuels de qualité font partie intégrante du jeu. Cependant, notre processus pour la réalisation de ces effets commençait à dater. On ne pouvait pas revenir en arrière, ce qui ne nous facilitait pas la tâche au moment de tester les changements. À chaque fois que les infographistes spécialisés dans les effets visuels voulaient vérifier le résultat de leur travail, ils devaient laisser tourner jeu, enregistrer leurs effets et attendre que le jeu charge à nouveau. Impossible de voir ces résultats directement. Enfin, toutes les données relatives aux effets visuels étaient stockées dans notre ancien système de fichiers. Pour que celui-ci fonctionne correctement, il fallait passer beaucoup de temps à gérer manuellement les dossiers et les noms de fichiers, et nous n'avions aucun moyen de savoir facilement quels fichiers servaient pour tel ou tel effet.
 
Comment faire pour améliorer ce système ?
 
Ça n'a pas été simple de créer un nouvel outil de modification des effets visuels, mais, curieusement, ça n'a pas été la partie la plus compliquée. En réalité, le plus compliqué a été de déployer ce nouvel outil dans un environnement de production en respectant des délais très serrés, de convertir les anciennes données vers le nouveau système et de veiller à ce que les infographistes puissent passer à ce nouvel outil sans trop de problèmes.
 
Tout d'abord, nous devions nous assurer que nos infographistes spécialisés dans les effets visuels étaient d'accord avec cette idée, impatients de la découvrir et impliqués dans le processus de développement. Nous n'aurions jamais pu créer l'outil idéal sans leur expertise. Les infographistes étaient déjà habitués à leur outil actuel et ils en étaient contents (malgré ses quelques défauts). Nous devions donc placer la barre assez haut pour leur offrir quelque chose de mieux.
 
En plus, on retrouvait ce formidable écran de chargement :
 
 
Oui, l'ancien outil s'appelait Syrup, et oui, c'est un taco de petit déjeuner avec un taco de bande dessinée debout dessus.
 
Maintenant, comment faire pour l'améliorer ? Au début, nous avions beaucoup d'idées pour améliorer l'interface existante : de meilleurs graphismes, de nouveaux tableaux cool et des simplifications astucieuses. Mais au final, les principaux problèmes relatifs au processus original n'avaient pas grand-chose à voir avec l'interface. Nous devions donc simplement intégrer la plupart des fonctions de l'ancien outil au nouveau système. Même les meilleures améliorations apportées à l'interface d'un logiciel ont un coût temporaire en matière d'efficacité (par exemple, les personnes doivent réapprendre à utiliser l'outil). Nous avons donc opté pour une interface familière afin de faciliter la transition.
 
 
Syrup contre Particle Town Familier, légèrement épuré et doté d'un nouvel outil de prévisualisation ! Oh, et l'option Annuler fait également son apparition !
 
Nous avons consacré la majeure partie de notre travail d'ingénieur à faire en sorte que la transition se fasse en douceur pour les anciennes données et les infographistes. Outre la création d'une interface familière inspirée de Syrup, nous avons conçu des outils permettant aux infographistes de convertir les anciennes données (textures, maillages et systèmes de particules qui composent les effets visuels) vers le nouveau système. Nous avons même veillé à ce que les infographistes puissent copier les données de l'ancien outil pour les coller dans le nouveau.
 
Nous étions donc sûrs que les infographistes pourraient utiliser cet outil. Tout cela était bien beau, mais comment le déployer et l'utiliser en situation réelle ?
 
Bienvenue à Particle Town, M. Kayn !
 
Nous devions trouver des données graphiques intéressantes pour les intégrer au nouvel outil, que nous avions surnommé « Particle Town ». Pour tester la conversion de données, nous avions besoin de quelque chose de substantiel et déjà en cours de production. Par contre, il ne fallait pas que son développement soit trop avancé, pour ne pas compromettre le délai de production.
 
Nous nous sommes donc adressés à l'équipe des champions. Ils n'avaient qu'une seule chose à nous proposer : un champion disposant de trois formes différentes et d'un maximum de 11 effets visuels.
 
C'est là que le Faucheur de l'ombre a fait son entrée.
 
 
Il paraît que vous aimez bien les effets visuels en plein écran.
 
L'équipe des champions doit gérer ses propres délais, et nous ne voulions pas lui affirmer trop vite que cet outil lui permettrait d'être plus rapide dès le début. En fait, cela allait probablement la ralentir, à cause du changement. Même si nous avions bon espoir que cet outil soit plus efficace dans un futur proche, il était important de définir des attentes réalistes et de s'engager à faire tout notre possible pour que Kayn sorte à temps.
 
Qu'avons-nous fait ? Nous avons consacré trois mois à la création d'un produit minimum viable. Pendant cette période, toute notre équipe se concentrait sur la conception de cet outil. Nous avons passé beaucoup de temps à échanger avec les infographistes spécialisés dans les effets visuels afin d'être absolument certains que notre outil était adapté. Certains choses ont été revues à la baisse (comme le fait d'avoir un éditeur de graphiques plus joli). Non pas que leur design n'était pas cool, mais nous avons réalisé que d'autres choses étaient plus importantes. Nous savions que nous aurions le temps de peaufiner cet outil rudimentaire après sa sortie. De plus, en commençant avec un outil « simple » pouvant être développé rapidement, nous avions la possibilité de bénéficier d'un retour rapide à son sujet. Les retours directs d'utilisateurs experts sont très précieux pour améliorer l'outil. Ils nous permettent également de ne pas perdre du temps à concevoir des fonctionnalités peu utiles.
 
 
La lueur menaçante de la faux de Kayn, en direct de Particle Town.
 
Finalement, nous l'avons mis en service fin mars... et ses débuts ont été un peu chaotiques ! Les données se détérioraient et, parfois, l'outil ralentissait ou plantait. Il était essentiel d'avoir une bonne relation avec les infographistes et de leur fournir une assistance immédiate pendant cette transition. Nous avons reçu environ 100 pages de commentaires et plus de 150 rapports de bug et demandes d'ajout de fonctionnalités. Et nous n'avions pas pensé au fait que les infographistes perdaient du temps à remplir ces formulaires. Nous avons fait aussi vite que possible. Parfois, nous sortions plus de 10 correctifs pour l'outil dans la même journée.
 
Heureusement, les choses ont commencé à se stabiliser assez rapidement et nous avons pu admirer notre travail. Des infographistes nous ont signalé que la fonction Annuler leur avait permis de gagner de nombreuses heures de travail. D'autres nous ont expliqué qu'ils adoraient le fait de pouvoir voir immédiatement leurs changements dans le nouvel outil de prévisualisation et en jeu. Le mieux, c'est que les infographistes ont découvert des techniques leur permettant de concevoir Kayn plus rapidement qu'avec l'ancien outil !
 
 
Déplacement de la cible du R de Kayn vers la gauche pour tester les éléments directionnels ; le potentiel est maximal sur la droite.
 
Par exemple, c'est le cas de l'ultime de Kayn. Il peut être lancé dans n'importe quelle direction. Il fallait donc tester sa qualité visuelle dans toutes les directions. Avant, les infographistes devaient lancer le jeu, sélectionner une cible, lancer son R sur celle-ci, déplacer la cible, relancer l'ultime et ainsi de suite jusqu'à ce qu'ils l'aient observé sous tous les angles. Maintenant, avec la fenêtre de prévisualisation, il leur suffit de déplacer la cible et d'observer l'ultime dans chaque direction.
 
 
Même s'il n'y a pas de sang, le A reste dévastateur.
 
L'effet du A de Kayn est un autre exemple intéressant. En raison des contraintes liées aux différentes régions, nous avons dû créer deux versions, une avec du sang et une sans effusion de sang. Normalement, l'infographiste spécialisé dans les effets visuels aurait dû lancer le jeu pour observer l'effet. Maintenant, il lui suffit d'activer le mode censuré dans la fenêtre de prévisualisation.
 
Prochainement, à Particle Town
 
 
« Noooon. Non non non. » - Jhin
 
Qu'avons-nous appris ? La création d'un outil aussi complexe en plein milieu d'un planning de production bien chargé n'est pas une mince affaire. Mais on le savait déjà. En revanche, nous avons constaté que nous nous étions améliorés. Par le passé, les déploiements étaient bien plus chaotiques. Celui-ci s'est bien passé car nous avons fait participer toutes les personnes concernées (infographistes, développeurs, producteurs) dans ce projet. Nous avons certainement passé autant de temps à concevoir l'outil qu'à communiquer, à définir les attentes et à apprendre de nos collègues. Nous espérons que ce processus, même s'il n'est pas terminé, nous donnera la confiance nécessaire pour apporter de nouvelles modifications de taille à notre processus artistique, et ce, afin de continuer à vous proposer le meilleur contenu possible.
 
Runes : Présentation de la branche domination
Adoptez une mentalité de vainqueur
 
You must login to post a comment.
People in conversation:
Loading comment... The comment will be refreshed after 00:00.
  • This commment is unpublished.
    Swiitsh · 6 years ago
    Cet article me fait coooommplètement lag et les visuels se chargent pas... (je précise que je suis sur PC avec un i5 , une carte graphique GTX 1070 et 8Go de RAM, donc pas un toaster)

    Chuis le seul dans ce cas ?
    • This commment is unpublished.
      Athu · 6 years ago
      Je suis sur un Wiko Lenny 3 sur le wifi d'une Université, et ça marche très bien.
    • This commment is unpublished.
      Swiitsh · 6 years ago
      Ah, sur portable ça marche super... Peut être mon navigateur qui ezt pas a jour ?
  • This commment is unpublished.
    NicoproF1
    • Super-Tipeur
    · 6 years ago
    Tiens, il y a deux fois la même image lors de la comparaison d'interface entre syrup et particle town
    • This commment is unpublished.
      Viktor · 6 years ago
      C'est bien ce que je me disais
      Elles sont très très ressemblante les deux interfaces différentes...
   facebook   Discord2   rss   logo twitter   

Derniers articles

LoLTracker ferme ses portes après plus de 10 ans de bons et loyaux services !
Thèmes abordés : Fermeture imminente du site, Project L, pause de fin d'année chez Riot, Riot mobile, et bien plus !...
Analysons les problèmes actuels de Yuumi et notre manière d'aborder sa refonte.
Une nouvelle mise à jour a eu lieu sur le PBE, apportant de l'équilibrage
C'est le dernier patch de l'année, la 12.23B est là !