Soignez l'expérience joueur : des écrans de transition dans vos jeux !

Entre deux scènes, pour masquer des temps de chargement ou simplement pour assurer une transition visuelle fluide, l’« écran de transition » est incontournable. Dans la boîte à outils open source que je partage sur OpenUPM, le package de transition d’écran contient des scripts et plusieurs prefabs qui vous permettent de gérer ces écrans de manière fiable et flexible. Voyons pourquoi ils sont importants, comment les utiliser et comment les améliorer !

Pourquoi les transitions d’écran sont importantes

Premièrement : le feedback. N’oubliez pas que vous devez montrer au joueur qu’il se passe quelque chose, même (et surtout) quand il n’interagit pas. Je ne parle pas ici de cinématiques, mais plutôt du chargement de quelque chose : un nouveau niveau, une boutique, un lobby, ou n’importe quoi d’autre qui pourrait prendre du temps et empêcher le joueur d’agir et d’avoir un retour immédiat sur son action.

Deuxièmement : l’immersion. Oui, c’est vrai. L’un des premiers écrans de transition dont je me souviens est celui de Resident Evil quand on passe une porte. C’était une façon intelligente de masquer le chargement du niveau derrière un écran de transition immersif.

Troisièmement : le design. Il peut servir d’outil de game design : faire baisser la pression sur le joueur, lui transmettre des informations essentielles sur le jeu, qu’il s’agisse de narration, d’un workflow de matchmaking ou de n’importe quoi d’autre.

Dans l’un de nos jeux, cet écran servait aussi à masquer le temps de génération procédurale nécessaire à la création du niveau suivant. Le premier algorithme était si rapide qu’il était facile de le cacher avec n’importe quelle animation d’UI, mais au final, après quelques ajustements pour obtenir des niveaux intéressants, la durée était trop longue pour être masquée de cette seule façon. Nous avons ajouté un écran de transition qui fonctionne en trois étapes :

• afficher l’écran de transition pour cacher tout le reste
• envoyer un événement pour que toute fonction nécessaire puisse être appelée, comme la génération d’un niveau
• une fois que tout est prêt, masquer l’écran de transition.

Comment les créer ?

Vous pouvez le faire vous-même, utiliser des assets existants, ou vous inspirer d’assets existants pour créer les vôtres. Heureusement pour vous, je partage désormais ce que nous avons utilisé dans de nombreux jeux créés pour mobile, applications Kinect ou consoles. Je vais donc maintenant parler d’un package Unity, constitué principalement d’un prefab que vous pouvez simplement placer dans votre scène.

Je vous conseille de placer ce prefab dès les premières étapes du workflow de chargement de votre jeu. J’ai découvert que quatre scènes sont la meilleure façon de gérer le chargement complet d’un jeu, voir mon article dédié à ce sujet.

Une fois le prefab en place, vous remarquerez qu’il possède son propre Canvas, configuré pour s’afficher au-dessus des autres. Vérifiez que cela correspond à vos besoins.

Ensuite, appelez simplement la fonction statique Transition.Show() pour lancer l’animation qui va couvrir tout l’écran.

L’événement configuré par défaut dans le prefab sera appelé : si vous voulez faire quelque chose de particulier une fois que tout est masqué, abonnez-vous à cet événement. Vous trouverez un exemple dans le package pour bien comprendre comment faire. Et je publierai bientôt un article dédié à la gestion des événements qui décrira tout le processus.

Dans l’exemple, j’utilise aussi le package EasyLoading, conçu pour fluidifier le chargement asynchrone des scènes dans Unity (c’est assez simple, mais si vous pensez qu’un article serait utile, demandez-le-moi !). Ainsi, par défaut, vous n’avez qu’à saisir le nom de la scène dans le prefab, et rien d’autre.

Ce package permet d’afficher une jolie jauge de chargement à l’écran, pour que le joueur sache qu’il se passe quelque chose. Une fois que vous avez géré tout ce que vous vouliez dans votre workflow et que la nouvelle scène est prête à être activée, soit vous utilisez le réglage par défaut et cela se fait automatiquement, soit votre workflow demande plus de puissance de calcul et vous devrez peut-être retarder l’activation de la scène. Dans ce cas, il vous faudra appeler la fonction du script LoadScene pour activer la nouvelle scène.

Cosmétique

Dans le package ScreenTransition, je partage deux prefabs différents pour la transition :

• avec des images en mouvement
• avec un shader de dégradé

Images en mouvement

Celui-ci anime des images sur le Canvas pour obtenir une jolie transition animée. Vous pouvez le personnaliser avec vos propres couleurs pour obtenir le résultat voulu. Utiliser du noir peut être une bonne idée pour obtenir un écran entièrement noir à la fin de l’animation : c’est généralement ce qui rend le mieux sur les petits écrans, et le joueur comprend bien qu’il s’agit d’un écran de transition, mais c’est à vous de voir.

Shader de dégradé

Celui-ci utilise deux images et une couleur : une image affichée en plein écran pendant la transition, et une autre, particulière, utilisée pour l’effet de transition. L’image de dégradé est uniquement en noir et blanc, et toutes les valeurs entre le noir complet et le blanc complet créent l’effet de transition. Voici quelques exemples pour vous montrer le rendu.

Comme pour l’autre prefab, vous pouvez personnaliser celui-ci avec vos propres images pour obtenir une transition géniale !

Screen Transition sous forme de package

Maintenant, vous aurez peut-être envie de l’utiliser dans vos projets, c’est mon cas. Pour l’utiliser largement dans les miens, je l’ai importé dans le dépôt de packages openupm. Pour importer n’importe lequel des outils que j’ai écrits et qui sont disponibles sur OpenUPM, suivez les étapes ci-dessous.

1. Ajouter openUPM comme scoped registry dans Unity

Depuis le projet dans lequel vous voulez ajouter votre package, allez dans les project settings, dans la section package manager, où vous pouvez ajouter un scoped registry.

Depuis ce même registre, openUPM, vous pouvez ajouter plusieurs scopes si vous y trouvez d’autres assets utiles : pensez donc à ajouter tous les scopes voulus pour que Unity aille les chercher au bon endroit. Choisissez le nom que vous voulez, j’utilise simplement OpenUPM. Renseignez l’URL https://package.openupm.com puis commencez par ajouter « com.fredericrp », et appliquez.

2. Importer le package depuis le Package Manager

Une fois que c’est fait, vous verrez les registres correspondants dans le Package Manager de Unity, dans la section « My Registries » : mes packages sont regroupés sous le nom « FredericRP ». Comme pour n’importe quel autre package, vous pouvez installer, mettre à jour et supprimer les packages directement ici, et ils apparaîtront dans le dossier « Packages » de votre projet.

C’est l’un des nombreux outils que je partage sur openUPM : suivez-moi pour comprendre et découvrir tous les autres outils que je partage, et suivre mon parcours avec Unity !

Si cet article vous a plu, n’hésitez pas à l’applaudir ou à le commenter, et merci de l’avoir lu jusqu’au bout !