Packs d'interface
Neon Barres de HUD — bouclier, énergie et chaleur
Un cadre de barre nine-slice en néon à fort contraste avec trois remplissages à noyau creux et une variante segmentée, en 200×20 avec embouts de 6 px. SVG et PNG.
À propos de ce pack
Systèmes de vaisseau plutôt que ressources de fantasy : bouclier, énergie et chaleur. Les remplissages sont des coques creuses avec un noyau lumineux : la couleur du logement se voit entre les bords et la barre se lit comme de l'énergie contenue et non comme de la peinture. Les trois couleurs sont éloignées les unes des autres en teinte comme en luminosité, parce qu'un pilote qui regarde un HUD un quart de seconde lit la position et la couleur en même temps.
Le cadre est un nine-slice avec des embouts de 6 px : il s'étire à n'importe quelle largeur sans que les extrémités se déforment — une barre de boss pleine largeur et une barre de plaque de nom d'ennemi de 40 px utilisent le même fichier.
Les remplissages sont des sprites séparés et ne sont pas cuits dans le cadre, et c'est ce qui compte en pratique : vous faites varier la largeur du remplissage de zéro au maximum et le cadre ne bouge jamais. Chaque remplissage est une coque creuse traversée par un noyau lumineux : la couleur du logement se voit entre les bords et la barre se lit comme de l'énergie contenue plutôt que comme de la peinture.
Il y a trois couleurs, une par ressource : bouclier, énergie et chaleur. Elles sont espacées en luminosité autant qu'en teinte, et c'est cette partie-là qui survit à une capture en niveaux de gris et aux formes les plus courantes de daltonisme. Un jeu réglé sur une luminosité identique paraît équilibré dans une rangée d'échantillons et s'effondre en un seul bloc gris à l'écran.
La variante segmentée ajoute 11 lignes de cran par-dessus le même cadre, pour les jeux qui comptent des pastilles discrètes — cœurs, charges, munitions — plutôt qu'un pourcentage continu. C'est un fichier séparé et non une surcouche, vous pouvez donc l'utiliser sans changer votre widget de barre. Tout est fourni en SVG modifiable et en PNG plat transparent à 1x, 2x et 4x.
Téléchargement
Lien direct · sans inscription · sans page d'attenteKit complet — sources SVG, exports PNG en 1x/2x/4x, licence et readme
Comment l'utiliser
- Dessinez d'abord le cadre, puis le remplissage par-dessus avec son bord gauche décalé de la largeur d'embout de 6 px ; n'animer que la largeur du remplissage garde les extrémités du cadre parfaitement immobiles.
- Dans Unity, réglez l'image de remplissage sur Image Type Filled avec Fill Method Horizontal, ou utilisez une image Sliced et animez la largeur du RectTransform — les deux marchent parce que le remplissage n'a pas de coins arrondis propres.
- Dans Godot 4, un TextureProgressBar avec le cadre en Under Texture et le remplissage en Progress Texture reproduit l'ensemble sans une ligne de code, et Stretch Mode réglé sur Tile garde les embouts intacts.
- Pour des ressources en pastilles, utilisez le cadre segmenté et alignez la largeur du remplissage sur des multiples d'un douzième de la largeur intérieure, pour que le bord du remplissage tombe toujours sur un cran.
- Le bouclier se lit dans la couleur d'accent exprès : c'est la barre qu'un joueur surveille en combat, et la seule qui partage une teinte avec le chrome de l'interface.
Licence
Creative Commons Attribution 4.0 — Gratuit pour un usage commercial. Attribution obligatoire. Conditions complètes · Ce que cela veut dire en pratique
"Neon Barres de HUD — bouclier, énergie et chaleur" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/neon-hud-barsPlus de Packs d'interface
Voir tout →
Aetherlab Toiles de fond
7 pièces de fond et de surcouche (magitech) pour interfaces en mode sombre — bleu de laboratoire, accent cyan éthéré. SVG et PNG transparent en 1x/2x/4x.
Aetherlab Cadres de carte
11 composants de cartes et de notifications (magitech) pour interfaces en mode sombre — bleu de laboratoire, accent cyan éthéré. SVG et PNG transparent en 1x/2x/4x.
Aetherlab Kit de dialogue
7 composants de dialogue (magitech) pour interfaces en mode sombre — bleu de laboratoire, accent cyan éthéré. SVG et PNG transparent en 1x/2x/4x.
Aetherlab Barres de HUD — vie, mana et endurance
Un cadre de barre nine-slice en éther froid avec trois remplissages à noyau creux et une variante segmentée, en 200×20 avec embouts de 4 px. SVG et PNG.