[Unity]28.RPG 튜토리얼 #7 - 캐스팅 바 만들기

안녕하세요 유랑입니다.

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

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

1. RPG 만들기

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

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

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

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

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

2. 캐스팅 바 

2-1) 캐스팅 바 만들기

Canvas 밑으로 UI => Image를 만들고, 이름을 CastingBar로 변경합니다.

크기는 캔버스의 넓이만큼 변경해 주고, 위치는 스킬 버튼 바로 위로 지정해 줍니다.

Image 컴포넌트는 삭제해 주세요^^

CastingBar 밑으로 Baccground라는 이미지 오브젝트를 만들고 bar1 스프라이트를 넣어주세요.

Set Native Size를 통해서 스프라이즈 크기만큼 사이즈 변경이 가능합니다.

여기서 높이면 조금 키워주겠습니다.

Fill은 캐스팅의 유무를 확인하려는 이미지이고, Icon은 현재 시전된 스펠 이미지입니다.

이미지와 크기를 각각 맞춰주세요.

Filled를 통해서 채워지는 정도의 표현이 가능합니다.

마지막으로 스펠의 이름과 캐스팅 시간을 텍스트로 표현해 주겠습니다.

Background밑으로 Text를 추가한 후 SpellName은 왼쪽으로 정렬, CastTime은 오른쪽으로 정렬시켜 주세요.

그리고 Outline을 통해서 그림자 효과를 주겠습니다.

캐스팅바 UI를 만들어 주었습니다.

크기와 위치는 변경해 주셔도 상관없습니다.

2-2) 스크립트 작성

우선, Splle 스크립트의 이름을 SpellScrpit로 변경해 주세요.

Spell 스크립트를 만들고 다음 내용을 작성하겠습니다.

Spell 스크립트에는 스펠의 정보를 담아두겠습니다.

Monobehivor를 상속받지 않기에 Serializable을 통해서 인스펙터 뷰에 노출시킬 수 있습니다.

이런 기능을 데이터 직렬화라고 합니다.

SpellBook이라는 스크립트를 생성하고 다음 내용을 작성해 주세요.

각각 스펠의 정보들을 담아두고 있습니다.

기존의 Player스크립트는 스펠 프리펩을 가져와서 사용하였다면,

이제는 SpellBook스크립트의 정보를 가져와서 사용하게 됩니다.

해당 스크립트의 내용을 수정하거나 추가해 주세요^^

2-3) Spell Book 연결

Player 오브젝트에 Spell Book 스크립트를 추가한 후 스펠 프리팹과 정보들을 입력해 주세요.

스펠은 FrireBall, Frostbolt, Lightning 총 3개입니다.

게임을 실행하면 스펠에 따라 캐스팅 시간이 달라진걸 확인할 수 있습니다.

2-4) 캐스팅 바 마무리

스펠에 따른 캐스팅과 스펠 이미지를 적용해 줄 차례입니다.

SpellBook 스크립트의 내용을 다음과 같이 바꿔주겠습니다.

Character스크립트의 StopAttack을 상속받을 수 있도록 virtual을 추가한 후

Cating 바는 오직 Player만 사용하므로 다음과 같이 변경해 주겠습니다.

Player스크립트에는 상속받은 StopAttack()부분을 다음과 같이 변경해 주세요^^

Bacground 오브젝트에 CanvasCroup 컴포넌트를 추가해 주세요.

캔버스 그룹은 한 곳에서 UI 그룹들의 특정 요소들을 컨트롤하게 도와줍니다.

캔버스 그룹의 요소들은 캔버스 그룹에 붙어있는 오브젝트뿐만 아니라 자식들에게도 영향을 미칩니다.

Player 오브젝트에는 아까 변경한 SpellBoll의 내용에 맞는 오브젝트들을 넣어주겠습니다!!!

스킬에 맞게 캐스팅 바 UI가 보이며 적용까지 되는걸 확인할 수 있습니다.

3. 마무리

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

RPG튜토리얼을 따라하면서 캐스티 바 구성후 적용까지 해보았습니다.

다음 시간에는 적에 체력을 적용하고, 제거하는 부분까지 알아보겠습니다.

감사합니다.

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