본문

뉴스 기사

[기사 제목]

데이브 더 다이버, 3D에 뛰어든 2D 캐릭터

조회수 13890 | 루리웹 | 입력 2024.05.22 (15:50:00)
[기사 본문] 22일 오후 1시 40분, 'U Day 서울'에 참가한 민트로켓의 변순항 소프트웨어 엔지니어가 'Dave, a 2D-Diver in a 3D-Land - 데이브 더 다이버 포스트모템'이라는 제목의 세션을 진행했기에 이를 들어 보았다.

data/news25/05m/22/multi/s_d1.jpg

data/news25/05m/22/multi/s_d2.jpg

2축으로 이루어진 평면인 2D와 3축으로 이루어진 공간인 3D, 데이브 더 다이버는 이 두 차원을 연결하여 서로 상호작용이 필요했다.

data/news25/05m/22/multi/s_d3.jpg

data/news25/05m/22/multi/s_d4.jpg

2D 캐릭터인 데이브와 3D 캐릭터인 상어는 서로 만나도 부딪치지조차 않는다. 렌더링과 물리 엔진, 배치 공간이 서로 다르기 때문이다.

data/news25/05m/22/multi/s_d5.jpg

data/news25/05m/22/multi/s_d7.jpg

■ 3D 모델에 딱 맞는 2D 콜라이더 입히기(지형)

바닷속 지형은 게임의 밸런스를 조절하며, 입체감과 공간감을 주어 2D와 3D를 조화시킨다.

data/news25/05m/22/multi/s_d8.jpg

이를 위해 우선 더미(뼈대)를 만들고, 아트 팀에서 실제 게임에 들어갈 지형 모델 리소스를 제작하면서 원경을 추가한다.

data/news25/05m/22/multi/s_d9.jpg

data/news25/05m/22/multi/s_d10.jpg

마지막으로 이렇게 만들어진 환경에 콜라이더를 입히게 되는데, 모델에 딱 맞는 콜라이더를 만들어야 하는데 2D 엔진을 사용하는 게임의 특성 상 2D로 만들어야 했으며, 다행히 유니티에는 렌더러에 맞춰 콜라이더를 세팅해주는 기능이 있었으나, 메시 렌더러와 폴리곤 콜라이더는 자동으로 만들어주지 않았다.

data/news25/05m/22/multi/s_d11.jpg

그래서 지형에서 콜라이더가 입혀질 부분을 구분하고, 여기에 실제 콜라이더를 입힌 뒤 모델과 이격이 있는지를 확인하는 과정이 필요했으며, 초반에는 이 모든 작업을 사람이 수행했다.

data/news25/05m/22/multi/s_d12.jpg

기획자가 이 작업을 수행하는데 소요되는 시간은 8시간. 덕분에 퀄리티는 좋았으나 지형이 추가되고 프로젝트가 커지면서 부하가 커져 지형 콜라이더를 자동 생성할 툴의 필요성이 커졌다.

data/news25/05m/22/multi/s_d13.jpg

그래서 3D 모델을 카메라로 캡쳐하여 이를 2D로 제작한 후 콜라이더를 입히기로 했으나 자연스러운 지형 환경을 위해서 원경까지 추가한 상태에선 모두 충돌할 수 밖에 없다.

data/news25/05m/22/multi/s_d14.jpg

이에 데이브보다 앞쪽에 있는 지형에만 콜라이더를 생성하기 위해 셰이더를 만들었으며, 이를 카메라 캡쳐 전에 적용하여 3D 모델을 2D로 만드는 과정에 성공했다.

data/news25/05m/22/multi/s_d15.jpg

data/news25/05m/22/multi/s_d16.jpg

이렇게 만든 스프라이트를 스프라이트 렌더러에 넣고 지형에 2D 콜라이더를 생성했다.

data/news25/05m/22/multi/s_d17.jpg

결과는 거의 들어맞지만 완벽하게 맞지는 않아서 검증이 필요했으며, 이를 쉽게 처리하기 위해 엣지마다 일정 간격으로 데이브 스프라이트를 배치, 실제로 머리를 박지 않아도 카메라 만으로 이격을 판단할 수 있도록 했다.

data/news25/05m/22/multi/s_d18.jpg

data/news25/05m/22/multi/s_d19.jpg

data/news25/05m/22/multi/s_d20.jpg

결과적으로 씬에 있는 콜라이더를 전부 생성하는데 걸리는 시간은 약 30초 정도이고, 작업 시간이 90% 단축됐다.

data/news25/05m/22/multi/s_d21.jpg

■ 2D 콜라이더에 회전 적용하기

움직이지 않는 배경과 달리 물고기는 회전을 하는데, Z축으로만 회전하는 2D와 달리 3축을 모두 사용하는 3D 회전은 성격이 판이하게 다르다.

data/news25/05m/22/multi/s_d22.jpg

일례로 박스를 Y축으로 회전하면 평면 상에서만 유지되는 2D 콜라이더는 면적이 점점 작아지다 90도가 되면 Z축과 평행하게 눕혀져 물리 엔진이 처리 시 이를 제외시킨다.

data/news25/05m/22/multi/s_d23.jpg

data/news25/05m/22/multi/s_d24.jpg

회전문 기믹은 데이브가 기믹을 밀어 작동시키는 장치인데, 3D 모델에 Y축으로 회전하지만 데이브가 밀 수 있도록 2D 콜라이더가 붙어 있는 좋은 예시다.

data/news25/05m/22/multi/s_d25.jpg

단순히 생각하면 데이브가 닿는 부분에 설치해야 할 것 같지만 이렇게 하면 이격이 발생해 데이브가 기믹에 파묻혀버린다.

data/news25/05m/22/multi/s_d26.jpg

그래서 기믹과 데이브가 있는 평면의 절단면을 콜라이더로 만들었다. 이를 위해 기믹에 3D 박스 콜라이더를 넣고 데이브가 있는 평면과의 접점을 구한 뒤 이를 면으로 만들어 폴리곤 콜라이더에 적용했다.

data/news25/05m/22/multi/s_d27.jpg

물고기 회전의 경우 2D 물고기는 옆모습만 보이면서 Z축으로만 회전하는 반면 3D 물고기는 등을 보이기도 한다. 그런데 상어가 등을 보일 때는 X축으로 90도 회전하여 어떤 공격도 먹히지 않게 된다.

data/news25/05m/22/multi/s_d28.jpg

하지만 회전문과 달리 쉴 새 없이 움직이는 상어는 보다 직관적인 방법이 필요했다. 그래서 90도로 회전시켜 눕혀진 2D 콜라이더를 1개 더 배치, 언제나 데이브와 충돌이 가능하게끔 했다.

data/news25/05m/22/multi/s_d29.jpg

■ 카메라에 따른 2D와 3D 넘나들기

퍼스펙티브와 오쏘그래픽은 카메라 컴포넌트의 프로젝션 타입으로 렌더링하는 이미지의 가시적 특성을 결정한다. 오쏘그래픽에는 깊이가 반영되지 않고, 퍼스펙티브에는 원근감이 적용된다. 그래서 깊이값이 필요 없는 2D 게임은 오쏘그래픽, 원근감이 필요한 3D 게임은 퍼스펙티브 프로젝션 타입으로 개발한다.

data/news25/05m/22/multi/s_d30.jpg

카메라가 렌더링 하는 시야의 영역을 뜻하는 프러스텀은 오쏘그래픽의 경우 직육면체 모양을 띄게 되지만 퍼스펙티브는 뒤집힌 피라미드 모양을 하게 된다. 데이브 더 다이버는 입체감과 공간감이 필요하여 퍼스펙티브를 사용했으나, 물리는 오쏘그래픽, 렌더링은 퍼스펙티브를 사용하다보니 문제가 발생했다.

data/news25/05m/22/multi/s_d31.jpg

3D 오브젝트인 보스 중 맨티스 쉬림프는 권투를 하므로 양 글러브에 2D 서클 콜라이더가 하나씩 붙어 있다. 검은색 반투명 플레인이 데이브가 있는 평면인데 한쪽은 데이브보다 뒤, 한쪽은 앞에 있게 된다.

data/news25/05m/22/multi/s_d32.jpg

data/news25/05m/22/multi/s_d33.jpg

그러다보니 실제 데이브와 겹쳐도 충돌이 일어나지 않으며, 오히려 주먹에 맞지 않은 데이브가 허공에서 무언가에 공격 당하는 상황이 벌어진다. 주먹의 모델보다 훨씬 뒤에 콜라이더가 위치하게 된다는 것이 원인이다.

data/news25/05m/22/multi/s_d34.jpg

data/news25/05m/22/multi/s_d35.jpg

data/news25/05m/22/multi/s_d36.jpg

그래서 글러브의 2D 콜라이더를 명시적으로 데이브가 있는 평면으로 당겼다. 이를 위해 콜라이더가 있는 오브젝트의 포지션을 스크린 포지션으로 변경, 깊이값을 카메라와 데이브까지의 거리로 바꾼 후 다시 월드 포지션으로 변경했다.

data/news25/05m/22/multi/s_d37.jpg

data/news25/05m/22/multi/s_d38.jpg

다음으로 스케일 문제를 해결하기 위해 데이브가 있는 평면의 기준에서 주먹이 얼마나 작게 보이는가를 계산했다. 방법은 데이브가 있는 절단면의 높이와 주먹의 절단면 높이를 나누어 비율을 구한 뒤 콜라이더 스케일을 조절하는 것이다.

data/news25/05m/22/multi/s_d39.jpg

포토 스팟은 그 반대 케이스에 해당한다. 데이브와의 상호작용이 없는 관계로 3D 콜라이더를 사용했고, 타겟에 붙은 콜라이더가 몇 % 들어와있는지를 판단하여 쓰레쉬홀드보다 높으면 성공 처리한다.

data/news25/05m/22/multi/s_d40.jpg

data/news25/05m/22/multi/s_d41.jpg

처음 구현한 방식은 스크린 좌표계의 렉트를 월드 렉트로 바꿔 박스캐스트와 충돌하면 프레임 안에 있는 것으로 판단, 박스캐스트의 바운드와 콜라이더의 바운드를 비교하여 얼마나 중첩되었는지를 체크하는 방식이었다.

data/news25/05m/22/multi/s_d42.jpg

처음에는 잘 작동하는 것처럼 보였으나 화면에는 물고기의 머리가 걸쳐 있어도 충돌이 일어나지 않았다고 명시된다.

data/news25/05m/22/multi/s_d43.jpg

수정 방법은 퍼스펙티브와 오쏘그래픽의 격차를 없애기 위해 Z값만 카메라 포지션으로 바꾼 2개의 포지션을 스크린 포지션으로 바꿔주는 것이었다. 큰 데이브와 작은 데이브는 Z값만 다른데도 스크린 포지션에서 오프셋이 발생하는데, 이를 월드로 바꾼 뒤 그 역 벡터를 콜라이더에 적용해 오차를 쇄시켰다.

data/news25/05m/22/multi/s_d44.jpg

data/news25/05m/22/multi/s_d45.jpg

이장원 기자   inca@ruliweb.com




관련게임정보 목록

데이브 더 다이버

기     종

PC/PS4/SWITCH/PS5

발 매 일

판매중

장     르

하이브리드 해양 어드벤처

가     격

제 작 사

민트로켓/넥슨

기     타







댓글

목록보기

댓글 | 18
1
 댓글


(IP보기클릭)182.226.***.***

BEST
역시.. 여러방법을써서 개선한 덕분에 효율이 증대화된결과였군요.. X같은 인간들이 위에 있으면 이걸 수작업화시켜서 수십시간작업시키고 버그도 양산하게 만들어버리더군요.
24.05.22 16:12

(IP보기클릭)211.216.***.***

BEST
이런게 기술력인건데…
24.05.22 17:44

(IP보기클릭)222.101.***.***

BEST
ㄹㅇ 이런게 노하우고 기술력임. 그리고 그걸 성공적으로 보여줬기 때문에 앞으로 데이브 더 다이버 처럼 2D와 3D가 적당히 섞여서 나올 다양한 게임들 기대하는 중!
24.05.22 17:49

(IP보기클릭)222.105.***.***

BEST
사놓고 아직 한번도 안해봤네 밀린게임들 다 깨봐야겠는데...
24.05.22 16:12

(IP보기클릭)121.159.***.***

BEST
팡숀을 쓰지 마세요 는 어디에나 있다
24.05.22 22:49

(IP보기클릭)222.105.***.***

BEST
사놓고 아직 한번도 안해봤네 밀린게임들 다 깨봐야겠는데...
24.05.22 16:12

(IP보기클릭)12.190.***.***

멋진 신세계
부럽다..안해본 뇌 삽니다... | 24.05.23 04:41 | | |

(IP보기클릭)182.226.***.***

BEST
역시.. 여러방법을써서 개선한 덕분에 효율이 증대화된결과였군요.. X같은 인간들이 위에 있으면 이걸 수작업화시켜서 수십시간작업시키고 버그도 양산하게 만들어버리더군요.
24.05.22 16:12

(IP보기클릭)121.159.***.***

BEST
겨울뱜
팡숀을 쓰지 마세요 는 어디에나 있다 | 24.05.22 22:49 | | |

(IP보기클릭)211.216.***.***

BEST
이런게 기술력인건데…
24.05.22 17:44

(IP보기클릭)222.101.***.***

BEST
용처럼
ㄹㅇ 이런게 노하우고 기술력임. 그리고 그걸 성공적으로 보여줬기 때문에 앞으로 데이브 더 다이버 처럼 2D와 3D가 적당히 섞여서 나올 다양한 게임들 기대하는 중! | 24.05.22 17:49 | | |

(IP보기클릭)117.111.***.***

음 완벽히 이해했어...
24.05.22 18:32

(IP보기클릭)211.235.***.***

엑박 버전은 출시 안됐나요?
24.05.22 19:42

(IP보기클릭)222.112.***.***

오 마침 회사에서 비슷한게 필요했는데 한번 시도해봐야겠네요
24.05.22 20:19

(IP보기클릭)1.235.***.***

음..대충 완벽히 이해했어 짤
24.05.22 22:18

(IP보기클릭)59.14.***.***

나중에 다시 보고싶은데 기사는 스크랩 안되네;;
24.05.22 22:46

(IP보기클릭)218.54.***.***

해외에서 이게 인디겜 퀄이냐고 놀라던 반응이 이해가네요 그야...대기업 인력이 모여서 만든거니까...
24.05.23 07:55

(IP보기클릭)119.65.***.***

이게 진정한 노하우고 기술력이지
24.05.23 08:30

(IP보기클릭)221.149.***.***

[삭제된 댓글의 댓글입니다.]
엘 핀
이거보고 따라하라고 해도 쉽게 못하니까 공개 ㅎㅎㅎㅎ | 24.05.23 22:41 | | |

(IP보기클릭)121.129.***.***

진짜 잘만들었음
24.05.23 12:13

(IP보기클릭)1.221.***.***

저도 너무 재미있게해서, 플5 로 하다가 스위치판 패키지도 예약완료 입니다~
24.05.23 12:52

(IP보기클릭)211.231.***.***

엔씨야 좀 받아적어라
24.05.24 10:34

(IP보기클릭)118.43.***.***

이런것도 나름 고유의 노하우일텐데 아낌없이 풀어버리네
24.05.24 10:34


1
 댓글




목록보기
BEST 뉴스

PC/온라인
비디오/콘솔
모바일
PC/온라인
비디오/콘솔
모바일
PC/온라인
비디오/콘솔
모바일

BEST 유저정보
콘솔
PC
모바일
취미
BEST 게시글
게임
애니/책
갤러리
커뮤니티
게임
애니/책
갤러리
커뮤니티
게임
애니/책
갤러리
커뮤니티
게임
애니/책
갤러리
커뮤니티


X