Packs d'interface

Inkwell Barres de HUD — coups, charge et combo

Un cadre de barre nine-slice en bande dessinée encrée avec trois remplissages en bandes et une variante segmentée, en 176×28 avec embouts de 12 px. SVG et PNG.

  • ui
  • svg
  • png transparent
  • hud
  • barre de vie
  • barre de progression
  • nine-slice
  • bande dessinée
  • cartoon
  • épais
  • interface claire
Trois barres de statut horizontales empilées sur fond en damier, remplies à des niveaux différents pour les coups, la charge et le combo, avec une barre segmentée de 5 crans et trois barres plus petites en dessous
aperçu 1600×880la transparence est montrée en damier

À propos de ce pack

Barres de statut avec le même contour de quatre pixels que les panneaux. Les remplissages sont d'une couleur parfaitement plate, parce qu'un dégradé à l'intérieur d'une forme encrée se lit comme une erreur et non comme un matériau.

Le cadre est un nine-slice avec des embouts de 12 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 dessiné en trois bandes horizontales — une bande claire en haut, un ton médian et un bord sombre en bas — il se lit donc encore comme une barre en petit, là où un rectangle plat devient une bavure.

Il y a trois couleurs, une par ressource : coups, charge et combo. 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 4 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'attente
Télécharger ZIP17 kB

Kit complet — sources SVG, exports PNG en 1x/2x/4x, licence et readme

Fichiers inclus dans ce pack
FichierFormatPoidsTéléchargement
Kit complet — sources SVG, exports PNG en 1x/2x/4x, licence et readmeZIP17 kB Obtenir →
Cadre de barre, SVG modifiableSVG550 B Obtenir →

Comment l'utiliser

  1. Dessinez d'abord le cadre, puis le remplissage par-dessus avec son bord gauche décalé de la largeur d'embout de 12 px ; n'animer que la largeur du remplissage garde les extrémités du cadre parfaitement immobiles.
  2. 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.
  3. 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.
  4. Pour des ressources en pastilles, utilisez le cadre segmenté et alignez la largeur du remplissage sur des multiples d'un cinquième de la largeur intérieure, pour que le bord du remplissage tombe toujours sur un cran.

Licence

Creative Commons Attribution 4.0 — Gratuit pour un usage commercial. Attribution obligatoire. Conditions complètes · Ce que cela veut dire en pratique

Ligne de crédit à copier
"Inkwell Barres de HUD — coups, charge et combo" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/inkwell-hud-bars