Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
광개토태왕 테크니컬 아트
Ndoors
황재철
황재철
Ndoors NLABS 팀
Tachnical Artist
10 년차 개발자
2012 KGC 강연 , 2014 UNITY 강연
직군 변화
Modeler -> Animator -> Technical Artist
개발...
본론으로 들어가기 전에
광개토태왕이 어떤 게임인지는 알아야 겠죠 .
이야기 할 내용
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 텍스쳐...
2D 캐릭터 염색
G 채널 염색 사용 불가
- 물리적 픽셀량의 부족으로 염색 이염을 막을 수 없음
염색 채널 추가 필요…
2D 캐릭터 염색
Diffuse Transparent 염색
염색 마스크 텍스쳐 추가
- 최종적으로 2048 * 2048 텍스쳐 9 장 사용 (18MB)
2D 캐릭터 염색
Transparent 텍스쳐에 남는 채널을 이용하지 않은 이유
- ETC1 으로 텍스쳐가 압축 될 때 색상 번짐 발생
- 염색 경계선이 투명하게 빠짐
염색 경계선 부분
3D Max 랜더링
Maxscript 를 이용한 자동화
- 한 동작 당 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 개씩 제작
다른 물체와 앞뒤 판단이 필요한 경우
타 물체보다 위에 보여야 하는 경우...
카메라 마다 특정 레이어만 랜더링 할 수 있는걸 활용
물체마다 다른 뎁스로 설정 할 수 있어 뎁스를 해결 할 수 있다 .
멀티 카메라
Camera Depth 사용처
BG -5 움직이는물체와 소팅이 필요없는 배경
Defa...
장점
2.5D 의 소트해결이 가능해 졌다
건물과 캐릭터간의 겹치는 문제 해결
멀티 카메라
캐릭터가 건물에 잘려보임 실은 캐릭터가 뒤에 있
음
분리 전
장점
2.5D 의 소트해결이 가능해 졌다
건물과 캐릭터간의 겹치는 문제 해결
멀티 카메라
씬 게임
분리 후
건물을 물리적으로 내림
건물보다 필드를 먼저 그려 해결
멀티 카메라
장점
레이어 변경만으로
그리는 순서 변경 가능
멀티 카메라
단점
언덕 이나 필드 뒤로 캐릭터가 가면 가려지지 않음
카메라 별 레이어 사용으로 레이어 여유가 부족해 짐
(29 개 사용 최대 31 까지 사용가능 )
카메라 분리로 인해 후처리 기능 사용이 힘듬
- 카메라...
감사합니다 .
Hwanggoonlife@gmail.com
NDC2015 광개토태왕 테크니컬 아트
Upcoming SlideShare
Loading in …5
×

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

4,437 views

Published on

  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

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

×