Unreal 캐릭터 - UI위젯과 동기화

 

ㅇ플레이어의 기본적인 평타매커니즘, 움직임 매커니즘이 만들어졌으니

플레이어의 컨셉을 정하는시간을 가졌다

 

1.플레이어는 포스 라는 게이지를 가진다

2. 플레이어는 스킬을 사용할시 포스 게이지가 찬다

3. 포스를 다채우면 각성을 사용할수있고 각성버프는 강화된 스킬을 사용할 수 있다.

 

Ui 구상도이다

좌측위의 캐릭터 얼굴

hp, mp 포스게이지

그리고 중앙하단에는 스킬을 넣을것이다

(프로토타입이기때문에 언제든 변경이 될수도 있다)

플레이어CPP클래스에 추가해줄내용이다

플레이어hp, mp force관한 변수를 UPROPERTY로 언제든 수정할수있게 프로퍼티를 추가후 선언해준다.

 

그리고 플레이어가 사용할 ui를 제작해주기로 했다

UserWidget을 생성해준다

캔버스 패널 만들어주고

기본 hp, mp force, 캐릭터사진 이렇게 프로그래스바와 이미지를 ui에 추가해주었다

그리고 앵커도 작업해주었다

(변수여부 체크를 꼭 해주자)

그리고 테두리를 위해  Border를 추가해주고 패딩값 그리고 외형브러시값을 변경시켜서

테두리를 만들고 이미지를 넣어주었다

이렇게 나온다 

(먼가 구리지만 프로토타입이니 추후에 수정할계획이다)

bindWidget 프로퍼티를 붙혀서 내가 만든 변수이름과 동일하게하면 위젯이 바인드된다

그리고 캐릭터에서 캐릭터의 각 스테이터스값을 설정해줬다

일단 임시값이긴하지만 Hp는 10000

Mp는 5000 Force값은 100으로 해줬다

 

그전에 일단 내 화면 (뷰포트) 에 띄워보도록 하자

이렇게 추가해주고

clamp값으로 최소 0.0에서 1.0f까지 값이 벗어나지 않게 작업해주고

CreateWidget을 하고 하고 AddToViewPort로 뷰포트(화면)에 띄워주었다

 

처음 시작했을때 설정해둔 max값들로 변수값을 초기화시켜주고

프로그래스바를 내가 선언한 변수값에 따라 동기화를 시켜주고

그 변수값에 따라 각각 위젯에있는 프로그래스바의 퍼센트를 변경시켜주는 updateUI함수를 만들었다

함수를 적용시켜주고 ui를 업데이트 하면

내가 지정해둔 player의 hp, mp force가 프로그래스값이랑 동기화가 되었다

 

그러면 이제 스킬ui를 추가해보자

그전에 스킬의 컨셉은 총 8가지 q,w,e,r,a,s,d,f 이렇게 8키이니

바인딩 작업부터 해주자

이렇게 skillq를 사용하는 함수를 만들고

사용하게만들어줬다 그리고 mp는 자동회복이있어야하니

초당회복량을 만들어줘서

계속 ui를 업뎃시켜줬다

초당MP자동회복추가코드

ui가 잘 바인드된걸 확인할수있다

 

스킬을 쓰면 force(노란색게이지)가 올라가고

mp(파란색게이지)가 내려간다

 

지금 쿨타임이 없다 쿨타임또한 만들어준다

쿨타임일떄 deltatime에 시간을 중첩시켜 쿨타임을 만들어준뒤

다시 사용할수있게 만들어준다

그러면 쿨타임이 적용된 q스킬 완성