UI 팩
Reliquary 패널 키트 — 제목 바 패널과 버튼
차가운 돌의 인터페이스 스프라이트 18개. 제목 바 nine-slice 패널, 툴팁, 헤더 바, 구분선, 칩, 모따기 버튼 12개 상태.

이 팩에 대하여
따뜻함을 걷어낸 새김 프레임입니다. 오크는 선술집으로 읽히지만 이것은 지하 묘지로 읽히고, 차이는 팔레트만이 아닙니다. 헤더 띠가 두 번째 동심 프레임을 대신하고 모따기 버튼이 둥근 탭을 대신합니다. 모서리 첨두와 거기 박힌 보석은 둘 다 같은 형태이고, 그것이 둘을 무관한 판타지 키트가 아니라 같은 스타일로 붙들어 둡니다.
Nine-slice 패널 두 장 — 모서리 12 px의 제목 바가 있는 창 프레임과 모서리 10 px의 들어간 내부 프레임 — 이면 메뉴에 필요한 거의 모든 상자를 감당합니다. 대화 상자, 인벤토리 그리드, 목록 바탕, 툴팁, 스탯 패널. 제목 띠가 패널 위쪽에 붙박이로 들어 있어, 대화 상자 헤더에 두 번째 스프라이트도 수동 정렬도 필요 없습니다.모서리는 절대 확대되지 않고 가운데는 플랫한 채움이라, 둘 다 어떤 크기로도 깔끔하게 늘어납니다.
패널 위에는 모따기 버튼 스프라이트 12개가 놓입니다. 기본, 호버, 눌림, 비활성 각각을 세 번씩 그렸습니다. 표준 128×56 바, 정사각형 각진 아이콘 버튼, 그리고 툴바와 인라인 동작을 위한 컴팩트 버튼입니다. 세 크기를 한 장의 확대·축소가 아니라 별도 파일로 둔 것은 그리기가 크기에 의존하기 때문입니다. 56px에서 계산한 모따기는 작은 쪽에서 줄이는 것이 아니라 다시 계산됩니다. 눌림 상태는 면을 2픽셀 내리고 위쪽 하이라이트를 없앱니다. 단순히 어둡게 하는 것이 아니기에 버튼이 색만 바뀐 것이 아니라 눌린 것처럼 느껴집니다.
작은 네 조각이 패널과 패널 사이에서 메뉴에 필요한 것을 채웁니다. 꼬리 달린 툴팁, 패널 위쪽에 놓이는 헤더 바, 가운데 표시가 있는 구역 구분선, 그리고 개수와 상태 표시용 라벨 칩. 어느 것도 창 패널의 다른 크기가 아닙니다. nine-slice는 이미 어떤 크기로도 늘어나므로, 너비만 다른 두 번째 파일은 컴포넌트가 아니라 분량 채우기가 됩니다.
모든 것이 두 벌로 제공됩니다. SVG 소스는 키트를 실제로 그린 파일 그 자체입니다. 열어서 짙은 인디고 여섯 톤이나 옅은 실버 강조색 하나를 바꾸고 다시 내보내세요. PNG 내보내기는 플랫하고 투명하며 비트맵을 원하는 엔진을 위해 1x, 2x, 4x로 미리 확대해 두었고, 알파 사전 곱셈도 스프라이트 밖으로 삐져나온 구운 그림자도 없습니다.
사용법
- Unity에서는 PNG를 임포트하고 Texture Type을 Sprite(2D and UI)로, 보더를 창 패널은 12, 12, 12, 12, 버튼은 6, 6, 6, 6로 설정한 뒤 UI 컴포넌트에서 Image Type을 Sliced로 두세요.
- Godot 4에서는 NinePatchRect를 쓰고 패치 여백에 같은 숫자를 넣으세요. 아니면 SVG를 그대로 넣고 임포트 옵션의 배율로 Godot가 래스터화하게 해도 됩니다.
- Unreal에서는 Texture2D로 임포트하고 Draw As를 Box로 둔 Slate Brush를 만든 뒤, 여백을 텍스처 크기에 대한 비율로 입력하세요. 104 px 패널은 0.11538, 128 px 버튼은 0.04688입니다.
- UI 배율이 정수가 아닐 때는 1x를 확대하지 말고 2x나 4x PNG를 쓰거나, 엔진에 SVG 소스를 넘겨 최종 크기로 래스터화하게 하세요.
라이선스
크리에이티브 커먼즈 저작자표시 4.0 — 상업적 이용도 무료. 출처 표기가 필요합니다. 전문 보기 · 실제로 무슨 뜻인지
"Reliquary 패널 키트 — 제목 바 패널과 버튼" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/reliquary-panel-ui-kit


