Art technique derrière la couleur déchaînée de I See Red

Dans cet article invité, Whiteboard Games détaille l'histoire de I See Red, la première version commerciale du studio, et partage la réflexion technique qui a permis d'aborder l'approche unique du jeu en matière de couleurs.

Nous sommes Whiteboard Games, un studio de développement fondé en 2021, à Buenos Aires, en Argentine, par cinq diplômés universitaires qui souhaitaient tracer leur propre chemin dans l'industrie du jeu. Depuis, Whiteboard est devenu une équipe de 30 jeunes professionnels, et vous lisez cette intro car nous sommes réunis ici aujourd'hui pour parler de notre première sortie commerciale : Je vois rouge.

I See Red est une roguelite de jeu de tir frénétique à bâtons jumeaux qui parle de rage, de combat, de vengeance, de sang, de passés tragiques et – oui, c'est dans le nom – de RED. Il n'est pas difficile à repérer parmi d'autres jeux, non seulement en raison des environnements de science-fiction et de la caméra descendante, mais aussi pour une esthétique cruciale : Vous aurez du mal à trouver plus de couleurs que le noir, le blanc, le gris et le rouge. C'est une décision qui a été prise très tôt et qui est étroitement liée à la fois aux aspects narratifs et à l'expérience de jeu. Bien sûr, il comporte ses défis : Créer (et jouer) à un jeu avec une palette aussi limitée n'est pas pour tout le monde. Comment avons-nous fait ? Continuez votre lecture pour le savoir.

Commençons par un bref détour par l'histoire, afin d'examiner comment l'aspect a évolué au fil du temps et les décisions charnières qui ont conduit à ce qu'est I See Red aujourd'hui.

Tout a commencé avec un projet de thèse pour le cours « Conception et programmation de jeux vidéo » à la Da Vinci First School of Multimedia Art à Buenos Aires. De ce travail est né un jeu qui devait être artistiquement moins exigeant car les étudiants n'ont pas beaucoup de financement. À ce stade, la couleur rouge n'avait pas encore pris le dessus. Il y avait du bleu, voire du vert, dans le jeu, mais ne vous attachez pas trop car les couleurs supplémentaires ne seront pas présentes longtemps.

Après la fin de la formation, notre équipe fondatrice n'a pas pu lâcher le projet, y voyant un réel potentiel commercial. Nous avons décidé de poursuivre le développement en dehors de l'université et de réunir une équipe, ce qui a conduit à créer Whiteboard Games en tant que studio. (Anecdote : Certains de nos professeurs ont également vu du potentiel et, lorsqu'on leur a demandé de l'aide, ont décidé de rejoindre l'équipe.)

À ce moment-là, les bases du jeu avaient déjà été abordées : un jeu de science-fiction au rythme soutenu sur la vengeance rouge et rageuse.

Des mois, voire des années se sont écoulés. Au milieu de discussions avec des éditeurs et des investisseurs, I See Red a développé de nombreux niveaux interconnectés – maintenant non seulement avec des ennemis humains, mais aussi avec des extraterrestres – une énorme quantité de passifs, de cinématiques et un style artistique encore plus raffiné. Avec suffisamment de correction de bugs, de tests, de contenu et d'améliorations des performances (c'est bon, pas besoin de nous remercier), le jeu se préparait à voir le soleil.

L'heure de la sortie de la démo du jeu a fini par sonner. Nous avions participé à quelques événements et concours et nous étions fiers de ce que nous avions créé. A ce stade, nous avons décidé de prévoir une éventuelle sortie sur consoles, en passant du HDRP à l'URP et en troquant la HD nette pour une esthétique encore plus stylisée. Nous avons également ajouté une subtile teinte froide aux couleurs de gris (oui, le bleu est de retour... mais ne le dites à personne) pour une sensation plus métallique, et peaufiné le tout encore plus. Le fait d'effectuer ce changement signifiait que nous avons dû effectuer une rétro-ingénierie de certaines fonctionnalités HDRP dans l'URP, mais nous sommes sûrs que cela en valait la peine.

En ajoutant aux niveaux d'extraterrestre de l'étape précédente, I See Red avait également des ennemis robotiques, plusieurs boss, le scénario, l'assurance qualité, la localisation, et plus encore. Il était temps d'appuyer sur le gros bouton vert.

Ce fut certainement un long voyage avec de nombreux défis et changements en cours, sans parler de plusieurs années de travail. Nous trouvons que c’est une sensation et un aspect incroyables. Et, si Reggie Fils-Aimé et d’autres membres des « plus expérimentés du secteur » le disent, il ne faut pas être fou. En tout cas, nous l'avons créé et publié. Mais la question de savoir ce qui restait. Bonne nouvelle à tous les fans d'art technique : Il est temps d'être technique. (Avertissement sur le contenu : Nous sommes allés avec le sang.)

Nous avons passé beaucoup de temps sur le sang, car c'est le principal retour visuel que vous obtenez lorsque vous touchez un ennemi ou que vous êtes touché dans le jeu. Cet élément devait être clair et satisfaisant, et le rouge étant la couleur la plus importante du jeu, il n'y avait pas d'espace pour la paresse.

Nous voulions peindre le monde en rouge avec du sang, nous avions donc besoin d'un fort contraste entre le gris des environnements et le sang, ainsi que de variations pour les decals. Nous aurions pu utiliser des textures pour masquer les decals, mais avec la quantité nécessaire, cela aurait fini par être trop répétitif. Bien sûr, nous ne voulions pas ça.

Ce que nous avons trouvé, c'est la combinaison du bruit, du projecteur de décalques URP et des coordonnées du monde pour que, selon l'endroit où nous avons placé les décalques, la forme change. Grâce à cette technique, nous avons pu modifier la largeur, la hauteur, la fluidité des bords et la rugosité du sang en l'animant en douceur. Cela nous est utile lorsque nous devons engendrer, par exemple, une mare de sang sous un ennemi vaincu.

En modifiant les couleurs de l'albédo et les propriétés des masques antibruit, nous pourrions également générer différents types de sang pour les extraterrestres et les robots, qui ont quelque chose qui ressemble à du pétrole. Il ne s'agissait pas seulement d'obtenir une différence esthétique entre les ennemis. Du point de vue du gameplay, il était tout aussi important de savoir de quel sang il s'agit, car les joueurs peuvent Acquire une capacité passive à travers laquelle ils sont capables d'« absorber » le sang laissé derrière eux, avec différents effets : le sang humain est neutre, le sang extraterrestre cause des dommages et le sang du robot guérit.

En dehors des decals, il y a aussi beaucoup de particules de sang utilisées dans I See Red. Pensez à la capacité passive dont nous venons de parler : Nous avions besoin d'un moyen de communiquer l'absorption aux joueurs. Le résultat est, bien sûr, les mini tornades de sang.

Ces tourbillons noueux ont été obtenus en utilisant à la fois une texture défilante et un effet de particules. L'effet de particules est un ruban modélisé en 3D (une bande de polygones) plus un shader qui fait défiler la texture jusqu'en haut en utilisant les UV principaux. Nous avons ainsi pu utiliser les données personnalisées du système de particules pour modifier la vitesse, le flux et la forme du maillage, ainsi que pour ajouter un fondu dans et hors des bandes afin que l'effet apparaisse et disparaisse en douceur en haut et en bas de la tornade. Prenez ceci, ajoutez des cordes de sang pour plus de jus, et vous aurez une tornade de sang inverse qui absorbe le sang dans le joueur.

En parlant de particules, nous ne pouvons pas oublier les effets de particules sur les impacts lorsque le joueur ou les ennemis sont endommagés. Ces particules sont générées dans le même cadre que le pool de sang/decal dont nous avons parlé, avec les deux animations pour une transition fluide à travers une co-routine de code. Ils spawnent dans la direction où allait la balle, généralement à l'opposé du joueur.

Cela grâce au code s'est avéré vraiment utile pour personnaliser l'effet, le rendant plus important si les dégâts étaient plus importants, si l'ennemi était plus proche, ou même si l'effet était proche d'un mur. Nous avons utilisé le raycasting pour déterminer la longueur de la décalque et des particules avant de la couper à travers un mur et quelle devrait être l'inclinaison de la décalque (si elle doit aller sur un mur, par exemple). Nous avons ensuite transmis ces valeurs à l'animation, et la magie a opéré.

Cela fait beaucoup de sang. Beaucoup de rouge. Puisque le jeu utilise une palette limitée, nous devions nous assurer que la lisibilité ne soit perdue dans aucun aspect. Les limites de notre style signature nous ont obligés à être créatifs et à utiliser de nombreux outils et astuces. Par exemple, les choses rouges ne sont pas toujours rouges.

Vous pourriez apercevoir une porte qui a un contour rouge et qui brille, mais qui, une fois franchie, devient grise. La même chose arrive aux ennemis, qui sont rouges alors qu'ils sont hostiles et gris une fois qu'ils sont... enfin, plus hostiles. Via ces signaux, le jeu utilise sa couleur distinctive pour communiquer les éléments qui l'intéressent : zones inexplorées, objets importants, obstacles dangereux, etc. D'une certaine façon, c'est comme si le joueur avait une « Vision détective » constamment activée et constamment mise à jour pour ne montrer que ce qui est pertinent à ce moment-là.

Mais que va-t-il se passer si vous ne voyez pas le rouge comme nous ? Que va-t-il se passer si quelqu'un qui veut jouer à I See Red ne peut pas percevoir les différences entre le rouge et le gris ? Nous voulons certainement que tout le monde puisse découvrir « the Rage », c'est la même raison pour laquelle I See Red est disponible en 13 langues. De nombreux locuteurs de ces 13 langues bénéficieraient certainement de fonctionnalités d'accessibilité. Entrez dans notre mode daltonien personnalisé URP.

En créant I See Red, nous savions qu'un univers en noir, blanc et rouge pourrait ne pas être lisible par tout le monde. Nous avons donc trouvé une solution pour implémenter différents modes daltoniens afin que tout le monde puisse jouer. La meilleure façon de le faire était d'utiliser les fonctionnalités de rendu programmable dans Unity et un simple shader. L'idée principale derrière ceci est de transformer chaque valeur dans les différents canaux en utilisant une sorte de table de correspondance dans le SRF qui traduit ensuite ces valeurs dans le shader pour le passage de rendu final. Comme l'effet devait être exécuté en tant que passe finale au-dessus de tous les autres objets rendus dans le monde, cette passe est effectuée après le rendu de l'IU et est la passe finale dans chaque image de I See Red.

Après avoir étudié les différents types de daltoniens et la façon dont nous pouvions utiliser le rendu programmable pour y répondre en comprenant comment chaque personne pouvait percevoir les couleurs dans I See Red, nous avons pu créer différents modes pour affûter ou modifier les couleurs en conséquence : Protanomalie, Protanopie, Deutéranomie, Deutéranopie, Tritanomalie, Tritanopie, Achromatomalie et Achromatopsie. Selon les personnes à qui vous posez la question, le rouge du jeu peut ne pas sembler si rouge que cela, mais c'est bon pour nous : Au final, le plus important est que tout le monde puisse profiter du jeu. Il existe de nombreux autres systèmes pour communiquer toute la rage dont vous aurez besoin.

Enfin, notre sang est beau et pour tous... du moins à partir de 14, 15, 16 ou 17 ans, selon l'endroit où vous vivez. Mais le sang n'est certainement pas tout ce qui fait l'esthétique de I See Red. N'oublions pas que le rouge se décline sous de nombreuses formes, nuances et nuances, et le gris aussi.

Nous avons dû trouver un moyen de créer une palette de couleurs capable de s'adapter à de nouveaux modèles sans refaire la texture de zéro, ce qui prend beaucoup de temps. À ce stade, nous devons faire toute la lumière : I See Red n'est pas vraiment noir, blanc et rouge, mais en fait rouge, vert et bleu, comme la plupart des autres jeux. Nous avons menti au début (désolé), mais cela ne ressemble toujours pas à la plupart des autres jeux. En effet, nous avons utilisé un shader personnalisé qui applique une Splatmap, qui est une texture combinant plusieurs textures ou masques en niveaux de gris en un seul, en utilisant un canal différent (rouge, vert, bleu ou alpha) par texture.

Cela nous permet d'avoir un meilleur contrôle des couleurs dans le jeu en contrôlant chaque valeur de canal individuellement dans le moteur, et d'économiser des ressources en chargeant moins de textures. Cela permet également de réduire considérablement le temps d'itération.

Nous avons du sang. Nous avons des ennemis. Nous avons des environnements. Nous avons les couleurs dont nous avons besoin. Ça fait du bien. Ensuite, nous pourrions parler de brouillards personnalisés, d'éclairage et de mathématiques de caméra, de mappage de tonalité, ou de ce truc cool avec la fausse perspective sur les cinématiques...

Oui, on pourrait en dire beaucoup plus, mais nous serions là pendant des heures (et cela prend du temps à écrire), alors autant conclure. Plus de trucs techniques. Allez et expérimentez : Jouez I See Red vous-même et dites-nous si vous repérez quelque chose en rapport avec ce dont nous avons parlé ici. Enfin, et surtout, n'hésitez pas à nous contacter ou à contacter les belles personnes de Unity si vous souhaitez en savoir plus.

Merci de lire, jusqu'à la prochaine fois !

Vous pouvez télécharger I See Red sur Steam dès aujourd'hui. Après avoir joué, découvrez d'autres histoires de développeurs Made with Unity.