처음부터 PICO 튜토리얼(4) --- UI 인터페이스 그리기 및 이벤트 응답

처음부터 PICO 튜토리얼(4) — UI 인터페이스 그리기 및 이벤트에 응답

I. 소개

1. 개요

이 튜토리얼을 마친 후에는 다음 내용을 배우게 됩니다.

1. UI 인터페이스 생성 및 그리기
2. UI 인터페이스의 요소에 응답 이벤트 추가

2. 튜토리얼 예시

기능:

• 클릭하면 숫자가 1 증가하고, 클릭하면 숫자가 1 감소합니다.
• 아래 숫자는 슬라이더에 따라 자동으로 변경됩니다.

2. 구체적인 단계

1. PICO VR 환경 구성

PICO의 VR 환경 구성을 만들고 완성합니다. 아직 구성하지 않았거나 구성 문제가 있는 학생은 이 PICO 시리즈(1): 실제 기계 작동을 위한 pico 환경 구성 및 게임 패키징을
참조하십시오 .

2. XR UI 캔버스 생성 및 조정

(1) 캔버스 소개

Canvas 구성 요소는 UI 요소를 만들고 관리하기 위한 컨테이너입니다. 사용자 인터페이스를 구축하기 위한 기본 구성 요소 중 하나이며 텍스트, 이미지, 버튼 등 다양한 UI 요소를 배치하는 데 사용할 수 있습니다.

캔버스 구성 요소에는 다음과 같은 중요한 속성이 있습니다.

• 렌더링 모드 : 캔버스의 렌더링 모드에 따라 화면에 나타나는 방식이 결정됩니다. 선택할 수 있는 세 가지 일반적인 렌더링 모드가 있습니다.

  • 화면 공간 - 오버레이 : 캔버스는 다른 모든 요소 위에 오버레이되며 장면에서 카메라가 움직일 때 움직이지 않습니다.
  • 화면 공간 - 카메라 : 캔버스는 지정된 카메라와 함께 이동하고 카메라의 시야 내에서 렌더링됩니다.
  • 월드 공간 : 캔버스는 장면에서 자체 좌표와 크기로 존재하며 다른 3D 개체처럼 이동하고 회전할 수 있습니다.

• 레이어 정렬(레이어 정렬) 및 레이어 순서(레이어 순서) : 캔버스는 레이어 정렬 및 레이어 순서 속성을 통해 렌더링 순서를 결정할 수 있습니다. 이는 캔버스에서 UI 요소의 스택 순서를 결정합니다.

• 캔버스 스케일러 : 캔버스 스케일러 속성은 캔버스 요소가 다양한 화면 해상도에서 크기를 조정하는 방법을 결정합니다. UI 요소의 일관성을 유지하기 위해 화면 크기와 해상도에 따라 적응적으로 크기가 조정됩니다.

  • Dynamic Pixeis Per Unit(단위당 텍스트 참조 픽셀) : 이 속성은 캔버스에서 텍스트 단위가 나타내는 픽셀 수를 결정합니다. 텍스트가 클수록 텍스트 표시가 더 선명해집니다. UI 요소의 실제 크기를 계산하는 데 사용됩니다.
  • Reference Pixels Per Unit(단위당 UI 참조 픽셀) : 이 속성은 캔버스에서 UI 단위가 나타내는 픽셀 수를 결정하며, 크기가 클수록 둥글게 됩니다.
    

Canvas 구성 요소 자체 외에도 다음과 같은 다른 UI 구성 요소를 Canvas에 추가할 수 있습니다.

이미지 : 그림이나 질감을 표시하는 데 사용됩니다.
텍스트 : 텍스트 내용을 표시하는데 사용됩니다.
버튼 : 인터랙티브 버튼을 생성하는데 사용됩니다.
슬라이더 : 수치 범위를 설정하는데 사용됩니다.
입력 필드 : 사용자가 입력한 텍스트를 수신하는 데 사용됩니다.
스크롤 뷰 : 많은 양의 콘텐츠를 표시하고 스크롤할 때 사용됩니다.

(2) 캔버스 캔버스 만들기

계층형 창 XR – 》 UI Canva
참고: UI에서 Canva
캔버스 크기 및 위치 조정을 선택하지 마세요.

3. UI 인터페이스 그리기

인터페이스를 시작하기 전에 아트보드를 컨테이너로 생성합니다.

(1) 패널 소개

패널 구성 요소는 UI 인터페이스에서 컨테이너 요소를 만드는 데 사용되는 기본 구성 요소 중 하나입니다. 텍스트, 이미지, 버튼 등과 같은 다른 UI 요소를 포함하고 레이아웃하는 데 사용할 수 있는 직사각형 영역입니다. 패널 구성 요소는 UI에서 다양하고 복잡한 레이아웃을 만들기 위한 몇 가지 일반적인 레이아웃 옵션과 기능을 제공합니다.

Panel 구성요소의 주요 속성과 기능은 다음과 같습니다.

변형 : 패널의 위치, 회전, 크기 조절 등 변형 속성을 설정할 수 있습니다.

Rect Transform : 패널의 직사각형 영역을 정의하며, 늘이기 및 조정을 통해 크기와 모양을 변경할 수 있습니다.

앵커 : 패널은 앵커 포인트를 통해 상위 컨테이너의 위치와 크기를 설정할 수 있습니다. 앵커 포인트는 상위 컨테이너의 테두리나 중앙에 고정되고 필요에 따라 조정될 수 있습니다.

피벗(중심점 ): 패널의 중심점은 크기 조정 및 회전 작업에 사용됩니다.

레이아웃 그룹 : 패널은 가로 레이아웃 그룹 또는 세로 레이아웃 그룹과 같은 레이아웃 구성 요소와 함께 사용되어 패널 내의 하위 요소를 자동으로 레이아웃할 수 있습니다. 레이아웃 구성요소는 일부 규칙(예: 간격, 크기, 정렬 등)에 따라 하위 요소의 위치와 크기를 자동으로 조정할 수 있습니다.

이미지 : 패널에는 배경 이미지나 기타 장식 요소를 표시하기 위한 이미지 구성 요소가 포함될 수 있습니다.

Raycast Target : 패널이 마우스 클릭 또는 터치 이벤트를 수신할지 여부를 결정합니다.

(2) 패널 생성

현재 캔버스는 여전히 보이지 않습니다. 이렇게 하려면
새 패널을


만들고 캔버스를 축소해야 합니다. Scale을 0.03으로 조정하는데 익숙해서 그리기에 편리합니다.

(3) 버튼 객체

UI --》Legacy --》 버튼
생성 버튼이


방금 생성되었습니다. 일부 사람들은 이와 같을 수 있습니다.
수정 사항:
1. Dynamic Pixeis Per Unit(단위당 텍스트 참조 픽셀), 값을 1에서 40으로 변경합니다. 명확성을 향상시킵니다. .
2. 180도 회전

3. Button 개체를 선택하고 T를 누릅니다. 행렬 편집 도구를 사용하여 크기를 편집하고 위치를 이동합니다.
4. 하위 개체의 Text(Legacy)에서 Text의 텍스트를 수정하여 늘리거나 줄입니다.

(4)텍스트 개체

UI --》Legacy --》Text

위와 동일하며, 텍스트 내용을 10, Alignment, Center alignment로 수정합니다.

4. 버튼의 응답 이벤트 바인딩

(1) UIController 제어 스크립트

이 스크립트는 버튼을 클릭한 후 발생하는 이벤트를 구현하는 역할을 합니다.
새 C# 스크립트 UIController 만들기

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

public class UIController : MonoBehaviour

    // Start is called before the first frame update
    public Text uiText; //待修改的文本
    public void OnAddButtonClick()
    {
        string text = uiText.text;  //获取文本的值
        int num=Int32.Parse(text);  //将文本转化为整数
        uiText.text = num + 1 + ""; //让整数+1 ，然后在+""
    }
    public void ONDecreateButtonClick()
    {
        string text=uiText.text;
        int num=Int32.Parse(text);
        uiText.text = num - 1 + "";
    }
}

버튼을 클릭한 후 호출되는 두 개의 공개 함수 OnAddButtonClick 및 ONDecreateButtonClick을 추가합니다.

(2) 새로운 UI 컨트롤러 빈 객체 생성

새로운 빈 개체 UIController를 만든 다음 여기에 UIController 스크립트를 할당합니다.
숫자를 표시하는 Text 개체 참조를 Ui Text에 넣습니다.

(3) 버튼 바인딩 이벤트

위의 세 가지 작업이 완료되면 Buton 바인딩 이벤트가 완료됩니다.

위와 같이 버튼 키 조작을 줄입니다.

실시간 미리보기 어플리케이션 테스트에는 문제가 없으며, 증가, 감소 이벤트는 정상적으로 실행됩니다.
여전히 실시간으로 미리 볼 수 없는 경우 다음 블로그를 참조하세요. PICO Tutorial from Scratch(2) – 실시간 미리 보기 애플리케이션 시나리오

5. 이벤트에 응답하기 위해 Slider를 생성하고 바인딩합니다.

이는 Button을 생성할 때와 매우 유사하며 공간 절약을 위해 유사한 작업은 스크린샷에 포함되지 않습니다.

(1) 슬라이더 및 텍스트 생성

UI --》Slider
UI --》Legacy --》Text
다음과 같이 UI를 별도로 생성하고 드래그합니다.

Slider 생성 시 방향이 잘못된 경우 Direction
값을 조정하고 Max Value를 100으로 조정 하면 됩니다.

(2) Slider의 응답 이벤트 생성

참고: Slider의 OnValueChanged 함수에는 Single 변수를 전달해야 하므로 작성 시 UIController 스크립트 에 주의 하고 다음과 같이 수정하시기 바랍니다.

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

public class UIController : MonoBehaviour
{
    // Start is called before the first frame update
    public Text uiText; //待修改的文本

     //---- UIController 新增内容
    public Text SliderText;
    public void OnChangeSlider(Single value)
    {
        SliderText.text = value + "";
    }
    //---- UIController 新增Slider的响应事件，让文本显示内容为传入的参数的值

    public void OnAddButtonClick()
    {
        string text = uiText.text;  //获取文本的值
        int num=Int32.Parse(text);  //将文本转化为整数
        uiText.text = num + 1 + ""; //让整数+1 ，然后在+""
    }
    public void ONDecreateButtonClick()
    {
        string text=uiText.text;
        int num=Int32.Parse(text);
        uiText.text = num - 1 + "";
    }

}

(3) 슬라이더 이벤트 바인딩

3. 종료

따라해 보면 최종 결과는 다음과 같습니다 . UI 인터페이스 그리기 및 이벤트 바인딩에 대한 첫 번째 숙달을 축하하며 VR 게임을 향한 중요한 단계를 밟았습니다.

이 튜토리얼은 Shenzhen University of Technology - Metaverse Developers Association에서 작성하고 제공합니다. 협회 이메일: [email protected]