Unity UI에서 버튼 사용

페이지 업데이트 : 2023년 11월 28일 화요일

페이지 생성 날짜 : 2022년 3월 24일 목요일

검증 환경

윈도우

윈도우 11

유니티 에디터

2020.3.25에프1

이 팁의 전제 조건

이 팁을 설명하기 위한 전제 조건으로 다음 설정이 미리 이루어졌습니다.

처음에

단추는 사용자가 직접 클릭하는 개체로 사용하거나 "예" 또는 "아니요"와 같은 선택을 하는 데 사용할 수 있습니다. 좀 더 정교하게 설명하려면 단추를 개체로 사용하여 메뉴와 같은 목록 항목을 선택할 수 있습니다.

이 외에도 디버깅 목적과 버튼을 클릭하여 임의로 상태를 변경할 때도 사용할 수 있습니다.

버튼을 클릭하여 텍스트를 변경합니다.

버튼을 클릭하기만 하면 일부 처리가 수행됩니다. 이번에는 버튼을 클릭할 때마다 텍스트 번호가 1씩 증가합니다.

UI 배치 및 구성

계층의 텍스트와 단추를 뷰에 추가합니다.

볼 수 있는 곳에 두기만 하면 어디에나 놓을 수 있습니다. 초기 상태에서는 보기 어렵기 때문에 "흰색 텍스트 색상", "크기 변경", "글꼴 크기 확대" 등의 설정이 설정되어 있습니다. 텍스트의 내용은 나중에 자동으로 변경되므로 "새 텍스트"로 남겨 두셔도 됩니다.

버튼의 문자 설정은 "버튼"과 "텍스트"로 나뉘어 있기 때문에 텍스트를 선택하고 설정합니다.

스크립트 추가

프로젝트에서 Scenes 폴더를 선택하고, 빈 공간을 마우스 오른쪽 단추로 클릭하고, C# 스크립트를 선택하여 추가합니다. 원래는 별도의 폴더에 스크립트를 작성하는 것이 좋지만, 동작 확인을 위해 생략합니다.

파일 이름은 이해하기 쉬워야 합니다. 가능한 한 많은 영숫자를 입력합니다. ButtonClick 이 경우 로 설정됩니다.

만든 후 C# 스크립트를 두 번 클릭하여 스크립트 편집기를 엽니다. 스크립트 편집기가 Visual Studio인 경우 다음과 같이 표시되어야 합니다.

Start, 이번에는 방법이 필요하지 않으므로 삭제하고 Update 다시 작성하여 다음과 같이 저장하십시오.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;    // 追加

public class ButtonClick : MonoBehaviour
{
  /// <summary>カウントアップするテキストオブジェクト。</summary>
  [SerializeField] Text CountText;

  public void OnClick()
  {
  }
}

C#의 구문은 이 팁의 주요 주제가 아니므로 설명하지 않겠습니다. 스스로 공부해 보세요. Unity 관련 설명만 설명합니다.

MonoBehaviour 상속되는 클래스로 작성된 필드는 Unity 에디터에서 설정할 수 있습니다. CountText 여기서는 표시 public 하려면 를 사용하여 게시해야 합니다. SerializeField 그러나 속성을 public 추가하면 다른 접근성을 사용하여 편집기에 표시할 수 있습니다. 에디터에서 설정하는 목적 이외에 다른 클래스에서 가능한 한 많이 액세스하지 않으려는 경우 더 나은 설명입니다.

OnClick 단추를 클릭할 때 수행할 작업을 설명하는 메서드가 제공됩니다. public 이는 에서 정의해야 합니다.

Unity 에디터에서 연결

Unity 에디터로 돌아가서 계층 구조 EventSystem 에서 를 선택합니다.

EventSystem 인스펙터가 나타나면 방금 만든 C# 스크립트를 아래의 "구성 요소 추가" 영역에 놓습니다. 이제 스크립트를 사용할 준비가 되었습니다.

실제로 이 스크립트는 모든 개체에 연결할 수 있으며 Button 개체에 연결되어야 합니다. 이 팁에서는 균일하게 이해하기 EventSystem 쉽도록 에 추가합니다. Button 물론 에 붙여도 문제 없습니다. 그러나 혼동을 일으킬 수 있으므로 완전히 관련없는 개체에 연결하지 않는 것이 좋습니다.

추가한 스크립트를 보면 "텍스트 계산" 항목이 표시되는 것을 볼 수 있습니다. 이러한 방식으로 필드를 게시하면 Unity 에디터에서 값을 설정할 수 있습니다. 버튼을 클릭할 때 text 객체에 액세스하고 싶기 때문에 계층 구조 Text 에서 드래그하여 Count Text 에 놓습니다. 이렇게 하면 언제든지 스크립트에서 액세스할 수 있습니다.

그런 다음 계층 구조 Button 에서 선택하고 인스펙터 Button 의 On Click 아래에서 + 를 클릭합니다.

그러면 하나의 항목이 추가됩니다.

오른쪽 하단 항목에는 계층 구조에서 첨부 된 스크립트를 삭제했습니다 EventSystem . 스크립트가 첨부된 객체를 여기에 넣어야 하기 때문에, Button에 스크립트를 첨부하는 경우 Button을 포함해야 합니다.

"기능 없음"을 클릭하면 첨부 된 스크립트가 표시되므로 ButtonClick 를 선택하십시오. 그 안에서 만든 OnClick 메서드를 선택합니다. 이제 버튼을 클릭하면 메서드가 호출됩니다 OnClick .

버튼 클릭으로 로그 출력

작동하는지 확인하기 위해 로그를 출력합니다. 한 줄만 써도 동작하는지 확인할 수 있고, 앞으로의 디버깅에 매우 유용하기 때문에 기억해 두는 것이 좋습니다.

ButtonClick 스크립트를 OnClick 열고 에 다음을 추가합니다.

public void OnClick()
{
  // コンソール ログを出力
  Debug.Log("ボタンが押されました！");
}

입력하고 저장한 후 게임을 실행하고 버튼을 클릭합니다.

클릭할 때마다 콘솔 탭에 메시지가 나타납니다. 이제 작동하는 것을 볼 수 있습니다.

버튼 클릭으로 텍스트 변경

이제 버튼을 이동할 수 있으므로 이 팁의 목적이 달성되었습니다. 이제 텍스트 개체를 배치했으므로 버튼을 클릭할 때마다 텍스트를 변경하려고 합니다.

다음과 같이 스크립트를 다시 작성합니다.

// 省略

public class ButtonClick : MonoBehaviour
{
  /// <summary>カウントアップするテキストオブジェクト。</summary>
  [SerializeField] Text CountText;

  /// <summary>クリックカウント。</summary>
  private int _counter = 0;

  public void OnClick()
  {
    // コンソール ログを出力
    Debug.Log("ボタンが押されました！");

    // カウントを増やす
    _counter++;

    // カウントした数を表示する
    CountText.text = _counter.ToString();
  }
}

내용은 단순히 클릭할 때마다 카운트를 1씩 증가시키고 숫자를 텍스트 개체로 설정하는 것입니다.

게임을 실행하고 클릭할 때마다 숫자가 증가하는지 확인하십시오.

카메라(2D)를 캔버스에 맞춥니다.

Unity UI 드롭다운 사용