Paczki interfejsu

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

Osiem kontrolek interfejsu w czerwień alarmu: pole wyboru, radio, przełącznik i suwak, każdy stan wł./wył. narysowany jako inny kształt. SVG i PNG.

  • ui
  • svg
  • przezroczysty png
  • pole wyboru
  • przełącznik
  • suwak
  • ustawienia
  • kontrolki
  • cyberpunk
  • alarm
  • hud
  • czerwony
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. Stan włączony wypełnia się kolorem czerwień alarmu zamiast bursztynem, więc uzbrojony przełącznik czyta się inaczej niż taki, który ma tylko fokus.

Zestaw obejmuje cztery kontrolki, których ekran ustawień naprawdę potrzebuje: pole wyboru, przycisk radiowy, przełącznik i suwak z osobną gałką. Każda kontrolka ze stanami niesie oba stany we własnym pliku, na bazie 24×24 — przełącznik ma 48×24, a tor suwaka 192 px szerokości, żeby dało się go rozciąć nine-slice na dowolną długość.

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 dostajesz jako tor i gałkę, a nie jeden sprite. Animowanie suwaka z jednej części zmusza do przerysowywania go dla każdej wartości; przy dwóch częściach rozciągasz wypełnienie i przesuwasz gałkę, czyli dokładnie to, czego każdy toolkit interfejsu i tak oczekuje. Gałka ma centralne nacięcie, żeby jej obrót i pozycja pozostały czytelne w małych rozmiarach.

Wszystko dołączone jako edytowalny SVG i jako płaski przezroczysty PNG w 1x, 2x i 4x, narysowane tymi samymi sześcioma tonami czerń krwi co reszta rodziny Redline.

Pobieranie

Bezpośredni link · bez rejestracji · bez strony oczekiwania
Pobierz ZIP40 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 readmeZIP40 kB Pobierz →
Przełącznik (stan włączony), edytowalny SVGSVG416 B Pobierz →
Tor suwaka, edytowalny SVGSVG699 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
"Redline Kontrolki — pole wyboru, przełącznik i suwak" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/redline-ui-controls