The스프라이트

2017. 3. 11 데브루키

조홍기

귀찮음 주의

익숙한 부분도 많지만알아둘만한 편리한 것들을

개념 정리해 봤습니다.

기준엔진은 Unity5 입니다.(이미 아는 부분은 읽기 귀찮음 주의)

List

PART 1. 게임 UI의리소스

PART 2. 게임 UI시안그리고적용

PART 3. 게임프로젝트및파일관리

2D UI 리소스 플로우

2D UI 사용엔 Sprite와 Atlas가 필요합니다.

Sprite개별 그림 입니다.

Atlas개별이 모인 큰 그림 입니다.

Atlas를 만들시엔 Sprite들을 모아 툴을 이용해 만들어 냅니다.


2D UI 리소스 플로우

특징

Sprite

각각의 이름이 있습니다.개별마다 설정이 다릅니다.

개별의 이름과 옵션대로불러옵니다.

개별그림이라 여러 개를 쓰면화면에서 Drawcall을 늘립니다.

Atlas

이름은 하나만 있습니다.포함된 Sprite를 부르는 이름, 좌표는

내부에 따로 저장합니다.하나의 옵션으로 불러옵니다.

그림 하나라 화면에서Drawcall을 줄입니다.


Border(나인패치)

유니티에선 각 Sprite와Atlas에 있는 Sprite에

Border를 넣을 수 있습니다.

Border 적용 그림은Sliced(나인패치) 가 됩니다.

나인패치는 좌표의 내부만늘리고 줄여쓰는 방식 입니다.

Border 설정



• 나인패치를 사용하면실제 리소스 절약에 좋습니다.

• UI시안 제작과 실사용 리소스를가장 헷갈리게 하는 원인입니다.

• 자주 써서 익숙해지면작은이미지로도 알기 쉽습니다.

원본

나인패치용원본과헷갈림 주의



나인패치 외에도타일링이나 리소스 겹쳐사용 등을 이용하면원본보다 더 작고 효율적인 리소스를제작 할 수 있습니다.

다만 골치아픈 노가다 입니다


Atlas와 Drawcall

Drawcall

• UI뿐 아닌 모든 게임상 사용되는 개념

• 모든오브젝트, 3D, UI등 화면 렌더링 상에서보여줘야 하는 개별 Material의호출갯수 입니다.

• 여러개의 같은 Material을호출한번에 끝내는걸Batching이라 합니다.

• UI아틀라스나 파티클용 이미지도이름만 다를 뿐 한 속성을 가진 Material 로 처리됩니다.


Atlas와 Drawcall

2D UI용 Drawcall 은

* 서로 다른 Material 설정을 쓸때도 늘어납니다.( 예 : 3D의 텍스쳐, 이펙트의 파티클 렌더러 )

* 서로 다른 Material 설정을 교차해서 쓰면 더 늘어납니다.( 예 : UI텍스쳐 / 3D텍스쳐 / 다시 UI텍스쳐 순서로 그릴 때 )

* Drawcall이 높은게 항상 느린건 아닙니다.그런데 대부분은 느려지게 만들 뿐.


Atlas와 Drawcall

Atlas와 Drawcall 비유파일을 복사 시

[1MB 복사:저용량] X 1000개 보다[1GB 복사:고용량] X 1개 가 빠름과 유사합니다.

작게 하나씩 그리지 않고큰 것 하나를 잘라 쓰는 겁니다.

Drawcall 줄이기리소스 렌더 순서를 알고

그에 적합한 Atlas를 만들 필요가 있습니다.같은화면 리소스는 하나에 몰아넣는게 좋습니다.


Atlas와 Drawcall

A1 를 그려라

A2 를 그려라

A3 를 그려라

A4 를 그려라

B1 를 그려라

C1 를 그려라

이것보다는..

A1 (좌표0,1)A2 (좌표0,2)A3 (좌표0,3)A4 (좌표0,4)B1 (좌표1,1)C1 (좌표2,1)

를 그려라

이게 더 빠릅니다.


Atlas와 Drawcall

Atlas는 게임상 직접 불러쓰는 리소스라512x512 , 1024x1024 등의 2제곱으로 만듭니다.이걸 POT (Power of Two) 라 합니다. 압축효율(용량)과 관련있기 때문입니다.

다만 4096부턴인식못하는기기가 있어4096 이상은 거의 쓰지 않습니다.


UI 리소스 관리

Atlas의 효율적 관리는 곧게임성능 향상, 더 많은 리소스 활용가능, 퀄리티 업에 기여

확실히 적용하기 위해선오브젝트 레이어 기반도 신경쓰는게 맞으나

…

보통 어른들의 사정으로 인해 못하는 경우가 태반 ㅜㅜ


UI 리소스 관리

실제 사용하게 되는 아틀라스의 모양입니다.이대로만 봐서는 무슨 그림인지 잘 알기 힘드나, 필요한 부분만 늘리고 복사하고 조합하여 사용하면게임용 UI의 모양새가 나옵니다.


UI 시안 만들기 PART 2. 게임 UI시안그리고적용

포토샵이나 목업툴, 혹은 게임엔진 으로나타낼 수 있는 시각화 결과물은

모두 다 일종의 시안이며

그림, 영상, 모션파일 등회사, 팀마다 주로 쓰는 방식이 다릅니다.


…… 라는 사실은 접어두고

일단 그냥 게임만들땐포토샵이 최고입니다.사용성이 익숙하고시안, 리소스제작, 편집 등모든작업을 소화할 수 있기 때문에.


보여주기 시안을 실 클라이언트 작업자가 적용하기 위해시안가이드를 제작 합니다

기본 시안 시안 가이드


혹은 목업툴이나 모션툴 등을 이용해설명을 단축시키는 방법도 있으나…

이 방법은 방식에 숙달된 디자이너가 필요합니다.

기본 시안 -이 막 움직이고 막막 빛나고 눌러지고 그런다 막..


최근엔 소통형 목업 툴 이나모션작업 연결 툴도 꽤 나와있고

실제 일반 애플리케이션 디자이너들은많이 사용하는 추세입니다.

음… 다음번엔 제플린을 공부해서 발표해볼까

UI 적용 PART 2. 게임 UI시안그리고적용

시안을 UI프로그래머 에게 넘겨서실제 게임에 적용시키는게 일반적인 수순

시안제작시안가이드

아트디자인

리소스화아틀라스

스프라이트

아트디자인UI 프로그래머

게임UI제작시안적용

UI 프로그래머


애매한 중립 지대가발생합니다.

시안제작시안가이드

아트디자인


스프라이트

아트디자인UI 프로그래머

게임UI제작시안적용

UI 프로그래머


애매한 중립 지대가발생합니다.


스프라이트

아트디자인UI 프로그래머 이부분의소통은

제작사이클의효율을결정짓는중요한포인트입니다.

이것을 해결하기 위한 툴이나목업 기능이 따로 존재하는 것이

그 증거가 됩니다.


근본은 결국 하나라고 생각합니다.

같은게임프로젝트를제작중이다.

서로 좋은 소통과 협의를 끌어내면 좋겠습니다.

유니티 디폴트 폴더 구성

trunk 아래에 [프로젝트이름]의 폴더를 놓고 그 안쪽에유니티의 기본구성을 만들어 갑니다.

프로젝트 로드 시 Assets과 ProjectSettings가들어있는 상위폴더를 로드 하면 됩니다.

이중 Assets는 실제 게임을 구성하는 내용들이고ProjectSettings는 내 유니티의 설정들을 갖고 있습니다.필요에 따라 설정들은 공유하기도, 하지 않기도 합니다.

여러사람이 올릴땐 ProjectSettings는 올리지 않는게 좋습니다.


리소스 파일관리

프로젝트 특성과 결정사항에 따라적용되는 부분은 다를 수 있으나

기본적으로 UI리소스 폴더는 3~4개 정도의 큰 구분이 있습니다.

• 원본 스프라이트 폴더• 제작 아틀라스 폴더• 대형 리소스 폴더• 웹 리소스 폴더



원본 스프라이트 폴더

• 게임에 쓰인 원본 스프라이트 보존• 수정/제작 된 리소스를 덮어씌움

• 따로 백업해두기도 함• 게임UI 원본의 모습을 가짐



제작 아틀라스 폴더

• 스프라이트로 제작한 아틀라스• 툴로서 제작됨

• 실제 게임에 쓰이므로 설정값이 중요• 자체수정이 힘듦



대형 리소스 폴더

• 큰 배경 이미지나 컷씬용 캐릭터 이미지 등등• 자체적인 통짜사용이 효율적인 경우

• 아틀라스에 포함되지 않음• 퀄리티 좋은 이미지들이 주류



웹 리소스 폴더

• 따로 웹 다운이 필요한 리소스들• 서버에 주로 올라가게 됨

• 웹용 아틀라스, 대형 이미지를 포함할때도 있음


파싱과 이름

Img_ABCD_11.png

Game OBJ image

Img_ABCD_55.png

Img_ABCD_99.png

파일명 파싱 :

Img_(파싱한다).png

이름이나 데이터를 불러와서교체사용 할 수 있는 개념입니다.

UI에선 주로 아이콘, 초상화, 색상교체등에사용됩니다.

파싱을 문제없이 사용하기 위해선데이터 테이블과 파일명을 맞춰둬야 하고빌드에도 확인 해두는게 좋습니다.


프로젝트 빌드

UI 리소스 구분과 유사한점도 존재합니다.큰 분류로는 3가지로 나눌 수 있어요.

• 게임 패키지• 다운로드 번들

• CDN 혹은 웹뷰 계열


패키지

보통 설치파일 배포되는 빌드이며, 받은 후복사하거나 옮기기 수월하고 직접 실행할 수 있습니다.

게임 빌드(퍼블리시)네트워크 다운로드

패키지게임

다운로드번들 CDN 혹은

웹페이지


다운로드 번들

패키지 설치 후 다운로드해서 설치하는 파일이며,패키지 용량을 줄이고 효율을 높여 설치를 용이하게 만듭니다.게임전체는(패키지+번들다운+@)이므로 전체용량은 줄지 않습니다.


패키지게임


웹페이지


CDN 혹은 웹뷰

CDN(Content Delivery Network)은 원래 트래픽분산을 위한시스템이지만, 모바일게임에선 주로 웹뷰처럼 올려둔 웹 데이터를바로바로 받아쓰는 방식을 말합니다.편리하지만 데이터를 많이쓰는게 단점입니다.


패키지게임


웹뷰


Trunk 빌드 폴더분류

Trunk의 빌드 폴더분류를패키지/번들/웹다운 으로 나눌때가 있습니다.

모든 프로젝트를 이렇게 하는건 아니겠지만빌드 후 각각 올리는 방식이 다를 수 있기에분리해서 작업해두는 것이 편합니다.

게임 빌드네트워크

패키지게임

다운로드번들

CDN 혹은웹뷰

.apk

.exe파일 실행형

.apk : 패치,번들

.exe : 패치,번들파일 다운형

http:// pageWeb image웹뷰/다운 형


마치며

서로 다른것을 익히고 사용하는 사람들이 모여같은 프로젝트를 완성해 나가야 합니다.

서로 소통합시다.

PART 4. 마치며

질문

Q & A

The스프라이트

Software

Transcript of The스프라이트