[💬] White spirit '18 9월 4주차 개발일지

[Creta_P..(hd3306)]

안녕하세요.

2주에 한 번씩 돌아오는 첫 개발일지 입니다.

원래는 시나리오나 그림, 레벨 구성 작업이 시작되어야 했었지만...

코드가 부릅니다...

아직 안 끝났어

-----

컷씬 : 캐릭터를 움직여야 한단 말이에요!

이제 준비가 다 된 줄 알았습니다.

근데 가장 중요한 걸 깜빡했었죠.

ㅠㅠ

제가 만든 EventData시스템에는 캐릭터를 움직일 수 있는 능력이 아직 없었습니다.

일단 필요한 요구사항은 간단하게 두가지로...

- 캐릭터가 게임 내의 모습 이외의 동작을 구사할 수 있을 것

- 캐릭터가 움직일 수 있을 것

...이 있습니다.

일단 캐릭터가 게임 내의 모습 이외의 동작을 구사할 수 있을 것의 완벽한 대안인 애니메이션 이벤트를 만들어보기로 했습니다.

간단하게, 애니메이션 컴포넌트를 참조하고, 필요한 애니메이션 이름을 이용해서 재생할 수 있도록 했습니다.

그런데 플레이어는 외부 프리펩이였고, 맵 상에서 실행되는 EventData특성으로 인해 이쪽으로 특화 된 필드를 만들기로 했습니다.

어느 것이든, 이제 MonoBehaviour를 사용하는 유니티 컴포넌트를 플레이어에게서 참조하거나

맵 상의 어떤 오브젝트를 참조할 지, 플레이 중에 맵을 넘나들 수 있는 오브젝트에게서 참조할 지를 결정할 수 있게 됐습니다.

그 다음은 이벤트가 직접 조작하는 이벤트를 만듭니다.

이부분은 플레이어의 인풋(컨트롤러, 키보드 등...)과 이벤트가 같이 사용할 수 있도록 해야겠죠?

그래서 인풋을 중계하는 InputController를 만들었습니다.

여기에서 입력을 받아 실제로 동작하는 클래스에 전달하는 식으로 구성하고 있습니다.

이렇게 만들면 EventData에서도 입력을 마음대로 해볼 수 있겠죠.

이부분은 아직 만들고 있습니다.

상속으로 구현하는 이유는, 플레이어 외에도 NPC도 이벤트를 통해 자유롭게 움직일 수 있도록 하기 위해 구성했습니다.

-----

TextMesh Pro와 글자 애니메이션

사실 이부분은 신경쓰려고 하진 않았는데, 캔버스에 있던 대사창을 WorldSpace로 옮기면서 클래스를 개편하는 작업을 하던 도중에 잠시 대사창 효과를 빼놨기 때문에 한번 건드려보기로 했습니다.

https://youtu.be/5vg2bzNzvbw

기존의 효과는 TMP(TextMesh Pro)의 구조를 잘 모르고 있었기 때문에, 대사창을 움직이는 것으로 화자의 감정 표현을 대신했습니다.

TMP는 지금도 문서화가 되어있지 않아서 클래스 정보를 찾는 데 어려움이 있었죠...

이번에 조금씩 다시 찾아보면서 더듬듯이 확인했습니다.

저는 이게 된 줄 알았는데, 알고보니 폰트의 글자 위치 정보를 바꿔버리는 만행을 저지른 것이였습니다.

여기서 포기하려고 했었는데...

https://github.com/mdechatech/CharTweener

DOTween을 이용해서 글자에 애니메이션을 주는 CharTweener라는 레포지토리를 발견했습니다.

DOTween을 사용할 정도면, 제가 원하는 대로 글자를 조정할 수 있을거라 생각하고

코드 리딩을 하며 TMP의 글자를 움직이러면 어떻게 해야 하는지 파악하기 시작했습니다.

첫번째로, TMP가 메쉬를 만들어서 렌더링을 하기 때문에, 위치를 옮기려면 메쉬의 정점 위치를 옮길 수 밖에 없습니다.

TMP를 설치하면 같이 오는 예제에서도 글자의 정점을 바꾸는 걸로 구현되어 있는 것을 알 수 있죠.

하지만 정점 정보를 바꿔버리면, 원래대로 돌아갈 수 없기 때문에, TMP에는 이 정점 정보들을 복사할 수 있게 되어있습니다.

이것은 TextMeshPro의 속성인 textInfo에서 CopyMeshInfoVertexData를 통해 정점 정보의 사본을 가져올 수 있습니다.

하지만 원본이 변형 될 문제가 있지만, 다행히도 TMP는 텍스트가 바뀌면 정점을 다시 계산합니다.

이는 TMPro_EventManager.TEXT_CHANGED_EVENT에서 텍스트가 바뀌었다는 신호를 받을 수 있죠.

여기에 Add(<메서드 이름>)이나, Remove(<메서드 이름>)을 통해 이벤트로써 추가하거나 뺄 수 있습니다.

추가 할 메서드에는, 텍스트가 바뀌면 TMP로부터 메쉬 정보를 새로 받아오게 만들어줬습니다.

참고했던 CharTweener에는 DOTween을 연동하는 식으로 구현이 되어있기 때문에 Transform을 사용하지만, 저는 많은 정보가 필요하지 않기 때문에 최소한의 변형 정보만 담은 클래스를 만들어서 사용하기로 했습니다.

Feat. 좀만 더 생각을...

어우... 생각하고 정리하는 데 시간이 좀 걸렸습니다.

여기에 내용을 다 정리해서 적기에는 시간이 없으니, 주석을 참고해주시길...

핵심 내용만 간단하게 정리하면...

행렬인 Matrix4x4는 간단히 말해서, 정점을 어떻게 위치를 변형해야 하는 지에 대한 정보입니다.

Matrix4.4.TRS를 이용해 위치, 회전, 크기 정보를 행렬로 바꾼 결과를 반환받을 수 있습니다.

이걸 이용해, 정점 위치(Vector3)를 변형 정보에 적용(MultiplyPoint3x4)해서 반환받은 정점 위치를

TMP에서 렌더링 되고 있는 정점 정보에 적용해주면, 바뀐 모습으로 나오게 됩니다.

어쨌든 테스트를 해보고, 잘 움직이는 모습을 볼 수 있었습니다.

작동이 잘 되는 것을 확인했으니, 글자에 효과를 만들어 봤습니다.

https://youtu.be/HVPc-sR9_FQ

-----

코드 : 나 없이 그림 못 그려! 안돼!

이번 주에는 하루 깜빡하고 커밋을 못했습니다. 다 해놨는데...

다음 주에는 컷씬을 위한 캐릭터 이벤트들을 완성하고 진짜로 그림 그릴 생각입니다.

다음 주에 또 돌아오겠습니다.

-----

BONUS CONTENT

CREFFECT 추석 기념 그림에 대해서...

우선은 Drawpile이라는 프로그램을 통해, 참여 했던 팀원 분들과 함께 자리를 정했습니다.

몇몇 분은 작업 환경이 마련되지 않아 폰으로 그램을 그리는 등 여러 사단이 있었죠.

여기에서 White spirit에 나오는 캐릭터 3명 모두가 들어왔습니다.

캐릭터들의 복장 컨셉은 추석 3일 전부터 준비해왔죠.

여기에서 저는 이제 채색을 자유롭게 할 수 있는 환경이 마련된 덕분에 빛의 방향도 생각해볼 수 있게 됐었죠.

아무튼 이런 일이 있었습니다.

보너스 컨텐츠 끝ㅡ

[익명(175.120)]

개추

[익명(121.170)]

애니메이팅 이사람처럼 하고 싶어서 틈틈히 보고 따라해보려하는데 엄청 어렵네...

[COUNTER(ge3536)]

와 님 개쩌네여