ScrollView 사용법
작성 기준 버전 :: 5.4 - 2019.4
게임에서 UI 창보다 크거나 많은 내용이 들어가는 콘텐츠를 UI 안에 담기 위해서 사용하는 방법은 여러가지가 있다. 그 중에 대표적인 방법이 바로 버튼 같은 것을 이용해서 페이지를 넘기는 것이고 또 하나는 스크롤을 이용해 UI 내에서 이동하면서 볼 수 있는 스크롤 뷰이다. 이 두 가지의 방법 중에서 어떤 것을 사용할 것인지 결정하는 차이점은 내 개인적인 생각이지만 바로 '연속성'이라는 것이다.
UI에 들어가는 콘텐츠가 연속적이지 않고 흐름이 끊어져도 상관 없다면 페이지 방식을 사용하는 것이 좋고, 들어가는 콘텐츠가 커다란 하나의 것이거나 연속적인 면이 중요해서 연결되어져야 한다면 스크롤 뷰 방식이 적당할 것이다.
이런 스크롤 뷰 방식은 스스로 직접 구현하려면 상당히 귀찮은 면이 많겠지만 유니티 엔진의 UGUI에서는 이미 스크롤 뷰를 지원하고 있다. 그래서 간단한 클릭 몇 번만으로도 스크롤 뷰를 뚝딱하고 만들 수 있다.
Hierachy 뷰에서 우클릭을 UI 메뉴에서 Scroll View를 선택하면 스크롤 뷰가 생성된다.
스크린샷과 같은 형태로 스크롤 뷰가 생성되는데 내용을 하나씩 살펴보자면.
Scroll View :: 우리가 생성한 스크롤 뷰
Viewport :: 표시하고자 하는 콘텐츠가 보여질 곳
Content :: 표시하고자 하는 내용물
Scrollbar Horizontal :: 수평 스크롤바
Scrollbar Vertical :: 수직 스크롤바
를 나타낸다. 스크롤 뷰를 원하는 형태로 수정하기 위해서는 Hierachy에서 Scroll View를 선택하고 Inspector 창을 보면 스크롤 뷰에 대한 옵션을 볼 수 있다.
스크롤 뷰의 옵션들은 Scroll Rect라는 Component에 대부분 포함되어 있다.
Horizontal :: 스크롤 뷰의 수평 이동을 허용할 것인가?
Vertical :: 스크롤 뷰의 수직 이동을 허용할 것인가?
Movement Type :: 스크롤 이동 타입(세 가지가 있다.)
Unrestricted - 콘텐츠가 스크롤 밖으로 나가도 조금도 제한하지 않는다.
Elastic - 콘텐츠가 스크롤 밖으로 나가면 정해놓은 값(Elasticity)만큼의 속도로 스크롤 뷰 안으로 돌아온다.
Clamped - 콘텐츠가 스크롤 밖으로 나가지 못하게 완전히 제한한다.
Inertia :: 관성. 이 값을 켜두면 스크롤을 끌다가 놓으면 바로 정지하지 않고 끌던 속도가 점점 감소하며 멈춘다.
Scroll Sensitivity :: 스크롤 민감도
Horizontal Scrollbar :: 수평 스크롤바
Visibility - 스크롤바가 보이는 방식(항상 보이는 방식인지 콘텐츠의 크기에 따라 보이는 방식인지를 설정할 수 있다.)
(수직 스크롤바 역시 같은 내용이다.)
이 다음으로 다뤄야하는 내용은 바로 콘텐츠이다.
바로 뷰포트 밑에 있는 Content 라는 게임 오브젝트인데, UI에서 보여주고자 하는 내용들은 모두 이 Content 오브젝트의 자식 오브젝트로 배치해야한다. 그리고 이 Content의 크기에 따라 스크롤 뷰의 크기가 결정된다. 그리고 초기 상태는 top, stretch 상태로 설정되어서 크기 값이 Right, Height로 되어있는데 좀더 직관적인 값인 Width, Height로 보기 위해서 top, left 상태로 바꿔주는 것을 추천한다.
현재 설정된 Width 583, Height 300이라는 크기를 Scene에서 보면 아래와 같은 크기이다.
게임을 제작할때 필요한 스크롤 뷰의 크기에 맞춰서 잘 조절해 주어야 한다. 다만 고정된 크기의 스크롤 뷰라면 Inspector 창에서 크기를 직접 조절해도 상관은 없지만 만약 아이템의 갯수와 같은 요소를 통해서 보여져야하는 스크롤 뷰의 크기가 달라져야 한다면 스크립트를 통해서 Content의 크기를 조절하는 방법도 알아둬야 한다.
우선 스크롤 뷰를 쉽게 가져오기 위해서 스크롤 뷰를 가진 오브젝트에 스크립트를 추가한다.
그리고 추가한 스크립트를 통해 다음과 같은 코드를 작성하면 된다.
ScrollView의 Content 크기를 조절하는 스크립트
using UnityEngine;
using UnityEngine.UI; // UI와 관련된 스크립트 작업을 위해서 추가해 주어야 한다.
using System.Collections;
public class ScrollViewPractice : MonoBehaviour
{
// 스크롤 뷰와 관련된 수정을 하기 위해 가지고 있는 변수
ScrollRect scrollRect;
// Use this for initialization
void Start ()
{
scrollRect = GetComponent<ScrollRect>(); // 게임 오브젝트가 가지고 있는 ScrollRect를 가져온다.
}
void SetContentSize()
{
float width = 100.0f;
float height = 100.0f;
// scrollRect.content를 통해서 Hierachy 뷰에서 봤던 Viewport 밑의 Content 게임 오브젝트에 접근할 수 있다.
// 그리고 sizeDelta 값을 통해서 Content의 높이와 넓이를 수정할 수 있다.
scrollRect.content.sizeDelta = new Vector2(width, height);
}
}
위의 코드를 적절히 응용하면 아이템 개수에 따라, 혹은 원하는 크기로 Content의 크기를 조절할 수 있다.
[유니티 어필리에이트 프로그램]
아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.
에셋스토어
여러분의 작업에 필요한 베스트 에셋을 찾아보세요. 유니티 에셋스토어가 2D, 3D 모델, SDK, 템플릿, 툴 등 여러분의 콘텐츠 제작에 날개를 달아줄 다양한 에셋을 제공합니다.
assetstore.unity.com
Easy 2D, 3D, VR, & AR software for cross-platform development of games and mobile apps. - Unity Store
Have a 2D, 3D, VR, or AR project that needs cross-platform functionality? We can help. Take a look at the easy-to-use Unity Plus real-time dev platform!
store.unity.com
Create 2D & 3D Experiences With Unity's Game Engine | Unity Pro - Unity Store
Unity Pro software is a real-time 3D platform for teams who want to design cross-platform, 2D, 3D, VR, AR & mobile experiences with a full suite of advanced tools.
store.unity.com
[투네이션]
-
toon.at
[Patreon]
WER's GAME DEVELOP CHANNEL님이 Game making class videos 창작 중 | Patreon
WER's GAME DEVELOP CHANNEL의 후원자가 되어보세요. 아티스트와 크리에이터를 위한 세계 최대의 멤버십 플랫폼에서 멤버십 전용 콘텐츠와 체험을 즐길 수 있습니다.
www.patreon.com
[디스코드 채널]
Join the 베르의 게임 개발 채널 Discord Server!
Check out the 베르의 게임 개발 채널 community on Discord - hang out with 399 other members and enjoy free voice and text chat.
discord.com
'Unity3D > UGUI' 카테고리의 다른 글
| [Unity3D] UI 비법서 (5) - 캔버스의 분할 (0) | 2020.01.07 |
|---|---|
| [Unity3D] UI 비법서 (4) - UI 개발자라면 제발 Rect Transform 애용합시다! (1) | 2019.10.23 |
| [Unity3D] UI 비법서 (3) - 군무는 칼같은 각이 생명! Layout Group (1) | 2019.10.15 |
| [Unity3D] UI 비법서 (2) - 하나의 그룹 Canvas Group (2) | 2019.08.26 |
| [Unity3D] UI 비법서 (1) - 당신의 레이아웃에 딱맞는 Content Size Fitter (5) | 2019.04.15 |
