ndc2015 광개토태왕 테크니컬 아트
TRANSCRIPT
![Page 1: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/1.jpg)
광개토태왕 테크니컬 아트
Ndoors
황재철
![Page 2: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/2.jpg)
황재철Ndoors NLABS 팀Tachnical Artist10 년차 개발자2012 KGC 강연 , 2014 UNITY 강연
직군 변화Modeler -> Animator -> Technical Artist
개발 게임군주 / 아틀란티카 / 삼국지를 품다 / 영웅의 군단 / 광개토태왕
블로그http://hwanggoon.tistory.com/
![Page 3: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/3.jpg)
본론으로 들어가기 전에
광개토태왕이 어떤 게임인지는 알아야 겠죠 .
![Page 4: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/4.jpg)
![Page 5: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/5.jpg)
이야기 할 내용
1. 2.5D 광개토태왕에 사용된 아트 리소스 제작 방식
2. 셰이더를 이용한 다양한 효과 와 팁
3. 멀티 카메라 시스템
![Page 6: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/6.jpg)
텍스쳐 포멧
ETC1 사용셰이더 2.0 안드로이드 공용 포멧(Alpha 채널 없음 )
Transparent 채널이 필요하면 ETC1 1 장을 더 늘림(R 채널을 Transparent 채널로 사용 )
![Page 7: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/7.jpg)
텍스쳐 포멧
텍스쳐 2 장을 사용하면서 까지 ETC1 을 사용한 이유- RGBA16 대비 용량 75% 절약 (1/4) - ETC1 2 장을 써도 50% 절약
![Page 8: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/8.jpg)
텍스쳐 포멧
ETC1 의 단점 - 색상손실이 크다 - Transparent 텍스쳐를 만들 경우 , GB 채널을 사용 할 수 없다
최적화를 위해 RGBA16 의 텍스쳐 사이즈를 줄이는 것 보다ETC1 포멧을 사용하는 것이 용량 대비 퀄리티가 더 좋다 .
![Page 9: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/9.jpg)
텍스쳐
Diffuse Transparent
3D 건물 : ETC 1 장 - Transparent 사용 하지 않음
2D 건물 : ETC 2 장 - Transparent 채널 R 채널
![Page 10: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/10.jpg)
염색
실시간 전략 전투가 적용되면서 상대를 구분할 필요성이 생김
메모리 이슈가 커 메모리를 최소한으로 사용하면서 팀을구분해야 함
G 채널 염색 도입
![Page 11: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/11.jpg)
G 채널 염색
텍스쳐의 G 채널 값을 이용한 염색 기법- 녹색을 사용 할 수 없음- 아트 쪽과 사전에 녹색 사용에 합의가 되어야 함- 염색 영역은 R,B 값은 0, G 값으로 염색의 농도 조절
![Page 12: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/12.jpg)
G 채널 염색
염색 전
![Page 13: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/13.jpg)
G 채널 염색
염색 전 염색 후
?
![Page 14: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/14.jpg)
G 채널 염색
원인텍스쳐를 ETC1 포멧으로 압축하면서 색상 손실 발생
해결3D 맥스에서 랜더링 시 Maxscript 를 이용해 색상 보정 스크립트 제작 - 이염의 가능성이 있는 픽셀의 색상을 보정 - 원본과는 색상이 조금 다르지만 무시할만 함
![Page 15: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/15.jpg)
G 채널 염색
염색 보정
![Page 16: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/16.jpg)
2D 캐릭터
전투 캐릭터 9 종스프라이트 애니메이션 사용
아틀라스 텍스쳐 제작 - 9 종을 한번에 아틀라스 텍스쳐로 모음 - 개별 등록에 비해 남는 여백을 활용가능 - 2048 * 2048 사이즈 Diffuse 텍스쳐 3 장 사용 - 2D Toolkit 사용 ( 어셋 스토어 )
![Page 17: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/17.jpg)
2D 캐릭터 염색
G 채널 염색 사용 불가 - 물리적 픽셀량의 부족으로 염색 이염을 막을 수 없음
염색 채널 추가 필요…
![Page 18: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/18.jpg)
2D 캐릭터 염색
Diffuse Transparent 염색
염색 마스크 텍스쳐 추가- 최종적으로 2048 * 2048 텍스쳐 9 장 사용 (18MB)
![Page 19: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/19.jpg)
2D 캐릭터 염색
Transparent 텍스쳐에 남는 채널을 이용하지 않은 이유- ETC1 으로 텍스쳐가 압축 될 때 색상 번짐 발생- 염색 경계선이 투명하게 빠짐
염색 경계선 부분
![Page 20: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/20.jpg)
3D Max 랜더링
Maxscript 를 이용한 자동화- 한 동작 당 Diffuse, Transparent, 염색 텍스쳐 필요- 동작 별 * 방향 별 * 캐릭터 수를 고려하면 자동화는 필수
아틀라스 텍스쳐 제작 시 문제 발생- Diffuse, Transparent, 염색 아틀라스의 이미지 위치가 달라짐- 하나의 랜더 버퍼에서 텍스쳐를 개별 저장해도 달라짐
![Page 21: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/21.jpg)
원인
색상 정보가 조금씩 차이남
- 첫번째 이미지 : Color 200, 200, 200, 50- 두번째 이미지 : Color 200, 200, 190, 49
3D Max 랜더링
![Page 22: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/22.jpg)
하나의 랜더 버퍼에서 텍스쳐를 개별 저장하더라도 색상정보가 달라짐
해결 방법-> Preference Settings-> Rendering-> True Color : On
3D Max 랜더링
![Page 23: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/23.jpg)
셰이더 팁
빌보드 라이트 맵 셰이더 적용 시 문제- 셰이더 이름에 Transparent 가 있어야 그림자에 반투명 처리가 된다 .
이름에 Transparent(X) 이름에 Transparent(O)
![Page 24: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/24.jpg)
셰이더 팁
Offset 보정 주의-모바일 기기마다 깊이 버퍼의 크기가 달라 Offset 보정이 달라질 수 있음- 이런 문제를 해결하기 위해 멀티 카메라 시스템 도입
PC 화면 모바일 화면
![Page 25: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/25.jpg)
셰이더 팁
후처리 방식은 저사양 기기에서 정상작동 하지 않음- 워포그를 플랜 방식으로 처리
![Page 26: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/26.jpg)
물 셰이더
파도 마스크 - R : 물 투명도 - G : 심도 - B : 물보라 마스크
물보라
![Page 27: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/27.jpg)
물 셰이더3 장의 파도 텍스쳐 - Sin 커브를 이용 교차
2 장의 물보라 텍스쳐 - UV 애니
버텍스 애니메이션 - X,Y 축으로 Sin 커브 이용
노멀 X
![Page 28: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/28.jpg)
비효과플랜을 필드 위에 설치
필드와 겹치는 문제 - 그리는 순서를 올려서 해결
카메라가 고정이라 가능
![Page 29: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/29.jpg)
건물 이동 스프링 효과스프링 효과
![Page 30: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/30.jpg)
흰색 Vector : 텐션 - 현재 이동 Vector녹색 Vector : 뎀핑 - 이전 이동 Vector 1 2 3
4 5 6 7
스프링 효과
![Page 31: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/31.jpg)
소트 해결하기문제 인식2.5D 다 보니 소트처리에 많은 문제 발생Offset 과 랜더 큐로만 해결하긴 힘듬
뎁스만 다른 셰이더 2 개씩 제작다른 물체와 앞뒤 판단이 필요한 경우타 물체보다 위에 보여야 하는 경우
2 개씩 만들어도 완벽한 소트해결은 불가능카메라도 같이 늘리기로 결정
![Page 32: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/32.jpg)
카메라 마다 특정 레이어만 랜더링 할 수 있는걸 활용물체마다 다른 뎁스로 설정 할 수 있어 뎁스를 해결 할 수 있다 .
멀티 카메라
Camera Depth 사용처BG -5 움직이는물체와 소팅이 필요없는 배경Default -4 움직이는 물체PreFOW -3 해드업 UI, 일반 오브젝트 보다 위에 있어야 하는 물체FOW -2 워포그PostFOW -1 이동 건물NGUI 0 메인 UI
PassUI 1 UI 보다 위에 보여질 게임 오브젝트
![Page 33: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/33.jpg)
장점2.5D 의 소트해결이 가능해 졌다건물과 캐릭터간의 겹치는 문제 해결
멀티 카메라
캐릭터가 건물에 잘려보임 실은 캐릭터가 뒤에 있음
분리 전
![Page 34: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/34.jpg)
장점2.5D 의 소트해결이 가능해 졌다건물과 캐릭터간의 겹치는 문제 해결
멀티 카메라
씬 게임
분리 후
건물을 물리적으로 내림건물보다 필드를 먼저 그려 해결
![Page 35: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/35.jpg)
멀티 카메라장점레이어 변경만으로그리는 순서 변경 가능
![Page 36: NDC2015 광개토태왕 테크니컬 아트](https://reader036.vdocuments.net/reader036/viewer/2022082217/55c91a2cbb61ebfc138b4762/html5/thumbnails/36.jpg)
멀티 카메라단점언덕 이나 필드 뒤로 캐릭터가 가면 가려지지 않음카메라 별 레이어 사용으로 레이어 여유가 부족해 짐(29 개 사용 최대 31 까지 사용가능 )
카메라 분리로 인해 후처리 기능 사용이 힘듬 - 카메라 마다 후처리를 해야하니…