[Unity]23.RPG 튜토리얼 #2 - UI(캐릭터, 체력, 마나) 만들기

안녕하세요 유랑입니다.

실력향상을 위해서 오늘도 유튜브 강의를 따라하면서 공부하겠습니다.

궁금하신점 있으시면 댓글로 남겨주세요^^

1. RPG 만들기

이번 강의는 Patreon.com에서 외국인이 만든 강좌이며,

매달 $5의 후원을 통해야 리소스 다운을 받을 수 있습니다.

저는 돈을 지불하였고, 스킬업을 위해서 복습겸 글을 올리겠습니다.

리소스 사이트 => https://www.patreon.com/inScopeStudios/posts

유튜브 사이트 => https://goo.gl/o5VcTv

2. UI 만들기

2-1) 얼굴 UI 만들기

밑에 보이는 리소스를 다운받아 주세요.

HP, MP 얼굴 UI를 만들어 보겠습니다.

UI - Canvas 오브젝트를 생성 후 Scale With Screen Size로 변경한 뒤 

X: 1280 Y: 720로 변경해 주세요.

화면 비율을 16:9로 변경해 주는 과정입니다.

기기마다 핸드폰의 크기가 따르기 때문에 꼭 설정해 주어야 하죠.

Canvas 밑으로 UI - Image를 생성해 주세요.

그리고 Source Image에는 portrait_frame을 드래그앤 드랍을 이용해 넣어 주세요.

Rect Transform을 이용하면 UI 위치를 쉽게 변경 가능하며, 

크기가 변경될 때 변경될 부분을 정할 수 있습니다.

UI의 크기가 144 x 144이므로 트랜스폼 크기도 다음과 같이 변경해 볼게요.

이번에는 portrait_frame 이미지 밑으로 UI-Image를 생성하고, wizards_face를 넣어 주세요.

이미지 이름은 입맛에 맛게 변경해 주세요.

크기는 128 x 114로 변경하였습니다.

킁 뭔가 안맞네요. 조절해 볼게요.

비율을 맞춰주기 위해서 Width와 Height에 4/5를 곱해주었습니다.

이러면 비율에 맞게 크기가 줄어들거에요.

2-2) HP & MP UI 만들기

portrait_frame 자식으로 HP와 MP를 담을 수 있는 UI를 만들겠습니다.

bar1을 넣어주시되, 크기와 위치는 마음대로 조정해 주세요.

HP, MP Ground 안에 HP와 Mana를 넣어주겠습니다.

크기는 동일하게 만들어 주되 bar2(HP)와 bar3(Mana)를 각각 넣어주세요.

2-3) 체력과 마나 게이지 조절 해보기

HP와 Mana Image Tpye을 Filled로 변경하면 

Fill Amount를 통해서 체력과 마나를 조절할 수 있습니다.

- Image Type => Filled로 설정하면 해당 이미지의 비율을 변경 가능

- Fill Method => 이미지가 채워지는 방향을 설정 가능(360, 좌우, 상하 등)

- Fill Amount => 해당 이미지가 얼만큼 채워져있는지의 정도 (0 ~ 1)

Stat 스크립트를 만들고 다음과 같이 작성하겠습니다.

체력과 마나의 값을 조절해 줄 내용을 담고 있습니다.

Character 스크립트를 내용을 추가하겠습니다.

Start도 상속을 시킬 예정이므로 Protected Virtual을 추가해 주세요.

Player 스크립트 내용을 추가하겠습니다.

플레이어의 생명력과 마나를 정의 한 후 Start안에서 초기화 해주었습니다.

그리고 테스트 하기 위해서 키보드 입력값(I, O)을 이용해 게이지 값을 변경해 볼게요.

스크립트 작성이 끝나셨으면 Stat은 각각 HP와 Mana에 넣어준 후 Lerp Speed 값을 0.5로 설정.

Player 스크립트 안에 HP와 Mana 오브젝트를 드래그앤 드랍을 이용해 넣어 주세요.

게임을 실행해 값이 잘 변경되는지 확인해 보세요^^

2-4) 체력과 마나 Text 만들기

체력과 마나의 수치를 알고 싶기에 Text를 추가하겠습니다.

HP와 Mana 오브젝트 자식으로 UI - Text를 만들어 준다음 값을 다음과 같이 변경한 후

SHOWG 폰트를 적용해 주세요.

Stat 스크립트로가서 Text부분의 코드를 추가하겠습니다.

현재체력 / 최대체력을 Text로 보여주는 코드입니다.

스크립트 작성 후 Stat에 해당 Text를 추가해 주세요.

게임을 실행하고 단축키를 이용해 게이지가 감소하거나 증가할 때 값이 같이 변경하는지 확인해주세요!!!

3. 마무리

오늘 강의는 여기까지입니다.

RPG 튜토리얼을 따라하면서 체력, 마나, 캐릭터 UI를 만들어 보았습니다.

다임 시간에는 플레이어 공격을 구성해 보겠습니다.

감사합니다.

수업자료: https://github.com/YouRang12/-Tistory-Unity---Extra-2D-