Accueil logo MakeYourGame gachetteG gachetteD paddleG paddleH paddleD paddleB buttonG buttonH buttonD buttonB

Transition de texture avec le Shader Graphe de Unity - part1

Unity

Réalisation d'un effet très connu dans le jeu vidéo avec le Shader Graphe de Unity

7 min Intermédiaire

Ce tutoriel vous propose de réaliser un shader permettant une transition de texture avec le Shader Graphe de Unity.

Nous verrons dans un premier temps le principe de base du shader, puis nous étendrons, lors d'un prochain tutoriel, notre système avec un script C# permettant de changer, en transition et dynamiquement, la texture des objets dans la scène.

Pré-requis: Bases de l'utilisation de Unity . Bases du Shader Graphe (Playlist dans le bas de la page en suivant le dernier lien).

https://makeyourgame.fun/upload/users/alto/tutoriels/Shadergraphe/shadergraphetutothumb-5ff78c18d2957.gif

Cet effet de transition de texture est très utilisé afin de changer, par exemple, la saison de l'intégralité de la map du jeu, comme dans le jeu vidéo NorthGard par exemple.

https://makeyourgame.fun/upload/users/alto/tutoriels/Shadergraphe/northguardspring-5ff7908d5371b.jpeg

https://makeyourgame.fun/upload/users/alto/tutoriels/Shadergraphe/northguardwinter-5ff7909cf200c.jpeg

Avant de pouvoir réaliser l'effet de transition

Ce tutoriel part du postulat que vous ne découvrez pas pour la première fois l'utilisation du Shader Graphe avec Unity. Si vous débutez, pensez à faire un tour au préalable sur la série de tutoriels vidéos dédiés au Shader Graphe avec Unity.

Priorisez avant toute chose l'installation du package URP  (appelé avant LWRP) pour suivre ce tutoriel. Pour se faire vous pouvez vous aider de la vidéo ci-dessous.

La vidéo ci-dessus a été réalisée avec la version Unity 2018. Il se peut donc que vous observiez des différences au niveau de l'interface du Shader Graphe, ou encore de certaines fonctionnalités (noeuds du Shader Graphe par exemple), mais le concept reste identique.

Une fois que le package est installé, il arrive avec le Shader Graphe integré. Vous pourrez donc commencer à créer vos propres shaders. 

Et c'est exactement ce que nous allons faire de suite.

Créer le Shader

Dans la fenêtre Assets, créez un Shader PBR, et nommez le Transition par exemple.

Clic droit => Create => Shader => PBR Graphe

https://makeyourgame.fun/upload/users/alto/tutoriels/Shadergraphe/createshadergrapheunity-5ff797539e0cd.png

Puis sélectionnez ce shader et créez un Material associé.

Clic droit => Create => Material

https://makeyourgame.fun/upload/users/alto/tutoriels/Shadergraphe/createtextureforshaderpbr-5ff798c9b3c3b.png

Nommez le Material comme vous le souhaitez. Ce Material nous permettra, par la suite, de l'appliquer aux objets de la scène auxquels on veut donner cet effet de transition de texture.

Vous êtes prêts pour la suite !

Principe de l'effet de transition de texture

Le principe de base est simple car nous cherchons en réalité juste à changer de texture de l'une pour l'autre et inversement.

https://makeyourgame.fun/upload/users/alto/tutoriels/Shadergraphe/transitiontextures-5ff79b4f11a24.png

A ce changement de texture se rajoute un effet de transition plus doux, pour affiner l'effet.

https://makeyourgame.fun/upload/users/alto/tutoriels/Shadergraphe/transitionprincipe-5ff79d2746776.png

Nous allons donc devoir ajouter du "bruit" pour réaliser ce mélange de texture.

De plus un paramètre d'avancement de la transition (0 à 100% par exemple) permettra de gérer l'ensemble de la transition.

Ainsi on peut résumer notre effet de transition de texture aux étapes suivantes:

  • Disposer de 2 textures et pouvoir en changer - step 1
  • Utiliser un paramètre pour piloter le changement de Texture (0 à 100%) - step 2
  • Ajouter du bruit pour rendre le changement moins abrupte - step 3

Dans cette première partie nous verrons les step 1 et 2, suivi d'un test simple permettant de s'assurer que le shader crée fonctionne correctement.

Construction du shader dans le shader Graphe

Step 1: Disposer de 2 textures et pouvoir en changer

Double-cliquez sur le shader que vous aviez crée au préalable pour passer en édition du shader.

Ajoutez 2 propriétés Texture2D et nommez les à chaque fois comme vous le souhaitez. Pour ce tutoriel nous utiliserons les noms suivants: spring et hot  https://makeyourgame.fun/sceditor/emoticons/smile.png . Donnez leur une texture différente à chaque fois. Utilisez le package fourni pour ce tutoriel dans les ressources .

https://makeyourgame.fun/upload/users/alto/tutoriels/Shadergraphe/transitioncreatepropertyshader-5ff8091724772.gif

Puis par glisser-déposer, ajoutez les propriétés dans la vue principale du Shader Graphe

https://makeyourgame.fun/upload/users/alto/tutoriels/Shadergraphe/transitiondndpropertyshader-5ff8097903596.gif

Créez 2 noeuds Sample Texture 2D et connectez à chaque fois le noeud de la propriété (spring ou hot) au noeud Sample Texture 2D.

https://makeyourgame.fun/upload/users/alto/tutoriels/Shadergraphe/transitionconnectsample2dnodeshader-5ff809ea6c9c5.gif

Créer maintenant un autre noeud Lerp et connectez tour à tour les 2 noeuds Sample Texure 2D

https://makeyourgame.fun/upload/users/alto/tutoriels/Shadergraphe/transitionlerpnodeshader-5ff80a61519fc.gif

Observez maintenant comment vous pouvez jouer sur le paramètre T du noeud LERP, afin de passer d'une Texture à l'autre...

https://makeyourgame.fun/upload/users/alto/tutoriels/Shadergraphe/transitionchangetparameternodelerpshader-5ff80b05e7fd6.gif

Step 2: Utiliser un paramètre pour piloter le changement de Texture

Ajoutez une troisième propriété de type Vector 1, et nommez la par exemple transitionCoeff. A ce stade vous devriez avoir 3 propriétés: spring; hot et transitionCoeff !

https://makeyourgame.fun/upload/users/alto/tutoriels/Shadergraphe/allpropertiesshadertransition-5ff7a832eb410.png

Glissez déposez à son tour cette nouvelle propriété dans la vue principale du Shader Graphe, et connectez la au paramètre T du noeud LERP précédemment crée au step 1.

https://makeyourgame.fun/upload/users/alto/tutoriels/Shadergraphe/addproperty3andconnect-5ff7a7dde09a1.png

Observez que lorsque vous mettez la valeur de la propriété transitionCoeff à 1, une texture est complètement dessinée, à 0 c'est l'autre texture, et à 0.5...un mélange des 2 

https://makeyourgame.fun/sceditor/emoticons/smile.png .
https://makeyourgame.fun/upload/users/alto/tutoriels/Shadergraphe/changetransitioncoeffvalue-5ff7a8d54b5fb.png

Excellent ! Nous avons la base de notre effet, piloté par un coefficient qui pourra être exploité par un script C# dans un prochain tutoriel.

Le shader final devrait donc être semblable à la capture ci-dessous.

https://makeyourgame.fun/upload/users/alto/tutoriels/Shadergraphe/finalshaderste1and2-5ff7aec6c542b.png

Tester notre shader

Avant de quitter le shader en édition, pensez bien à sauver !
https://makeyourgame.fun/upload/users/alto/tutoriels/Shadergraphe/transitionsaveshader-5ff80b91e0359.gif

Pour tester il nous suffit d'une scène vide et d'un cube.

Puis glissez déposez le Material crée au tout début (associé au shader que nous venons de créer), sur le cube dans la scène.

https://makeyourgame.fun/upload/users/alto/tutoriels/Shadergraphe/transitiondndmaterialshader-5ff80d196506a.gif

Si maintenant vous sélectionnez le cube et puis vous changez dans la vue Inspector, la valeur de la propriété transtionCoeff entre 0 et 1, vous devriez pouvoir apprécier votre tout nouvel effet basé sur un shader.

https://makeyourgame.fun/upload/users/alto/tutoriels/Shadergraphe/transitiontestporpertyeffectshader-5ff80cbe8c709.gif

Essayez un peu de dépasser 0 (en négatif) et 1 ... que se passe-t-il ? Il va falloir limiter tout ça non ? Nous verrons cela dans la seconde partie qui sera rédigée très prochainement.

Pour finir vous pouvez retrouver la vidéo associée sur youtube

Et voilà, nous avons terminé deux étapes sur trois, tout en créant l'effet de base de notre shader.

Suivez le prochain tutoriel (partie 2), pour voir comment réaliser le step 3, ainsi que le script permettant de changer dynamiquement de texture au runtime.

Vues: 127 Licence:

Connectez-vous pour applaudir applause logo 0 claps

Validation du Tutoriel

Veuillez vous connecter ou créer un compte pour pouvoir valider ce tutoriel et ainsi gagner de l'expérience (XP) !

×