UI 팩

Dusk 패널 키트 — 제목 바 패널과 버튼

황혼 퍼플의 제목 바 nine-slice 창 패널, 들어간 목록 프레임, 각진 버튼 네 상태. SVG와 PNG 1x/2x/4x.

  • ui
  • svg
  • 투명 png
  • nine-slice
  • 패널
  • 버튼
  • 메뉴
  • 리본
  • 픽셀 아트
  • 레트로
  • 2d
앰버 제목 띠와 들어간 목록 영역을 갖춘 황혼 퍼플 메뉴 패널. 옆 열에는 같은 각진 버튼의 기본, 선화 호버, 눌림 상태가 있습니다
미리보기 1600×800투명한 부분은 체크무늬로 표시

이 팩에 대하여

그래도 진짜 메뉴를 원하는 픽셀 게임을 위한 단단한 가장자리 키트입니다. 제목 바는 덧붙인 것이 아니라 패널에 붙박이로 들어 있습니다. 둥근 모서리도 안티에일리어싱도 어디에도 없고 모든 테두리가 한 줄의 플랫한 픽셀입니다. 4K 모니터에서 3x로 돌릴 때 패널이 형태를 지키는 방법은 그것뿐입니다. 보라색이 충분히 차가워서 빨강 없이도 앰버가 경고로 읽힙니다.

nine-slice 패널 두 장 — 모서리 16 px의 제목 바가 있는 창 프레임과 모서리 12 px의 들어간 내부 프레임 — 이면 메뉴에 필요한 거의 모든 상자를 감당합니다. 대화 상자, 인벤토리 그리드, 목록 바탕, 툴팁, 스탯 패널. 제목 띠가 패널 위쪽에 붙박이로 들어 있어, 대화 상자 헤더에 두 번째 스프라이트도 수동 정렬도 필요 없습니다.모서리는 절대 확대되지 않고 가운데는 플랫한 채움이라, 둘 다 어떤 크기로도 깔끔하게 늘어납니다.

패널 위에는 각진 모서리 버튼의 네 상태가 놓입니다. 기본, 호버, 눌림, 비활성. 모두 같은 96×32 기반에 모서리 8 px로 그렸기에, 버튼 위젯 하나에서 텍스처만 바꾸면 사각형을 옮기지 않고도 상호작용 한 바퀴가 갖춰집니다. 눌림 상태는 단순히 어두워지는 대신 면을 두 픽셀 내리고 위쪽 하이라이트를 없앱니다. 그것이 색만 바뀐 것이 아니라 실제로 눌렸다는 감각을 만듭니다.

모든 것이 두 벌로 제공됩니다. SVG 소스는 키트를 실제로 그린 파일 그 자체입니다. 열어서 밤 바이올렛 여섯 톤이나 앰버 강조색 하나를 바꾸고 다시 내보내세요. PNG 내보내기는 플랫하고 투명하며 비트맵을 원하는 엔진을 위해 1x, 2x, 4x로 미리 확대해 두었고, 알파 사전 곱셈도 스프라이트 밖으로 삐져나온 구운 그림자도 없습니다.

다운로드

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

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

이 팩에 들어 있는 파일
파일형식용량다운로드
전체 키트 — SVG 소스, 1x/2x/4x PNG 내보내기, 라이선스, readmeZIP15 kB 받기 →
창 패널, 편집 가능한 SVGSVG2.3 kB 받기 →
버튼(기본 상태), 편집 가능한 SVGSVG1.6 kB 받기 →

사용법

  1. Unity에서는 PNG를 임포트하고 Texture Type을 Sprite(2D and UI)로, 보더를 창 패널은 16, 16, 16, 16, 버튼은 8, 8, 8, 8로 설정한 뒤 UI 컴포넌트에서 Image Type을 Sliced로 두세요.
  2. Godot 4에서는 NinePatchRect를 쓰고 패치 여백에 같은 숫자를 넣으세요. 아니면 SVG를 그대로 넣고 임포트 옵션의 배율로 Godot가 래스터화하게 해도 됩니다.
  3. Unreal에서는 Texture2D로 임포트하고 Draw As를 Box로 둔 Slate Brush를 만든 뒤, 여백을 텍스처 크기에 대한 비율로 입력하세요. 80 px 패널은 0.2, 96 px 버튼은 0.08333입니다.
  4. UI 배율이 정수가 아닐 때는 1x를 확대하지 말고 2x나 4x PNG를 쓰거나, 엔진에 SVG 소스를 넘겨 최종 크기로 래스터화하게 하세요.
  5. 모든 가장자리가 정수 픽셀에 떨어지고 안티에일리어싱은 어디에도 없습니다. 1x PNG를 Point(Unity), Nearest(Godot), Nearest-Neighbour(Unreal) 필터로 임포트하고 정수 배율로만 조정하세요.

라이선스

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

복사용 출처 문구
"Dusk 패널 키트 — 제목 바 패널과 버튼" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/dusk-panel-ui-kit