ndc2015 광개토태왕 테크니컬 아트
TRANSCRIPT
광개토태왕 테크니컬 아트
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 까지 사용가능 )
카메라 분리로 인해 후처리 기능 사용이 힘듬 - 카메라 마다 후처리를 해야하니…
