PAROLE D’EXPERT :
Sarah Robinson sur l’intégration des shaders dans le pipeline UI
Sarah Robinson est conceptrice UI – cheffe d’équipe sur Dead by Daylight. Elle travaille depuis plus de dix ans dans le domaine de l’UI pour les sites Internet, les applications et les jeux vidéo. Cet article est basé sur une conférence qu’elle a donnée dans le cadre de l’événement GDC 2022, en mars.
Avant d’aborder les nombreux avantages que les shaders apportent à Dead by Daylight, voyons comment les interfaces sont généralement construites à ce jour.
En général, lorsqu’on parle de UI, on pense a une simple couche 2D appliquée par dessus la scène de jeu. Souvent considérée plus proche du développement web que du monde du jeu vidéo, l’UI a tendance à être mise a l’écart des autres métiers du visuel. Cela tend à garder l’UI séparée, une tendance issue de l’histoire de l’UI et de ses liens avec le développement web, où l’interface est abordée d’un point de vue 2D. Ainsi, sur le plan structurel, visuel et organisationnel, nous sommes limités à cette seule couche.
Certaines technologies UI n’ont, elles non plus, pas évolué au même rythme que les autres disciplines artistiques du jeu vidéo. Par exemple, les techniques utilisées (échanges de textures, couleurs, etc) sont restées sensiblement les mêmes depuis presque deux décennies. La 3D, quant à elle, a fait l’objet de nouvelles techniques qui n’ont pas été transposées à l’UI.
C’est dans cet esprit que nous avons récemment réévalué l’UI de Dead by Daylight afin de trouver des réponses aux questions suivantes :
- Pourrions-nous réutiliser certains des actifs créés par notre équipe 3D?
- Quels autres outils pouvons-nous offrir à nos concepteur·trices UI?
- Comment pouvons-nous optimiser les performances?
L’avènement des shaders
Ces questions nous ont rapidement conduit·es aux shaders, un type de programme informatique qui, selon Wikipédia, était à l’origine utilisé pour l’ombrage dans les scènes 3D et a évolué pour devenir un outil populaire dans les effets spéciaux sur ordinateur, le post-traitement vidéo et même certaines fonctions non liées au graphisme.
Les shaders 2D peuvent être utilisés pour créer des effets très intéressants, tels que des animations de type particules, des formes vectorielles, des effets de fumée et des visuels d’encre dégoulinante, ce qui était fort intéressant pour Dead by Daylight.
Qu’avons-nous donc appris de notre réévaluation de l’UI de Dead by Daylight et de l’intégration des shaders dans le pipeline UI? Voici trois des principaux points à retenir
1. Réduire le recours aux logiciels tiers et amélioration du processus d’itération.
Vous n’avez pas à retourner dans Photoshop; vous pouvez apporter des modifications directement dans le moteur. En construisant tout dans le moteur à l’aide de shaders, nous avons une seule boucle, ce qui évite les allers-retours entre différents logiciels.
2. Les shaders peuvent nous permettre de penser différemment et de faire preuve de plus de créativité dans nos visuels.
Les shaders permettent d’améliorer les graphismes d’une façon autrement difficile ou coûteuse avec des techniques d’animation traditionnelles. Ils permettent également l’utilisation de méthodes bien connues des artistes 3D comme le RGB packing, les flow maps, la distorsion d’UV ou la création de masques personnalisés. La refonte de nos pop-ups de tutoriel a été une bonne opportunité d’éprouver ces nouveaux outils et d’établir des procédés réutilisables. Pour l’animation d’apparition par exemple, nous avons utilisé des textures en nuances de gris et la fonction smoothstep pour obtenir un effet de masque qui se révèle progressivement. Combinée à une texture de flow maps qui ajoute une légère ondulation constante, on obtient un magnifique effet de propagation d’encre/fumée qui révèle le contenu de notre UI.
3. Les équipes de performance peuvent être réticentes à l’égard des shaders, mais ces programmes peuvent améliorer les performances, notamment en comparaison avec les techniques d’interface traditionnelles.
Nous avons constaté que ces processus ont permis à Dead by Daylight de fonctionner plus rapidement, de charger les menus plus vite, entre autres avantages, simplement en repensant la façon dont ces éléments sont construits. Pour nous aider dans ce processus, nous avons créé un nouveau rôle : celui de concepteur·trice UI technique. UI. Cette fonction est similaire à celle des concepteur·trices techniques en 3D, sauf qu’elle permet d’appliquer le savoir à l’UI. Les concepteur·trices UI – Technique se concentrent sur l’optimisation, mais sont également attentif·ves à la manière de créer ces animations et d’appliquer les shaders de manière créative dans le but d’améliorer sensiblement les éléments conçus par d’autres. Cette fonction offre l’avantage suivant : quiconque souhaite recourir à certaines de ces techniques de shaders peut faire appel à cette personne pour un soutien, sans que cela n’ait une incidence négative sur notre pipeline ou notre flux.
Sarah Robinson
Conceptrice UI – cheffe d’équipe
