[플라워 튜토]배경 레벨 디자인을 통한 게임 그래픽 감각 익히기


레벨 디자인의 모델링 하기...

※ 연재 순서 ※
1. 폴리곤 모델링과 레벨 디자인을 통한 감각 익히기
① 폴리곤 모델링의 고급 기능 익히기
② 배경 레벨 디자인을 통한 게임 그래픽 감각 익히기

2. 로우 폴리곤 캐릭터 만들기
① 로우 폴리곤 캐릭터의 모델링(1200여개 정도의 저폴리곤 캐릭터)
② 로우 폴리곤 캐릭터의 Unwraping 작업(256 맵소스 한장의 캐릭터 만들기)
③ 로우 폴리곤 캐릭터의 Mapping
④ 로우 폴리곤 캐릭터의 Biped Rigging

3. 캐릭터 애니메이션
①Footstep과 FreeForm을 이용한 애니메이션
② Ik를 이용한 애니메이션 작업
③ Motion Flow를 이용한 애니메이션의 합성과 루프 애니메이션 만들기

4. 로우 폴리곤에서 미들 폴리곤으로 가기
① 근육과 모델링 기법의 이해(4000여개 정도의 미들 폴리곤 캐릭터)
② 노말맵의 활용
③ Render To Texture를 이용한 랜더링 흉내내기
④ 멘탈레이를 이용한 Render To Texture 라이팅 최적화
⑤ 모션 캡쳐의 활용

이번에는 배경 레벨디자인을 통해 게임그래픽을 이해할 수 있는 시간을 갖도록 하겠다.

배경의 경우 원화와 게임 디자인이 나오면 우선 오브젝트와 지형으로 나누어 모델링을 하게 된다. 그 중 지형은 엔진 자체에서 맵툴을 이용해 만드는 경우와 맥스에서 만들어 익스포트 하는 경우가 있다.
엔진에서 지형을 만드는 경우는 각각의 경우가 다르다. 여기서는 맥스의 terain을 이용해 지형을 만드는 방법을 실습하겠다.

테라인은 맥스의 라인을 등고선처럼 이용해 지형을 만드는 툴로써 생성되는 폴리곤이 저폴리곤이고 여러 개의 산등성이나 웅덩이등 지형이 있어도 문제 없이 지형을 만들어 주기 때문에 아주 유용한 지형툴이라고 할 수 있다. 하지만 생각한 만큼의 정확도는 나와주지 못하기 때문에 지형의 완성 후 폴리로 전환 적절한 편집이 요구된다.

테라인으로 지형 제작하기

1. 우선 적당한 크기의 지형의 테두리를 Circle 그려 보자.

그림을 누르시면 크게 보실 수 있습니다.

이것은 후에 배울 스카이 박스와의 카메라 워킹 연계를 위해 지형의 경계를 놔두는 작업이다. 게임에 따라 꼭 지켜야 할 내용은 아니다.

2. 원화나 설정자료에 기초해 지형의 등고선을 탑 뷰에서 그려간다. 지형에 맞게 라인을 좀 더 그린다.

3. 산등성이 등을 좀 더 그려준다.

4. 지형의 모양을 형성하도록 라인들을 부드럽게 정리해 준다.

5. 그려 준 곡선을 높이에 맞게 퍼스펙트 뷰나 다른 뷰에서 올려준다.

그림을 누르시면 크게 보실 수 있습니다.

6. 맨 밑에 가장 큰 서클 곡선을 선택한다. 맥스 object 탭의 compound object에서 terrain을 선택한다.

터레인의 모양이 외곽선 원형을 유지하기 위해 Simplification은 interpolate point *2를 선택해 주자. 보다 정밀한 외곽 지형이 되기 위해서는 *4를 선택해 줄 수도 있으나 보통 지형은 스카이 박스를 약간 넘어가기 때문에 2정도로 놔두겠다.

7. 이제 Pick Operand를 선택하고 아랫부분의 곡선부터 차례대로 찍어 올라간다. 지형이 만들 어지는 것이 보일 것이다.

그림을 누르시면 크게 보실 수 있습니다.

지형을 다 만든 다음 필요하다면 하위의 Operand를 움직여 수정해준다. 역시 필요에 따라 retriangulate를 체크해 줄 수 있다.

Terrain에서는 아주 정밀적인 작업을 하는 것이 아니라 개략적인 느낌을 위주로 작업해가는 것을 잊지 말자. 정밀한 작업은 Edit Poly의 역할이 될 것이다.
어느 정도 수정을 한 후 마우스 오른쪽 클릭 Editable Poly로 전환하자.

8. 수정하기 전에 지형에다가 맵 좌표를 입히자.
지형은 게임과 상황에 따라 다르지만 대부분 크기가 크기 때문에 패턴이나 타일맵을 써야 한다 . 해서 필자는 우선은 UVW매핑을 잡은 후 Gizmo를 줄여 주는 방식을 선호한다.

그림을 누르시면 크게 보실 수 있습니다.

uvw맵의 플레인 맵방식을 지정하고 플레인 크기를 줄여서 타일화한다. 타일맵을 쓸 때 주의할 점은 타일의 경계가 없는 즉 Seamless맵을 써야 한다는 점이다.
타일 맵소스로는 유명한 Marine Studio의 Seamlessmap시리즈와 Total Texture시리즈가 있 다. 물론 사진같은 것을 찍거나 구해서 포토샵에서 타일맵을 만드는 것도 가능하다. 어느것도 다 일장일단이 있는 좋은 방법이라고 생각한다.
또다른 고급 테크닉은 언랩자체에서 맵좌표의 반전을 이용해 Seam이 있는 맵소스를 Seam이 없게 작업하는 방법도 있지만 역시 시간이 많이 할애되므로 여기서는 손쉬운 방법인 Seamless맵을 사용해 제작해 보겠다. Seamless맵 자체를 사용하는 것도 나쁘지는 않은 방 법이지만 그것만으로는 재미가 없어질 수 있기 때문에 여러 맵을 섞어 사용해보자.

그림에서 땅 부분에 해당하는 그림은 Marine Studio사의 Seamless맵이고 Grass에 해당한 소스는 필자가 포토샵에서 패턴맵화 한 것이다. 이것을 포토샵에서 적절히 섞어주도록 하자. 주의할 것은 기준이 되는 맵부분의 테두리는 정해놓고 나머지 부분으로 가운데 부분에 듬성듬 성 넣어줘야 하는 것을 잊지 말자.

그림을 누르시면 크게 보실 수 있습니다.

매핑이 자연스럽게 입혀질 때까지 과정을 반복한다.

라이팅의 세팅

이제 간단한 세팅을 위한 라이트와 카메라를 배치하겠다.
게임 엔진에 따라 경우는 다르지만 보통의 엔진은 하나 내지 두 개의 기본 다이렉트 라이트와 앰비니언트라이트라는 것을 쓴다. 맥스 뷰포트 드라이버와 쉐이더를 다이렉트 x드라이버로 쓰 면 엔진에 따라 다르지만 거의 맥스 화면상과 게임 화면상이 일치시킬 수 있다.

1. 우선 뷰포트의 쉐이딩 부분을 감안하면서 탑뷰에서 라이트를 만든다. 라이트는 프리 다이렉 트 라이트를 쓴다.

그림을 누르시면 크게 보실 수 있습니다.

2. 쉐이딩 화면을 고려하면서 카메라의 위치를 적절하게 고정한다. 이것은 우리가 화면으로 볼 장면을 예상하며 하는 작업이다.

그림을 누르시면 크게 보실 수 있습니다.

3. 이제 Ambient Light를 쓸 차례이다.
Ambient Light는 환경광이라고 하는 라이트로써 화면자체의 조도를 결정해준다. 간단하게 이 야기해서 태양광이 주변을 화사하게 하는 원리라고 보면 좋겠다. 조금 더 복잡한 간접광은 랜 더링 영역에서는 래디오시티나 글로발일루미네이션이라는 영역이 있지만 이것은 레이트레이 싱과 함께 게임 엔진영역을 벗어난다.
맥스 Environment 에서 Ambient 부분의 색을 선택해 라이트 밸류값을 올려준다. Ambient 라 이트는 라이트를 만들어서 옵션에서 조정하는 방법과 이렇게 Environment에서 조정하는 방법 이 있으며 결과는 똑같다.

그림을 누르시면 크게 보실 수 있습니다.

값을 올림에 따라 전체가 약간씩 화사해지는 것이 보일 것이다. 엔진에 따라 다르지만 엔진이 Ambient라이트의 색깔까지 조정이 가능한 경우에는 이 Ambient라이트를 이용해 분위기 조정 까지 할 수 있다. 예를 들면 공포분위기의 파란색이라던가 하는 등으로 조정이 가능하다.
최대 밸류값으로 할 경우 물체는 self illumination의 값이 100일 때와 똑같은 결과를 가지며 예 전 게임에는 이러한 방식을 쓴 게임도 많지만 물체의 입체감이 사라지게 되어 바람직한 결과는 아니라고 본다. ambient라이트의 값은 게임의 분위기와 직접 연관이 있으므로 섬세한 취급이 요구된다. 쉐이딩 값은 가지면서 분위기는 해치지 않는 방향으로 작업 방향을 가져간다. 게임 에서의 세팅은 이 값의 정보로 프로그램에서 하게 된다.

지형을 이제 Poly에서 수정하도록 하자. Terrain으로는 산의 뾰족한 부분 등은 만들어주지 못 한다. 지형을 Editable Poly로 전환하자(이럴 경우 이 폴리는 UV맵좌표를 가지고 있는 Poly이 다) 주의할 것은 Chamfer 나 Extrude. Bevel등 면을 생성하는 수정을 하면 안된다. Cut이나 Slice등의 기존 면을 짤라 주어 수정하도록 하자. 이래야 맵이 깨지는 현상이 없다.

그림을 누르시면 크게 보실 수 있습니다.

모델링을 수정해주고 나서 맵이 늘어지거나 한 부분이 보일 것이다. Unwrap UVW모디파이어 를 적용한 후 이런부분의 맵크기를 안배 해주자.

그림을 누르시면 크게 보실 수 있습니다.

이것으로 간단한 테라인을 이용한 지형을 만들었다. 실제의 지형에서는 한가지의 맵소스를 쓰 지 않고 여러가지 타일 맵소스와 UnWrap테크닉을 결합해서 만들어야 한다. 기회가 된다면 이 부분은 다시 다루도록 하겠다.

그림을 누르시면 크게 보실 수 있습니다.

스카이 박스 만들기

이제 SkyBox를 만들어 보겠다. SkyBox란 말 그대로 하늘을 표현해주는 Box이다. 하지만 실 제적으로는 Box보다는 폴리곤을 더 넣은 Sphere모양으로 만들어주는 예가 많다.

- 박스를 이용한 초저폴리곤 스카이 박스 만들기

뷰포트상에서 Box를 만들자 모든 것을 덮을 만큼 크게 만들자. Modifier Stack에서 Normal을 주어 면을 뒤집고 Editable Poly로 전환한다

그림을 누르시면 크게 보실 수 있습니다.

이제 뷰포트를 틀어보면 붉은 색의 박스가 전체를 덮고 있는 것이 보인다. 아직 헛점이 많다. 하나씩 수정해 줄 것이다.

1. 이제 이 박스를 Unwrap Uvw로 맵소스를 최적화 해주자. Unwap Uvw를 적용한 후 edit를 누른다.
옆 4면이 Seam이 없이 연결되어야 하며 아래 부분은 거의 사용되지 않으며 윗부분도 작게 색 깔은 단색으로 표현될 것이다. 이러한 점을 감안해서 면을 나눠 보겠다. 여러 가지 방법이 있겠 지만 필자는 옆면을 전체 맵소스로 쓰고 아랫면과 윗면을 작게 간단하게 표현해 보겠다.

위에 그림에서 1~4번은 옆면 5,6 면은 윗면과 아랫면이다. 1~4번은 그림과 같이 Snap을 맞춰 서 정확히 그림을 최대한 쓰게 하고 5번과 6번은 1번의 윗부분 쪽으로 대충 정리해 놓자. 옆면 의 흐름의 순서는 1-4 이며 4하고 1은 서로 연결되어야 한다.
최종으로 정리한 스카이 박스의 Unwrap구조는...

그림을 누르시면 크게 보실 수 있습니다.

그림과 같이 된다. 여기서 위에 조그만 사각형 두부분이 아랫면과 윗면이다. 중요한 것은 옆면 이라는 것을 기억하자.

2. 이제 필요한 것은 파노라마 스카이 맵소스이다. 파노라마 맵소스란 360도를 펼쳐놓은 하늘 의 사진인 셈인데 이것을 만드는 방법은 배경을 제작한 후 맥스의 유틸리티를 사용하는 법, 상 용 파노라마 맵소스를 사용하는 법, DreamScape라는 플러그인을 사용하는 법 등이 있다. 이 부분을 깊이 들어가는 것은 이 글의 범위를 벗어나므로 우선은 필자가 사용했던 기존 맵소스로 만들어 보겠다.

이 사진은 왼쪽과 오른쪽이 대칭된다. 이제 이 그림을 이용해 맵소스화 해보자. 256*256 맵소 스로 스카이 박스를 만든다고 가정할 때(Online 게임 등에서는 훨씬 더 큰 맵소스를 쓴다) 이 이미지를 image Size H: 512 V: 128로 만든다. 그리고 새로운 그림으로 256x256사이즈의 그 림을 하나 만든다. 파노라마의 왼쪽 반 부분을 맵소스의 윗부분으로 오른쪽 반 부분을 아래쪽 으로 가져다 놓는다.

그림을 누르시면 크게 보실 수 있습니다.

그림과 같이 맵소스의 낭비 없이 최적화된 사이즈의 맵을 만들 수 있는 것이 보일 것이다.

이제 이 맵소스를 Skybox에 적용해보자.

그림을 누르시면 크게 보실 수 있습니다.

아직 크기나 위치 같은 것이 만족스럽지 못하며 색깔 부분도 약간 보정이 필요한 듯하다. 뷰포 트를 돌려보면 또 각이 너무 보인다는 것을 알 수 있을 것이다. 포토샵에서 색깔을 보정한 후 Modifier Stack의 MeshSmooth를 1정도 주고 Sperity를 적용하자. (이경우 폴리곤은 48개가 쓰인다) 또 재질에서 Selfillumination의 값을 100으로 두어 빛의 영향을 받지 않도록 하는 것도 있지 말자.

그림을 누르시면 크게 보실 수 있습니다.

- 반구(half Sphere)를 이용한 고퀄리티의 스카이박스 만들기

박스로 만든 스카이 박스의 경우 폴리곤 최적화는 되었지만 윗부분이 너무 단순하게 만들어져 카메라 워킹이 심한 게임에 경우 퀄리티가 떨어지는 단점이 있다. 요새의 온라인 게임은 고퀄 리티, 고폴리곤화 되가는 경향이 있으므로 좀 더 폴리곤과 맵소스를 쓴 스카이박스를 만들어 보도록 하겠다.

1. 탑뷰에서 지형전체를 덮을만한 크기의 구를 만든다.

그림을 누르시면 크게 보실 수 있습니다.

2. 게임의 폴리곤 제한을 염두 해 두면서 세그먼트를 나눠 보자. 필자의 경우 16정도로 나누었 다. 더 만들어도 괜찮을 듯 싶다.

그림을 누르시면 크게 보실 수 있습니다.

3. Editable Poly로 전환한다. 땅 아래 부분은 필요 없으므로 폴리곤을 지워준다. 바다 같은 물 이 있는 지형에서는 아랫부분이 필요하므로(물이 반투명이므로) 남겨둘 수도 있다.

4. Normal 모디파이어를 적용해 면을 뒤집은 후 uvw 맵을 적용, Planar Map을 적용한다.

그림을 누르시면 크게 보실 수 있습니다.

5. 이제 가장 중요한 맵소스의 제작이다. 역시 기존과 마찬가지로 파노라마 맵을 이용한다. 이 번에는 Unwrap을 이용한 수정이 아니라 포토샵 자체의 필터로 매핑을 씌우도록 하겠다. 충분 히 큰 파노라마 소스를 불러온다.

그림을 누르시면 크게 보실 수 있습니다.

6. 포토샵의 Crop기능을 이용해 하늘을 제외한 부분을 제거한다.

그림을 누르시면 크게 보실 수 있습니다.

7. 게임 분위기에 맞게 리터칭 색감 수정을 한다.

그림을 누르시면 크게 보실 수 있습니다.

8. 포토샵 필터에서 Distort – Polar Coordinates를 고른다.

다음과 같은 대화상자가 나타날 것이다. Rectangular To Polar를 선택한다.

9. 이미지 사이즈를 512x512(게임 상황에 맞게)로 수정한다.

그림을 누르시면 크게 보실 수 있습니다.

그림과 같은 맵소스를 얻을 수 있을 것이다.

10. 맥스에서 아까 만든 구에다 방금의 맵소스를 적용시킨다. Selfillumination을 100으로 적용 라이트의 영향을 받지 않도록 하자.

그림을 누르시면 크게 보실 수 있습니다.

11. 밑부분을 보면 맵 좌표가 늘어나 있는 것이 보일 것이다. Unwrap을 적용해 이것을 수정해 주자. 맥스 6부터 생긴 Unwrap의 relax기능은 맵좌표가 몰린 것을 수정해 준다. 전체를 선택 한 후 Relax Dialogue에서 적당히 Relax해 준다.

그림을 누르시면 크게 보실 수 있습니다.

구를 보면서 확인하자.

그림을 누르시면 크게 보실 수 있습니다.

최종적으로 어느 시점을 보아도 끊김 없는 하늘을 구현할 수 있을 것이다. 폴리곤도 112개로 만족스런 수치가 나올 것이다.

그림을 누르시면 크게 보실 수 있습니다.

분위기에 맞게 색깔을 수정해 가자. 한번에 만들 수 있는 건 아무 것도 없다. 디자이너의 정성 이 게임의 그래픽을 좌우한다는 사실을 염두 해 두자.

그림을 누르시면 크게 보실 수 있습니다.

실제의 게임화면에서는 여기에 오브젝트와 빌보드, 안개 효과 파티클 효과, vertex Paint로 만 드는 음영들이 들어가 더욱더 멋들어진 화면을 만들 수 있다. 엔진마다의 장점을 최대한 이해 하고 활용해야만 멋진 배경이 나온다.

- 원경 지형 만들기

위에 만든 지형에 오브젝트를 배치하기 전에 무언가 부족해 보이는 것이 있다. 지형이 끝나 보 이는 것이 그것인데 엔진에서 안개효과를 적용해 줄 경우 많이 무마가 되지만 그렇지 않을 경 우엔 조금 심각해 진다. 그것은 배경의 원경이 없어서 그러는 것인데. 그렇다고 원경을 폴리곤 오브젝트로 만들어 주기엔 게임 속도에 지장이 있다. 이것 역시 스카이 박스처럼 원경 실린더 (^ ^)를 만들어 주는 것으로 해결 가능하다.

여기서 원경 실린더는 후에 다룰 빌보드오브젝트처럼 투명맵이 필요하다. 투명맵을 쓰는 방법 은 엔진에 따라 다른데 bmp의 경우 0번 팔레트의 색깔을 이용하는 경우, 투명 Png를 이용하 는 경우, tga를 이용하는 경우 등이 있다. 여기서는 맥스에서 바로 적용이 가능한 tga를 이용하 는 경우로 작업을 하겠다.

1. 스카이 박스보다는 약간 작은 실린더를 하나 만든다. Height Segment 는 1로 Sides는 16으 로 하자. 이 수치는 절대적인 것이 아니다. 엔진과 속도 퀄리티를 안배해 가면서 결정하자.

그림을 누르시면 크게 보실 수 있습니다.

2. Normal 모디파이어를 적용 면을 뒤집고, Editable Poly로 전환 윗면과 아래면은 제거해준다 .

그림을 누르시면 크게 보실 수 있습니다.

3. UVW맵을 씌운다. 매핑 방식은 Cylinder방식으로 한다.

그림을 누르시면 크게 보실 수 있습니다.

이제 매핑을 씌울 차례이다. 일반적인 맵사이즈를 지원하는 엔진에 경우에는 상관없으나 보통 의 게임엔진은 정사각형을 쓰는 경우가 많으므로 역시 256x256 기준으로 뜯어주어야 한다.

4. Unwrap 모디파이어를 적용한 후 면의 절반을 선택하여 윗부분으로 나머지 절반으로 아랫 부분에 배열한다.

5. 맵소스 역시 이 UnWrap에 맞게 반씩 뜯어 256 사이즈로 만든다. (앞부분 박스형 스카이 박 스 참조)

이제 여기서 지형부분만을 선택 알패채널로 저장한다.

6. 맵소스를 적용해보자. 투명값이 빠지지 않아 검은 부분이 그대로 나올 것이다.

그림을 누르시면 크게 보실 수 있습니다.

Diffuse의 맵부분을 Opacity부분으로 복사한다. Opacity부분에 들어가서 설정을 Alpha Source를 Image Alpha로 Mono Channel Output을 Alpha로 설정한다.

그림을 누르시면 크게 보실 수 있습니다.


그림을 누르시면 크게 보실 수 있습니다.

원경부분의 색감 디테일을 수정해가면서 분위기를 맞추어 간다. 동시에 상호 색감 등을 밸런스 있게 수정하자.

맺음말<./font>
이것으로 간단한 레벨 디자인을 마쳤습니다.
여기 나와 있는 방법들은 필자가 작업을 해오면서 가진 방법입니다. 확인해보시고 더 좋은 방법을 찾아내고 발전시키는 것 또한 3d디자이너의 역할이라 생각합니다.
다음에는 이 배경에 배경 오브젝트를 제작하여 배치하는 것, 빌보드를 이용한 나무디자인 등 배경을 완료해보도록 하겠습니다.
문의가 있으신 분들은 shabel@netsgo.com으로 메일 주시면 제가 아는 범위에서는 답변을 드리도록 하겠습니다.
그럼 여러분들의 레벨업을 기대하겠습니다.

※ 연재 순서 ※
1. 폴리곤 모델링과 레벨 디자인을 통한 감각 익히기
① 폴리곤 모델링의 고급 기능 익히기
② 배경 레벨 디자인을 통한 게임 그래픽 감각 익히기

2. 로우 폴리곤 캐릭터 만들기
① 로우 폴리곤 캐릭터의 모델링(1200여개 정도의 저폴리곤 캐릭터)
② 로우 폴리곤 캐릭터의 Unwraping 작업(256 맵소스 한장의 캐릭터 만들기)
③ 로우 폴리곤 캐릭터의 Mapping
④ 로우 폴리곤 캐릭터의 Biped Rigging

3. 캐릭터 애니메이션
①Footstep과 FreeForm을 이용한 애니메이션
② Ik를 이용한 애니메이션 작업
③ Motion Flow를 이용한 애니메이션의 합성과 루프 애니메이션 만들기

4. 로우 폴리곤에서 미들 폴리곤으로 가기
① 근육과 모델링 기법의 이해(4000여개 정도의 미들 폴리곤 캐릭터)
② 노말맵의 활용
③ Render To Texture를 이용한 랜더링 흉내내기
④ 멘탈레이를 이용한 Render To Texture 라이팅 최적화
⑤ 모션 캡쳐의 활용

글.김상원
Ism Korea 조감도 파트 주임
유니아나 아케이드 1팀
톱니소프트 팀장
소프트 액션 개발 2팀 팀장
현 주성대학 북경 사무국 교재 편찬위원