유니티3D 5의 Ugui #2

Unity3D 5의
2016. 10. 15 데브루키
고기님(조홍기)
5 UGUI에 대해 알아봅시다
#2

알아두세요
# 본발표_UGUI기초_발표
# 중급이상자_안봐도_ㅇㅋ
# 봐도_물론_ㅇㅋ
# Unity3D 5의_하이어라키에_이해있음_편리
# 발표중_궁금한거_질문도_ㅇㅋ

@1 List Up
@ 발표자 소개
@ 이전 UGUI #1 발표 되새김질
@ 스크롤뷰와 레이아웃 엘리먼트 설명
@ 사용해보기
@ 질문사항

@2 발표자 소개
@ 이름 – 조홍기
@ 닉네임 – 고기님
@ 생산년도 – 1987년
@ 하는일 – 게임UI 아트 디자이너
@ 하고싶은 일 – 운동, 그림, 자전거
@ 해야하는 일 – 월세내기, 세금내기, 예비군 가기

@3 UGUI #1 되새김질
1. 발표자료를 켠다
2. 세줄요약을 한다
3. 발표자료를 끈다
http://www.slideshare.net/honggijoe/unity3d-5-ugui-1

@4 스크롤뷰 / 레이아웃 엘리먼트
1.기본 스크롤뷰 플랫폼
2.뷰포트 오브젝트
3.가로 스크롤바 오브젝트
4.세로 스크롤바 오브젝트

1. 스크롤바 기본 구조
2. 스크롤뷰와 연결되어 있음
3. 스크롤뷰 핸들링 가능
4.Value값(위치정도),
스텝넘버 설정 가능

1. 뷰포트
2. 마스킹과 보이는 영역 설정
3. 보이는 영역 배경이미지 설정

1. Content 오브젝트
2. 하위에 넣어질 컨텐츠Item 들을
갖게 됨
3. 기본적으로 비어있으나
보통 이 위치에 레이아웃
엘리먼트 컴포넌트 추가하여 사용

1. 컨텐츠 Item (가제)
2. 실제 내용을 담는 동적오브젝트
(프리팹)등을 배치함을 말함
3. Content 오브젝트에 들어가는
레이아웃 엘리먼트 설정에
영향을 받음

1. 레이아웃 엘리먼트
2. 그리드 레이아웃 그룹
3. 가로배열 레이아웃 그룹
4. 세로배열 레이아웃 그룹
Layout : 구획을 만들거나 나눠 배치함

1. Layout Element
2. 다른 레이아웃그룹 영향
아래에서 각 오브젝트가
가져야 할 적정크기 설정
3. 최소영역, 일반적영역,
여유비율영역

메트로 UI

1. Grid Layout Group
2. 순차적 격자배열
3. 좋은 예 ) 아이템 인벤토리

인벤토리 UI

1. Horizontal Layout Group
2. 순차적 가로배열
3. 좋은 예 ) 가로배열 태그 UI

가로배열 UI

1. Vertical Layout Group
2. 순차적 세로배열
3. 좋은 예 ) 세로배열 태그 UI

세로배열 UI

@5 사용해보기 / 인벤토리
간단한 인벤토리 형태 제작가능
내부 Item이 갖는 형식에 따라
다양한 응용 가능
메뉴, 버튼모음, 선택 리스트 등등

마스킹의 편의성을 위해
마스크전담 레이어 추가

Grid Layout Group과
Content Size Fitter를 이용해
레이아웃 크기 조절과
페이딩 및
하위 셀(Item프리팹)의 간격,
크기, 시작앵커, 가로줄 개수
등을 사전설정

@5 사용해보기 / 말풍선
글자수에 따라
크기가 변하는
말풍선 만들기

9patch(나인패치,슬라이스)
말풍선 이미지
Layout Group의 페이딩
Content Size Fitter사이징
하위 텍스트 오브젝트와
이미지 오브젝트가
동시에 사이징 되게 함

@6 질문사항
감사합니다
질문 받습니다

Recommandé