Paczki interfejsu

Oak Kontrolki — pole wyboru, przełącznik i suwak

19 kontrolek interfejsu ciepły dąb: pole wyboru, radio, przełącznik, suwak i licznik, ze stanami włączony, wyłączony, częściowy i nieaktywny rysowanymi kształtem.

  • ui
  • svg
  • przezroczysty png
  • pole wyboru
  • przełącznik
  • suwak
  • ustawienia
  • kontrolki
  • fantasy
  • rpg
  • drewno
Kontrolki ustawień na tle szachownicy — puste i zaznaczone pole wyboru, niewybrany i wybrany przycisk radiowy, przełącznik wyłączony i włączony oraz tor suwaka z gałką
podgląd 1600×752przezroczystość pokazana jako szachownica

O tej paczce

Kontrolki 24px z rzeźbionym potraktowaniem ograniczonym do tego, co się mieści. Sterczyny narożników znikają w tym rozmiarze i zostaje fazowana krawędź oraz trzypunktowy gradient — celowo, bo ornament, który nie mieści się w swoim polu, jest gorszy niż jego brak, a pole wyboru 24px ze sterczynami to plama.

Zestaw pokrywa to, czego ekran ustawień naprawdę potrzebuje: pole wyboru, przycisk radiowy, przełącznik, suwak z osobną gałką i parę licznika dla wartości dyskretnych. Każda kontrolka ze stanami dostarcza każdy stan jako własny plik na bazie 24×24 — przełącznik ma 48×24, a tor suwaka 192 px szerokości, żeby rozciągnąć go w nine-slice na dowolną długość. Suwak przychodzi też pusty, pełny i pionowy, bo kolumna głośności to nie obrócony wiersz.

Włączone i wyłączone są narysowane jako różne kształty, a nie różne kolory. Niezaznaczone pole to pusta wnęka; zaznaczone to pełna powierzchnia z wyciętą fajką. To ma znaczenie, bo ekran ustawień jest właśnie tym miejscem, gdzie gracz najczęściej ma włączony tryb dla daltonistów, shader w skali szarości albo mocno zabarwiony postprocess — a stan czytelny wyłącznie po odcieniu znika pod każdym z tych trzech.

Suwak przychodzi jako tor i gałka, a nie jeden sprite. Animowanie jednoczęściowego suwaka oznacza rysowanie go od nowa przy każdej wartości; z dwiema częściami rozciągasz wypełnienie i przesuwasz gałkę, a tego i tak oczekuje każdy zestaw narzędzi interfejsu. Gałka ma karb pośrodku, żeby jej obrót i położenie pozostały czytelne w małych rozmiarach, a wariant przytrzymany dokłada pierścień akcentu dla stanu przeciągania.

Stan nieaktywny to osobny sprite dla każdej kontrolki ze stanami, a nie przyciemnienie nakładane w czasie działania. Niedostępne ustawienie i ustawienie wyłączone to dwie różne rzeczy — jedno mówi "wyłączone", drugie "tego nie ruszysz" — a ekran pokazujący je tak samo wysyła gracza na poszukiwanie błędu, którego nie ma. Pole wyboru dostarcza też stan częściowy dla wiersza "zaznacz wszystko" nad mieszaną listą, czyli dokładnie tego przypadku, który dwustanowe pole raportuje błędnie.

Wszystko dołączone jako edytowalny SVG i jako płaski przezroczysty PNG w 1x, 2x i 4x, narysowane tymi samymi sześcioma tonami brąz drewna co reszta rodziny Oak.

Pobieranie

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

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

Pliki zawarte w tej paczce
PlikFormatWagaPobieranie
Komplet — 8 źródeł SVG, eksporty PNG w 1x/2x/4x, licencja i readmeZIP76 kB Pobierz →
Przełącznik (stan włączony), edytowalny SVGSVG465 B Pobierz →
Tor suwaka, edytowalny SVGSVG644 B Pobierz →

Jak używać

  1. Podmieniaj całą teksturę między plikiem włączonym i wyłączonym zamiast barwić jednego sprite'a; oba stany różnią się kształtem, więc sama barwa ich nie odtworzy.
  2. Tor suwaka przyjmuje nine-slice z końcówką 8 px po każdej stronie — rozciągnij środek, a zaokrąglone końce zostaną nietknięte przy dowolnej szerokości.
  3. W Unity podepnij oba pliki do grafik Background i Checkmark komponentu Toggle albo podmieniaj sprite'a w handlerze onValueChanged, jeśli wolisz jeden obraz.
  4. Wyśrodkuj gałkę na krawędzi wypełnienia: ma 20 px szerokości, więc przesuń ją o połowę tej wartości od prawej krawędzi wypełnienia, żeby siedziała na wartości, a nie za nią.

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
"Oak Kontrolki — pole wyboru, przełącznik i suwak" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/oak-ui-controls