UI 팩

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

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

  • ui
  • svg
  • 투명 png
  • 체크박스
  • 토글
  • 슬라이더
  • 설정
  • 컨트롤
  • 밀리터리
  • 택티컬
  • 스텐실
  • hud
체크무늬 배경의 설정 컨트롤 — 빈 체크박스와 체크된 체크박스, 선택되지 않은 라디오와 선택된 라디오, 꺼짐과 켜짐 토글, 그리고 손잡이가 달린 슬라이더 트랙
미리보기 1600×752투명한 부분은 체크무늬로 표시

이 팩에 대하여

처음부터 끝까지 정사각인 24px 컨트롤입니다. 켜짐 상태는 빨강으로 채웁니다. 이 팔레트에서 빨강이 뜻하는 것은 하나뿐이고, 장전된 컨트롤이 바로 그것이기 때문입니다.

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

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

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

전부 편집 가능한 SVG와 1x, 2x, 4x의 플랫한 투명 PNG로 수록했습니다. Bunker 계열의 나머지와 같은 필드 올리브 여섯 톤으로 그렸습니다.

다운로드

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

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

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

사용법

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

라이선스

크리에이티브 커먼즈 저작자표시 4.0 — 상업적 이용도 무료. 출처 표기가 필요합니다. 전문 보기 · 실제로 무슨 뜻인지

복사용 출처 문구
"Bunker 컨트롤 — 체크박스, 토글, 슬라이더" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/bunker-ui-controls