从零开始的PICO教程(4)--- UI界面绘制与响应事件

从零开始的PICO教程(4)— UI界面绘制与响应事件

一、前言

1、大纲

经过该教程你将学会

  1. 创建并绘制UI界面
  2. 为UI界面中的元素添加响应事件

2、教程示例

在这里插入图片描述
功能:

  • 点击增加 数字加1、点击减少 数字减1
  • 下面的数字跟随滑动条自动变化。

二、具体步骤

1、PICO VR环境配置

创建并完成PICO 的VR环境配置
还没配置好/配置有问题的同学可以参考这一篇
PICO系列(一):pico环境配置与游戏打包实机运行

2、XR的UI Canvas画布创建与调整

(1)Canvas简介

Canvas组件是用于创建和管理UI元素的容器。它是构建用户界面的基本组件之一,可以用于放置各种UI元素,如文本、图像、按钮等。

Canvas组件有以下几个重要属性:

  • Render Mode(渲染模式):Canvas的渲染模式确定了它在屏幕上的呈现方式。有三种常见的渲染模式可供选择:

    • Screen Space - Overlay(屏幕空间-覆盖):Canvas将覆盖在所有其他元素之上,不会随着场景中的相机移动而移动。
    • Screen Space - Camera(屏幕空间-相机):Canvas会随着指定的相机移动,并在相机的视野内进行渲染。
    • World Space(世界空间):Canvas在场景中以自己的坐标和尺寸存在,可以像其他3D对象一样进行移动和旋转。
  • Sorting Layer(排序层)和 Order in Layer(层内顺序):Canvas可以通过Sorting Layer和Order in Layer属性来确定其渲染顺序。这决定了UI元素在Canvas上的叠放顺序。

  • Canvas Scaler(画布缩放器):Canvas Scaler属性用于确定Canvas元素如何在不同屏幕分辨率下进行缩放。它可以根据屏幕尺寸和分辨率进行自适应缩放,以保持UI元素的一致性。

    • Dynamic Pixeis Per Unit(文本参考像素每单位):这个属性确定了Canvas中一个Text单位所代表的像素数量,越大text显示的越清晰。它用于计算UI元素的实际大小。
    • Reference Pixels Per Unit(UI参考像素每单位):这个属性确定了Canvas中一个UI单位所代表的像素数量,越大越圆润
      在这里插入图片描述

除了Canvas组件本身,可以在Canvas上添加其他UI组件,比如:

Image(图片):用于显示图片或纹理。
Text(文本):用于显示文本内容。
Button(按钮):用于创建交互式按钮。
Slider(滑动条):用于设置数值范围。
Input Field(输入框):用于接收用户输入的文本。
Scroll View(滚动视图):用于显示大量内容并进行滚动查看。

(2)创建Canvas 画布

层级窗口 XR – 》 UI Canva
注:不要选UI下的 Canva
在这里插入图片描述画布大小、位置调整

3、UI界面的绘制

在界面开始前要创建画板做为容器

(1)Panel简介

Panel组件是用于创建UI界面中的容器元素的基本组件之一。它是一个矩形区域,可以用来包含和布局其他UI元素,例如文本、图像、按钮等。Panel组件提供了一些常见的布局选项和功能,以便在UI中创建各种复杂的布局。

以下是Panel组件的一些主要属性和功能:

Transform:可以设置Panel的位置、旋转和缩放等变换属性。

Rect Transform:定义Panel的矩形区域,可以通过拉伸和调整来调整大小和形状。

Anchors(锚点):Panel可以通过锚点设置在父级容器中的位置和大小。锚点可以固定在父级容器的边界或中心,并根据需要进行调整。

Pivot(中心点):Panel的中心点用于进行缩放和旋转操作。

Layout Group(布局组件):Panel可以与布局组件一起使用,例如Horizontal Layout Group或Vertical Layout Group,用于自动布局Panel内的子元素。布局组件可以根据一些规则(例如间距、大小、对齐等)自动调整子元素的位置和大小。

Image(图片):Panel可以包含一个Image组件,用于显示背景图片或其他装饰性元素。

Raycast Target(射线检测目标):确定Panel是否接收鼠标点击或触摸事件。

(2)Panel创建

目前的画布还是不可见的,为此需要创建一个画板
新建Panel
在这里插入图片描述
在这里插入图片描述
将画布缩小。我习惯调整Scale为0.03,0.03方便绘制。
在这里插入图片描述

(3)Button对象

UI --》Legacy --》 Button
创建一个 Button
在这里插入图片描述
在这里插入图片描述
刚创建,有些人可能是这样的
要修改的地方:
1、 Dynamic Pixeis Per Unit(文本参考像素每单位),值从1改为40,提高清晰度。在这里插入图片描述
2、旋转180度
在这里插入图片描述
3、选定Button对象 按T 用矩阵编辑工具,编辑大小和移动位置。
4、在子对象的Text(Legacy)中修改 Text的文本为增加和减少
在这里插入图片描述

(4)Text对象

UI --》Legacy --》 Text
在这里插入图片描述
同上修改text 内容为10,Alignment,居中对齐。

4、Button 的响应事件绑定

(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 + "";
    }
}

增加两个public 函数OnAddButtonClick和ONDecreateButtonClick,点击Button之后将会调用该函数。

(2)新建UI控制器空对象

新建一个空对象UIController,然后将UIController脚本赋值给它。
将显示数字的文本Text对象引用放到Ui Text里面
在这里插入图片描述

(3)Button绑定事件

在这里插入图片描述
以上三个操作完成之后,Buuton绑定事件完成。

减少Button的按键操作同上。
在这里插入图片描述
实时预览应用测试的时候没有问题,增加和减少事件正常执行。
如果还不能实时预览可以参考这篇博客:从零开始的PICO教程(2)–实时预览应用场景

5、Slider的创建并绑定响应事件

与创建Button的时候大同小异,相似的操作为了节省篇幅就不截屏了。

(1)Slider和Text的创建

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)Slider 事件绑定

在这里插入图片描述
在这里插入图片描述

三、结束

最终结果如下
在这里插入图片描述
当你跟着做到这的时候。恭喜你初步掌握了UI界面的绘制与事件绑定,迈出了VR游戏的重要一步

该教程由:深圳技术大学 – 元宇宙开发者协会 撰写提供。协会邮箱:2981007652@qq.com

  • 1
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: 树莓派Pico是树莓派推出的一款微型电脑,Pico中文版是针对中国市场推出的版本。Pico-Python-SDK是树莓派官方提供的软件开发工具包,用于编写和运行Python程序。Pico-Python-SDK中文版是根据中国用户的需求进行本土化开发的版本。 树莓派Pico是一款体积小巧但功能强大的微型电脑,搭载了ARM Cortex-M0+处理器和26个GPIO口,可用于连接各种传感器、执行各种控制任务。同时,Pico支持MicroPython和C/C++两种编程语言,非常适合初学者和嵌入式系统开发人员。 Pico-Python-SDK中文版是官方提供的软件开发工具包,它提供了一系列的API和库函数,可以帮助开发者更方便地编写和调试Python程序。无论是控制外部硬件设备还是实现各种功能,Pico-Python-SDK都提供了丰富的功能和示例代码,使开发工作更加便捷。 Pico-Python-SDK中文版还提供了中文文档和教程,有助于开发者更快速地上手。通过学习这些文档和教程,开发者可以了解Pico的基本原理、功能特性以及编程方法,从而高效地开发出各种应用。 总的来说,树莓派Pico-Python-SDK中文版为中国用户提供了一个方便、易用的软件开发平台,帮助开发者快速上手并实现各种创意和项目。无论是学习编程还是进行嵌入式系统开发,Pico-Python-SDK中文版都是一个不错的选择。 ### 回答2: 树莓派pico-python-sdk-中文版是为了方便中国开发者使用而推出的一款软件开发工具包。它是基于树莓派pico微控制器设计的,通过使用Python语言进行开发。该SDK提供了丰富的功能和接口,使得使用者能够轻松地进行树莓派pico的开发工作。 树莓派pico-python-sdk-中文版包含了各种模块和库,如GPIO库、PWM库、I2C库、SPI库等,这些库可以帮助开发者通过编写Python代码来操控各种外设和传感器。例如,使用GPIO库可以控制LED灯的开关,使用PWM库可以控制舵机的转动,使用I2C库可以与其他设备进行通信,使用SPI库可以实现高速数据传输等等。 此外,树莓派pico-python-sdk-中文版还提供了丰富的示例代码和文档,帮助开发者快速上手。开发者可以参考这些示例代码和文档,了解如何使用SDK中的功能和接口,从而加速自己的开发进程。 总之,树莓派pico-python-sdk-中文版是一款功能强大、易于学习和使用的软件开发工具包。它不仅方便中国开发者使用树莓派pico进行开发工作,还提供了丰富的功能和接口,使得开发者能够更加便捷地实现各种应用和项目。无论是初学者还是有经验的开发者,都可以通过使用这个SDK来实现自己的创意和想法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

风吹落叶花飘荡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值