UI 팩
Hologrid HUD 바 — 체력, 마나, 스태미나
투영된 빛의 nine-slice 바 프레임. 눈금 채움 세 가지와 분할 변형, 180×16에 끝단 3 px. SVG와 PNG.

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


