Паки интерфейса

Neon Элементы управления — флажок, переключатель и ползунок

19 элементов интерфейса контрастный неон: флажок, радио, переключатель, ползунок и счётчик; состояния вкл, выкл, частично и недоступно переданы формой. SVG и PNG.

  • ui
  • svg
  • прозрачный png
  • флажок
  • переключатель
  • ползунок
  • настройки
  • элементы управления
  • научная фантастика
  • hud
  • киберпанк
Элементы управления настройками на шахматном фоне — пустой и отмеченный флажок, невыбранная и выбранная радиокнопка, переключатель выключенный и включённый, а также дорожка ползунка с рукояткой
превью 1600×757прозрачность показана шахматкой

Об этом паке

Половина семейства Neon, отвечающая за экран настроек. Флажки с фаской и переключатель с жёсткими краями доводят консольный язык до самого меню — ровно там, где большинство научно-фантастических наборов сдаётся и берёт обобщённый скруглённый переключатель.

Набор закрывает то, что экрану настроек действительно нужно: флажок, радиокнопку, переключатель, ползунок с отдельной ручкой и пару счётчика для дискретных значений. Каждый элемент с состояниями отдаёт каждое состояние своим файлом на базе 28×28: переключатель 56×28, дорожка ползунка шириной 224 px, чтобы тянуть её через nine-slice на любую длину. Ползунок идёт также пустым, полным и вертикальным, потому что колонка громкости — это не повёрнутая строка.

Включено и выключено нарисованы разными формами, а не разными цветами. Неотмеченный флажок — пустая выемка; отмеченный — заполненная поверхность с вырезанной галочкой. Это важно, потому что экран настроек — ровно то место, где игрок с наибольшей вероятностью включил режим для дальтоников, шейдер градаций серого или сильно тонированный постпроцесс, — а состояние, читаемое только по оттенку, исчезает под всеми тремя.

Ползунок поставляется дорожкой и ручкой, а не одним спрайтом. Анимировать цельный ползунок значит перерисовывать его на каждое значение; с двумя частями вы тянете заливку и двигаете ручку — именно этого и ждёт любой набор интерфейсных инструментов. У ручки есть центральная насечка, чтобы её поворот и положение читались в малом размере, а вариант удержания добавляет акцентное кольцо для состояния перетаскивания.

Недоступное состояние — отдельный спрайт для каждого элемента с состояниями, а не затемнение, накладываемое во время работы. Недоступная настройка и выключенная настройка — разные вещи: одна говорит «выключено», другая «сюда нельзя», и экран, показывающий их одинаково, отправляет игрока искать несуществующую ошибку. Флажок также поставляется с частичным состоянием для строки «выбрать всё» над смешанным списком — именно тот случай, который двухсостоянийный флажок сообщает неверно.

Всё включено как редактируемый SVG и как плоский прозрачный PNG в 1x, 2x и 4x, нарисованное теми же шестью тонами синева дальнего космоса, что и остальное семейство Neon.

Загрузка

Прямая ссылка · без регистрации · без страницы ожидания
Скачать ZIP70 kB

Полный комплект — 8 исходников SVG, экспорт PNG в 1x/2x/4x, лицензия и readme

Файлы, входящие в этот пак
ФайлФорматВесЗагрузка
Полный комплект — 8 исходников SVG, экспорт PNG в 1x/2x/4x, лицензия и readmeZIP70 kB Получить →
Переключатель (включённое состояние), редактируемый SVGSVG706 B Получить →
Дорожка ползунка, редактируемый SVGSVG325 B Получить →

Как использовать

  1. Подменяйте всю текстуру между файлами включено и выключено вместо тонирования одного спрайта; состояния различаются формой, и один тон их не воспроизведёт.
  2. Дорожка ползунка принимает nine-slice с концом 9 px с каждой стороны — растяните середину, и скруглённые концы останутся нетронутыми на любой ширине.
  3. В Unity подключите два файла к графике Background и Checkmark компонента Toggle либо меняйте спрайт в обработчике onValueChanged, если хотите обойтись одним изображением.
  4. Центрируйте рукоятку на краю заливки: её ширина 24 px, поэтому сместите её на половину этого от правого края заливки, чтобы она сидела на значении, а не за ним.
  5. На 28 px эти элементы рассчитаны на консольный экран, управляемый мышью; для меню под геймпад берите экспорт 2x и держите зону нажатия не меньше 64 px.

Лицензия

Creative Commons «С указанием авторства» 4.0 — Бесплатно для коммерческого использования. Указание авторства обязательно. Полные условия · Что это значит на практике

Строка упоминания для копирования
"Neon Элементы управления — флажок, переключатель и ползунок" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/neon-ui-controls