Paczki interfejsu
Inkwell Zestaw paneli — panele z pojedynczą ramką i przyciski
18 sprite’ów interfejsu komiks w tuszu: jednoramkowe panele nine-slice, dymek, belka nagłówka, separator, żeton i dwanaście stanów przycisku kwadratowych.

O tej paczce
Zestaw komiksowy, który bierze swoją wagę z tuszu, a nie z oświetlenia. Każda powierzchnia to płaskie wypełnienie wewnątrz grubego ciemnego konturu z twardym przesuniętym cieniem pod spodem — bez faz, bez gradientów, bez niczego, co udawałoby, że ekran ma źródło światła. To właśnie pozwala mu stać obok ręcznie rysowanych postaci, nie wyglądając jak z innej gry.
Dwa panele nine-slice — ramka okna z pojedynczą ramką z narożnikami 26 px i wpuszczana ramka wewnętrzna z narożnikami 18 px — pokrywają niemal każde pole, jakiego potrzebuje menu: dialogi, siatki ekwipunku, tła list, podpowiedzi i panele statystyk. Jedno ciągłe obramowanie utrzymuje panel na tyle spokojnym, by mógł stać za gęstym tekstem. Oba rozciągają się czysto do dowolnego rozmiaru, bo narożniki nigdy się nie skalują, a środek to wypełnienie płaskie.
Na panelach siedzi dwanaście kwadratowych sprite’ów przycisku: domyślny, najechany, wciśnięty i nieaktywny, każdy narysowany trzy razy — standardowy pasek 152×52, kwadratowy kwadratowych przycisk ikonowy oraz kompaktowy przycisk do pasków narzędzi i akcji w wierszu. Trzy rozmiary to osobne pliki, a nie jeden przeskalowany sprite, bo rysunek zależy od rozmiaru: ścięcie policzone przy 52 px jest przeliczane w mniejszych, a nie zmniejszane. Stan wciśnięty obniża lico o dwa piksele i zdejmuje górny rozbłysk zamiast tylko przyciemniać — to właśnie sprawia, że przycisk wydaje się kliknięty, a nie po prostu przemalowany.
Cztery mniejsze elementy pokrywają to, czego menu potrzebuje pomiędzy panelami: dymek z ogonkiem, belka nagłówka opierająca się o górną krawędź panelu, separator sekcji ze znakiem pośrodku i żeton etykiety na liczniki i statusy. Żaden z nich nie jest panelem okna w innym rozmiarze — nine-slice i tak rozciąga się do dowolnej wielkości, więc drugi plik o innej szerokości byłby wypełniaczem, a nie komponentem.
Wszystko dostajesz dwa razy. Źródła SVG to pliki, w których zestaw narysowano — otwórz je, zmień sześć tonów płaski plakat albo pojedynczy akcent sygnałowa czerwień 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 oczekiwaniaKompletny zestaw — źródła SVG, eksporty PNG w 1x/2x/4x, licencja i readme
Jak używać
- W Unity zaimportuj PNG, ustaw Texture Type na Sprite (2D and UI), a obramowanie na 26, 26, 26, 26 dla panelu okna i 18, 18, 18, 18 dla przycisków; następnie ustaw Image Type na Sliced w komponencie interfejsu.
- 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.
- W Unrealu zaimportuj jako Texture2D, utwórz Slate Brush z Draw As ustawionym na Box i podaj margines jako ułamek rozmiaru tekstury — 0.23214 dla panelu 112 px i 0.11842 dla przycisku 152 px.
- 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.
- Kontur ma cztery piksele w 1x i to jest cały styl — jeśli zmniejszysz zestaw poniżej 1x, kontur się zapada, a panele przestają czytać się jak tusz, więc traktuj eksport 1x jako podłogę i rośnij od niego w górę.
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
"Inkwell Zestaw paneli — panele z pojedynczą ramką i przyciski" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/inkwell-panel-ui-kit


