공부하는 식빵맘 👱‍♀️

공부하는 식빵맘 👱‍♀️

반갑습니다 :)

Unity Chapter 10-3. UGUI : 인터랙션 컴포넌트

Date:     Updated:

카테고리:

태그:

인프런에 있는 이제민님의 레트로의 유니티 C# 게임 프로그래밍 에센스 강의를 듣고 정리한 필기입니다. 😀
🌜 [레트로의 유니티 C# 게임 프로그래밍 에센스] 강의 들으러 가기!


Chapter 10. UGUI


🔔 UI 인터랙션 컴포넌트

키보드나 마우스, 터치 등의 입력을 감지하여 거기에 맞는 대응을 해주는 UI다.

Selectable 클래스

모든 인터랙션 컴포넌트들은 Selectable 클래스를 상속받아 만들어진다. 즉, 인터랙션 컴포넌트들은 Selectable 클래스있는 기능들을 공통적으로 가지고 있다.

  • 인터랙션 컴포넌트들은 스스로 그래픽을 그리지 않는다.
    • 이미지 컴포넌트나 텍스트 컴포넌트가 붙어있는 것을 볼 수 있는데 인터랙션 컴포넌트들은 비주얼 컴포넌트로 구현되며 비주얼 컴포넌트들을 제어한다.
    • 인터랙션 컴포넌트의 비주얼적인 부분을 변경하고자 한다면 이미지, 텍스트 컴포넌트를 건드려야 한다.

인터랙션 컴포넌트의 공통적인 필드

Selectable 클래스의 기능들. 버튼, 슬라이더 등등 인터랙션 컴포넌트들은 다음과 같은 필드들을 공통적으로 가진다.

image

  • Interactable
    • : 체크 해제 되어 있으면 동작하지 않게 된다. 터치도 안되고 해당 UI는 Navigate도 되지 않음.
  • Transition
    • 유저들이 해당 UI를 터치했을 때나 해당 UI에 머물시 그에 대한 피드백의 시각적인 효과 설정
    • Color Tint : 해당 UI의 색깔을 바꿔서 보여준다.
      • Normal Color 평소 색깔, Highlighted Color 유저가 터치했을때 색깔
    • Sprite Swap : 해당 UI의 Sprite(그림)를 바꿔서 보여준다.
    • Animation : 해당 UI에서 어떤 Animation을 발생시킨다.
  • Navigation
    • Visualize를 눌러주면 Scene창에서 노란 화살표로 나타나 인터랙션 UI들간에 방향을 개발자가 시각적으로 볼 수 있다.
      • image
    • 키보드 방향키로 각 UI 요소들을 탐색할 때 어느 방향으로 이동할지를 볼 수 있다.
      • Horizontal로 설정된 경우는 ←→에 반응하고
      • Vertical인 경우는 ↑↓에 따라 움직인다.
      • Automatic은 자동으로 적당하게 움직인다.
      • Explicit의 경우는 키보드 방향별로, 어떠 버턴으로 움직일 지 지정할 수 있다.

EventSystem에서 First Selected에 Selectable 클래스를 상속받는 인터랙션 컴포넌트가 달린 UI 요소를 드래그 앤 드롭해주면 게임 시작시 이 UI 요소가 선택된 채로 시작된다.


Button

  • On Click()
    • 유니티 이벤트
    • 버튼이 클릭 되는 이벤트가 발생했을 때, 자동으로 실행시켜주는 컴포넌트.

버튼을 눌렀을 때, 큐브 오브젝트의 색깔이 변경되게 구현해보자.

  • 큐브 오브젝트에 📜ColorChange.cs 스크립트를 붙여준다

📜ColorChange.cs

  • 자기 자신의 색깔을 랜덤한 색상으로 변경한다.
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ColorChange : MonoBehaviour
{
    public void ChangeColor()
    {
        GetComponent<Renderer>().material.color = Random.ColorHSV();
    }
}
  • 이 ChangeColor()함수를 버튼이 클릭될 때 실행시켜주면 된다.

image

  • 큐브 오브젝트를 드래그 앤 드롭 해준다.

꼭 스크립트에 있는 함수가 아니더라도 GameObject 등등 모든 게임 오브젝트들이 상속받아 기본적으로 내장되있는 함수들도 발동시킬 수 있다.

  • Directional Light 기본 오브젝트를 드래그 앤 드롭하여 GameObject의 SetActive()을 선택해준 후 체크를 해제하면
    • 버튼이 클릭될 때 화면이 어두워질 것이다. Directional Light 오브젝트가 꺼져서!


Toggle

Toggle : 껏다 켰다 할 수 있는 체크 박스

  • Is On
    • 토글을 체크했을때 이 변수도 체크된다.
    • C# 스크립트를 통하여 이 변수의 값(bool)을 직접 변경할 수도 있다. 
      using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;  // ⭐⭐

public class ColorChange : MonoBehaviour
{
    public Toggle toggle; // ⭐⭐

    void Start()
    {   
        Debug.Log(toggle.isOn);  // ⭐⭐
    }
}
      • isOn 슬롯에 토글 UI를 드래그 앤 드롭해주어야 한다.
  • On Value Changed
    • 유니티 이벤트
      • 토글을 체크했을때, 혹은 체크하지 않았을때 발동시킬 함수들을 설정할 수 있다.
      • 단, Boolean 타입의 인수를 받는 함수여야한다.
        • 토글이 체크되었는지 안되었는지 정보를 받아 실행되야 하는 함수들이 등록되기 때문에

📜ColorChange.cs

  • 함수가 bool 인수를 받도록 변경하였다.
  • 토글이 체크되있으면 랜덤한 컬러로, 체크 해제되어 있으면 하얀색 컬러로 변경
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ColorChange : MonoBehaviour
{
    public void ChangeColor(bool isOn)
    {
        if(isOn)
            GetComponent<Renderer>().material.color = Random.ColorHSV();
        else
            GetComponent<Renderer>().material.color = Color.white;
    }
}
  • On Value Changed
    • 큐브 오브젝트를 드래그 앤 드롭 해준다.
      • Dynamic bool
        • 유니티 이벤트가 입력 값(bool)을 전달할 수 있는 경우
        • 게임 실행 상에서 자동으로 입력 값이 들어온다.
        • 예를들어 SetActive 같은 함수가 대표적으로 Dynamic 하게 인수를 받는데 체크 박스를 해제하면 SetActive에 자동으로 false가 들어와 게임 오브젝트도 게임창에서 사라지게 된다.
        • Dynamic bool을 선택했을 때 입력필드가 따로 없는 것을 볼 수 있다.
          • image
      • Static bool
        • 개발자가 직접 입력 값(bool)을 미리 조정 하는 경우.
        • 따라서 따로 입력(체크) 필드가 있다.
          • 개발자가 직접 게임실행전에 미리 따로 체크하고 체크 해제하여 입력값(Bool)을 주게 된다.
          • image
    • ⭐함수 선택시 Dynamic bool에 있는 ColorChange를 선택해준다.
      • 게임 실행전 개발자가 미리 bool입력을 주는 것이 아닌 게임 실행 중에 토글의 체크 변화에 따라서 bool입력을 받을 것이기 때문에

image


Toggle Group 컴포넌트

Toggle Group 컴포넌트는 여러개의 토글 중 하나만 선택되게 하며 토글 하나가 선택되면 다른 토글들은 해제되도록 해준다.

  1. UI - Panel을 만든 후
  2. Penel에 그룹으로 만들 여러개의 Toggle들을 자식으로 붙여준다.
  3. Panel에 Toggle Group 컴포넌트를 검색하여 붙여준다.
    • 이 패널을 토글들의 그룹으로 지정해준다.
  4. 각각의 Toggle들의 Toggle 컴포넌트의 Group에 Penel을 드래그 앤 드롭 해준다.
    • 자신(토글)이 속한 그룹을 지정해 준 것.
  • Allow Switch Off를 체크하면 해당 토글을 체크 해제하는 것도 가능하다. 다시 한번 더 눌러 체크를 해제하는 것도 가능함
    • 즉 전체 토글들 중 0개를 체크하는 케이스도 가능해진다.


Slider

유저가 슬라이더 핸들을 움직이거나 개발자가 스크립트를 통하여 슬라이더 핸들을 움직여 슬라이더에게 어떤 value를 전달할 수도 있다.

image

Slider의 자식 오브젝트

  • Background
    • 슬라이더의 전체 길이가 되는 Bar. 슬라이더의 배경이 된다.
    • 이미지 컴포넌트가 달려있어서 슬라이더 바를 그리며 배경 색 같은 것을 지정해줄 수 잇다.
    • 없어도 무방하다.
      • 없애주면 이런식
      • image
  • FillArea & Fill

  • 슬라이더의 역할 👉 FillArea에 비해 Fill의 크기를 상대적으로 조절. Fill은 FillArea를 채운다.

    • Fill : 슬라이더가 크기를 조절할 영역
      • 이미지 컴포넌트가 붙어있어 value만큼 채워 그려진다.
      • 슬라이더가 채워질때의 색이나 그림을 변경하고 싶다면 Fill의 이미지 컴포넌트로 가야한다.
    • FillArea : 슬라이더 전체 영역
    • 예를 들어 min value가 0이고 max value가 50이고 이때 value가 25라면 Fill이 FillArea크기에 비해 50 % 크기로 채워진다.
  • Handle Slide Area
    • 슬라이더를 땡길 수 있는 동그란 손잡이(Handle).
    • 이미지 컴포넌트가 달려있어서 슬라이더 핸들을 그리며 슬라이더 핸들의 색깔 같은 것을 지정해줄 수 잇다.
    • 사실 손잡이 없어도 슬라이드는 유저의 입력과 터치에 반응하여 슬라이더 값을 변경할 수 있기 때문에 없어도 무방하다.
      • (그냥 편의로 있는건가보다.)

Slider 필드

  • Interactable
    • Selectable클래스들을 상속받는 인터랙트 컴포넌트들은 다 가지고 있다고 위에서 배웠다.
    • 체크 해제 하면 슬라이더를 유저가 움직일 수 없고 코드를 통해서만 value를 제어할 수 있다.
  • Fill Rect
    • 슬라이더가 크기를 변경하여 슬라이더를 채울 오브젝트.
    • 기본적으로 슬라이더 UI 생성하면 자식 오브젝트로 같이 생성되는 Fill이 들어간다.
  • Handle
    • 손잡이가 될 오브젝트
    • 기본적으로 슬라이더 UI 생성하면 자식 오브젝트로 같이 생성되는 Fill이 들어간다.
  • Direction
    • 슬라이더가 채워지는 방향
    • 기본적으로 왼->오
  • Whole Numbers
    • : 슬라이더 손잡이를 움직일 때 value가 정수 단위로 움직인다.

이벤트

  • On Value Changed(Single)
    • 슬라이더의 value 값이 변경 될 때마다 자동으로 실행된다.
    • 숫자를 인수를 받는 함수가 이 이벤트에 ⭐Dynamic⭐으로 들어간다면 실시간으로 슬라이더의 value 값이 인수로 넘어간다.
    • 아래 두 스크립트의 ColorChange 함수를 Dynamic으로 이벤트에 등록해주자.
📜ColorChange.cs
  • 큐브 오브젝트에 붙어있는 스크립트다.
  • 슬라이더 바를 조절하여 큐브의 색깔의 빨간색 부분의 명도를 변경해줄 것이다.
  • 인수로 float을 받기 때문에 인수로 슬라이더의 value값이 실시간으로 들어오게 된다.
    • 따라서 슬라이더 바에 따라 큐브의 빨간색이 바뀌게 된다.
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;  // ⭐⭐

public class ColorChange : MonoBehaviour
{
    public void ChangeColor(float percentage)
    {
        Color color = new Color(percentage, 0, 0);
        GetComponent<Renderer>().material.color = color;
    }
}
📜SliderChange.cs
  • 큐브 오브젝트에 붙는 스크립트다.
  • 게임이 시작될때 슬라이더 바를 중간에 놓은 채로 시작
    • 현재 min = 0, max = 1인 상태
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;  // ⭐⭐

public class SliderChange : MonoBehaviour
{
    public Slider slider;

    void Start()
    {
        slider.value = 0.5f;
    }
}

image


여러가지 옵션 중 하나의 옵션을 선택할 수 있는 버튼. UI - Dropdown

image

  • Label
    • 텍스트
  • Arrow
    • 화살표 이미지
  • Template
    • 평소엔 비활성화 되어있다.
    • 드롭다운을 열었을 때 패널을 그린다.
      • Template - Viewport - Content - Item 에서 옵션 하나하나를 그리게 된다.
      • 옵션들의 그림, 색을 수정하려면 여기서 수정하면 된다.

image

  • Value
    • 현재 선택된 옵션의 Value

    • 드롭다운의 옵션들은 차례로 0, 1, 2, 3 .. 이렇게 인덱스처럼 Value 값이 지정되어 있다.

      • 가장 위에있는 옵션의 value는 0
  • options
    • 옵션을 추가 삭제 수정할 수 있다.
    • Sprite는 이미지를 추가해주면 옵션마다 왼쪽에 나타난다.
  • On Value Changed(Int 32)
    • 유니티 이벤트
    • 옵션들 중 하나를 선택하면 발동되는 이벤트이며 인수로는 선택된 해당 옵션의 value가 전달된다.
📜ColorChange.cs

드롭 다운으로 큐브의 바꿔줄 색상을 선택한다.

  • 드롭다운 이벤트에 Dynamic으로 붙여줄 함수 ChangeColor(int index)
  • 큐브 오브젝트에 붙어있는 스크립트다.
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;  // ⭐⭐

public class ColorChange : MonoBehaviour
{
    public void ChangeColor(int index)
    {
        Color color = Color.white;

        switch(index)
        {
            case 0:
                color = Color.red;
                break;
            case 1:
                color = Color.blue;
                break;
            case 2:
                color = Color.green;
                break;
            case 3:
                color = Color.white;
                break;
        }

        GetComponent<Renderer>().material.color = color;
}

image


Scroll View

작은 영역을 통해서 그보다 큰 컨텐츠를 드래그 하면서 볼 수 있는 UI UI - Scroll View

image

  • 스크롤의 대상이 되는 컨텐츠는 Scroll View - Viewport - Content의 자식으로 넣어주면 된다.
  • 우리가 보는 컨텐츠는 사실 훨씬 더 크다.
    • 그러나 Viewport에 Mask 컴포넌트가 붙어있어서 넘치는 부분은 잘라내기 때문에 보이지 않는 것.
    • 보이는 영역을 크게하고 싶으면 Viewport의 크기를 늘리면 되는데, Scroll View의 크기를 변경하면 알아서 같이 변경된다.

컨텐츠에 스크롤 붙이기

  • Scroll View - Viewport - Content에 Image 컴포넌트를 검색하여 붙이고 배경색을 지정해주었다.
  • Contetnt의 자식으로 UI - Text를 추가해주었다.
  • 세로 길이는 부모인 Viewport에 의하여 맞춰지지만(상대좌표) 가로 길이는 스스로 수동적으로 값을 입력해 결정할 수 있도록 (절대좌표) Content의 앵커 프리셋을 stretch-left 으로 해준다.
    • 이렇게 해준 이유는 밑에서 세로 스르롤링 (Vertical)을 한번 체크 해제해볼라고.
    • 반대로 가로 스크롤링은 없고 세로 스크롤링만 하도록 구현하려면 앵커 프리셋을 top - stretch로.
    • Alt키를 누르고 지정하여 텍스트도 왼쪽 상단으로 옮겨주자.
  • Control View에서 vertical을 해제하여 위아래로 드래그 하지 못하도록 막아주었다.
  • Scroll View의 또 다른 자식들인 Scrollbar Horizontal, Scrollbar Vertical을 없애주었다.
    • 스크롤 이미지가 사라진다.
      • 스크롤바 이미지만 사라지는거지 드래그는 여전히 가능하다.
    • 사라지고 남은 여백을 ViewPort가 채울 수 있도록 ViewPort의 패딩값을 전부 0으로 해주었다. (right = 0, bottom = 0)

image

이벤트

  • On Value Changed(Vector2)
    • 유니티 이벤트
    • 스크롤 뷰를 드래그하면 자동으로 발동되는 이벤트로 스크롤 바를 어디까지 드래그 했는지 그 위치(Vector2)를 함수들에게 인수로 넘겨준다.

Scroll Rect

  • MovementType
    • 스크롤의 움직임 스타일
  • deceleration rate
    • 값이 높을수록 스크롤링에서 손을 뗏을때 스크롤링을 빨리 멈춘다.
  • Scroll Sensitivity
    • 민감도


Input Field

플레이어가 직접 텍스트를 입력할 수 있는 공간. UI - Input Field

image

Input Field의 자식 오브젝트

  • Placeholder
    • 여기에도 텍스트 컴포넌트가 붙어있는데 이는 유저 입력전에 안내문구 같은 것이다.
      • 기본적으로 Enter Text… 라고 되어있는 그 문구.
      • 따라서 유저가 입력을 시작하면 이 Placeholder의 Text 컴포넌트는 비활성화된다.
  • Text
    • 이 텍스트 UI에 유저의 입력이 들어간다.
    • 이처럼 인터랙트 컴포넌트(Input Field 컴포넌트)는 직접 그래픽을 표현하지 않는다.

Input Field의 이벤트

이벤트가 2개다.

  1. On Value Changed (String)
    • 유저가 타이핑을 한번 할 때 마다 발생하는 이벤트.
    • 글자 한글자 칠때마다 계속 발동 되며 그 한글자 한글자가 다 인수로 넘어가게된다.
    • 만약에 유저가 abc를 입력했다면
    • a
    • ab
    • abc
    • 이렇게 string 인수로 3번 넘어간다.
  2. On End Edit (String)
    • 유저가 엔터키를 눌러서 타이핑을 끝냈을때발생하는 이벤트.
    • 만약에 유저가 abc를 입력했다면
    • abc 이렇게 한번만 넘어간다.

Input Field 필드

  • Content Type : 유저의 입력 형식을 지정해줄 수 있다.
    • Standard : 유저 입력 아무거나 다 받는다.
    • Integer Number : 정수만 입력 받는다. (오로지 정수만 타이핑 됨)
    • Password : 유저 입력 다 받긴 하는데 비밀번호 입력할 때처럼 가려진다.
      • Text에는 뜬다.
  • Read Only : 입력 불가
  • Chracter Limit : 글자 수 제한


🌜 개인 공부 기록용 블로그입니다. 오류나 틀린 부분이 있을 경우 
언제든지 댓글 혹은 메일로 지적해주시면 감사하겠습니다! 😄

맨 위로 이동하기


Unity Lesson 1 카테고리 내 다른 글 보러가기

댓글 남기기

최근 글 10 개 :)