본문 바로가기
Unity 강의/Unity Course(2) - 절대강좌! 유니티

[Unity Course 2] 07. 유니티 UI 시스템 4

by 첨부엉. 2024. 6. 24.
반응형
위키북스 출판사 이재현 저자님의 '절대강좌! 유니티' 책을 참고하여 필기한 내용입니다.

Text 컴포넌트

속성 설명
Text 표시할 텍스트
Font 텍스트에 사용할 폰트
Font Size 폰트의 크기
Line Spacing 여러 줄일때 줄간격
Rich Texr 입력 텍스트를 마크업 형식으로 표현할지 여부
Alignment 가로, 세로 글 정렬 옵션
Horizontal Overflow Text 가로 영역을 넘어선 글의 처리 방식
Warp: 다음 행으로 내려쓴다
Overflow :  가로 범위를 넘어가게 허용
Vertical Overflow Text 세로 영역을 넘어선 글의 처리 방식
Truncate : 넘어간 글자는 잘라내 표시하지 않는다.
OverFlow : 세로 범위를 넘어가게 허용
BestFit Font Size를 무시하고 Text 컴포넌트의 범위에 맞게 크기를 자동 조정
Color Text 색상
Material Text 에 별도의 머티리얼을 적용

 

여기서 책과 다른길로 가버린 나의 문제점을 발견할 수 있었다.
그렇기에 혹시나 따라하던 분들도 있다면 한번씩 확인하고 넘어가도록 하자
바로 다음 글에서 TextMeshPro를 사용하니 미리 예습한다는 생각으로....

책에서 사용한 Button은 레거시 Button으로 만들었어야 했는데 만약 나처럼 TextMesPro로 버튼을 만든 경우 아래와 같이 TMP importer 창이 뜨게 된다. 뜬다면 두개의 버튼을 눌러준다.

import TMP Essentials

import TMP Examples & Extras

책과 똑같이 하기 위해 이전으로 돌아가기엔 힘들거 같아서 그냥 이대로 진행하도록...ㅜㅜ

그리고 예전에 지원하던 기존 Text 컴포넌트는 시각적 품질이 매우 좋지 않았다.

TextMeshPro는 텍스트 스타일 지정과 품질을 개선하여 이전의 문제점을 보안하여 나온 컴포넌트이다.

 

완전 럭키비키잖앙..ㅎㅎ 하고 원영적 사고로 넘어가보자

 

 

각 버튼의 하위오브젝트인 Text 컴포넌트에서 각 버튼의 텍스트를 START, OPTION, SHOP 으로 변경하고

사이즈와 컬러도 디자인에 맞춰 변경하도록 한다.

 

스크립트에서 버튼 이벤트 처리하기

앞서 버튼을 클릭했을 때 호출할 함수를 유니티 에디터에서 연결하는 방식은 개발 능률이 떨어진다.

또한 런타임에 생성되는 버튼에는 이벤트 함수를 연결할 방법이 없다.

 

따라서 스크립트에서 버튼의 이벤트를 연결

  • UnityEvent
  • Delegate

 

using UnityEngine;
using UnityEngine.UI;       // Unity-UI를 사용하기 위해 선언한 네임스페이스
using UnityEngine.Events;   // UnityEvent 관련 API를 사용하기 위해 선언한 네임스페이스

public class UIManager : MonoBehaviour
{
    // 버튼을 연결할 변수
    public Button startButton;
    public Button optionButton;
    public Button shopButton;

    private UnityAction action;

    private void Start()
    {
        // UnityAction 을 사용한 이벤트 연결 방식
        action = () => OnButtonClick(startButton.name);
        startButton.onClick.AddListener(action);

        // 무명 메서드를 활용한 이벤트 연결 방식
        optionButton.onClick.AddListener(delegate { OnButtonClick(optionButton.name); });

        // 람다식을 활용한 이벤트 연결 방식
        shopButton.onClick.AddListener(() => OnButtonClick(shopButton.name));
    }


    public void OnButtonClick(string msg)
    {
        Debug.Log($"Click Button : {msg}");
    }
}

스크립트 변경 후 버튼을 연결

 

특정 이벤트가 발생하면 호출할 함수를 연결하기 위해 AddListener 함수를 사용함

 

람다식

: action 변수에 함수를 연결하는 방식은 람다식을 사용

 

매개변수가 있을 때

델리게이트_타입 변수명 = (매개변수_1, 매개변수2_,...)=>식;
델리게이트_타입 변수명 = (매개변수_1, 매개변수_2,...)=>{로직_1;로직_2;...};

 

매개변수가 없을 때

델리게이트_타입 변수명 = () => 식;
델리게이트_타입 변수명 = () => {로직_!;,로직_2;...}

 

6장 델리게이트 설명에서 사용한 스크립트를 람다식으로 변경

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class DelegateDemo : MonoBehaviour
{   
    // 델리게이트 선언
    delegate float SumHandler(float a, float b);
    // 델리게이트 타입의 변수 선언
    SumHandler sumHandler;

    // 덧셈 연산을 하는 함수
    float Sum(float a, float b)
    {
        return a + b;
    }

    private void Start()
    {
        // 델리게이트 변수에 함수 연결
        sumHandler = Sum;
        // 델리게이트 실행
        float sum = sumHandler(10.0f, 5.0f);
        // 결괏값 출력
        Debug.Log($"Sum = {sum}");

        // 델리게이트 변수에 람다식 선언
        sumHandler = (float a, float b) => (a + b);
        float sum2 = sumHandler(10.0f, 5.0f);
        Debug.Log($"Sum2 = {sum2}");

        // 델리게이트 변수에 무명 메서드 연결
        sumHandler = delegate (float a, float b) { return a + b; };
        float sum3 = sumHandler(2.0f, 3.0f);
        Debug.Log($"Sum3 = {sum3}");
    }
}

델리게이트 타입의 변수 suHandler에 연결한 Sum 함수는 필요 없음

// 델리게이트 선언
delegate float SumHandler(float a, float b);

 

1. UnityAction 타입은 델리게이트로 정의돼 있으며 다음과 같은 람다식 문법을 사용

// UnityAction 을 사용한 이벤트 연결 방식
action = () => OnButtonClick(startButton.name);
startButton.onClick.AddListener(action);

 

2. 무명 메서드 문법 사용 : 델리게이트를 선언하고 델리게이트 타입으로 선언한 변수 없이 바로 사용가능

// 무명 메서드를 활용한 이벤트 연결 방식
optionButton.onClick.AddListener(delegate { OnButtonClick(optionButton.name); });

3. 무명 메서드 방식을 람다식 문법으로 사용 : 무명 메서드 방식을 간략화한 방식

// 람다식을 활용한 이벤트 연결 방식
shopButton.onClick.AddListener(() => OnButtonClick(shopButton.name));

 

 

반응형