Paczki interfejsu

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

18 sprite’ów interfejsu purpura zmierzchu: z belką tytułową panele nine-slice, dymek, belka nagłówka, separator, żeton i dwanaście stanów przycisku kwadratowych.

  • ui
  • svg
  • przezroczysty png
  • nine-slice
  • panel
  • przycisk
  • menu
  • wstęga
  • pixel art
  • retro
  • 2d
Panel menu purpura zmierzchu z pasmem tytułu w kolorze bursztyn i wpuszczanym obszarem listy, obok kolumny pokazującej ten sam prostokątny przycisk w stanie zwykłym, konturowym hover i wciśniętym
podgląd 1600×1115przezroczystość pokazana jako szachownica

O tej paczce

Zestaw o twardych krawędziach do gier pikselowych, które mimo wszystko chcą prawdziwego menu, z paskiem tytułu wbudowanym w panel, a nie przykręconym na wierzch. Nigdzie nie ma zaokrąglonych narożników ani wygładzania: każde obramowanie to jeden płaski rząd pikseli, jedyny sposób, w jaki panel zachowa kształt, gdy gracz uruchomi grę w 3x na monitorze 4K. Fiolety są dość chłodne, by bursztyn czytał się jak alarm bez potrzeby czerwieni.

Dwa panele nine-slice — ramka okna z paskiem tytułu z narożnikami 16 px i wpuszczana ramka wewnętrzna z narożnikami 12 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 siedzi dwanaście kwadratowych sprite’ów przycisku: domyślny, najechany, wciśnięty i nieaktywny, każdy narysowany trzy razy — standardowy pasek 96×32, 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 32 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 nocny fiolet albo pojedynczy akcent bursztyn 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 ZIP39 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 readmeZIP39 kB Pobierz →
Panel okna, edytowalny SVGSVG2.3 kB Pobierz →
Przycisk (stan zwykły), edytowalny SVGSVG1.6 kB Pobierz →

Jak używać

  1. W Unity zaimportuj PNG, ustaw Texture Type na Sprite (2D and UI), a obramowanie na 16, 16, 16, 16 dla panelu okna i 8, 8, 8, 8 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.2 dla panelu 80 px i 0.08333 dla przycisku 96 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.
  5. Każda krawędź pada na pełny piksel i nic nie jest wygładzane, więc importuj PNG 1x z filtrowaniem ustawionym na Point (Unity), Nearest (Godot) lub Nearest-Neighbour (Unreal) i skaluj wyłącznie liczbami całkowitymi.

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
"Dusk 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/dusk-panel-ui-kit