Paczki interfejsu
Nightcity Paski HUD — życie, mana i wytrzymałość
16 sprite’ów paska HUD neonowa noc: ramka standardowa, wąska i pionowa, w każdej trzy z pustym rdzeniem wypełnienia, plus warianty dzielony, widmowy i tarczy.

O tej paczce
Paski 220x20 podzielone na szesnaście nacięć, najgęstszy podział w tej rodzinie. HUD cyberpunk czyta się jak strumień liczb, a nie jak wrażenie, a szesnaście podziałek pozwala graczowi trafić w wartość bez odczytu liczbowego nad paskiem.
Ramka to nine-slice z końcówkami 4 px, więc rozciąga się na dowolną szerokość bez deformowania końców — pasek bossa na pełną szerokość i pasek tabliczki wroga 40 px korzystają z tego samego pliku.
Wypełnienia są osobnymi sprite'ami, a nie wypalonymi w ramce, i to jest część, która liczy się w praktyce: skalujesz szerokość wypełnienia od zera do maksimum, a ramka nigdy się nie rusza. Każde wypełnienie to pusta skorupa z jasnym rdzeniem w środku, więc kolor gniazda prześwituje między krawędziami, a pasek czyta się jak zamknięta energia, a nie farba.
Kolory są trzy, po jednym na zasób: życie, mana i wytrzymałość. Rozstawiono je zarówno w jasności, jak i w odcieniu, a to właśnie ta część przetrwa zrzut ekranu w skali szarości i najczęstsze formy daltonizmu. Zestaw dostrojony do jednakowej jasności wygląda równo w rzędzie próbek i zapada się w jeden szary blok na ekranie.
Wariant dzielony dokłada 15 linii karbu na tej samej ramce, dla gier liczących jednostki dyskretne — serca, ładunki, amunicję — zamiast ciągłego procentu. To osobny plik, a nie nakładka, więc możesz go wstawić bez zmiany swojego widgetu paska.
Trzy warianty ramki pokrywają miejsca, w których paski faktycznie siedzą: pasek standardowy, wąski na tabliczki z nazwami wrogów i pionowy, bo kolumna many to nie obrócony pasek zdrowia — obracanie nine-slice rozciąga jego końcówki wzdłuż złej osi. Każdy wariant ma własny zestaw trzech wypełnień.
Dwa wypełnienia nakładkowe obsługują stany, których pojedynczy pasek nie pokaże sam. Wypełnienie widmowe jest puste i przerywane: znaczy odcinek dopiero co utracony, więc trafienie czyta się jako zmianę, a nie jako nową liczbę. Wypełnienie tarczy jest kreskowane zamiast barwione, bo warstwa pochłaniania leży na pasku zasobu, a drugi kolor w tym miejscu zderza się z kolorem pod spodem. Wszystko dołączone jako edytowalny SVG i płaski przezroczysty PNG w 1x, 2x i 4x.
Pobieranie
Bezpośredni link · bez rejestracji · bez strony oczekiwaniaKompletny zestaw — źródła SVG, eksporty PNG w 1x/2x/4x, licencja i readme
Jak używać
- Narysuj najpierw ramkę, potem wypełnienie na wierzchu z lewą krawędzią wsuniętą o szerokość końcówki 4 px; animowanie samej szerokości wypełnienia utrzymuje końce ramki idealnie nieruchomo.
- W Unity ustaw obraz wypełnienia na Image Type Filled z Fill Method Horizontal albo użyj obrazu Sliced i animuj szerokość RectTransform — oba działają, bo wypełnienie nie ma własnych zaokrąglonych narożników.
- W Godocie 4 TextureProgressBar z ramką jako Under Texture i wypełnieniem jako Progress Texture odtwarza to wszystko bez linijki kodu, a Stretch Mode ustawiony na Tile zachowuje końcówki nietknięte.
- Przy zasobach liczonych w pastylkach użyj ramki segmentowanej i przyciągaj szerokość wypełnienia do wielokrotności jednej 16 części szerokości wewnętrznej, żeby krawędź wypełnienia zawsze padała na nacięcie.
Licencja
Creative Commons Uznanie autorstwa 4.0 — Za darmo do użytku komercyjnego. Uznanie autorstwa obowiązkowe. Pełne warunki · Co to znaczy w praktyce
"Nightcity Paski HUD — życie, mana i wytrzymałość" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/nightcity-hud-bars


