Land Of Memories - Npc (helper) & DOTween

 

이번 작업은 npc와 상호작용 하여 조작법을 알려주는 창을 연출해 보았습니다.

 

먼저 Helper Npc를 배치하고

 

애니메이션을 게임 시작 시 Idle이 반복되게 해 주었습니다.

(특별한 기능은 아니고 정적 현상을 없애기 위함입니다.)

 

 

다음은 Ui를 만들어 주었습니다.

 

애니메이션 클립을 만들어서 동작을 할까 하다가

 

DOTween을 사용해 보기로 했습니다.

 

DOTween 패키지에 대해 알아본 바를 간단히 설명하자면

 

Unity에서 애니메이션을 간단하기 처리할 수 있도록 돕는 애니메이션 툴이라고 합니다.

 

2D, 3D 모두 지원을 하며 위치 이동, 회전, 크기, 변화 등 다양한 애니메이션을 부드럽게 구현을 할 수 있다고 합니다.

 

 

애니메이션으로 제작할 경우 애니메이션 클립 리소스를 따로 관리를 해줘야 하는데

 

코드로 제어를 할 수 있다는 점이 매력적인 것 같습니다.

 

---

 

DOTween을 사용하기 전에 먼저 사용할 UI를 만들어 주었습니다.

 

 

이후 비활성화를 해준 뒤 (0, -600) 위치에 안 보이게 해 주었습니다.

 

현재 제가 원하는 기능 구현은 UI가 활성화되면

 

아래에서 위로 올라오면서 UI가 확대되는 것입니다.

 

---

 

그렇다면 1차 순서는 정해졌습니다.

 

1. NPC를 클릭한다.

2. UI가 팝업 되며 Tween이 실행된다.

3. Close Button을 클릭하면 UI가 비활성화된다.

 

---

Npc를 클릭하면 실행될 "NPCClickHandler" 스크립트입니다.

 

Input.GetMouseBittonDown(1) [마우스 오른쪽]

을 사용하여 레이로 충돌 검사를 해주고

 

충돌된 Collider가 태그가 NPC 라면

 

messagUiLevel01을 활성화시켜 주는 코드입니다.

 

---

 

다음은 UI가 활성화될 때 Tween을 할 코드입니다.

 

가장 먼저 Tween을 사용하기 위해선 using문을 작성해 주어야 합니다.

 

다음은 전체 스크립트입니다.

 

유니티의 이벤트 함수인 OnEnble()을 사용하여

오브젝트가 활성화될 때 다음 로직이 실행하게 구현하였습니다.

 

다음은 OnClickCloseButton()입니다.

Close 버튼을 클릭하면 실행될 함수이며

 

OnClick 이벤트로 실행되게 하였습니다.

 

다음은 ShowPopup()입니다.

 

popupImage.DOAnchorPos(Vector2.zero, animationDuration)

UI의 앵커 위치를 (0,0)으로 animationDuration(0.5) 시간 동안 이동시켜 표시합니다.

 

SetEase함수의 Ease.OutBack은 시작할 때는 빠르게, 끝에 가까워질수록 느리게 움직이는 애니메이션 효과입니다.

 

Ease의 종류에는 다음과 같은 사이트에서 확인을 할 수 있습니다.

 

https://easings.net/ko

Easing Functions Cheat Sheet

 

하지만.. 봐도 아직 감이 잘 잡히지 않아서, 이전에 사용했던 걸로 사용하는 건 비밀입니다.

 

그다음에 올

 

popupImage.DOScale(Vector3.one, animationDuration)

 

부분도 유추를 해 볼 수 있습니다.

 

Ui의 크기를 0,0에서 Vector3.one(1,1)로 확장을 할 때 사용하는 코드입니다.

(팝업이 커지는 느낌)

 

다음은 Hidepopup 함수입니다.

 

기존 ShowPopup()과 매우 흡사한 것을 볼 수 있는데요,

 

Origin 위치에서 변경이 됐다면 

변경이 된 위치에서 다시 Origin으로 돌리는 모습입니다.

 

또한 DOVirtual의 DelayedCall을 사용했는데

일정 시간이 지나고 특정 동작을 실행 한다고 보시면 될 것 같습니다.

 

즉 0.5초 후 = 애니메이션이 끝난 시간

람다 표현식을 사용하여 다음 로직이 실행 되게 구현을 하였습니다.

 

 

정리하자면 0.5초 후에 위치와 스케일이 변경된 Ui를 다시 원상태로 돌리고

애니메이션이 끝나면 비활성화되는 로직입니다.

 

 

 

원하는 동작 구현은 잘 됩니다.

 

다음은 NectButton을 눌렀을 때

 

방향키와 공격 방법을 간략하게 설명해 주면 

 

초반 NPC의 Helpr는 완료가 될 것 같습니다.

 

---

 

현재 계획은 이렇습니다.

1. NextButton을 클릭한다.

2. 두 번째 UI가 팝업 되고 첫 번째 UI는 비활성화된다.

3. 최종적으로 닫기 버튼만 남는다.

 

입니다.

 

 

두 번째 UI입니다.

 

 

다음과 같이 파란색으로 칠한 부분의

OnClickNextButton()과

OnClickAllCloseButton()입니다.

 

먼저 HidePopup()은 기존에 팝업 된 UI의 Close 버튼이 클릭될 때 실행되는 함수입니다.

 

 

다음 각 실행될 함수입니다.

 

이번 이동 구현은 오른쪽(1500, 0)에서 가운데 (0,0)으로 오도록 구현을 해보았습니다.

 

사용된 코드는 첫 번째 UI가 팝업될 때와 같으나

 

Vector2의 좌표가 달라졌고

 

첫번째 UI를 제어하는 것이 아닌 두 번째 UI를 제어하도록 했습니다.

 

 

 

---

 

널 레퍼런스 오류 발생.

 

 

다음과 같이 조건을 걸어주어 해결을 하였습니다.

 

에러가 발생했던 이유는 레이를 쐈지만 

아 참 그리고 최적화 와도 같은데

 

감지된 콜라이더가 없고

 

바로 다음 hit.collder에 접근하려 했지만 null 상태로 발생한 오류였습니다.

 

다음으로는 작업을 하던 도중 생각났던 부분입니다.

---

 

버튼 클릭 기능이나 상호작용을 할 필요가 없는 UI는 전부

 

Raycast Target을 꺼줘야 쓸데없는 연산이 안된다고 학습했습니다!

 

무심코 사용하던 Text도

 

Extra Settings를 열어서 확인해 보면 Raycast Target이 있는 것을 볼 수 있습니다.

 

클릭 및 상호작용이 필요 없으면 모두 꺼줍시다.

 

 

---

 

감사합니다.

 

 

---

 

-추가 : 마우스 커서가 보이는 버전-