유니티3D 2017을 사용하면서 쓰게 된 Sprite Atlas 기능과 그외에 여태 써오며 아쉬웠던 UI 기능들을 정리 해봤습니다.

1. Unity3D 2017
SpriteAtlas
& 아쉬운 UI기능들
2017. 11. 25
데브루키 조홍기(고기님)

2. 발표자소개
2012 ~ 2014
레드아이언 스튜디오 2D원화,애니메이션
2014 ~ 2015
마이어스 게임즈 2D원화
2015 ~ 2016
브로모 UI디자이너
2016.4 ~ 2016.10
마이어스 게임즈 UI디자이너
2016.11 ~ 현재
이츠게임즈 UI디자이너
조홍기
게임 UI를 만드는 사람

3. 간략한 목차
1. 기존 유니티3D Sprite Packer
2. 유니티3D 2017에서 사용하게 된 SpriteAtlas
3. 이거 좀 쓰기 불편한데, 개선은…
4. 만들어지길 소원하는 통합UI시스템
5. 질의응답 및 토의

4. 기존 유니티3D Sprite Packer
게임 모바일 스펙의 대중화가 만든 게임UI의 중요성
- 제한적인 화면
- 컨트롤러가 없음
- 제한 속에서 효율적이고 매끄러운 화면의 요구
- 플랫폼의 속성이 종전과 다른 방식의 UX를 필요로 함

5. 기존 유니티3D Sprite Packer
게임 모바일 스펙의 대중화가 만든 게임UI의 중요성, 그 결과…
- 기존 시스템에서 탈피가 필요 (자체툴 혹은 스케일폼 미들웨어 등)
- 제작에 효율적이고 덩치가 작은 녀석이 필요해짐
- 때마침 떠오르는 Asset 스토어 시장
- 그러나 Asset 스토어의 툴들이 만능일까…

6. 기존 유니티3D Sprite Packer
GUI Asset을 활용해야 하는 불완전한 UI에서
모양새를 갖춘 내장 UI Canvas와 내장 Sprite Packer가 등장

7. 기존 유니티3D Sprite Packer
내장 유니티3D UI의 사용상 장점
- 사용시 엔진 자체와 연계가 빠르다
- 굳이 외부 Asset을 이용하지 않아도 손쉽게 제작 가능
- 템플릿화, 모듈화 되어 있는 UI 구성요소들

8. 기존 유니티3D Sprite Packer
과연 장점뿐인가??
- 지원되지 않는 연계점도 몇몇 존재
- 외부 Asset의 지원을 받아야 매끄럽게 제작가능
- 템플릿, 모듈의 레이어가 복잡한 경향이 있음

9. 기존 유니티3D Sprite Packer
어쨌든 쓸모도 있고
다루기에 편리한 점도 많다.
무엇보다 Sprite 옵션 설정을
손쉽게 할 수 있다.
자동차로 비유하자면
수동에서 반자동 정도는 온 느낌

10. 기존 유니티3D Sprite Packer
Sprite가 포함될 Atlas를
Packing Tag 방식으로
지정설정 해두면
빌드시 Sprite Packer가
자동으로 묶어 준다.

11. 기존 유니티3D Sprite Packer
최악의 단점은
Sprite 개별 속성에 따라
(Alpha, nonAlpha, Bits)
같은 태그를 넣어도
실존 Atlas를 분리시켜 버림

12. 기존 유니티3D Sprite Packer
RBGA Bits에 대한 이해가 높아야
적절한 사용이 가능한
불편한 Auto Atlas 시스템을 만들어 놓음..
물론 다 알면야 좋지만… 현실은 과연…

13. 기존 유니티3D Sprite Packer
여까지 사용하니 딱 필요한게 보이는 각
인정합니까? 네 인정합니다.
Sprite가 귀속된 Atlas의 통합설정이 가능하다면 좋겠음

14. 유니티3D 2017에서 사용하게 된 SpriteAtlas
유니티3D 2017과 함께 새기능으로 나온
SpriteAtlas 시스템이 여러분과 함께 합니다.
저도 내일모레부터 이걸로 최적화 시작해봐야 합니다.. 사실 그래서 만들어진 발표주제

15. 유니티3D 2017에서 사용하게 된 SpriteAtlas
SpriteAtlas
Asset화 시킨 Atlas
NGUI의 Atlas프리팹과
유사한 기능을 한다.

16. 유니티3D 2017에서 사용하게 된 SpriteAtlas
등록가능 오브젝트 단위엔
폴더도 가능하여
폴더별 정리한 Sprite를
한번에 등록가능 하다.

17. 유니티3D 2017에서 사용하게 된 SpriteAtlas
허나 개별 이미지 속성을
Sprite로 해두지 않으면
SpriteAtlas엔
묶여들어가지 않는다.

18. 유니티3D 2017에서 사용하게 된 SpriteAtlas
실제 폴더내 이미지 수보다 훨씬 적은수가 묶이게 된 아틀라스의 모습.
묶이지 않은 이미지는 Sprite 속성이 아니다.

19. 유니티3D 2017에서 사용하게 된 SpriteAtlas
Packing 옵션으로
회전과 타이트, 페이딩이 있다.

20. 유니티3D 2017에서 사용하게 된 SpriteAtlas
팩킹시 효율을 위해
알파공간을 채우거나
이미지를 회전시켜 팩킹하도록
허용하는 옵션이 있다

21. 유니티3D 2017에서 사용하게 된 SpriteAtlas
타입 옵션에 Master와 Variant는
FHD – HD – SD 의 옵션과 같다.

22. 유니티3D 2017에서 사용하게 된 SpriteAtlas
Master Atlas를 지정하면
거기에 Scale 옵션이 붙은
저해상도 버전을 생성해준다.

23. 유니티3D 2017에서 사용하게 된 SpriteAtlas
Master 원본 Variant 저해상도

24. 유니티3D 2017에서 사용하게 된 SpriteAtlas
만일 최대크기 옵션을 넘어가는
개수일 경우
Atlas가 여러장 생성되며
아예 이미지크기가 큰 경우
팩킹시 콘솔에러가 띄워진다

25. 유니티3D 2017에서 사용하게 된 SpriteAtlas
전반적으로 유용한 사용성을 갖고 있는 Atlas 시스템
프로젝트를 진행하며 본격적으로 사용 예정
차후 2017 UI에 관한
포스트 모텀 발표가 있을수도…

26. 이거 좀 쓰기 불편한데, 개선은…
지금까지 업데이트로 많은 개선을 거듭해온
Unity3D의 UI 시스템
+
유용한 품질의 Asset Store

27. 이거 좀 쓰기 불편한데, 개선은…
아직도 헷갈리는 Trans 좌표와
Rect Trans 좌표
개별적인 장점은 있지만
화면에서 어우러져야 하는 경우
만들기 까다로워지는 단점이 있다.

28. 이거 좀 쓰기 불편한데, 개선은…
아직도 헷갈리는 Sorting 관련 레이어
특히 이펙트 파티클과의 교차작업시
작업자들 서로간 헷갈리는 부분
UI Canvas와 맞물려
조금더 직관 적인 Sorting Order가
가능했으면 하는 바램

29. 이거 좀 쓰기 불편한데, 개선은…
UI에 써먹기 좋은 Canvas 시스템이지만
막상 Alpha Masking에서 제한은 상당히 많다.
UI디자이너는 부드러운걸 좋아하는뒈…
NGUI에도 있는 패널 알파마스크는 언제 가능할까.

30. 이거 좀 쓰기 불편한데, 개선은…
메카님 애니메이터를 이용한 타임라인 트윈은
강력한 사용성에 비례해 너무 무겁다.
메카님을 다루기 위해 알아야 할 것이 많은것도 문제
필요한 기능만을 다루는
가벼운 트위닝 시스템이 필요할 듯

31. 만들어지길 소원하는 통합UI시스템
기본3D 좌표계와의 연동이 간편하고
직관적인 Sorting과 Order Layer 기능
가볍고 사용하기 편리한 이미지기반 알파 마스크 기능
적용이 편리하게끔 만든 타임라인 기반 트위닝 시스템
…을 모두 가진 엔진으로 만들어 주십셔!!

32. 마무리
질의 응답 및 마무리