UI 팩

Blocks 컨트롤 — 체크박스, 토글, 슬라이더

투박한 복셀의 인터페이스 컨트롤 여덟 개. 체크박스, 라디오, 토글, 슬라이더이며 켜짐과 꺼짐을 형태로 구분합니다. SVG와 PNG.

  • ui
  • svg
  • 투명 png
  • 체크박스
  • 토글
  • 슬라이더
  • 설정
  • 컨트롤
  • 복셀
  • 블록형
  • 아이소메트릭
  • 큐브
체크무늬 배경의 설정 컨트롤 — 빈 체크박스와 체크된 체크박스, 선택되지 않은 라디오와 선택된 라디오, 꺼짐과 켜짐 토글, 그리고 손잡이가 달린 슬라이더 트랙
미리보기 1600×752투명한 부분은 체크무늬로 표시

이 팩에 대하여

24px 컨트롤을 평평한 도형이 아니라 큐브로 그렸습니다. 체크박스는 윗면이 밝은 블록이고, 체크하면 위에 표식을 얹는 대신 정면이 바뀝니다. 둥근 라디오 버튼은 큐브로만 만든 키트에서 유일한 곡선이 되어 버리므로 여기서는 더 작은 큐브입니다. 형태가 아니라 크기로 구분합니다.

설정 화면에 정말로 필요한 네 가지 컨트롤을 담았습니다. 체크박스, 라디오 버튼, 토글, 그리고 손잡이가 분리된 슬라이더. 상태가 있는 컨트롤은 두 상태 모두 자기 파일로 24×24 기반 위에 들어 있습니다. 토글은 48×24이고 슬라이더 트랙은 폭 192 px라 어떤 길이로도 nine-slice할 수 있습니다.

켜짐과 꺼짐은 색이 아니라 형태로 구분해 그렸습니다. 체크되지 않은 상자는 빈 홈이고, 체크된 상자는 체크를 파낸 채움 면입니다. 이것이 중요한 이유는 설정 화면이야말로 플레이어가 색각 모드나 회색조 셰이더, 강하게 색을 입힌 포스트프로세스를 켜 두었을 가능성이 가장 높은 곳이기 때문입니다. 색조로만 읽히는 상태는 그 셋 모두에서 사라집니다.

슬라이더는 하나로 이어진 스프라이트가 아니라 트랙과 손잡이로 제공됩니다. 일체형 슬라이더는 값마다 다시 그려야 하지만, 둘로 나뉘어 있으면 채움을 늘이고 손잡이를 옮기면 됩니다. 어떤 UI 툴킷이든 이미 그것을 전제로 합니다. 손잡이에는 가운데 홈이 있어 작게 줄여도 회전과 위치가 읽힙니다.

전부 편집 가능한 SVG와 1x, 2x, 4x의 플랫한 투명 PNG로 수록했습니다. Blocks 계열의 나머지와 같은 차가운 돌색 여섯 톤으로 그렸습니다.

다운로드

직접 링크 · 가입 불필요 · 대기 페이지 없음
ZIP 내려받기14 kB

전체 세트 — SVG 소스 8개, 1x/2x/4x PNG 내보내기, 라이선스, readme

이 팩에 들어 있는 파일
파일형식용량다운로드
전체 세트 — SVG 소스 8개, 1x/2x/4x PNG 내보내기, 라이선스, readmeZIP14 kB 받기 →
토글(켜짐 상태), 편집 가능한 SVGSVG506 B 받기 →
슬라이더 트랙, 편집 가능한 SVGSVG456 B 받기 →

사용법

  1. 켜짐과 꺼짐은 스프라이트 하나에 색을 입히는 대신 텍스처를 통째로 바꾸세요. 두 상태는 형태가 달라 색만으로는 재현되지 않습니다.
  2. 슬라이더 트랙은 양쪽에 8 px 끝단을 남기고 nine-slice할 수 있습니다. 가운데를 늘이면 어떤 너비에서도 둥근 양 끝이 그대로 유지됩니다.
  3. Unity에서는 Toggle 컴포넌트의 Background와 Checkmark에 두 파일을 연결하거나, 이미지 하나로 끝내고 싶다면 onValueChanged 핸들러에서 스프라이트를 바꾸세요.
  4. 손잡이는 채움의 끝에 중심을 맞추세요. 폭이 20 px이므로 채움의 오른쪽 끝에서 그 절반만큼 옮기면 값 뒤가 아니라 값 위에 놓입니다.

라이선스

크리에이티브 커먼즈 제로 1.0 — 퍼블릭 도메인. 출처 표기도 필요 없습니다. 전문 보기 · 실제로 무슨 뜻인지