유니티3d 5의 ugui #2
TRANSCRIPT
![Page 1: 유니티3D 5의 Ugui #2](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a66b5e1a28abb47e8b52fb/html5/thumbnails/1.jpg)
Unity3D 5의
2016. 10. 15 데브루키
고기님(조홍기)
5 UGUI에 대해 알아봅시다
#2
![Page 2: 유니티3D 5의 Ugui #2](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a66b5e1a28abb47e8b52fb/html5/thumbnails/2.jpg)
알아두세요
# 본발표_UGUI기초_발표
# 중급이상자_안봐도_ㅇㅋ
# 봐도_물론_ㅇㅋ
# Unity3D 5의_하이어라키에_이해있음_편리
# 발표중_궁금한거_질문도_ㅇㅋ
![Page 3: 유니티3D 5의 Ugui #2](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a66b5e1a28abb47e8b52fb/html5/thumbnails/3.jpg)
@1 List Up
@ 발표자 소개
@ 이전 UGUI #1 발표 되새김질
@ 스크롤뷰와 레이아웃 엘리먼트 설명
@ 사용해보기
@ 질문사항
![Page 4: 유니티3D 5의 Ugui #2](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a66b5e1a28abb47e8b52fb/html5/thumbnails/4.jpg)
@2 발표자 소개@ 이름 – 조홍기
@ 닉네임 – 고기님
@ 생산년도 – 1987년
@ 하는일 – 게임UI 아트 디자이너
@ 하고싶은 일 – 운동, 그림, 자전거
@ 해야하는 일 – 월세내기, 세금내기, 예비군 가기
![Page 5: 유니티3D 5의 Ugui #2](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a66b5e1a28abb47e8b52fb/html5/thumbnails/5.jpg)
@3 UGUI #1 되새김질
1. 발표자료를 켠다
2. 세줄요약을 한다
3. 발표자료를 끈다
http://www.slideshare.net/honggijoe/unity3d-5-ugui-1
![Page 6: 유니티3D 5의 Ugui #2](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a66b5e1a28abb47e8b52fb/html5/thumbnails/6.jpg)
@4 스크롤뷰 / 레이아웃 엘리먼트
1.기본 스크롤뷰 플랫폼
2.뷰포트 오브젝트
3.가로 스크롤바 오브젝트
4.세로 스크롤바 오브젝트
![Page 7: 유니티3D 5의 Ugui #2](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a66b5e1a28abb47e8b52fb/html5/thumbnails/7.jpg)
@4 스크롤뷰 / 레이아웃 엘리먼트
1. 스크롤바 기본 구조
2. 스크롤뷰와 연결되어 있음
3. 스크롤뷰 핸들링 가능
4.Value값(위치정도),스텝넘버 설정 가능
![Page 8: 유니티3D 5의 Ugui #2](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a66b5e1a28abb47e8b52fb/html5/thumbnails/8.jpg)
@4 스크롤뷰 / 레이아웃 엘리먼트
1. 뷰포트
2. 마스킹과 보이는 영역 설정
3. 보이는 영역 배경이미지 설정
![Page 9: 유니티3D 5의 Ugui #2](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a66b5e1a28abb47e8b52fb/html5/thumbnails/9.jpg)
@4 스크롤뷰 / 레이아웃 엘리먼트
1. Content 오브젝트
2. 하위에 넣어질 컨텐츠Item 들을갖게 됨
3. 기본적으로 비어있으나보통 이 위치에 레이아웃
엘리먼트 컴포넌트 추가하여 사용
![Page 10: 유니티3D 5의 Ugui #2](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a66b5e1a28abb47e8b52fb/html5/thumbnails/10.jpg)
@4 스크롤뷰 / 레이아웃 엘리먼트
1. 컨텐츠 Item (가제)
2. 실제 내용을 담는 동적오브젝트(프리팹)등을 배치함을 말함
3. Content 오브젝트에 들어가는레이아웃 엘리먼트 설정에
영향을 받음
![Page 11: 유니티3D 5의 Ugui #2](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a66b5e1a28abb47e8b52fb/html5/thumbnails/11.jpg)
@4 스크롤뷰 / 레이아웃 엘리먼트
1. 레이아웃 엘리먼트
2. 그리드 레이아웃 그룹
3. 가로배열 레이아웃 그룹
4. 세로배열 레이아웃 그룹
Layout : 구획을 만들거나 나눠 배치함
![Page 12: 유니티3D 5의 Ugui #2](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a66b5e1a28abb47e8b52fb/html5/thumbnails/12.jpg)
@4 스크롤뷰 / 레이아웃 엘리먼트
1. Layout Element
2. 다른 레이아웃그룹 영향아래에서 각 오브젝트가가져야 할 적정크기 설정
3. 최소영역, 일반적영역, 여유비율영역
![Page 13: 유니티3D 5의 Ugui #2](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a66b5e1a28abb47e8b52fb/html5/thumbnails/13.jpg)
@4 스크롤뷰 / 레이아웃 엘리먼트
![Page 14: 유니티3D 5의 Ugui #2](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a66b5e1a28abb47e8b52fb/html5/thumbnails/14.jpg)
@4 스크롤뷰 / 레이아웃 엘리먼트
메트로 UI
![Page 15: 유니티3D 5의 Ugui #2](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a66b5e1a28abb47e8b52fb/html5/thumbnails/15.jpg)
@4 스크롤뷰 / 레이아웃 엘리먼트
1. Grid Layout Group
2. 순차적 격자배열
3. 좋은 예 ) 아이템 인벤토리
![Page 16: 유니티3D 5의 Ugui #2](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a66b5e1a28abb47e8b52fb/html5/thumbnails/16.jpg)
@4 스크롤뷰 / 레이아웃 엘리먼트
인벤토리 UI
![Page 17: 유니티3D 5의 Ugui #2](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a66b5e1a28abb47e8b52fb/html5/thumbnails/17.jpg)
@4 스크롤뷰 / 레이아웃 엘리먼트
1. Horizontal Layout Group
2. 순차적 가로배열
3. 좋은 예 ) 가로배열 태그 UI
![Page 18: 유니티3D 5의 Ugui #2](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a66b5e1a28abb47e8b52fb/html5/thumbnails/18.jpg)
@4 스크롤뷰 / 레이아웃 엘리먼트
가로배열 UI
![Page 19: 유니티3D 5의 Ugui #2](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a66b5e1a28abb47e8b52fb/html5/thumbnails/19.jpg)
@4 스크롤뷰 / 레이아웃 엘리먼트
1. Vertical Layout Group
2. 순차적 세로배열
3. 좋은 예 ) 세로배열 태그 UI
![Page 20: 유니티3D 5의 Ugui #2](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a66b5e1a28abb47e8b52fb/html5/thumbnails/20.jpg)
@4 스크롤뷰 / 레이아웃 엘리먼트
세로배열 UI
![Page 21: 유니티3D 5의 Ugui #2](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a66b5e1a28abb47e8b52fb/html5/thumbnails/21.jpg)
@5 사용해보기 / 인벤토리
간단한 인벤토리 형태 제작가능
내부 Item이 갖는 형식에 따라
다양한 응용 가능
메뉴, 버튼모음, 선택 리스트 등등
![Page 22: 유니티3D 5의 Ugui #2](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a66b5e1a28abb47e8b52fb/html5/thumbnails/22.jpg)
@5 사용해보기 / 인벤토리
마스킹의 편의성을 위해마스크전담 레이어 추가
![Page 23: 유니티3D 5의 Ugui #2](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a66b5e1a28abb47e8b52fb/html5/thumbnails/23.jpg)
@5 사용해보기 / 인벤토리
Grid Layout Group과Content Size Fitter를 이용해
레이아웃 크기 조절과페이딩 및
하위 셀(Item프리팹)의 간격, 크기, 시작앵커, 가로줄 개수
등을 사전설정
![Page 24: 유니티3D 5의 Ugui #2](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a66b5e1a28abb47e8b52fb/html5/thumbnails/24.jpg)
@5 사용해보기 / 인벤토리
![Page 25: 유니티3D 5의 Ugui #2](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a66b5e1a28abb47e8b52fb/html5/thumbnails/25.jpg)
@5 사용해보기 / 말풍선
글자수에 따라크기가 변하는말풍선 만들기
![Page 26: 유니티3D 5의 Ugui #2](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a66b5e1a28abb47e8b52fb/html5/thumbnails/26.jpg)
@5 사용해보기 / 말풍선
![Page 27: 유니티3D 5의 Ugui #2](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a66b5e1a28abb47e8b52fb/html5/thumbnails/27.jpg)
@5 사용해보기 / 말풍선
9patch(나인패치,슬라이스)말풍선 이미지
Layout Group의 페이딩
Content Size Fitter사이징
하위 텍스트 오브젝트와이미지 오브젝트가
동시에 사이징 되게 함
![Page 28: 유니티3D 5의 Ugui #2](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a66b5e1a28abb47e8b52fb/html5/thumbnails/28.jpg)
@6 질문사항
감사합니다
질문 받습니다
![Page 29: 유니티3D 5의 Ugui #2](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a66b5e1a28abb47e8b52fb/html5/thumbnails/29.jpg)