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

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

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

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

Об этом паке

Элементы 24px, нарисованные как кубы, а не как плоские формы: флажок — блок с освещённым верхом, и отметка меняет переднюю грань, а не кладёт галочку поверх. Круглая радиокнопка была бы единственной кривой в наборе, целиком собранном из кубов, поэтому это куб поменьше — различаемый размером, а не формой.

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

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

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

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

Загрузка

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

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

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

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

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

Лицензия

Creative Commons Zero 1.0 — Общественное достояние. Без указания авторства. Полные условия · Что это значит на практике