Three.js로 게임 만들기

D+59

여전히 Three.js journey를 공부하고 있다. 3D에 대한 관심은 건축 소프트웨어로부터 시작되었다. 근데 하면 할수록 3D가 재밌었다. 건축에선 현실에 지어지는 건축물의 보조도구로서 3D를 바라본다. 그러나 미디어 산업에서는 3D자체가 주인공이 된다. 그렇다. 나는 3D의 본질로 돌아가 3D를 통해 무언갈 해내는 것을 하고 싶다. 걷지도 못하는데 달리기도 못하듯이 매일 걸어보며 달리기를 하기 위한 근육을 길러보자

State management

React에서는 state관리가 가장 중요하다. state란 말 그대로 상태를 뜻한다. 좀 더 상세히 설명하면 각 컴포넌트 또는 앱이 가지는 각종 속성 및 정보를 뜻한다. React에서는 이 state를 다루는 것이 굉장히 중요하다. hook이라고 하는 일종의 state관리 도구를 통해 state를 자유자재로 다루게 된다. 이를 잘 이용하면 특정 state가 변할 때마다 화면 전체가 업데이트되거나 일부만 업데이트되거나 하는 기능들을 구현할 수 있다. 

hook이 state를 관리해 주는 도구라면, custom hook이란 사용자가 자신의 의도에 맞게 새로운 hook을 만든 것이다. react 예제에서 주로 useEffect라는 hook을 이용해 자신만의 hook을 만드는 내용을 다룬다. custom hook이 꽤나 유용하고 많은 이들의 동의를 얻으면 이를 따로 분리해 라이브러리로 만들기도 한다.

Global State Management

예를 들어 하나의 에러 팝업을 생각해 보자. 팝업에는 에러 상태를 비롯한 여러 가지 내용이 들어있을 것이다. 해당 에러는 상위 프로그램에서 발생해 해당 내용이 타고 타고 들어가 팝업에 띄워지는 형식을 띠고 있을 것이다. 그리고 팝업에선 상속받은 에러를 기준으로 메시지를 띄워주는 역할만 수행한다. react를 구현해 보면 알겠지만 이런 상태를 상속받아하는 작업은 꽤나 귀찮은 부분이 있다. 특히 어떤 내용들은 모든 컴포넌트가 공유해야 하는데, 상속받는 식으로 하면 상속관계를 일일이 계산하면서 해야 한다. 이런 문제를 해결해 주는 라이브러리로는 redux가 있다. redux는 중앙화된 state 관리도구로, 그 어떤 컴포넌트에서도 해당 state에 접근하고 변경할 수 있다. 내가 회사에서 했던 프로젝트도 redux와 r3f를 연결하는 구문을 꽤나 많이 사용했다.

zustand : r3f global state management

평화롭게 기타를 치는 곰의 모습이 이 라이브러리의 메인 페이지다. zustand도 redux의 존재를 인정하고 있는 모양이다. 왜냐하면 readme에 redux를 언급하고 있기 때문이다. 일단 이쪽 주장은 zustand가 좀 더 간결하고 빠르다는 입장이다. 분명 간편해 보이긴 한다. 하지만 위험도 꽤나 있어 보인다. 왜냐하면, r3f를 하는 사람이 그리 많지 않은 게 사실이다. 그리고 zustand를 쓰는 사람도 꽤나 없어 보인다. 반대로 redux의 경우 훨씬 많은 커뮤니티를 가지고 있다. 아무튼 모든 리스크는 모두가 알아서...

게임에서 state management

게임에서 상태를 관리하는 것은 중요하다. 가령 rpg라면 캐릭터의 체력, 능력치 등등 프로그램 전반에 공유되어야 하는 내용이 있을 것이다. 그래서 체력이 0이 되면 게임이 종료되고, 눈앞의 아이템과 내 능력치를 비교해 내 능력치가 낮으면 사용할 수 없도록 하는 등등의 패턴을 구현해야 할 것이다.

이 공 굴리기 게임에서도 state management가 필요하다. 게임의 상태는 '준비', '게임 중', '종료' 세 가지로 정의할 수 있다. '준비'에서는 출발선으로 공을 움직여야 한다. 공이 게임장을 이탈한 경우도 '준비'로 이동하게 된다. 오늘 내용에서는 zustand를 이용해 공을 원위치시키는 내용을 배웠다.