UI 팩
Dusk HUD 바 — HP, MP, XP
황혼 퍼플의 nine-slice 바 프레임. 눈금 채움 세 가지와 분할 변형, 128×16에 끝단 4 px. SVG와 PNG.

이 팩에 대하여
여섯 개의 홈을 지닌 128x16 바로, 이미 큰 화면이 아니라 확대되는 화면에 맞춘 치수입니다. 모든 가장자리가 4px 그리드에 떨어지고 홈은 위에 얹은 선이 아니라 채움의 빈틈이라, 정수 배로 확대해도 정확히 1픽셀 폭을 유지하며 바 속에서 번지지 않습니다.
프레임은 끝단 4 px의 nine-slice라, 어떤 너비로 늘여도 양 끝이 변형되지 않습니다. 화면 폭을 채우는 보스 바와 40 px 적 이름표 바가 같은 파일로 해결됩니다.
채움은 프레임에 구워 넣지 않은 별도 스프라이트입니다. 실제로 중요한 것이 바로 그 점으로, 채움 너비를 0에서 최대까지 움직여도 프레임은 전혀 움직이지 않습니다. 모든 채움이 전체 길이에 걸쳐 고른 눈금을 지녀서, 분할 프레임 없이도 비율을 한눈에 셀 수 있습니다.
색은 자원마다 하나씩 셋입니다. HP, MP, XP. 색조뿐 아니라 밝기에서도 벌려 두었고, 회색조 스크린샷과 흔한 색각 특성을 견디는 것은 바로 그 부분입니다. 같은 명도로 맞춘 조합은 견본 줄에서는 정돈돼 보여도 화면에서는 하나의 회색 덩어리로 뭉개집니다.
분할 변형은 같은 프레임 위에 홈 선 5개를 더한 것으로, 연속적인 비율이 아니라 개수(하트, 충전, 탄약)를 세는 게임을 위한 것입니다. 오버레이가 아니라 별도 파일이라 바 위젯을 바꾸지 않고 끼워 넣을 수 있습니다. 전부 편집 가능한 SVG와 1x, 2x, 4x의 플랫한 투명 PNG로 수록했습니다.
사용법
- 프레임을 먼저 그리고 그 위에 채움을 얹되 왼쪽 끝을 끝단 폭 4 px만큼 안으로 넣으세요. 채움의 너비만 애니메이션하면 프레임의 양 끝은 완전히 고정된 채로 있습니다.
- Unity에서는 채움 이미지를 Image Type Filled에 Fill Method Horizontal로 두거나, Sliced 이미지로 두고 RectTransform 너비를 애니메이션하세요. 채움에 자체 둥근 모서리가 없어 둘 다 동작합니다.
- Godot 4에서는 프레임을 Under Texture로, 채움을 Progress Texture로 둔 TextureProgressBar가 코드 없이 이것을 그대로 재현합니다. Stretch Mode를 Tile로 두면 끝단도 그대로 유지됩니다.
- 칸 단위로 세는 자원에는 분할 프레임을 쓰고 채움 너비를 안쪽 너비의 6분의 1 배수에 맞추세요. 채움의 끝이 항상 홈에 떨어집니다.
라이선스
크리에이티브 커먼즈 저작자표시 4.0 — 상업적 이용도 무료. 출처 표기가 필요합니다. 전문 보기 · 실제로 무슨 뜻인지
"Dusk HUD 바 — HP, MP, XP" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/dusk-hud-bars


