유니티3D의 UI Toolkit (4) - 버튼 클릭 이벤트

오늘은 지난 게시글에 이어 버튼 클릭시 이벤트를 발생, 텍스트 글자가 바뀌는 부분을 다뤄보겠습니다.

https://itadventure.tistory.com/642

유니티3D의 UI Toolkit (3) - 배경창에 UI 배치하기

그리 다룰 부분은 많지는 않은데요.
짧게 마치도록 하겠습니다 :)

---

네이밍이 필요해

---

스크립트로 UI 요소를 제어하려면, 각 UI 요소마다 이름을 붙여 주어야 합니다.
배경창에 Popup 이라고 이름 지어주었듯이,
Label(레이블)과 Button(버튼)에도 이름을 지어주어야 하는데요.

1) UI요소를 선택하고
2) Inspector 창의 최상단 입력란에 이름을 붙여주면 됩니다.

각각 myLabel 과,

myButton 이란 이름을 붙여보도록 하겠습니다.

---

스크립트를 맹글어 볼까?

---

이제 C# 스크립트를 생성해야 하니, Ctrl+S 키로 저장하고, UI Builder 창을 닫거나 한쪽에 접어 주세요.

그리고 Assets 폴더에 Script 폴더를 생성하고, C# 스크립트를 하나 만들어 주세요.
스크립트 이름은 MyUI로 정하겠습니다. ( 이 부분은 아신다는 가정하에 상세한 설명은 넘어가겠습니다 )

이제 스크립트를 더블클릭, 비주얼 스튜디오 창을 열고,
아래 스크립트를 입력(복붙)해주시면 됩니다.

using UnityEngine;
using UnityEngine.UIElements;

public class myUi : MonoBehaviour
{
    Label myLabel;
    Button myButton;

    private void OnEnable()
    {
        // UIDocument 컴포넌트를 가져옵니다.
        var uiDocument = GetComponent<UIDocument>();

        // 루트 요소를 가져옵니다.
        var root = uiDocument.rootVisualElement;

        myLabel = root.Q<Label>("myLabel");
        myButton = root.Q<Button>("myButton");
        myButton.clicked += MyButton_clicked;
    }

    private void MyButton_clicked()
    {
        myLabel.text = "헬로우, 유니버스!";
    }
}

Ctrl + S 단축키로 스크립트를 저장하신 다음,
유니티 창으로 돌아와 Hierarchy ( 하이라키 ) 창에서 MainUI 오브젝트를 선택,

1) 금방 생성한 C# 스크립트를 클릭 드래그하여,
2) Inspector(인스펙터) 창 하단 빈 영역에 놓으시면 됩니다.

---

이제 실행!

---

이제 남은 것은 실행해서 결과를 보는 일만 남았습니다.
유니티 실행 버튼을 클릭한 다음,

버튼을 클릭하면, 글의 내용이 바뀌는 것을 보실 수 있습니다.

---

뭐.. 스크립트가 짧으니 세세한 설명은 제외하도록 하겠습니다.
UI Toolkit 에 대한 해외 예제 소스가 이 유형밖에 없더군요.

아무쪼록 필요하신 분께 도움이 되셨기를 바라며,
오늘도 방문해주신 모든 분들께 감사드립니다 :)

---

다음 게시글 : https://itadventure.tistory.com/644

유니티3D의 UI Toolkit (5) - 스크롤 UI