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
이름은 하나...

Border(나인패치)
유니티에선 각 Sprite와
Atlas에 있는 Sprite에
Border를 넣을 수 있습니다.
Border 적용 그림은
Sliced(나인패치) 가 됩니다.
나인패치는 좌표의 내부만
늘리고 줄여쓰는...

• 나인패치를 사용하면
실제 리소스 절약에 좋습니다.
• UI시안 제작과 실사용 리소스를
가장 헷갈리게 하는 원인입니다.
• 자주 써서 익숙해지면
작은이미지로도 알기 쉽습니다.
원본
나인패치용
원...

나인패치 외에도
타일링이나 리소스 겹쳐사용 등을 이용하면
원본보다 더 작고 효율적인 리소스를
제작 할 수 있습니다.
다만 골치아픈 노가다 입니다
PART 1. 게임 UI의 리소스

Atlas와 Drawcall
Drawcall
• UI뿐 아닌 모든 게임상 사용되는 개념
• 모든오브젝트, 3D, UI등 화면 렌더링 상에서
보여줘야 하는 개별 Material의 호출 갯수 입니다.
• 여러개의 같은 Ma...

Atlas와 Drawcall
2D UI용 Drawcall 은
* 서로 다른 Material 설정을 쓸때도 늘어납니다.
( 예 : 3D의 텍스쳐, 이펙트의 파티클 렌더러 )
* 서로 다른 Material 설정을 교차해서 ...

Atlas와 Drawcall
Atlas와 Drawcall 비유
파일을 복사 시
[1MB 복사:저용량] X 1000개 보다
[1GB 복사:고용량] X 1개 가 빠름과 유사합니다.
작게 하나씩 그리지 않고
큰 것 하나를 잘...

Atlas와 Drawcall
A1 를 그려라
A2 를 그려라
A3 를 그려라
A4 를 그려라
B1 를 그려라
C1 를 그려라
이것보다는..
A1 (좌표0,1)
A2 (좌표0,2)
A3 (좌표0,3)
A4 (좌표0,4)
...

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

UI 리소스 관리
Atlas의 효율적 관리는 곧
게임성능 향상, 더 많은 리소스 활용가능, 퀄리티 업에 기여
확실히 적용하기 위해선
오브젝트 레이어 기반도 신경쓰는게 맞으나
…
보통 어른들의 사정으로 인해 못하는 경우가...

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

UI 시안 만들기 PART 2. 게임 UI시안 그리고 적용
포토샵이나 목업툴, 혹은 게임엔진 으로
나타낼 수 있는 시각화 결과물은
모두 다 일종의 시안이며
그림, 영상, 모션파일 등
회사, 팀마다 주로 쓰는 방식이 다릅...

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

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

혹은 목업툴이나 모션툴 등을 이용해
설명을 단축시키는 방법도 있으나…
이 방법은 방식에 숙달된 디자이너가 필요합니다.
기본 시안 -이 막 움직이고 막막 빛나고 ...

최근엔 소통형 목업 툴 이나
모션작업 연결 툴도 꽤 나와있고
실제 일반 애플리케이션 디자이너들은
많이 사용하는 추세입니다.
음… 다음번엔 제플린을 공부해서 발표...

UI 적용 PART 2. 게임 UI시안 그리고 적용
시안을 UI프로그래머 에게 넘겨서
실제 게임에 적용시키는게 일반적인 수순
시안제작
시안가이드
아트디자인
리소스화
아틀라스
스프라이트
아트디자인
UI 프로그래머
게임UI...

애매한 중립 지대가
발생합니다.
시안제작
시안가이드
아트디자인
리소스화
아틀라스
스프라이트
아트디자인
UI 프로그래머
게임UI제작
시안적용
UI 프로그래머

애매한 중립 지대가
발생합니다.
리소스화
아틀라스
스프라이트
아트디자인
UI 프로그래머 이 부분의 소통은
제작 사이클의 효율을
결정짓는 중요한 포인트 입니다.
이것을 ...

근본은 결국 하나라고 생각합니다.
같은 게임 프로젝트를 제작중이다.
서로 좋은 소통과 협의를 끌어내면 좋겠습니다.

유니티 디폴트 폴더 구성
trunk 아래에 [프로젝트이름]의 폴더를 놓고 그 안쪽에
유니티의 기본구성을 만들어 갑니다.
프로젝트 로드 시 Assets과 ProjectSettings가
들어있는 상위폴더를 로드 하면 됩니다...

리소스 파일관리
프로젝트 특성과 결정사항에 따라
적용되는 부분은 다를 수 있으나
기본적으로 UI리소스 폴더는 3~4개 정도의 큰 구분이 있습니다.
• 원본 스프라이트 폴더
• 제작 아틀라스 폴더
• 대형 리소스 폴더
•...

원본 스프라이트 폴더
• 게임에 쓰인 원본 스프라이트 보존
• 수정/제작 된 리소스를 덮어씌움
• 따로 백업해두기도 함
• 게임UI 원본의 모습을 가짐

제작 아틀라스 폴더
• 스프라이트로 제작한 아틀라스
• 툴로서 제작됨
• 실제 게임에 쓰이므로 설정값이 중요
• 자체수정이 힘듦

대형 리소스 폴더
• 큰 배경 이미지나 컷씬용 캐릭터 이미지 등등
• 자체적인 통짜사용이 효율적인 경우
• 아틀라스에 포함되지 않음
• 퀄리티 좋은 이미지들이 주류

웹 리소스 폴더
• 따로 웹 다운이 필요한 리소스들
• 서버에 주로 올라가게 됨
• 웹용 아틀라스, 대형 이미지를 포함할때도 있음

파싱과 이름
Img_ABCD_11.png
Game OBJ image
Img_ABCD_55.png
Img_ABCD_99.png
파일명 파싱 :
Img_(파싱한다).png
이름이나 데이터를 불러와서
교체사용 할 수 있는 개...

프로젝트 빌드
UI 리소스 구분과 유사한점도 존재합니다.
큰 분류로는 3가지로 나눌 수 있어요.
• 게임 패키지
• 다운로드 번들
• CDN 혹은 웹뷰 계열

패키지
보통 설치파일 배포되는 빌드이며, 받은 후
복사하거나 옮기기 수월하고 직접 실행할 수 있습니다.
게임 빌드(퍼블리시)
네트워크 다운로드
패키지
게임
다운로드
번들 CDN 혹은
웹페이지
PART 3. 게임 프로젝트...

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

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

Trunk 빌드 폴더분류
Trunk의 빌드 폴더분류를
패키지/번들/웹다운 으로 나눌때가 있습니다.
모든 프로젝트를 이렇게 하는건 아니겠지만
빌드 후 각각 올리는 방식이 다를 수 있기에
분리해서 작업해두는 것이 편합니다....

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

The스프라이트

Hong-Gi Joe

The스프라이트