[Résolu] Shader Graph pour une jauge

Questions à propos du scripting Shader.
Avatar de l’utilisateur
jmhoubre
Messages : 851
Inscription : 05 Oct 2019 22:05

[Résolu] Shader Graph pour une jauge

Message par jmhoubre » 31 Mai 2021 20:24

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 ?
Dernière édition par jmhoubre le 02 Juin 2021 01:27, édité 1 fois.

Avatar de l’utilisateur
boubouk50
ModoGenereux
ModoGenereux
Messages : 6186
Inscription : 28 Avr 2014 11:57
Localisation : Saint-Didier-en-Bresse (71)

Re: Shader Graph pour une jauge

Message par boubouk50 » 01 Juin 2021 09:13

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.
"Ce n'est pas en améliorant la bougie, que l'on a inventé l'ampoule, c'est en marchant longtemps."
Nétiquette du forum
Savoir faire une recherche
Apprendre la programmation

Avatar de l’utilisateur
jmhoubre
Messages : 851
Inscription : 05 Oct 2019 22:05

Re: Shader Graph pour une jauge

Message par jmhoubre » 01 Juin 2021 10:17

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 ?

Avatar de l’utilisateur
boubouk50
ModoGenereux
ModoGenereux
Messages : 6186
Inscription : 28 Avr 2014 11:57
Localisation : Saint-Didier-en-Bresse (71)

Re: Shader Graph pour une jauge

Message par boubouk50 » 01 Juin 2021 10:24

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.
"Ce n'est pas en améliorant la bougie, que l'on a inventé l'ampoule, c'est en marchant longtemps."
Nétiquette du forum
Savoir faire une recherche
Apprendre la programmation

Avatar de l’utilisateur
jmhoubre
Messages : 851
Inscription : 05 Oct 2019 22:05

Re: Shader Graph pour une jauge

Message par jmhoubre » 02 Juin 2021 01:27

Merci

Répondre

Revenir vers « les Shaders »