친절한효자손 취미생활

[유니티강좌] 유니티기초 2D 비행기게임 만들기 #11 - HP UI 만들기



연속으로 유니티 포스팅을 하게 되네요.

이번에는, UI 부분으로 들어가 보도록 하겠습니다.


지난번 포스팅까지, 내 비행선과 운석과 부딫히거나 적 비행기와 부딫히면 데미지를 입는 것을 배워봤죠?

이번에는, 데미지 받는것을 수치로 표현하는 UI를 구성해 보도록 하겠습니다.





일단, UI 부분은 유니티 화면상에서 보여지긴 하는데,

게임 오브젝트 뷰와 UI 뷰는 따로따로 있다고 보시면 됩니다.

이따가 다시 설명을 드리도록 하겠고,


GameObject > UI > Canvas 로 들어갑니다.





그리고, 이번엔 Text 로 들어갑니다.





현재 3D 뷰로 되어있기 때문에, 캔버스가 한눈에 안들어 올 수 있습니다.

이 부분은 크게 신경 안써도 되며, 캔버스라는 것은, 오락실을 예로 들자면,

현재 화면 전체의 백그라운드를 말합니다.


캔버스 안에 Text가 들어가 있습니다^^





이제 2D 모드로 보면, 이렇게 New Text 라고 나와있는것을 확인하실 수 있고,

위치를 저~쯤으로 옮겨 보도록 하죠.





그러면, 플레이를 하시게되면, 카메라뷰와 UI뷰가 자동으로 합쳐짐을 확인하실 수 있습니다.

따라서, UI가 어느 좌표에 있든 캔버스는 고정이므로 캔버스 안에서 UI를 적절히 배치하면 되는 것입니다.





텍스트 는 이렇게 변경이 가능합니다.





그리고, 아까 2D모드라고 했는데, 저 위에서 뷰를 변경하시면 됩니다.

아무래도 UI는 평면이므로, 2D 모드에서 관리하시는 것이 더 편하실 꺼에요.





이제 HP와 HP Count 텍스트를 만들고, HP Count 에는 숫자 100을 입력해 줍니다.

이게 곧 제 비행선의 체력이 될 것입니다.





지난시간에 만들었던 collisionPlayer 스크립트를 더 수정해 줍니다.

빨간 상자 부분의 스크립트를 하나 구성하여, 유니티 상에서 설정이 가능하도록 변수를 만들었습니다.





그러면, 이렇게 내 비행선 오브젝트에 HP point 부분이 생성이 되죠?





방금 만든 UI 텍스트인, HP Count 를 드래그해서 저곳에 넣어주세요.

이제 숫자변화를 한번 봅시다^^




0


오호~ 잘 깍이는군요~!

근데 문제가 또 하나 있죠??? 체력이 마이너스가 될 순 없습니다.





그래서, 위와 같은 스크립트를 하나 더 구성합니다.

체력이 0보다 작을때, 즉 0 미만일때, HP를 그냥 0으로 출력하겠다~ 라는 의미입니다.




0


자~! 이제 정상적으로 출력이 됩니다^^ 어렵진 않지요???



다음 시간에는 이제 적을 터뜨리면, 점수가 올라가는 UI를 구상해 보도록 할께요^^

아...오늘은 정신 없었네요;;;



공유하기

facebook twitter kakaoTalk kakaostory naver band