NDC2015 광개토태왕 테크니컬 아트

광개토태왕 테크니컬 아트

Ndoors

황재철

황재철Ndoors NLABS 팀Tachnical Artist10 년차 개발자2012 KGC 강연 , 2014 UNITY 강연

직군 변화Modeler -> Animator -> Technical Artist

개발 게임군주 / 아틀란티카 / 삼국지를 품다 / 영웅의 군단 / 광개토태왕

블로그http://hwanggoon.tistory.com/

본론으로 들어가기 전에

광개토태왕이 어떤 게임인지는 알아야 겠죠 .

이야기 할 내용

1. 2.5D 광개토태왕에 사용된 아트 리소스 제작 방식

2. 셰이더를 이용한 다양한 효과 와 팁

3. 멀티 카메라 시스템

텍스쳐 포멧

ETC1 사용셰이더 2.0 안드로이드 공용 포멧(Alpha 채널 없음 )

Transparent 채널이 필요하면 ETC1 1 장을 더 늘림(R 채널을 Transparent 채널로 사용 )

텍스쳐 포멧

텍스쳐 2 장을 사용하면서 까지 ETC1 을 사용한 이유- RGBA16 대비 용량 75% 절약 (1/4) - ETC1 2 장을 써도 50% 절약

텍스쳐 포멧

ETC1 의 단점 - 색상손실이 크다 - Transparent 텍스쳐를 만들 경우 , GB 채널을 사용 할 수 없다

최적화를 위해 RGBA16 의 텍스쳐 사이즈를 줄이는 것 보다ETC1 포멧을 사용하는 것이 용량 대비 퀄리티가 더 좋다 .

텍스쳐

Diffuse Transparent

3D 건물 : ETC 1 장 - Transparent 사용 하지 않음

2D 건물 : ETC 2 장 - Transparent 채널 R 채널

염색

실시간 전략 전투가 적용되면서 상대를 구분할 필요성이 생김

메모리 이슈가 커 메모리를 최소한으로 사용하면서 팀을구분해야 함

G 채널 염색 도입

G 채널 염색

텍스쳐의 G 채널 값을 이용한 염색 기법- 녹색을 사용 할 수 없음- 아트 쪽과 사전에 녹색 사용에 합의가 되어야 함- 염색 영역은 R,B 값은 0, G 값으로 염색의 농도 조절

G 채널 염색

염색 전

G 채널 염색

염색 전 염색 후

?

G 채널 염색

원인텍스쳐를 ETC1 포멧으로 압축하면서 색상 손실 발생

해결3D 맥스에서 랜더링 시 Maxscript 를 이용해 색상 보정 스크립트 제작 - 이염의 가능성이 있는 픽셀의 색상을 보정 - 원본과는 색상이 조금 다르지만 무시할만 함

G 채널 염색

염색 보정

2D 캐릭터

전투 캐릭터 9 종스프라이트 애니메이션 사용

아틀라스 텍스쳐 제작 - 9 종을 한번에 아틀라스 텍스쳐로 모음 - 개별 등록에 비해 남는 여백을 활용가능 - 2048 * 2048 사이즈 Diffuse 텍스쳐 3 장 사용 - 2D Toolkit 사용 ( 어셋 스토어 )

2D 캐릭터 염색

G 채널 염색 사용 불가 - 물리적 픽셀량의 부족으로 염색 이염을 막을 수 없음

염색 채널 추가 필요…

2D 캐릭터 염색

Diffuse Transparent 염색

염색 마스크 텍스쳐 추가- 최종적으로 2048 * 2048 텍스쳐 9 장 사용 (18MB)

2D 캐릭터 염색

Transparent 텍스쳐에 남는 채널을 이용하지 않은 이유- ETC1 으로 텍스쳐가 압축 될 때 색상 번짐 발생- 염색 경계선이 투명하게 빠짐

염색 경계선 부분

3D Max 랜더링

Maxscript 를 이용한 자동화- 한 동작 당 Diffuse, Transparent, 염색 텍스쳐 필요- 동작 별 * 방향 별 * 캐릭터 수를 고려하면 자동화는 필수

아틀라스 텍스쳐 제작 시 문제 발생- Diffuse, Transparent, 염색 아틀라스의 이미지 위치가 달라짐- 하나의 랜더 버퍼에서 텍스쳐를 개별 저장해도 달라짐

원인

색상 정보가 조금씩 차이남

- 첫번째 이미지 : Color 200, 200, 200, 50- 두번째 이미지 : Color 200, 200, 190, 49

3D Max 랜더링

하나의 랜더 버퍼에서 텍스쳐를 개별 저장하더라도 색상정보가 달라짐

해결 방법-> Preference Settings-> Rendering-> True Color : On

3D Max 랜더링

셰이더 팁

빌보드 라이트 맵 셰이더 적용 시 문제- 셰이더 이름에 Transparent 가 있어야 그림자에 반투명 처리가 된다 .

이름에 Transparent(X) 이름에 Transparent(O)

셰이더 팁

Offset 보정 주의-모바일 기기마다 깊이 버퍼의 크기가 달라 Offset 보정이 달라질 수 있음- 이런 문제를 해결하기 위해 멀티 카메라 시스템 도입

PC 화면 모바일 화면

셰이더 팁

후처리 방식은 저사양 기기에서 정상작동 하지 않음- 워포그를 플랜 방식으로 처리

물 셰이더

파도 마스크 - R : 물 투명도 - G : 심도 - B : 물보라 마스크

물보라

물 셰이더3 장의 파도 텍스쳐 - Sin 커브를 이용 교차

2 장의 물보라 텍스쳐 - UV 애니

버텍스 애니메이션 - X,Y 축으로 Sin 커브 이용

노멀 X

비효과플랜을 필드 위에 설치

필드와 겹치는 문제 - 그리는 순서를 올려서 해결

카메라가 고정이라 가능

건물 이동 스프링 효과스프링 효과

흰색 Vector : 텐션 - 현재 이동 Vector녹색 Vector : 뎀핑 - 이전 이동 Vector 1 2 3

4 5 6 7

스프링 효과

소트 해결하기문제 인식2.5D 다 보니 소트처리에 많은 문제 발생Offset 과 랜더 큐로만 해결하긴 힘듬

뎁스만 다른 셰이더 2 개씩 제작다른 물체와 앞뒤 판단이 필요한 경우타 물체보다 위에 보여야 하는 경우

2 개씩 만들어도 완벽한 소트해결은 불가능카메라도 같이 늘리기로 결정

카메라 마다 특정 레이어만 랜더링 할 수 있는걸 활용물체마다 다른 뎁스로 설정 할 수 있어 뎁스를 해결 할 수 있다 .

멀티 카메라

Camera Depth 사용처BG -5 움직이는물체와 소팅이 필요없는 배경Default -4 움직이는 물체PreFOW -3 해드업 UI, 일반 오브젝트 보다 위에 있어야 하는 물체FOW -2 워포그PostFOW -1 이동 건물NGUI 0 메인 UI

PassUI 1 UI 보다 위에 보여질 게임 오브젝트

장점2.5D 의 소트해결이 가능해 졌다건물과 캐릭터간의 겹치는 문제 해결

멀티 카메라

캐릭터가 건물에 잘려보임 실은 캐릭터가 뒤에 있음

분리 전

장점2.5D 의 소트해결이 가능해 졌다건물과 캐릭터간의 겹치는 문제 해결

멀티 카메라

씬 게임

분리 후

건물을 물리적으로 내림건물보다 필드를 먼저 그려 해결

멀티 카메라장점레이어 변경만으로그리는 순서 변경 가능

멀티 카메라단점언덕 이나 필드 뒤로 캐릭터가 가면 가려지지 않음카메라 별 레이어 사용으로 레이어 여유가 부족해 짐(29 개 사용 최대 31 까지 사용가능 )

카메라 분리로 인해 후처리 기능 사용이 힘듬 - 카메라 마다 후처리를 해야하니…

감사합니다 .

[email protected]