34
Defense Technica Mobile Converting 쿠노 인터렉티브 이 상 윤 Unity3D mobile version 개발 후기(Graphic issue를 중심으로)

Kgc2013 defense technica_converting_이상윤

Embed Size (px)

DESCRIPTION

디펜스 테크니카 콘솔버젼의 모바일 컨버팅 개발후기. 포스트-모텀을 통해 모바일 개발에서 고려해야 했던 사항들을 되짚어 보며 Unity3D를 통해 3D 게임을 개발하려는 초급 그래픽 개발자에게 도움이 되고자 세션을 준비하였습니다.

Citation preview

Page 1: Kgc2013 defense technica_converting_이상윤

Defense Technica Mobile Converting

쿠노 인터렉티브

이 상 윤

Unity3D mobile version 개발 후기(Graphic issue를 중심으로)

Page 2: Kgc2013 defense technica_converting_이상윤

- Contents -

1. Kuno Interactive 와 Defense Technica 소개

2. 모바일 개발의 첫 인상과 고려해야 했던 부분들

3. Graphic 관련 issue들

4. Scaleform 적용

5. 기획, 프로그래밍 파트와의 협조사항

6. 마치며

7. Q&A

Page 3: Kgc2013 defense technica_converting_이상윤

쿠노 인터렉티브

"쿠노"는 "파도"를 의미하는 고대 그리스 낱말 "kouno"를 의미합니다. 또한, "쿠노"는 " 한국(K) 게임 업계에서 넘버원(UNO)이 되고 싶음"을 의미합니다. 쿠노 인터렉티브는 분당 서현에 본사를 둔 멀티 플랫폼 게임 개발 업체입니다. PS3, XBOX 360, PC window / MAC, mobile, 그리고 PS4, XBOX one 한국에서 개발력 있는 콘솔 전문 스튜디오로써의 성장을 목표로 하고 있습니다.

Page 4: Kgc2013 defense technica_converting_이상윤

개발중인 타이틀

。 IOS 출시(13. 6월), Android 출시(2013. 8) 。 PS3, XBOX360, Steam 출시예정 (2013. 10)

。The Mansion(Rooms 2)

。MORO the plug boy

Page 5: Kgc2013 defense technica_converting_이상윤

Defense Technica

。 Sci-fi style의 Tower Defense game 。 적 유닛의 침입 루트를 변경할 수 있는 길 돌리기, 유닛과 타워의 상성, 속성 등을 부여한 전략성요소가 강조된 디펜스 게임

。 효율적인 멀티 플랫폼 제작 : 콘솔에서 모바일까지(KGC2012)

Page 6: Kgc2013 defense technica_converting_이상윤

모바일 개발의 첫 인상

。 PC에 비해 작은 화면, 낮은 3D 그래픽 성능이라는 인식

。 터치가 가능한 화면과 조작(손가락으로 드래그, 클릭, 핀투줌)

。 가장 좋은 경우는 콘솔 버전의 데이터를 그대로 모바일에 올리고 UI만 바뀌는 경우

☞ 테스트 결과 가능은 했으나 대부분의 기기에서 구동 불가.

(모바일에 올리기엔 너무 무겁다..)

。 타겟 머신 선정과 기존 DATA의 최적화의 기준에 대한 고민이 필요

Page 7: Kgc2013 defense technica_converting_이상윤

IOS

• 비교적 규격화된 해상도

• 제한사항 : iphone 3GS, i-PAD1에서는 낮은 메모리 용량때문에 구동불가(탈옥시 구동가능)

• I-PAD2부터는 비교적 원활한 플레이 가능 (해상도 차이로 3가 2보다 낮은 퍼포먼스)

• iphone4 : 4S부터는 3D 그래픽 성능 또한 비약

적으로 상승하였으나 4의 경우 3GS에 비해 늘어난 해상도에 비해 낮은 그래픽 성능으로 퍼포먼스 저하 발생(가장 이슈가 되었던 기기)

Page 8: Kgc2013 defense technica_converting_이상윤

Android

• Android 개발의 가장 큰 이슈 다양한 해상도 지원에 대한 기준 선정

• 낮은 성능의 기기에서부터 고성능 하이엔드 기기

까지 다양한 기기 존재

• 제조사 firmware 업그레이드가 되지 않은 경우 지원이 되지 않는 경우 존재(Android 2.3 진저브레드부터 구동) : 일부 최신 기기에서 구동이 되지 않는 상황 발생

• 특정 기기에서 구동되지 않는 문제(Shader 문제 : 통칭 보라돌이).

• Scaleform 사용을 고려하게된 이슈이기도 함

Samsung Galaxy Series resolution S, S2, K, A, U : 480x800 Note 2, S2 HD LTE, S3 : 720x1280 Note : 800x1280 S4 : 1920x1080

Page 9: Kgc2013 defense technica_converting_이상윤

Pixel size의 변화

Mobile 해상도가 초기 기기들에 비해 고 해상도화가 진행.(FHD, QHD까지) (S4의 경우 23, 24인치 모니터와 동일한 해상도를 5인치 정도의 화면에 가진다 – 1920x1080)

화면크기가 1/5 수준으로 줄어들지만 해상도는 변함이 없다.(24인치 기준 0.27mm>>0.05mm) 픽셀의 수가 줄어들어 화면이 작아지는 것이 아닌 pixel 크기 자체가 줄어들었음 작은 화면이라고 Texture resolution을 낮게 작업했다가는 pixel이 다 늘어난 흐릿한 화면을 볼 수 있다.

게임에선 Mipmap이 적용되므로 texture size는 적절하게 작업 후 최종 빌드에서 용량을 맞추기 위해 조절 대부분의 Texture resizing 없이 진행(Normal, illumination map을 쓰지 않아서 전체 맵 숫자는 줄어듬)

15인치 1024x768 : 786,432 pixels 24인치 1920x1080 : 2,073,600 pixels

3.5인치 : 640x960 : 614,400 pixels(iphone 4) 5인치 : 1920x1080 : 2,073,600 pixels(S4)

Page 10: Kgc2013 defense technica_converting_이상윤

Graphic 관련 issue들

Shader

• Bumped specular , Blend shader 사용하지 않음

• Illumination이 적용된 shader는 Tower에만 적용 (배경에서는 lightmap으로 대체)

• Diffuse color는 Vertex color 적용 되는 것과 그렇지 않은 것을

구분해 사용(Lightmap, LightmapVertexColor)

Page 11: Kgc2013 defense technica_converting_이상윤

Alpha channel이 포함된

texture의 경우 자동으로

RGBA 16bit으로 저장됨

Transparent texture 사용시 품질 저하에 따른 이슈

사용자가 Tegra 같은 어떤 특정 하드웨어를 목표로 하지 않는다면 저희는 ETC1 압축 사용을 권장합니다. 필요할 경우 외부(external) 알파 채널을 저장할 수 있으면서도 낮은 텍스쳐 종류의 이득을 받을 수 있습니다. 만약 사용자가 반드시 텍스쳐에 알파 채널을 저장하길 원하면 모든 하드웨어 공급 업체에서 지원하는 압축인 RGBA16 bit을 사용하세요. 사용자 앱이 지원되지 않는 텍스쳐 압축(compression)을 사용하면 그 텍스쳐는 RGBA32로 무압축(uncompressed)되며 압축된 것들과 함께 메모리에 저장이 됩니다. 그래서 이 경우 텍스쳐의 압축을 푸는데 시간을 잃게되며 두번의 저장으로 인해 메모리 손실을 봅니다. 이것은 또한 렌더링 성능에도 아주 부정적인 영향을 줄 수 있습니다. - Unity 공식문서 中

ETC 4 bits로 저장시

170.7kb 42.7kb

Page 12: Kgc2013 defense technica_converting_이상윤

IOS에서는 자동으로 PVRTC 4bits 포맷으로 texture가 compressed 됨

Transparent texture 사용시 품질 저하에 따른 이슈(IOS)

PVRTC는 오로지 2의 n승으로만 texture를 사용되기 때문에 비정방 texture의 경우 IOS 포팅시 이미지가 제대로 표시 안되는 증상 발생 매핑 소스의 경우 UV 좌표값에 의해 일그러짐에 상관없이 화면에 그려지나 UI의 경우에 제대로 표

시 안됨 모든 UI 이미지 소스 재작업

Page 13: Kgc2013 defense technica_converting_이상윤

Mobile stage 30

Transparent texture 품질 저하에 대한 해결

기술문서의 가이드대로 alpha channel이 포함된 texture의 경우 alpha channel texture를 따로 제작 (이렇게해도 ETC compressed 된 texture 두장이 RGBA 16bit texture 한장의 용량보다 작음) Alpha channel을 따로 적용받는 Shader 제작

※ 배경 파티클 소스의 경우, 그냥 사용되었음

Mobile stage 11

Page 14: Kgc2013 defense technica_converting_이상윤

Core Unit 수정

Console core unit

• 모바일 염두가 없던 단계에서 제작된 유닛이라 수정하기 힘든 상태로 모델링/매핑이 되어있음

• 모델링 우선 수정(1/3수준), 매핑 재작업 (Texture, UV)

• Core effect 및 애니메이션 전부 재작업

• 처음부터 모바일 플랫폼을 고려했다면 좀 더 짧은 시간에 작업이 진행되었을 것으로 생각됨

4006 tris 1450 tris

Mobile core unit

Console Core Unit diffuse texture Mobile Core Unit diffuse texture

Page 15: Kgc2013 defense technica_converting_이상윤

Tower Unit 수정

• Poly counter를 줄이는 작업대신 모바일용 타워를 새롭게 제작 • 같은 계열 타워는 하나의 texture 소스로 통합하여 사용(color는 illumination color로 구분) • 작게 보이는 화면 특성상 유닛 특성을 실루엣으로 보여지도록 디자인 • 높은 단계의 Tower를 먼저 모델링하고 줄여나가는 방식으로 작업

console machine gun tower

mobile machine gun tower

Page 16: Kgc2013 defense technica_converting_이상윤

Enemy Unit 수정

• Poly counter는 콘솔단계에서 최적화 작업이 진행 되었기에 별도의 작업을 하지 않음 (콘솔 최적화 관련 이슈) • Bumped specular shader Diffuse shader로 변경 • LOD 작업 추가.

Page 17: Kgc2013 defense technica_converting_이상윤

Animation 수정

Mobile version Console version

촉수형태의 Unit이라 가장 많은 joint 개수를 가진 타워(Melee type tower unit : Electro tentacloid) Animation Joint 개수 수정 불필요한 모션 간소화. (심지어 4단계에는 이펙트까지 붙어있음)

Page 18: Kgc2013 defense technica_converting_이상윤

메인 스테이지 : 20개 DLC 1차 : 8개 DLC 2차 : 8개 스테이지당 : 평균 2.4일 IOS stage 20 출시 + DLC 1차 패치 Android stage 20 + DLC 1차(8개) 포함 출시

Stage 수정

Console stage list

Mobile stage list

Page 19: Kgc2013 defense technica_converting_이상윤

Blender shader의 대체

Console stage 14 mobile stage 14

콘솔버젼에서 마스킹된 texture를 사용한 blending된 texture로 바닥을 표현하였으나 mobile에서는 사용하지 않기로 결정 분위기에 따라 stage별 수정한 Texture와 수정되지 않은 texture를 모두 사용하여 분위기 연출

Page 20: Kgc2013 defense technica_converting_이상윤

Blender shader의 대체(2)

Console stage 17 mobile stage 17

Texture 한장을 더 써서 blending 된 것처럼 처리 Water shader는 Unity3D에서 지원하는 shader 그대로 사용(iphone 4에서는 transparent texture로 작업된 플랜으로 대체)

Page 21: Kgc2013 defense technica_converting_이상윤

Lightmapping

Unity3D에 내장된 미들웨어 Beast Engine은 짧은 시간내에 결과를 확인하면서 lighting 작업이 가능함 콘솔에서는 Lightmap UV에 대해 MAYA나 MAX에서 작업도 고려하였으나 Unity내의 메쉬 옵션에 포함된 Generate lightmap UV 옵션으로도 적절한 퀄리티의 lightmap 작업이 가능했기에 엔진상에서 작업

☞ IOS 포팅시 lightmapping UV가 어긋나는 증상을 확인. 개선 방법을 찾는것이 시간적으로도 낭비가 있을듯하여 직접 작업하기로 결정 ※ 이 문제는 Unity3D 버전 업으로 개선되었음

Console stage 09

Mobile stage 09

Page 22: Kgc2013 defense technica_converting_이상윤

Light mapping texture size의 최적화

Generate lightmap UV option을 사용하지 않고 맥스에서 직접 lightmap channel UV 작업후 export

Directional lightmaps Steam(2048x2048) Single lightmaps XBOX, PS3(1024x1024) Android, IOS(512x512, 512x256)

원형, 곡선이 많은 모델링에서는 UV 작업을 직접 하는것이 퀄리티 업에 효율적이며 lightmap 퀄리티가 좋음 이후 콘솔 DLC 작업에서는 모두 맥스상에서 직접 작업(Generate lightmap UV 옵션 사용하지 않음)

Page 23: Kgc2013 defense technica_converting_이상윤

Illumination shader 대체

스테이지 카메라 각도에 따라 2개 이상은 point light를 배치하여 연출

Console stage 01 Mobile stage 01

타워와는 달리 배경 Asset에 대해서는 발광하는 부분에 대해 illumination shader를 사용하지 않고 point light를 배치하여 lightmapping texuture에 빛이 그려지도록 하여 발광하는 표현.

Mobile stage 31

고정된 카메라 각도에 따라 플레이가 이루어지므로 씬에 따라 라이팅 배치를 조절

Page 24: Kgc2013 defense technica_converting_이상윤

Probe lighting

Probe의 배치는 콘솔과 크게 다르지 않음 Probe light에 영향을 받는 prop이 Bumped specular일때와 diffuse만 받을때 차이가 발생하기에 적정값을 확인하면서 Light의 세기를 조절하여 baking 기기 성능에 따라 Use probe lighting 옵션을 제어하여 퍼포먼스 확보(iphone 4)

Mobile stage 01 Console stage 01

Use light probe On Use light probe Off

Page 25: Kgc2013 defense technica_converting_이상윤

Lighting 톤 변화를 활용한 stage 연출

Mobile stage 11 Mobile stage 36

Mobile stage 28 Mobile stage 31

Page 26: Kgc2013 defense technica_converting_이상윤

Unit Effect 수정

Mobile flame tower effect Console flame tower effect

파티클 단순화. 파티클 수 최적화 다량의 파티클을 하나의 플랜으로 처리(연출 자체의 변화로 최적화)

Mobile mortar tower effect Console mortar tower effect

파티클의 입자 감소/최적화

Page 27: Kgc2013 defense technica_converting_이상윤

Core Effect 수정

Console core 파괴 연출 effect

Mobile core 파괴 연출 effect

강렬하게 연출한 effect 효과를 최대한 단순하게 표현. 연출 시간도 간소화

Page 28: Kgc2013 defense technica_converting_이상윤

Console과 mobile stats 비교

Steam steage 19 Mobile stage 19

동일해상도 PC에서 play한 화면을 캡쳐

Page 29: Kgc2013 defense technica_converting_이상윤

Scaleform 사용 후기(장점)

다양한 해상도의 모바일 기기의 대응을 위한 해결책으로 사용

• 장점

• UI상에서 effect 처리/배치를 UI 디자이너가 프로그래머를 통하지 않고 직접 작업이 가능함

• 검증된 생산성(스케일폼이라는 미들웨어를 통한 UI 작업)

• 모바일 기기의 다양한 해상도에 신경쓸 필요가 없다(약간의 script 설정은 필요)

• 언어(localizing 관련) 작업이 수월

• 프로그래머가 직접 UI 배치를 하지 않아도 되니 좋다

Page 30: Kgc2013 defense technica_converting_이상윤

Scaleform 사용 후기(단점)

• 단점

• 모바일에서 제약이 사항이 많다.(PC에서 사용가능하나 쓰지 못하는 기능이 있음)

: 프로그램 안정화가 안되서 생기는 듯(기기별 작동하기도 안하기도 하는 문제)

• 미구현 기능이 많고 예정 기능이 많다.(언제 구현될지 미지수)

• 프로그래머가 도와주지 않으면 디자이너가 직접 scripting을 해야하는 부담

• 작동에 관한 개선/구현에 대해 전달이 명확하지 않으면 프로그래머측에서 혼선을 가질 수 있음

• 화면 비율에 따라서 이상하게 보일 수 있다.(재작업을 통해 보완이 필요)

• 모듈이 불안정. 무비클립을 확실히 제거해 주지 않으면 메모리에 계속 남아있다(메모리 샌다는 이야기가 많음)

Page 31: Kgc2013 defense technica_converting_이상윤

기획 파트와의 협조사항

。 Stage level design의 특징과 경험은 유지하면서 size를 줄이는 문제 。 Performance 저하 구간에서 wave time을 조절함으로써 한 화면에 그려지는 mesh양을 조절 (콘솔에서처럼 한 화면에 그려지는 적 유닛의 숫자가 너무 많아 퍼포먼스가 저하되는 이슈에 대한 대응) 。 더불어 난이도 조절(시스템적으로 조절하는게 기준) 。 모바일 유저 특성에 맞추어 난이도 하양 조정(그래도 재미는 있는데 어렵다는 평…)

QA 피드백에 의해 stage에서 조작에 방해되는 요소의 수정 Stage 01의 tutorial scene play화면

Page 32: Kgc2013 defense technica_converting_이상윤

프로그래밍 파트와의 협조사항

。 Transparent texture의 사용 조절 (사용된 prop을 따로 관리하여 기기에 따라 켜고 끌수 있게 제어) iphone 4 。 Unity3D profiler를 활용하여 퍼포먼스 체크 。IOS, Android 각 OS에서 지원하는 profiler를 통해 memory와 frame rate 를 체크해서 적정 Art resource 수준을 결정

Game 화면의 stats창으로 코스트 확인

기기 성능에 따라 FX 를 켜고 끌수 있게 제어

Page 33: Kgc2013 defense technica_converting_이상윤

마치며…

• 모바일화 작업은 그냥 DATA를 모바일에 맞게 바꾸는 작업이 아님 멀티 플랫폼 대응을 사전에 충분히 고려한 작업 프로세스를 만들어야 함 : Technical art issue에 대해 TA 혹은 프로그래머와의 긴밀한 협조 • 무조건 간단하게, 최소한으로 작업하기보다 타겟 머신(Target machine)을 분명히 설정하

고 그 기기의 스펙에 맞는 적정 퍼포먼스 코스트를 결정하는 것이 중요

• 실제 게임에서 필요한 퀄리티와 담당 작업자가 원하는 퀄리티 차이에 대해 고려해볼 필요성(비쥬얼 퀄리티와 퍼포먼스 퀄리티의 차이에 대한 이해)

• Art process상에서 살릴것은 살리고 버릴것은 버리는 과감한 결단성이 필요

Page 34: Kgc2013 defense technica_converting_이상윤

Q & A

KUNO interactive / Art Team http://www.kunointer.com 책임 아티스트 / 이 상 윤 [email protected] [email protected]

Special thanks to

적극적으로 ppt 제작에 피드백 해주신 동료 분들 디펜스 테크니카를 응원 해주셨던 많은 분들께 감사 드립니다.