UI 팩
Chromepop 패널 키트 — 단일 프레임 패널과 버튼
크롬 포스터의 단일 프레임 nine-slice 창 패널, 들어간 목록 프레임, 모따기 버튼 네 상태. SVG와 PNG 1x/2x/4x.

이 팩에 대하여
핫 핑크 블록과 시안 선을 지닌 플랫한 검정 패널. Y2K의 노란 쪽이 아니라 포스터 쪽입니다. 발광도 그러데이션도 어디에도 없고, 이 외관은 빛나는 것이 아니라 인쇄된 것입니다.
nine-slice 패널 두 장 — 모서리 0 px의 단일 프레임 창 프레임과 모서리 0 px의 들어간 내부 프레임 — 이면 메뉴에 필요한 거의 모든 상자를 감당합니다. 대화 상자, 인벤토리 그리드, 목록 바탕, 툴팁, 스탯 패널. 테두리가 하나로 이어질 뿐이라 패널은 빽빽한 글 뒤에 놓일 만큼 조용합니다.모서리는 절대 확대되지 않고 가운데는 플랫한 채움이라, 둘 다 어떤 크기로도 깔끔하게 늘어납니다.
패널 위에는 모따기 버튼의 네 상태가 놓입니다. 기본, 호버, 눌림, 비활성. 모두 같은 160×44 기반에 모서리 0 px로 그렸기에, 버튼 위젯 하나에서 텍스처만 바꾸면 사각형을 옮기지 않고도 상호작용 한 바퀴가 갖춰집니다. 눌림 상태는 단순히 어두워지는 대신 면을 두 픽셀 내리고 위쪽 하이라이트를 없앱니다. 그것이 색만 바뀐 것이 아니라 실제로 눌렸다는 감각을 만듭니다.
모든 것이 두 벌로 제공됩니다. SVG 소스는 키트를 실제로 그린 파일 그 자체입니다. 열어서 순수한 검정 여섯 톤이나 핫 핑크 강조색 하나를 바꾸고 다시 내보내세요. PNG 내보내기는 플랫하고 투명하며 비트맵을 원하는 엔진을 위해 1x, 2x, 4x로 미리 확대해 두었고, 알파 사전 곱셈도 스프라이트 밖으로 삐져나온 구운 그림자도 없습니다.
사용법
- Unity에서는 PNG를 임포트하고 Texture Type을 Sprite(2D and UI)로, 보더를 창 패널은 0, 0, 0, 0, 버튼은 0, 0, 0, 0로 설정한 뒤 UI 컴포넌트에서 Image Type을 Sliced로 두세요.
- Godot 4에서는 NinePatchRect를 쓰고 패치 여백에 같은 숫자를 넣으세요. 아니면 SVG를 그대로 넣고 임포트 옵션의 배율로 Godot가 래스터화하게 해도 됩니다.
- Unreal에서는 Texture2D로 임포트하고 Draw As를 Box로 둔 Slate Brush를 만든 뒤, 여백을 텍스처 크기에 대한 비율로 입력하세요. 144 px 패널용과 160 px 버튼용입니다.
- UI 배율이 정수가 아닐 때는 1x를 확대하지 말고 2x나 4x PNG를 쓰거나, 엔진에 SVG 소스를 넘겨 최종 크기로 래스터화하게 하세요.
라이선스
크리에이티브 커먼즈 저작자표시 4.0 — 상업적 이용도 무료. 출처 표기가 필요합니다. 전문 보기 · 실제로 무슨 뜻인지
"Chromepop 패널 키트 — 단일 프레임 패널과 버튼" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/chromepop-panel-ui-kit


