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

Trunk 빌드 폴더분류
Trunk의 빌드 폴더분류를
패키지/번들/웹다운 으로 나눌때가 있습니다.
모든 프로젝트를 이렇게 하는건 아니겠지만
빌드 후 각각 올리는 방식이 다를 수 있기에
분리해서 작업해두는 것이 편합니다.
게임 빌드
네트워크
패키지
게임
다운로드
번들
CDN 혹은
웹뷰
.apk
.exe
파일 실행형
.apk : 패치,번들
.exe : 패치,번들
파일 다운형
http:// page
Web image
웹뷰/다운 형

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

The스프라이트

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to The스프라이트

Similar to The스프라이트 (20)

The스프라이트