Lors du dernier article, nous nous étions penchés sur le daltonisme, qui sans être reconnu comme un handicap par l’INSEE peut poser un réel problème d’accessibilité pour les joueurs de jeux vidéo “traditionnels” comme pour ceux qui viennent vivre nos expériences en réalité virtuelle dans des salles d’arcade.

Pour rappel du premier article ce sont un homme sur 12 et une femme sur 200 qui sont touchés par une forme plus ou moins sévère de daltonisme, et pour eux un jeu qui demande de tirer des flèches sur des bateaux rouges sans toucher les bateaux verts peut ressembler à ça :

daltanisme probleme realite virtuelle

Pour régler ou limiter ce problème, plusieurs solutions existent : rajouter des textures différentes ou des symboles (c’est déjà le cas sur les voiles de bateaux), créer un univers sonore différent pour chaque équipe, ou laisser le joueur choisir lui-même les couleurs principales du gameplay... mais toutes ces idées nécessitent du temps, ce qui n’est pas toujours envisageable dans un budget serré ou quand le projet est déjà bien avancé.

Une solution beaucoup simple peut être de rajouter une passe d’ajustement des couleurs pour que les deux camps soient bien discernables, par exemple en les faisant passer de rouge/vert à bleu/orange, deux couleurs qui peuvent être distinguées par la plupart des daltoniens.

ingame bows island couleurs daltoniens

Dans cet article, nous allons voir comment intégrer ce type de filtre dans votre projet Unreal Engine 4 en moins de 5 minutes et comment créer les vôtres pour différents projets et différents types de daltonisme.

Le principe d’une Lookup Table

Pour répondre à la problématique, nous allons utiliser une “LookUp Table”, une “table de correspondance” des couleurs.

^ Nous abrégerons "Lookup Table" en “LUT” pour la suite de cet article.

Dans la plupart des cas, il s’agit d’une simple image représentant toute la palette de couleurs affichables à l’écran. Si l’on applique des modifications à cette image, on peut établir une correspondance entre la couleur d’origine et la couleur modifiée, simplement en allant chercher le bon pixel dans l’image.

LUT

Intégration dans Unreal Engine (en 5 minutes chrono)

  • Téléchargez la LUT de correction du daltonisme rouge/vert que nous avons créée

telechargement de la lut

  • Importez la LUT en tant que texture dans votre projet
  • Réglez les paramètres de la texture comme sur la capture d’écran

rglage des paramètres

  • Créez un PostProcessVolume dans la scène et cochez la case “Unbound” pour qu’il s’applique partout
  • Sur le PostProcessVolume, dans section Color Grading / Global, assignez la texture de LUT dans le champ Color Grading LUT

Texture LUT

  • Il ne reste plus qu’à l’activer ou la désactiver au besoin, par exemple via une option de menu. Dans notre cas, c’est l’exploitant de la salle qui peut directement faire le réglage à distance depuis son lanceur de jeux Octopod:Play.

@ Comme chez Wanadev on a souvent l’open source dans un coin de notre tête, nous avons mis en ligne sur notre Github un projet qui contient notamment un exemple d’implémentation : https://github.com/wanadev/unreal-colorblind-tool

Détecter les problèmes liés au daltonisme et créer ses propres LUTs

La LUT que nous avons conçue à l’origine pour notre jeu Bow Islands peut s’appliquer à beaucoup d’expériences différentes et à la majorité des cas de daltonisme, mais vous aurez peut-être envie de voir par vous-mêmes comment votre jeu peut être perçu par un daltonien pour évaluer si une modification est nécessaire, et le cas échéant de créer une LUT adaptée à votre cas particulier.

Pour vous aider, nous avons mis à disposition sur le projet Github un ensemble d’outils comprenant par exemple des LUTs à importer dans UE4 qui simulent différents types de daltonisme pour vous permettre de détecter des problèmes potentiels, et surtout un fichier Photoshop qui vous aidera à créer vos propres LUTs de correction.

Comment utiliser le fichier pour créer sa propre LUT ?

Créer sa LUT

  • Importez une ou plusieurs captures d’écran de votre jeu dans le dossier Test_Pictures.
  • Activez un par un les calques du dossier Simulation_LUTs : ils permettent de simuler ce que verrait un daltonien atteint de l’une des trois formes principales. D’autres LUTs (format 3DLUT) permettant de simuler des types plus rares sont également disponibles sur le projet Github.
  • Ajoutez dans le dossier Correction_LUT les modifications nécessaires à une bonne lecture de l’image, par exemple des corrections sélectives de couleur ou une augmentation du contraste. Vous pouvez si vous le souhaitez créer une LUT de correction spécifique pour chaque type mais ce n’est pas forcément nécessaire.
  • Dans un nouvel onglet Photoshop, ouvrez la LUT neutre (également fournie dans le projet Github)
  • Copiez l’intégralité du dossier Correction_LUT dans lequel vous avez ajouté vos modifications et collez le au dessus de la LUT neutre.
  • Exportez le résultat.

Tips and tricks

^ Attention ! Les LUTs de “simulation” ne sont qu’un outil de travail et ne règlent pas le problème, elles ne doivent en aucun cas être utilisées en production

@ Si votre jeu utilise majoritairement deux couleurs principales, faire une correction sélective pour les transformer en bleu et jaune/orange règlera les problèmes de lisibilité pour la plupart des daltoniens.

@ Quand c’est possible, essayez de rajouter d’autres indices pour discerner les éléments importants (textes, symboles, textures, sons), ou laissez les joueurs choisir eux-mêmes la couleur des éléments de gameplay fondamentaux.

@ Si vous utilisez déjà une LUT dans UE4 pour des raisons esthétiques, vous ne pourrez pas rajouter une LUT de correction, une seule peut être prise en compte (même sur plusieurs PostProcessVolume différent). Plusieurs solutions sont envisageable : remplacer complètement la LUT esthétique si celle-ci a un impact minime (les daltoniens ne profiteront probablement des finesses des couleurs dans tous les cas), créer un Post Processing Material qui applique la LUT, ou bien combiner les deux LUTs en amont dans Photoshop.

Sources :

Commentaires

Servantie

Il y a 3 ans

Répondre
Il y a pas mal d'idée intéressent, mais clairement changer des couleurs aussi sauvagement qu'avec un LUT détruit toutes la colorimétrie, et personnellement voir de l'eau verte au lieu de bleu ça m'aide pas. Mais réfléchir a comment aider les daltoniens c'est bien :)
  • Tests automatiques fonctionnels d’applications 2D/3D

    Il y a 11 mois

    Comme nous le disions dans cet article, l’automatisation des tests dans le développement logiciel est indispensable : dès lors qu’une application commence à avoir un minimum d’importance, les tests automatiques permettront de gagner énormément de temps en évitant de reproduire ad vitam æternam les mêmes tests manuels, et éviteront beaucoup de régressions. Dans cet article, nous allons présenter différents types de tests automatiques dans le cadre plus spécifique d’applications 2D/3D, puisque c’est ce que nous faisons ! Cela va du test basique qui clique sur 3 boutons aux tests de plusieurs minutes reproduisant les actions comme un véritable utilisateur. Accrochez-vous, c’est parti !

  • Configurateur web à l'abonnement : forces et faiblesses

    Il y a 12 mois

    Aujourd’hui, si vous cherchez à mettre en place un configurateur sur votre site, deux grandes possibilités s'offrent à vous : les solutions par abonnement (du type SaaS) ou le développement sur mesure. Au premier abord, les solutions semblent proches, mais les enjeux sur le long terme eux, sont bien différents.

  • Les frameworks front, tous les mêmes !
    Méthodologie

    Il y a 1 an

    C'est une phrase que j'ai osé sortir un jour dans la salle de pause de Wanadev. Je ne sais plus exactement avec quel collègue je discutais, j’essayais de le rassurer, il possédait déjà une certaine expérience avec React et allait devoir, en arrivant sur le projet sur lequel je travaille, se mettre à Vue.
    Il a malheureusement fallu qu'un autre collègue de passage nous entende pour ne pas trouver la conversation inintéressante et suggérer que j'en fasse un petit talk pour nos réu du lundi. Et, de fil en aiguille, me voilà en train d'en faire un article de blog. Comme quoi, note pour moi-même, il faut toujours se méfier des discussions dans les salles de pause.

  • [NOVEMBRE 2021] C'est la gazette de Wanadev !
    Méthodologie

    Il y a 1 an

    Retrouvez ici les informations et actus du mois de novembre de l'Agence! Au programme de cette édition : découvrez le configurateur de fenêtre développé pour Caseo, recontrez François Deleglise, notre directeur communication et un nouvel espace de jeu pour les professionnels du loisir en VR. Bonne lecture !

  • Un peu d'ingérence dans votre infogérance ?
    Méthodologie

    Il y a 2 ans

    Même si les impacts sont difficiles à mesurer, on peut dire qu’il a eu un avant et un après incident OVH. Sans épiloguer sur l'incendie du 5 mars 2021 dernier, un petit vent de panique a soufflé sur les milliers de clients découvrant les problématiques de sécurisation des données. Les réactions à chaud d'une partie des utilisateurs (touchés ou non) montrent la méconnaissance et l'incompréhension qui existent dans les offres d'hébergement. Qui est responsable ? Qui fait quoi ? Comment vérifier mon offre ? Voici quelques clés de compréhension.

  • Améliorer la qualité avec les tests et la review

    Il y a 2 ans

    L’importance des tests et de la revue de code dans le cadre du développement logiciel est parfois négligée ou passée au second plan. Cet article a pour but de montrer que les tests logiciels constituent une étape cruciale qu’il faut considérer avec beaucoup de rigueur.