[📚정보] 번역)유니티 2D게임에 원근감을 더 해보자-1

[ㅆㅇㅆ(124.216)]

Adding some perspective to your Unity 2D game.

저희 게임인 Verdant Skies에서는 손으로 그린 전통적인 느낌을 살리되,

풀 3D 원근법을 적용하고 그림자와 물 반사 같은 효과를 추가하여 더욱 흥미롭게 만들고 싶었습니다.

이는 소규모 팀의 역량에 잘 맞았습니다.

구형 2D 하드웨어에서는 드로잉 순서(역주:유니티서는 Sorting order랑 비슷)를 매기고, 각 스프라이트의 위치와 스케일을 계산하는 것만으로도 비슷한 모양을 구현할 수 있을 것입니다.

그리기 순서

하지만 3D 엔진(Unity)을 사용했기 때문에 이러한 수고를 덜 수 있었습니다!

기본 설정으로는 이와 같은 투영을 만드는 데 도움이 되지 않으며 몇 가지 문제가 있습니다.

첫째로, Unity는 이와 같은 씬에서 스프라이트를 깊이 정렬(Depth Sort)하는 방법을 잘 모릅니다.

둘째, (원근감을 주기 위한) 필요한 투영(projection )은 Unity에서 제공하는 것과 같은 기본 투영이 아니며,

유니티에서 기본으로 제공하는 투영을 사용할 경우 결과물이 상당히 나빠 보일 수 있습니다.

하지만 올바른 설정과 약간의 매트릭스 수학을 사용하면 많은 작업 없이도 고전적인 투영을 얻을 수 있습니다.

예를 들어, 우리 게임의 인터랙티브 WebGL 데모를 플레이 해보세요.(역주:링크 올리면 글삭되서 링크 안올림)

카메라 스크립트 링크는 이 글의 마지막에 있는 리소스 섹션에 포함되어 있습니다.

첫 번째 문제는 스프라이트를 올바른 순서로 그리는 방법입니다.

대부분의 2D 게임은 알파 블렌딩을 사용하기 때문에 Unity는 Z 버퍼의 도움 없이 스프라이트를 올바른 순서로 그려야 합니다.

(역주:알파 블렌딩은 스프라이트 위에 스프라이트를 표기할때 투명하게 비치는 효과를 내기위해 색상표현값 RGB에 추가로 새 값을 할당하여 배경 RGB위에 새 RGB값을 혼합하는 것, 유니티에서 )

(여기서 보다시피 A라는 값이 그 투명도를 말함)

2D 게임에 대한 Unity의 정렬 지원은 다소 제한적이며, 사람들은 이 문제를 해결하기 위해 창의적이긴 하지만 지루한 시도를 많이 해왔습니다.

다행히도 몇 가지 기능을 조합하면 간단한 해결책이 있습니다.

Verdant Skies는 3D 원근법을 사용하기 때문에 깊이 정렬에 z값을 단독으로 사용할 수 없었습니다.

z축을 따라 오브젝트를 이동하면 크기가 변경되고 반사와 그림자가 깨집니다.

또한 Unity 뎁스는 스프라이트의 중심을 기준으로 정렬하기 때문에 어떤 스프라이트는 바닥에 누워 있고 어떤 스프라이트는 똑바로 서 있기 때문에 카메라에 의존하여 Verdant skies의 스프라이트를 자동으로 정렬할 수 없었습니다.

플레이어가 지면이 그려진 쪼가리(Ground Patchs) 중앙을 지나가면 스프라이트가 땅 밑으로 사라지기도 했습니다!

정렬 레이어(Sorting Layer)와 Sroting Order(정렬 순서)사용하는 것은 오브젝트가 움직일 때마다 정렬 순서를 업데이트해야 하므로 이상적이지 않습니다.

또한 Sroting Order(정렬 순서) 프로퍼티는 정밀도가 매우 낮아서(16비트에 불과) 월드의 크기를 제한합니다.

대신 정렬 레이어를 사용하여 스프라이트를 바닥부터 그려나가고, 직교 카메라 소팅 모드를 사용하여 같은 레이어 내에서 스프라이트를 깊이 정렬(Depth Order)합니다.

기본 지면(Ground Patch)을 먼저 그린 다음 그 위에 자갈, 들판 등의 쪼가리(Patchs)를 그린 다음 마지막으로 똑바로 서 있는 스프라이트를 그렸습니다.

지면 그림 쪼가리는 항상 평평하고, 식물과 캐릭터는 항상 똑바로 서 있기 때문에 정렬 레이어는 변경되지 않고 간단한 설정으로 끝납니다.

남은 작업은 같은 레이어 내의 스프라이트를 정렬하는 것입니다. 이 작업은 직립형 오브젝트에서만 중요하며, 씬의 깊이에 따라 자동으로 정렬되기를 원합니다.

직교(Orthographic ) 카메라는 이미 올바른 정렬 모드로 기본 설정되어 있습니다.

하지만 원근(perspective ) 카메라의 경우 기본 정렬 모드는 카메라 중심까지의 거리를 기준으로 오브젝트를 비교합니다. 스프라이트의 경우 카메라를 왼쪽이나 오른쪽으로 움직이면 스프라이트가 서로 앞쪽으로 튀어나오기 때문에 이 방식은 작동하지 않습니다.

특히 건물이나 나무와 같은 큰 스프라이트에서 눈에 띄게 나타나며 매우 어색할 수 있습니다.

다행히도 직교 카메라처럼 깊이별로 정렬하도록 원근 카메라를 구성할 수 있습니다.

Start() 메서드에서 간단히 카메라를 구성할 수 있습니다.

종합하면, 레이어 정렬은 스프라이트를 아래에서 위로 그리고 카메라의 깊이 정렬은 스프라이트를 앞뒤로 그립니다.

모든 정렬은 별도의 스크립트 개입 없이 자동으로 이루어집니다.

다음 작업은 올바른 투영을 렌더링하는 것입니다. 위의 스크린샷이 목표라고 생각하세요.

스프라이트는 모두 왜곡 없이 화면에 평행하게 그려져 있습니다.

지면은 미묘한 원근감을 주기 위해 60° 시야각으로 30° 각도에서 보았습니다.

(정적인 이미지에서는 보기 어렵지만 위의 데모를 사용해 보세요.)

이상적으로는 많은 코드를 작성하거나 카메라가 작동하도록 씬의 모든 오브젝트를 변경하지 않고도 이러한 모양을 구현할 수 있어야 합니다.

가장 확실한 해결책은 원근 카메라를 사용하는 것이지만, 위의 스크린샷을 보면 문제가 있음을 알 수 있습니다.

시야각이 60°에 불과한 경우에도 카메라가 화면 하단 근처의 스프라이트를 바로 내려다보고 있어 종이처럼 얇은 스프라이트의 존재가 드러납니다.

반면에 상단 근처의 나무는 정상적으로 보입니다.

(역주: 즉 Y값이 높을수록 정상적으로 보이지만 낮을수록, 눈속임이 들킴)

직교 투영은 그다지 효과적이지 않습니다. 아트가 평평한 정면(facade,정면)임을 숨기는 데는 더 효과적이지만

모든 스프라이트가 같은 양으로 왜곡되어 모두 찌그러져 보입니다!

이 두 가지 기본 투영에 대한 잠재적 수정 사항은 모든 스프라이트가 카메라를 향하도록 기울이면 좋아 보일 수 있다는 것입니다.

실제로 이것이 바로 수정 사항입니다. 모든 장면에서 모든 스프라이트를 기울이는 것은 지루할 수 있으므로 수학을 활용하면 됩니다!

이 모든 경우에서 우리는 한 좌표 공간(3D 좌표)에서 다른 좌표 공간(화면 좌표)으로의 매핑을 살펴보고 있습니다.

이것이 바로 투영의 본질이며, 유니티가 제공하는 두 가지 투영 외에도 유용한 투영이 꽤 많이 있습니다.

2점 또는 3점 투시, 직교 투시, 아이소메트릭 투시에 대해 들어보셨을 것입니다.

이는 선형 투시의 예시이지만, 어안 렌즈(fisheye eyes)나 지구 전도에서 볼 수 있는 이상한 지도 투영과 같은 비선형 투시도 많이 있습니다.

실시간 3D 그래픽은 매트릭스를 기반으로 하므로 Unity에서 제공하는 두 가지 기본 투영을 매트릭스로 표현할 수 있는 것은 어쩌면 당연한 일입니다.

사실 모든 선형 투영은 매트릭스로 축소할 수 있으므로 흥미로운 질문은 어떤 투영이 선형 투영인가 하는 것입니다.

가장 쉽게 생각할 수 있는 방법은 세상에서 직선이면 투영에서도 직선이 된다는 것입니다.

이 규칙은 양방향으로도 적용되므로 화면의 모든 직선은 세상의 직선에서도 투영됩니다.

올바른 매트릭스만 있으면 Unity에서 원하는 모든 선형 투영을 렌더링할 수 있으며, 심지어 울티마의 독특한(때로는 이상한) 비스듬한 투영도 렌더링할 수 있습니다!

---

나머지는 내일 추가로 번역함.

오늘은 코딩해야함

[카퍠인(happys96)]