Paczki interfejsu

Reliquary Zestaw paneli — panele z paskiem tytułu i przyciski

Panele okien nine-slice z paskiem tytułu w zimny kamień, wpuszczane ramki list i cztery stany przycisku fazowanego, w SVG i PNG w 1x/2x/4x.

  • ui
  • svg
  • przezroczysty png
  • nine-slice
  • panel
  • przycisk
  • menu
  • wstęga
  • fantasy
  • stylizowany
  • świątynia
  • ciemny interfejs
Panel menu zimny kamień z pasmem tytułu w kolorze blade srebro i wpuszczanym obszarem listy, obok kolumny pokazującej ten sam fazowany przycisk w stanie zwykłym, konturowym hover i wciśniętym
podgląd 1600×800przezroczystość pokazana jako szachownica

O tej paczce

Rzeźbiona ramka, z której odjęto ciepło. Dąb czyta się jak karczma; to czyta się jak krypta, a różnicą nie jest tylko paleta — pasmo nagłówka zastępuje drugą koncentryczną ramkę, a fazowany przycisk zastępuje zaokrągloną zakładkę. Sterczyny narożników i osadzone w nich klejnoty to w obu ta sama geometria, i to właśnie trzyma je w jednym stylu zamiast robić z nich dwa niepowiązane zestawy fantasy.

Dwa panele nine-slice — ramka okna z paskiem tytułu z narożnikami 12 px i wpuszczana ramka wewnętrzna z narożnikami 10 px — pokrywają niemal każde pole, jakiego potrzebuje menu: dialogi, siatki ekwipunku, tła list, podpowiedzi i panele statystyk. Pasmo tytułu jest wbudowane w górę panelu, więc nagłówek dialogu nie potrzebuje drugiego sprite'a ani ręcznego wyrównywania. Oba rozciągają się czysto do dowolnego rozmiaru, bo narożniki nigdy się nie skalują, a środek to wypełnienie płaskie.

Na panelach siedzą cztery stany przycisku fazowanego: zwykły, hover, wciśnięty i wyłączony. Narysowano je na tej samej bazie 128×56 z narożnikami 6 px, więc podmieniasz teksturę w jednym widgecie przycisku i dostajesz całą pętlę interakcji bez przesuwania prostokąta. Stan wciśnięty opuszcza lico o dwa piksele i usuwa górny rozbłysk zamiast tylko przyciemniać, i to właśnie sprawia, że przycisk sprawia wrażenie klikniętego, a nie po prostu przekolorowanego.

Wszystko dostajesz dwa razy. Źródła SVG to pliki, w których zestaw narysowano — otwórz je, zmień sześć tonów głęboki indygo albo pojedynczy akcent blade srebro i wyeksportuj ponownie. Eksporty PNG są płaskie, przezroczyste i wstępnie przeskalowane do 1x, 2x i 4x dla silników, które chcą bitmap, bez premultiplikowanej alfy i bez wypalonego cienia poza granicami sprite'a.

Pobieranie

Bezpośredni link · bez rejestracji · bez strony oczekiwania
Pobierz ZIP32 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 readmeZIP32 kB Pobierz →
Panel okna, edytowalny SVGSVG2.2 kB Pobierz →
Przycisk (stan zwykły), edytowalny SVGSVG1.1 kB Pobierz →

Jak używać

  1. W Unity zaimportuj PNG, ustaw Texture Type na Sprite (2D and UI), a obramowanie na 12, 12, 12, 12 dla panelu okna i 6, 6, 6, 6 dla przycisków; następnie ustaw Image Type na Sliced w komponencie interfejsu.
  2. W Godocie 4 użyj NinePatchRect i ustaw marginesy łatki na te same liczby albo wrzuć SVG bezpośrednio i pozwól Godotowi zrasteryzować go w skali podanej w opcjach importu.
  3. W Unrealu zaimportuj jako Texture2D, utwórz Slate Brush z Draw As ustawionym na Box i podaj margines jako ułamek rozmiaru tekstury — 0.11538 dla panelu 104 px i 0.04688 dla przycisku 128 px.
  4. Aby uzyskać ostry efekt przy niecałkowitych skalach interfejsu, użyj PNG 2x lub 4x zamiast powiększać ten w 1x, albo wskaż silnikowi źródło SVG i pozwól mu rasteryzować w rozmiarze docelowym.

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
"Reliquary Zestaw paneli — panele z paskiem tytułu i przyciski" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/reliquary-panel-ui-kit