00. Scroll Rect

• Scroll Rect는 큰 공간을 차지하는 콘텐트를 작은 공간에 나타낼 때 스크롤이 가능하게 만드는 사각영역을 의미한다.
• 위의 화면처럼 스크롤바를 추가할 수 있다. 이번에는 스크롤바를 추가하고 스크롤바의 value값을 Text영역에 표시할 수 있다. 그리고 이미지에 마스크를 적용하여 사각영역의 크게 맞게 이미지를 자를 수 있는 mask에 대해 포스팅할 것이다.

-

01. Hierarchy

• Scroll Rect도 다른 UI 컴포넌트와 마찬가지로 Canvas의 자식으로 생성된다.

• Scroll Rect를 생성하고 이름을 ScrollView로 변경하였다.

• Mask를 적용하기 위해서는 Scroll Rect의 자식으로 Image를 가지고 있어야 한다.

  

02. Scroll Rect Inspector

• Horizontal / Vertical: 좌우, 상하의 움직임을 활성/비활성화 한다.
• Movement Type
  1) Unrestricted: 제한 없이 스크롤 된다. 화면 밖으로 컨텐트를 밀어낼 수 있다.
  2) Elastic: 스크롤에 탄성이 생긴다. 한계점에서 탄성을 가지고 복구한다.
  3) Clamped: 한계점에 도달하면 멈춘다.
• Inertia: 관성을 가진다.
• Horizontal/Vertical Scrollbar: 스크롤바를 지정할 수 있다.
• On Value Changed: 스크롤에 의한 값 변화를 인지하여 호출되는 이벤트.

-

• Image와 Mask가 모두 있어야 Mask설정이 가능하다.

-

03. Scroll bar 포지션 인식

• 스크롤바의 위치에 따른 value의 값을 Text컴포넌트에 표시하는 스크립트를 작성

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

  using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI;   public class findXY : MonoBehaviour {       private Text coordinate;       private string coor_format = "({0}, {1})";       private float X;     private float Y;       public void SetX(Scrollbar sb)     {         X = sb.value;         coordinate.text = string.Format(coor_format, X.ToString(), Y.ToString());     }       public void SetY(Scrollbar sb)     {         Y = sb.value;         coordinate.text = string.Format(coor_format, X.ToString(), Y.ToString());     }       void Start () {         coordinate = GetComponent<Text>();              } }   Colored by Color Scripter

  cs

• Text컴포넌트에 위의 스크립트를 부착한다.

• 스크롤바의 On Value Changed에 텍스트 컴포넌트를 넘기고 SetY메소드의 인자로 스크롤바 자신을 전달하여 스크롤바의 value가 변하면 이벤트가 호출되어 Text필드를 변경한다.

• 마스크가 제대로 적용되었고 스크롤하였을 때 value의 값을 Text에 잘 표시하는 것을 확인할 수 있다.