Page 1 sur 1

[Résolu] Shader Graph pour une jauge

Publié : 31 Mai 2021 20:24
par jmhoubre
Bonjour,

j'ai besoin d'une jauge configurable, comme une barre de santé, mais utilisant une capsule horizontale. J'ai obtenu un résultat assez décevant, et je viens chercher de l'aide sur ce sujet que je connais assez peu (en tout cas pas assez pour résoudre mes problèmes).

Avancement
Voici mon graphe actuel:
Image
Du bas à gauche vers le haut à droite :
  • A : node DegreesToRadian, avec X = 180
  • B : Rotate UV, avec l'input Rotation venant du node A
  • C : Split, avec l'entrée venant de B
  • D : Step, avec Edge venant de F et In venant de D
  • E : Propriété Satiety, valeur actuelle 0.66, slider 0 -> 1
  • F : node One Minus, avec In venant de E
  • G : node Multiply, dont les entrées sont H et D
  • H : Propriété MainColor
  • I : Fragment Base color venant de G
  • J : propriété BackgroudColor, non utilisée.
J'applique le matériau issu de ce shader à une capsule allongée, enfant d'un animal. C'est moche, et quand l'animal traverse horizontalement, ce n'est pas affiché dans le bon sens.
ImageImage

Donc 3 questions :
- comment intégrer une couleur de fond différente du noir ?
- comment orienter le remplissage de la barre ?
- comment rendre cela un peu moins moche ?

Re: Shader Graph pour une jauge

Publié : 01 Juin 2021 09:13
par boubouk50
Salut,

voici un début:

Image

L'idée:
- Récupérer les UVs pour ne garder que l'axe qui nous convient pour la capsule (sens bas haut): Y (donc G) > Split
- Saturer l'UV en Y pour faire un clamp entre 0 et 1 et éviter la répétition.
- Faire un Step en fonction de la vie (comprise entre 0 et 1) pour créer un masque
- Créer une branche pour définir le masque inverse. Ainsi, tu as un masque pour la zone Vie et un pour la zone background.
- Multiplier chaque masque par une couleur prédéfinie (Ici 2 couleurs exposées)
- Ajouter les deux masques. Il n'y aura pas de superposition car l'un est l'inverse de l'autre.

Re: Shader Graph pour une jauge

Publié : 01 Juin 2021 10:17
par jmhoubre
Merci boubouk,

ça règle effectivement un de mes problèmes. Je vais régler les 2 autres avec un script.

Tu aurais une ressource (de préférence en français) pour progresser dans le domaine Shader Graph ?

Re: Shader Graph pour une jauge

Publié : 01 Juin 2021 10:24
par boubouk50
J'ai appris à coder les shaders, donc utiliser le Shader Graph n'est pas si compliqué quand tu connais les maths derrière, j'ai simplement fait les tutos d'Unity Learn pour comprendre l'interface.

Sinon, ça règle bien tes problèmes: la couleur de background, le sens de jauge. Quant à la beauté... ça c'est plus compliqué, tu as déjà la possibilité de modifier les 2 couleurs pour qu'elles s'accordent bien. Sinon peut-être définir un design de barre de vie avant (sous toshop ou autre)

Pour l'orientation, je passerai pas par le shader mais en code avec un LookAt ou autre.

Re: Shader Graph pour une jauge

Publié : 02 Juin 2021 01:27
par jmhoubre
Merci