Paczki interfejsu

Candy Paski HUD — życie, mana i wytrzymałość

Ramka paska nine-slice w cukrowy blask z trzema wypełnieniami pasmowymi i wariantem segmentowanym, 190×30 z końcówkami 12 px. SVG i PNG.

  • ui
  • svg
  • przezroczysty png
  • hud
  • pasek życia
  • pasek postępu
  • nine-slice
  • kreskówka
  • casual
  • mobilny
  • match 3
Trzy poziome paski stanu ułożone jeden na drugim na tle szachownicy, wypełnione do różnych poziomów dla życia, many i wytrzymałości, z paskiem segmentowanym o 6 nacięciach i trzema mniejszymi paskami pod spodem
podgląd 1600×880przezroczystość pokazana jako szachownica

O tej paczce

Paski 30px z sześcioma grubymi segmentami. Gra casualowa pokazuje jeden lub dwa paski i chce, by dało się je odczytać z drugiego końca pokoju, na wyciągnięcie ręki, a nie liczyć precyzyjnie, więc segmentów jest niewiele, a pasek jest dość wysoki, by unieść połysk bez połknięcia wypełnienia przez rozbłysk.

Ramka to nine-slice z końcówkami 12 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 narysowano w trzech poziomych pasmach — jasne pasmo u góry, ton średni i ciemna krawędź na dole — więc nadal czyta się jak pasek w małych rozmiarach, gdzie płaski prostokąt zamienia się w smugę.

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 segmentowany dokłada 5 linii nacięć na tej samej ramce, dla gier liczących pojedyncze pastylki — serca, ładunki, amunicję — zamiast ciągłego procentu. To osobny plik, a nie nakładka, więc użyjesz go bez zmiany swojego widgetu paska. Wszystko dołączone jako edytowalny SVG i jako płaski przezroczysty PNG w 1x, 2x i 4x.

Pobieranie

Bezpośredni link · bez rejestracji · bez strony oczekiwania
Pobierz ZIP21 kB

Kompletny zestaw — źródła SVG, eksporty PNG w 1x/2x/4x, licencja i readme

Pliki zawarte w tej paczce
PlikFormatWagaPobieranie
Kompletny zestaw — źródła SVG, eksporty PNG w 1x/2x/4x, licencja i readmeZIP21 kB Pobierz →
Ramka paska, edytowalny SVGSVG576 B Pobierz →

Jak używać

  1. Narysuj najpierw ramkę, potem wypełnienie na wierzchu z lewą krawędzią wsuniętą o szerokość końcówki 12 px; animowanie samej szerokości wypełnienia utrzymuje końce ramki idealnie nieruchomo.
  2. 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.
  3. 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.
  4. Przy zasobach liczonych w pastylkach użyj ramki segmentowanej i przyciągaj szerokość wypełnienia do wielokrotności jednej szóstej 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

Linijka uznania do skopiowania
"Candy Paski HUD — życie, mana i wytrzymałość" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/candy-hud-bars