Paczki interfejsu

Slate Wybór poziomu

12 części mapy i wyboru poziomu (realistyczny) do interfejsów w trybie ciemny — neutralny łupek, akcent ciepłe złoto. SVG i przezroczysty PNG w 1x/2x/4x.

  • ui
  • svg
  • przezroczysty png
  • wybór poziomu
  • mapa świata
  • etap
  • progresja
  • kampania
  • realistyczny
  • realistyczny
  • ciemny interfejs
Arkusz z 12 części mapy i wyboru poziomu (realistyczny) z rodziny Slate, rozłożonymi na szachownicy przezroczystości, z rozmiarami w pikselach wypisanymi pod spodem
podgląd 1600×973przezroczystość pokazana jako szachownica

O tej paczce

Slate Wybór poziomu to zestaw 12 części mapy i wyboru poziomu narysowanych w stylu realistyczny, w którym pięciopunktowy gradient odblaskowy spływa po licu ze szczotkowanego metalu z nitami w narożnikach. Zawiera cztery stany węzła etapu, ścieżkę prostą i wygiętą, każdą zablokowaną i otwartą, tabliczkę regionu, krawędź mgły wojny, sterowanie powiększeniem oraz ramkę legendy.

Mapa wyboru poziomu składa się z dwóch rzeczy: węzłów i linii między nimi — i to właśnie linie każdy darmowy zestaw pomija. Rysowanie ich w silniku jest miejscem, w którym mapa się rozpada: kreska wykonana kodem nie pasuje do stylu, a ścieżka prosta w jednym stylu i drżąca od ręki w innym nie może być prostokątem.

Tekstura pędzla to wzór linii 3px, a nie prawdziwy szum: szum potraja wagę PNG dla tekstury, której nikt nie widzi przy 1x. Cień jest warstwowy, a nie rozmyty, żeby wytrzymał przy 4x.

W obrębie tego stylu to jest odczyt Slate: interfejs w trybie ciemny na palecie neutralny łupek z akcentami ciepłe złoto, zbudowany wokół ramki o pojedynczym obramowaniu, przycisków o prostych narożnikach w 128x40, pasków pasmowych podzielonych na 10 segmentów i ikon konturowych na siatce 24px. To właśnie te wymiary tłumaczą, dlaczego dwie rodziny mogą dzielić styl graficzny, nie będąc wymienne: styl decyduje, jak rysuje się krawędź, a liczby decydują, do czego interfejs służy.

Ścieżki dostajesz w tym samym języku rysunku co węzły — proste i wygięte, każda w odczycie zablokowanym i otwartym. Zablokowana jest cienka i przerywana, otwarta ciągła i pełnej grubości, więc postęp na mapie widać także w połączeniach, a nie tylko w węzłach. Cztery stany węzła rozróżnia struktura: zablokowany jest kreskowany na wskroś, dostępny niesie jedną kropkę pośrodku, ukończony jest wypełniony, a perfekcyjny dokłada wypełnionemu węzłowi cztery narożniki. Krawędź mgły narysowano jako pas stopniowany, a nie miękkie rozmycie, bo rozmycie rasteryzuje się inaczej w każdym silniku, a krawędź mapy jest dokładnie tym miejscem, gdzie to widać.

Każdy sprite dostajesz jako edytowalny SVG i jako przezroczysty PNG w 1x, 2x i 4x, więc możesz wrzucić PNG prosto do silnika albo otworzyć wektor i zmienić kolor. Narysowany w tych samych wymiarach co reszta rodziny Slate, co oznacza, że ten zestaw i zestaw paneli Slate pasują do siebie bez skalowania któregokolwiek. Dobrze pasuje do interfejsów realistyczny i symulacyjnych.

Pobieranie

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

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

Pliki zawarte w tej paczce
PlikFormatWagaPobieranie
Komplet — źródła SVG, eksporty PNG w 1x/2x/4x, licencja i readmeZIP89 kB Pobierz →
Węzeł etapu, zablokowany, edytowalny SVGSVG1.9 kB Pobierz →

Jak używać

  1. Węzły rozstaw na własnej siatce, a między nie połóż odcinki ścieżki; ścieżki narysowano pod rozstaw węzłów podany w danych technicznych, więc dochodzą do krawędzi węzła bez zachodzenia.
  2. Po odblokowaniu etapu zamień ścieżkę zablokowaną na jej otwarty odpowiednik, zamiast ją barwić. Sygnałem jest wzór przerywany.
  3. Zakotwicz krawędź mgły na granicy zbadanego obszaru i pozwól jej wchodzić na stronę niezbadaną; stopniowany pas narysowano tak, by powtarzał się w poziomie.
  4. Tabliczka regionu i ramka legendy mają to samo opracowanie narożników co zestaw paneli tej rodziny, żeby ekran mapy i ekran menu nie wyglądały jak dwie różne gry.

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
"Slate Wybór poziomu" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/slate-level-select