PICO tutorial from scratch (4) --- UI interface drawing and responding to events

PICO Tutorial from Scratch (4) — UI Interface Drawing and Responding to Events

I. Introduction

1. Outline

After this tutorial you will learn

1. Create and draw UI interface
2. Add response events to elements in the UI interface

2. Tutorial examples

Function:

• Click to increase the number by 1, click to decrease the number by 1
• The numbers below change automatically with the slider.

2. Specific steps

1. PICO VR environment configuration

Create and complete PICO's VR environment configuration.
Students who have not configured it yet/have configuration problems can refer to this
PICO series (1): pico environment configuration and game packaging for real-machine operation.

2. XR UI Canvas creation and adjustment

(1) Introduction to Canvas

The Canvas component is a container for creating and managing UI elements. It is one of the basic components for building user interfaces and can be used to place various UI elements such as text, images, buttons, etc.

The Canvas component has the following important properties:

• Render Mode : The rendering mode of a Canvas determines how it appears on the screen. There are three common rendering modes to choose from:

  • Screen Space - Overlay : The Canvas will be overlaid on top of all other elements and will not move as the camera moves in the scene.
  • Screen Space - Camera : The Canvas will move with the specified camera and render within the camera's field of view.
  • World Space : Canvas exists with its own coordinates and dimensions in the scene and can be moved and rotated like other 3D objects.

• Sorting Layer (sorting layer) and Order in Layer (order in layer) : Canvas can determine its rendering order through the Sorting Layer and Order in Layer properties. This determines the stacking order of UI elements on the Canvas.

• Canvas Scaler : The Canvas Scaler property determines how the Canvas element scales at different screen resolutions. It scales adaptively based on screen size and resolution to keep UI elements consistent.

  • Dynamic Pixeis Per Unit (text reference pixels per unit) : This attribute determines the number of pixels represented by a Text unit in the Canvas. The larger the text, the clearer the text display. It is used to calculate the actual size of UI elements.
  • Reference Pixels Per Unit (UI reference pixels per unit) : This attribute determines the number of pixels represented by a UI unit in the Canvas. The larger it is, the rounder it is.
    

In addition to the Canvas component itself, other UI components can be added to the Canvas, such as:

Image : used to display pictures or textures.
Text : used to display text content.
Button : Used to create interactive buttons.
Slider : used to set the numerical range.
Input Field : Used to receive text entered by the user.
Scroll View : Used to display large amounts of content and scroll through it.

(2) Create Canvas canvas

Hierarchical window XR – 》 UI Canva Note: Do not select Canva canvas size and position adjustment
under UI

3. Drawing of UI interface

Before starting the interface, create an artboard as a container

(1) Introduction to Panel

The Panel component is one of the basic components used to create container elements in UI interfaces. It is a rectangular area that can be used to contain and layout other UI elements such as text, images, buttons, etc. The Panel component provides some common layout options and functions to create various complex layouts in the UI.

Here are some of the main properties and functions of the Panel component:

Transform : You can set the transformation attributes such as Panel's position, rotation and scaling.

Rect Transform : Defines the rectangular area of ​​the Panel, which can be resized and reshaped by stretching and adjusting.

Anchors : Panel can set the position and size in the parent container through anchor points. Anchor points can be fixed to the border or center of the parent container and adjusted as needed.

Pivot (center point ): The center point of the Panel is used for scaling and rotation operations.

Layout Group : Panel can be used with layout components, such as Horizontal Layout Group or Vertical Layout Group, to automatically layout the child elements within the Panel. Layout components can automatically adjust the position and size of child elements based on some rules (such as spacing, size, alignment, etc.).

Image : Panel can contain an Image component for displaying background images or other decorative elements.

Raycast Target : Determines whether the Panel receives mouse click or touch events.

(2) Panel creation

The current canvas is still invisible. To do this, you need to create a
new Panel


and shrink the canvas. I am used to adjusting the Scale to 0.03, which is convenient for drawing.

(3) Button object

UI --》Legacy --》 Button
creation A Button


has just been created. Some people may be like this.
Things to modify:
1. Dynamic Pixeis Per Unit (text reference pixels per unit), change the value from 1 to 40 to improve clarity. .
2. Rotate 180 degrees.

3. Select the Button object and press T. Use the matrix editing tool to edit the size and move position.
4. Modify the text of Text in the Text (Legacy) of the sub-object to increase or decrease

(4)Text object

UI --》Legacy --》Text

Same as above. Modify the text content to 10, Alignment, and center alignment.

4. Button’s response event binding

(1) UIController control script

This script will be responsible for implementing the events that occur after the button is clicked.
Create a new C# script 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 + "";
    }
}

Add two public functions OnAddButtonClick and ONDecreateButtonClick, which will be called after the Button is clicked.

(2) Create a new UI controller empty object

Create a new empty object UIController, and then assign the UIController script to it.
Put the Text object reference that displays the number into Ui Text

(3) Button binding event

After the above three operations are completed, the Buton binding event is completed.

Reduce Button key operations as above.

There is no problem when testing the real-time preview application, and the increasing and decreasing events are executed normally.
If you still can’t preview in real time, you can refer to this blog: PICO Tutorial from Scratch (2) – Real-time Preview Application Scenario

5. Create and bind Slider to respond to events

It is very similar to when creating Button. Similar operations will not be screenshotted to save space.

(1) Creation of Slider and Text

UI --》Slider
UI --》Legacy --》Text
Create and drag the UI separately as follows:

If the direction of the Slider is wrong when it is created, you can adjust the Direction
value and adjust the Max Value to 100

(2) Create Slider’s response event

Note: Slider's OnValueChanged function requires passing in a variable Single. When writing, please pay attention to
the script UIController and modify it as follows.

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) Slider event binding

3. End

Here's the end result

when you follow along. Congratulations on your initial mastery of UI interface drawing and event binding. You have taken an important step towards VR gaming.

This tutorial is written and provided by: Shenzhen University of Technology – Metaverse Developers Association. Association email: [email protected]