UI 팩

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

투박한 복셀의 nine-slice 바 프레임. 눈금 채움 세 가지와 분할 변형, 168×28에 끝단 6 px. SVG와 PNG.

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

이 팩에 대하여

블록형 패널에 맞춰 매끄러운 채움이 아니라 눈금 패턴을 지닌 상태 바입니다. 프레임이 꽉 찬 블록에 판 홈으로 읽히고, 채움은 위에 뜨는 대신 그 안에 앉습니다.

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

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

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

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

다운로드

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

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

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

사용법

  1. 프레임을 먼저 그리고 그 위에 채움을 얹되 왼쪽 끝을 끝단 폭 6 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 배수에 맞추세요. 채움의 끝이 항상 홈에 떨어집니다.

라이선스

크리에이티브 커먼즈 제로 1.0 — 퍼블릭 도메인. 출처 표기도 필요 없습니다. 전문 보기 · 실제로 무슨 뜻인지