Le problème des barres de santé traditionnelles rectangulaires ou cardiaques est bien compris et facilement résolu. Mais quelle est la solution acceptée pour des barres de santé plus "créatives", comme la maquette que j'ai faite ci-dessous?
La manière évidente de le faire serait d’avoir des sprites «entre-deux», la troisième image serait donc son propre sprite, ainsi que de nombreuses autres transitions pour différents niveaux de santé. Mais cela semble vraiment inélégant et le nombre d'intermédiaires nécessaires pour créer une transition en douceur entre les états de santé serait élevé.
La seule autre idée que je puisse proposer est de superposer le sprite "santé complète" au-dessus du sprite "santé vide" et d'ensembles de coordonnées de pixels pré-cuisson pour représenter chaque tick de santé et les rendre ensuite opaques ou transparents. monte ou descend.
Je souhaite que cette question soit indépendante de la langue et de la plate-forme, mais n'hésitez pas à fournir un échantillon concret dans n'importe quelle langue / bibliothèque / structure si cela aide la réponse.
Réponses:
Il existe un moyen très simple de réaliser cela avec les shaders, il faut trois * textures: barre de santé vide, texture de barre de santé et masque avec un gradient de répartition de la santé avec un extrême (par exemple, la valeur alpha la plus sombre non noire ou la plus transparente) et autre à l'autre bout. C’est le mieux indiqué sur l’image. Je ne suis actuellement pas en mesure de dessiner un dégradé courbe linéaire, mais je suis sûr que vos artistes n’auront aucun problème: à
présent, dans le shader, échantillonnez les textures et limitez la valeur du masque, en supprimant plus lumineux que le seuil d'entrée (basé sur le pourcentage d'intégrité du shader).
Vous pourriezutilisez une formule mathématique pour masquer au lieu d'une texture, mais si vous agissiez ainsi, vous seriez toujours très limité aux formes que vous êtes capables (= simples) de créer avec lesdites formules - et en trouver une n'est pas trivial.
* voir les commentaires
la source
Implémenté mathématiquement, en tant que pixel shader:
Sur la CPU, calculez la HealthDirection et son produit scalaire avec V2
Sur le GPU, calculez une direction normalisée à l’écart du point central pour chaque pixel. Comparez chaque produit scalaire à HealthDirections pour choisir entre ombrer "fond" ou en couleur.
Si vous "inversiez" cet algorithme et si vous travailliez dans l'autre sens, vous pourriez "dé-caler" la direction de chaque pixel en pourcentage et les comparer à HealthPercent à la place. Avec le pourcentage calculé de chaque pixel, le passage du rouge au vert sur le GPU devient trivial.
Dessinez d'abord la barre en appliquant l'algorithme à un quad; les couleurs de sortie entre rangeMin et rangeMax (peuvent être cuites) et clip () ou une sortie transparente partout. Ensuite, dessinez le sprite (modifié) dessus, en utilisant alpha. J'ai tracé votre barre en CAO, l'inondé, puis "magiquement" la forme de couleur unie dans Paint pour la supprimer. Le mien ressemble à de la merde à cause du mélange manuel d'AutoCAD et de Paint; en admettant que les bords intérieurs soient transparents, le vôtre sera parfait .
La bordure blanche correspond aux limites du quad. Il et les X rouges sont pour référence seulement:
Le "sprite avec trou" n'a pas besoin d'être rendu en même temps que la barre de santé. Ils devraient être instanciés et tirés au sort en même temps, une fois toutes les barres de santé remplies. Étant donné que l'algorithme est autonome dans le shader, vous pouvez également y ajouter une instance, puis dessiner toutes les barres de santé avec un seul appel de dessin instancié. Dessiner chaque barre de santé à l'écran devrait prendre 2 appels DrawInstanced (...) et être "fou rapide".
la source