UI 팩

Oak HUD 바 — 체력, 마나, 스태미나

따뜻한 오크의 nine-slice 바 프레임. 광택 채움 세 가지와 분할 변형, 192×28에 끝단 10 px. SVG와 PNG.

  • ui
  • svg
  • 투명 png
  • hud
  • 체력 바
  • 진행 바
  • nine-slice
  • 판타지
  • rpg
  • 나무
체크무늬 배경에 겹쳐 놓은 가로 상태 바 세 개. 체력, 마나, 스태미나가 서로 다른 양까지 차 있고 아래에 8칸 분할 바와 더 작은 바 세 개가 있습니다
미리보기 1600×880투명한 부분은 체크무늬로 표시

이 팩에 대하여

두 번째 테두리 없이 Oak 프레임 안에 들어가도록 다듬은 상태 바입니다. 광택 경계가 내용물이 든 유리관 같은 느낌을 주고 색은 일부러 눌러 두었습니다. 나무 위의 포화된 빨간 체력 바는 세계의 일부가 아니라 경고등으로 읽히기 때문입니다.

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

채움은 프레임에 구워 넣지 않은 별도 스프라이트입니다. 실제로 중요한 것이 바로 그 점으로, 채움 너비를 0에서 최대까지 움직여도 프레임은 전혀 움직이지 않습니다. 모든 채움이 높이 절반에서 그러데이션이 아니라 단단한 경계로 나뉘고, 그것이 1x에서 부드러운 픽셀 하나 쓰지 않고도 유리로 읽히는 이유입니다.

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

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

다운로드

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

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

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

사용법

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

라이선스

크리에이티브 커먼즈 저작자표시 4.0 — 상업적 이용도 무료. 출처 표기가 필요합니다. 전문 보기 · 실제로 무슨 뜻인지

복사용 출처 문구
"Oak HUD 바 — 체력, 마나, 스태미나" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/oak-hud-bars