Paczki interfejsu

Sketch Wybór poziomu

12 części mapy i wyboru poziomu (rysunek odręczny) do interfejsów w trybie jasny — papier złamana biel, akcent atramentowy błękit. SVG i przezroczysty PNG w 1x/2x/4x.

  • ui
  • svg
  • przezroczysty png
  • wybór poziomu
  • mapa świata
  • etap
  • progresja
  • kampania
  • kreska odręczna
  • rysunek odręczny
  • rysowany ręcznie
  • szkic
  • zeszyt
  • jasny interfejs
Arkusz z 12 części mapy i wyboru poziomu (rysunek odręczny) z rodziny Sketch, rozłożonymi na szachownicy przezroczystości, z rozmiarami w pikselach wypisanymi pod spodem
podgląd 1600×973przezroczystość pokazana jako szachownica

O tej paczce

Sketch Wybór poziomu to zestaw 12 części mapy i wyboru poziomu narysowanych w stylu rysunek odręczny, w którym każda krawędź jest próbkowana i lekko przesuwana, więc żadna linia nie jest naprawdę prosta. 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.

Drżenie jest deterministyczne, a nie losowe: to samo pudełko drży tak samo w każdym buildzie, i to właśnie pozwala mu żyć w systemie kontroli wersji. Cieniowanie to kreskowanie krzyżowe, bo gradient pod rysowaną linią czyta się jak filtr, a nie jak ręka.

W obrębie tego stylu to jest odczyt Sketch: interfejs w trybie jasny na palecie papier złamana biel z akcentami atramentowy błękit, zbudowany wokół dwóch koncentrycznych ramek, przycisków o prostych narożnikach w 132x46, pasków pasmowych podzielonych na 10 segmentów i ikon konturowych na siatce 32px. 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 Sketch, co oznacza, że ten zestaw i zestaw paneli Sketch pasują do siebie bez skalowania któregokolwiek. Dobrze pasuje do gier zeszytowych i baśniowych.

Pobieranie

Bezpośredni link · bez rejestracji · bez strony oczekiwania
Pobierz ZIP124 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 readmeZIP124 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
"Sketch Wybór poziomu" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/sketch-level-select