UI 팩

Dusk HUD 바 — HP, MP, XP

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

  • ui
  • svg
  • 투명 png
  • hud
  • 체력 바
  • 진행 바
  • nine-slice
  • 픽셀 아트
  • 레트로
  • 2d
체크무늬 배경에 겹쳐 놓은 가로 상태 바 세 개. HP, MP, XP가 서로 다른 양까지 차 있고 아래에 6칸 분할 바와 더 작은 바 세 개가 있습니다
미리보기 1600×880투명한 부분은 체크무늬로 표시

이 팩에 대하여

여섯 개의 홈을 지닌 128x16 바로, 이미 큰 화면이 아니라 확대되는 화면에 맞춘 치수입니다. 모든 가장자리가 4px 그리드에 떨어지고 홈은 위에 얹은 선이 아니라 채움의 빈틈이라, 정수 배로 확대해도 정확히 1픽셀 폭을 유지하며 바 속에서 번지지 않습니다.

프레임은 끝단 4 px의 nine-slice라, 어떤 너비로 늘여도 양 끝이 변형되지 않습니다. 화면 폭을 채우는 보스 바와 40 px 적 이름표 바가 같은 파일로 해결됩니다.

채움은 프레임에 구워 넣지 않은 별도 스프라이트입니다. 실제로 중요한 것이 바로 그 점으로, 채움 너비를 0에서 최대까지 움직여도 프레임은 전혀 움직이지 않습니다. 모든 채움이 전체 길이에 걸쳐 고른 눈금을 지녀서, 분할 프레임 없이도 비율을 한눈에 셀 수 있습니다.

색은 자원마다 하나씩 셋입니다. HP, MP, XP. 색조뿐 아니라 밝기에서도 벌려 두었고, 회색조 스크린샷과 흔한 색각 특성을 견디는 것은 바로 그 부분입니다. 같은 명도로 맞춘 조합은 견본 줄에서는 정돈돼 보여도 화면에서는 하나의 회색 덩어리로 뭉개집니다.

분할 변형은 같은 프레임 위에 홈 선 5개를 더한 것으로, 연속적인 비율이 아니라 개수(하트, 충전, 탄약)를 세는 게임을 위한 것입니다. 오버레이가 아니라 별도 파일이라 바 위젯을 바꾸지 않고 끼워 넣을 수 있습니다. 전부 편집 가능한 SVG와 1x, 2x, 4x의 플랫한 투명 PNG로 수록했습니다.

다운로드

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

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

이 팩에 들어 있는 파일
파일형식용량다운로드
전체 키트 — SVG 소스, 1x/2x/4x PNG 내보내기, 라이선스, readmeZIP9.8 kB 받기 →
바 프레임, 편집 가능한 SVGSVG683 B 받기 →

사용법

  1. 프레임을 먼저 그리고 그 위에 채움을 얹되 왼쪽 끝을 끝단 폭 4 px만큼 안으로 넣으세요. 채움의 너비만 애니메이션하면 프레임의 양 끝은 완전히 고정된 채로 있습니다.
  2. Unity에서는 채움 이미지를 Image Type Filled에 Fill Method Horizontal로 두거나, Sliced 이미지로 두고 RectTransform 너비를 애니메이션하세요. 채움에 자체 둥근 모서리가 없어 둘 다 동작합니다.
  3. Godot 4에서는 프레임을 Under Texture로, 채움을 Progress Texture로 둔 TextureProgressBar가 코드 없이 이것을 그대로 재현합니다. Stretch Mode를 Tile로 두면 끝단도 그대로 유지됩니다.
  4. 칸 단위로 세는 자원에는 분할 프레임을 쓰고 채움 너비를 안쪽 너비의 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