체력바 ui는 어케 만듦? - 인디 게임 개발 마이너 갤러리



작업하다 현타와서 인갤 돌다 질문글 발견해서 작성하는 글임


인붕이가 겪고 있는 문제는 유저가 생명력을 올리면 같이 길어지는 체력바 UI를 구현하는거임


2cbc9e36ebd518986abce8954e887c65


그리고 거기에 대한 답변이고 맞는 말임


그러나 생각없이 그렸다고 하더라도 엔진에서 스프라이트의 보더 값을 건들이면 어느정도 타협볼만함





7cf3c028e2f206a26d81f6e14383716d


먼저 텍스처를 누르고 인스펙터에서 스프라이트 에디터를 열어보면 대충 이렇게 뜸 



7ff3c028e2f206a26d81f6e144847665

여기서 왼쪽 아래에서 보더를 지정해주거나 마우스로 초록색 점을 드래그 해서 보더값을 지정할수 있음


보더의 역할은 쉽게 이야기하면 텍스쳐를 늘릴때 어느 부분부터 늘리는 지 설정하는 거라고 생각하면 됨 


7ef3c028e2f206a26d81f6e142827c65


방금 설정한건 외부 게이지(최대 체력)이고 게이지를 표시할 내부 게이지(현재 체력)도 마찬가지로 설정해줌



79f3c028e2f206a26d81f6e142897268


하이라키는 최대체력 이미지 안에 현재체력 이미지를 넣어놓은 형태로 되어있음
그 상태에서 두 게이지 이미지 모두 이미지 타입을 Sliced 혹은 Tilled로 바꿔줌

이후 이미지의 scale은 그대로 두되 Rect 값을 건들이면 아까 설정한 보더 안쪽 이미지만 늘어난것을 확인할수 있음


78f3c028e2f206a26d81f6e14381706c

마지막으로 현재 체력의 피봇을 설정하면 됨



39b8c332abd531a04e81d2b628f17565ac3af13b78


진짜 마지막으로 rect값을 플레이어의 체력 변수와 연동되도록하면 끝나겠지?


근데 이 방법의 단점으로는 이미지의 보더 바깥쪽보다 작은 걸 표현해야 할때 조금 어색함













+번외)

원래 다양한 크기에 대응되는 UI창 만들라고 있는 기능인데 대충 게이지 UI에도 써먹을만 해서 말해봄


7bf3c028e2f206a26d81f6e14681716e



3db1c535abd531a04e81d2b628f17c68edeaa282