본문 바로가기
카테고리 없음

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

반응형

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

https://itadventure.tistory.com/642

 

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

한글 폰트가 아쉬워, 유니티의 UI 툴킷을 살펴보는 중 한가지 아쉬운 소식을 전해드리자면, 미려한 예쁜 한글 폰트가 제대로 적용이 안된다는 것입니다. ( 유니티 2022. 3. 9f1 버전 기준 ) 물론 아직

itadventure.tistory.com

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


네이밍이 필요해

스크립트로 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

유니티 3D 의 UI Toolkit 에는 아래와 같은 스크롤 화면을 구성할 수 있는 UI 가 있는데요. 오늘은 해당 부분을 알아보도록 하겠습니다. 크리스마스 시즌이 다가오는 군요. 신나는 CCM 성탄 음악 영상

itadventure.tistory.com

 

반응형