Fleur spirituelle est le premier événement de Riot qui s'étend sur plusieurs jeux. Il permet aux joueurs d'explorer le concept de Fleur spirituelle à la fois dans League of Legends et dans Legends of Runeterra. Mais avant de vous expliquer comment Fleur spirituelle a vu le jour, voyons d'abord en quoi consiste ce concept.
Fleur spirituelle est un événement thématique appartenant à l'histoire officielle de la franchise et racontant l'éclosion d'une véritable fleur spirituelle à Ionia. Les Ioniens utilisent les propriétés intrinsèques de la fleur pour communier avec leurs proches décédés, célébrer leur paisible passage dans l'au-delà ou pleurer leurs âmes troublées.
Mais LoL et LoR sont deux jeux très différents : l'un est MOBA, l'autre est un CCG. Ils ont une esthétique et un public très différents, alors comment faire pour que les joueurs puissent profiter d'une expérience cohérente sur les deux titres ?
L'importance du design visuel
Chez Riot, le design visuel se divise en deux secteurs clés : le design lié aux produits, qui crée des éléments de jeu comme les icônes, les plateaux de jeu et les interfaces de nos titres, et le design qui se consacre à la marque et à la publication de nos créations pour s'assurer que les joueurs savent parfaitement à quoi s'attendre avant de jouer au jeu.
Nous allons voir comment, dans ces deux domaines, les concepteurs visuels travaillent ensemble pour mettre en place un langage et un style de design cohérents sur des jeux différents.
Commençons donc par le commencement : la naissance de l'identité visuelle de Fleur spirituelle.
La création de l'identité visuelle de Fleur spirituelle
Craig « Riot MrParkinson » Parkinson, concepteur visuel de League of Legends
J'ai commencé par demander à l'équipe de développement thématique — qui est composée d'artistes, d'auteurs et de producteurs chargés de créer le multivers de League — ce qu'était exactement Fleur spirituelle. Et pendant qu'ils m'expliquaient la thématique, j'ai remarqué qu'ils répétaient des mots-clés comme mystique, spirituel, élégant, paisible, abstrait et envoûtant. Alors j'ai réuni ces mots dans un document et... je suis parti de là.
Fleur spirituelle parle de l'au-delà et des esprits qui y résident. Ces esprits sont interconnectés par nature dans le royaume spirituel et vivent dans une paix relative. J'ai utilisé cette idée comme ligne directrice quand j'ai commencé à chercher des références visuelles et à créer un mood board évoquant ces sensations.
J'ai ensuite réparti mes références dans les domaines clés que je voulais explorer et j'ai étudié les formes, les couleurs et les textures. Ça m'a aidé à choisir la direction que j'allais donner au concept de Fleur spirituelle. Mais il fallait aussi que je détermine comment réunir tous ces éléments — surtout les influences d'anime, de mythologie asiatique et de League — tout en leur donnant de la cohérence.
La forme
Je voulais retranscrire l'élégance de l'événement par une forme unique. Il fallait que ce soit quelque chose d'abstrait et doux, mais qui donne quand même une sensation de fraîcheur et de dépaysement. En prenant cette idée comme point de départ, j'ai commencé à chercher les types de formes qui convenaient.
Et la notion de géométrie m'est venue à l'esprit presque immédiatement. Je pouvais utiliser ces formes élégantes pour construire une sorte de symbolisme réunissant différentes références dans le festival de la Fleur spirituelle. Ça se prêtait vraiment bien à la thématique globale car le sens de la géométrie dépend de ce que le joueur voit en elle. Elle peut signifier beaucoup de choses différentes et rien à la fois.
Comme références, j'ai utilisé des visuels inspirés de l'iconographie asiatique comme des formes florales, des volutes et des nuages. Quand je me suis demandé comment tout ça pouvait s'intégrer à l'interface, je me suis rendu compte qu'il y avait quelque chose qui manquait : une relation plus étroite avec le travail de l'équipe de développement thématique. Et si j'utilisais les illustrations conceptuelles des skins dans mon design ?
Je voulais que le design soit en rapport direct avec les éléments visibles et interactifs du jeu, et j'ai donc ajouté des rappels. La géométrie que je voulais exploiter s'est traduite par les motifs folkloriques que l'on peut voir sur la chemise de Yasuo. En prenant cette idée comme base, je me suis demandé comment ces motifs folkloriques distinctifs pouvaient renforcer l'identité visuelle. Et c'est ce qui m'a conduit à l'étape suivante : la couleur et la texture.
Couleur et texture
Pour l'événement, l'équipe de développement thématique avait élaboré une belle palette de couleurs basées sur l'aquarelle. L'ensemble devait créer une ambiance mystique et onirique. Quand j'ai regardé les aquarelles pour m'en inspirer, j'ai tout de suite remarqué les variations de textures qu'elles présentaient, et qui rappelaient la manière dont une goutte d'encre tombe sur un morceau de parchemin.
Je voulais que le design visuel reste en rapport avec les skins pour créer une sensation d'harmonie. Mais il me fallait encore des textures uniques pour éviter l'aspect de grands aplats de couleurs. Je me suis inspiré d'éléments comme l'écorce des arbres, les traits de pinceau, les nervures des feuilles, et là, j'avais une sorte d'échantillon représentatif du design visuel de l'événement.
Après cette étape d'analyse initiale — et un « oui » enthousiaste de l'équipe — je suis passé en mode berserk. J'ai dû faire environ 90 logos. C'était assez dingue. Et à chaque fois que je présentais mes créations, je recueillais des avis qui me permettaient d'ajuster mon travail pour finalement aboutir au résultat actuel.
Une fois que tout a été approuvé et validé, j'ai créé un guide que j'ai ensuite transmis à toutes les équipes qui travaillaient sur l'événement. Et c'est ce document que l'équipe Legends of Runeterra a utilisé pour se mettre au travail.
Faire éclore la Fleur dans LoR
Tom « Riot Tomukus » Sayer, concepteur visuel senior de Legends of Runeterra
Je travaille sur le design et l'implémentation des composants dans Legends of Runeterra. Ça signifie que je travaille avec des concepteurs d'expérience utilisateur, des ingénieurs, des infographistes, des auteurs — en gros, toute l'équipe de LoR — pour mettre à la disposition des joueurs des éléments graphiques avec lesquels ils peuvent interagir dans notre jeu.
Mon travail commence vraiment quand on reçoit une maquette fonctionnelle des concepteurs de l'expérience utilisateur. En fait, c'est un ensemble de cases grises, noires et blanches qui nous donne une idée de l'endroit où doit aller chaque élément que nous devons créer. Ensuite, mon travail consiste à réorganiser ces éléments et à décider de leur hiérarchie, c'est à dire, schématiquement, quels sont ceux qui passent au premier plan et ceux qui passent au second plan. Et ce travail tient compte de l'information qui est la plus importante pour le joueur.
Quand on a conçu l'espace du client pour Fleur spirituelle, on a décidé d'intégrer un indicateur pour que les joueurs puissent suivre leur progression par rapport aux récompenses. Ça fonctionne de la même manière que les récompenses de région, qui permettent aux joueurs de sélectionner une région et de progresser dans le parcours correspondant. Le design visuel devait comporter toutes ces informations pour que l'outil de suivi de Fleur spirituelle soit visuellement cohérent avec le style de League, tout en ayant un aspect différent des récompenses de région.
Pour parvenir à ce résultat, j'ai regardé les composants graphiques et les instructions de design visuel que Riot MrParkinson nous avait fournies et j'ai traduit tout cela dans un format qui faisait sens dans le cadre de LoR. Même si LoL et LoR font partie de la même franchise (et appartiennent à la même société), les deux titres ont des styles uniques en termes de design graphique et visuel. Le client de League dispose d'une interface moderne et aérée. Il y a de la place et quelques éléments décoratifs à certains endroits, mais elle reste différente de celle de LoR, qui suit une approche plus skeuomorphique.
Un design skeuomorphique tente de donner une impression réaliste. Les premiers smartphones, par exemple, disposaient d'applications dont le design était très réaliste. Leurs blocs-notes utilisaient des textures papier et leurs polices avaient l'aspect d'une véritable écriture au crayon ou au stylo. Cela était dû au fait que les gens n'étaient pas encore très habitués à la prise de notes avec un écran tactile. Nous avons adopté la même approche avec LoR afin d'immerger le joueur dans le monde de Runeterra. Tout ce avec quoi vous interagissez doit donner l'impression d'être un objet physique. Alors quand il a fallu appliquer le design visuel de Fleur spirituelle, on a dû le modifier légèrement pour l'adapter à LoR. Ça se voit partout sur l'interface, mais l'exemple le plus flagrant est le nuage.
Quand Riot MrParkinson nous a donné les instructions graphiques, j'ai remarqué qu'elles proposaient des nuages comme source d'inspiration. Ils sont dans un style un peu asiatique, ce qui fonctionne bien dans LoR car les environnements sont très stylisés. Il y a pas mal de volutes qui adoucissent généralement le visuel. Mais pour que ça fonctionne dans notre client, il fallait que j'ajoute une texture pour donner au nuage un aspect plus métallique, car c'est le style global qu'on utilise.
Quand je me suis mis à travailler sur le nuage, j'ai sorti mes références. C'est-à-dire que j'ai ouvert Adobe Illustrator, collé les références visuelles de Riot MrParkinson sur le plan de travail et commencé à dessiner. Je savais que je voulais que le résultat soit métallique et plus massif. Au lieu de suivre la référence, j'ai donc fait le dessin moi-même.
Personnellement, je commence par dessiner dans Illustrator car ça me donne une image vectorielle claire. Ensuite, je peux travailler les lignes pour les épaissir ou les affiner. Après ça je l'importe dans Photoshop comme une forme.
Une fois l'image dans Photoshop, j'utilise des styles de calque comme Biseautage & estampage, j'ajoute des incrustations en dégradé et des contours, et je crée des ombres portées et des lueurs internes/externes. Quand je suis satisfait du résultat, je dépose ces styles de calque sur le dessin vectoriel du nuage.
Je termine le style de calque en ajoutant une ombre portée parce que je veux que le nuage soit au premier plan, et parce que je veux qu'il donne l'impression de flotter sur l'arrière-plan.
Et ensuite je peins.
J'ajoute des petites touches de lumière et quelques zones d'ombre. Après, pour m'assurer qu'il ne ressemble pas à une plaque de métal posée sur le client, j'ajoute des lignes sombres pour qu'il donne l'impression de s'incurver vers le joueur.
Une fois satisfait du résultat, je l'ai partagé avec l'équipe. Et j'ai suivi la même méthode pour tous les autres composants graphiques de l'événement. Il y en a 40 en tout. C'est important que tous les composants graphiques donnent l'impression d'être faits à la main, car ils sont faits à la main !
J'espère juste que les joueurs qui se connecteront à LoL puis à LoR (ou l'inverse) verront ce qu'on a créé et qu'ils reconnaîtront instantanément qu'il s'agit du même événement. Ça voudra dire qu'on a bien fait notre travail et qu'on a proposé aux joueurs des deux titres une expérience cohérente.
