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

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

文章目录

  • 从零开始的PICO教程（4）--- UI界面绘制与响应事件
    • 一、前言
      • 1、大纲
      • 2、教程示例
    • 二、具体步骤
      • 1、PICO VR环境配置
      • 2、XR的UI Canvas画布创建与调整
        • （1）Canvas简介
        • （2）创建Canvas 画布
      • 3、UI界面的绘制
        • （1）Panel简介
        • （2）Panel创建
        • （3）Button对象
        • （4）Text对象
      • 4、Button 的响应事件绑定
        • （1）UIController控制脚本
        • （2）新建UI控制器空对象
        • （3）Button绑定事件
      • 5、Slider的创建并绑定响应事件
        • （1）Slider和Text的创建
        • （2）创建Slider的响应事件
        • （3）Slider 事件绑定
    • 三、结束

一、前言

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 updatepublic 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 updatepublic 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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/74705.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

用滑动条做调色板---cv2.getTrackbarPos()，cv2.creatTrackbar()

用滑动条做调色板---cv2.getTrackbarPos()，cv2.creatTrackbar()

滑动轨迹栏作调色板 cv.createTrackbar(‘R’, ‘image’, 0, 255, nothing) 参数：哪个滑动轨迹栏，哪个窗口，最小值，最大值，回调函数 cv.getTrackbarPos(‘R’, ‘image’) 参数：轨迹栏名，窗口…
阅读更多...
【Matlab】Matlab实现数据的动态显示方法

【Matlab】Matlab实现数据的动态显示方法

Matlab实现数据的动态显示方法 主要为大家详细介绍了Matlab使用Plot函数实现数据动态显示方法，具有一定的参考价值，感兴趣的小伙伴们可 以参考一下 对于真实系统或者仿真平台，数据是增量式的产生的。Matlab除了强大的矩阵运算外，还…
阅读更多...
CSS 斜条纹进度条

CSS 斜条纹进度条

效果&#xff1a; 代码&#xff1a; html: <div class"active-line flex"><!-- lineWidth&#xff1a;灰色背景 --><div class"bg-line"><div v-for"n in 30" class"gray"></div></div><div…
阅读更多...
win10环境安装使用docker-maxwell

win10环境安装使用docker-maxwell

目的&#xff1a;maxwell可以监控mysql数据变化&#xff0c;并同步到kafka、mq或tcp等。 maxwell和canal区别&#xff1a; maxwell更轻量&#xff0c;canal把表结构也输出了 docker bootstrap可导出历史数据&#xff0c;canal不能 环境 &#xff1a;win10&#xff0c;mysql5…
阅读更多...
PYTHON（一）——认识python、基础知识

PYTHON（一）——认识python、基础知识

一、为什么要学习python&#xff1f; Python 被认为是人工智能、机器学习的首选语言&#xff0c;可以说是全世界最流行通用范围最广的语言&#xff0c;几乎可以完成所有的任务&#xff0c;像设计游戏、建网站、造机器人甚至人工智能等都广泛使用Python。 二、输出&#xff08;…
阅读更多...
机器学习——K最近邻算法（KNN）

机器学习——K最近邻算法（KNN）

机器学习——K最近邻算法&#xff08;KNN&#xff09; 文章目录 前言一、原理二、距离度量方法2.1. 欧氏距离2.2. 曼哈顿距离2.3. 闵可夫斯基距离2.4. 余弦相似度2.5. 切比雪夫距离2.6. 马哈拉诺比斯距离2.7. 汉明距离 三、在MD编辑器中输入数学公式&#xff08;额外&#xff0…
阅读更多...
门面设计模式

门面设计模式

github&#xff1a;GitHub - QiuliangLee/pattern: 设计模式 1 什么是门面设计模式 门面设计模式是一种软件设计模式&#xff0c;也被称为外观&#xff08;Facade&#xff09;模式。它提供了一个简单的接口&#xff0c;让客户端能够访问复杂系统中的一组接口。通过门面模式&a…
阅读更多...
企业架构LNMP学习笔记15

企业架构LNMP学习笔记15

客户端缓存&#xff1a; B/S架构里&#xff0c;Browser是浏览器&#xff0c;就是客户端。 客户端缓存告知浏览器获取服务段的信息是在某个区间时间段是有效的。 每次请求从服务器拿一遍数据&#xff0c;数据没有变化&#xff0c;影响带宽&#xff0c;影响时间。刷新又要去加载…
阅读更多...
Java中快速排序的优化技巧：随机取样、三数取中和插入排序

Java中快速排序的优化技巧：随机取样、三数取中和插入排序

目录 快速排序基础 优化1&#xff1a;随机取样 优化2&#xff1a;三数取中 优化3&#xff1a;插入排序 总结&#xff1a; 快速排序&#xff08;Quick Sort&#xff09;是一种高效的排序算法&#xff0c;它的平均时间复杂度为O(n log n)。然而&#xff0c;在某些情况下&…
阅读更多...
Python实现猎人猎物优化算法(HPO)优化BP神经网络回归模型(BP神经网络回归算法)项目实战

Python实现猎人猎物优化算法(HPO)优化BP神经网络回归模型(BP神经网络回归算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 猎人猎物优化搜索算法(Hunter–prey optimizer, HPO)是由Naruei& Keynia于2022年提出的一种最新的…
阅读更多...
spring boot-Resolved element must not contain multiple elements 警告

spring boot-Resolved element must not contain multiple elements 警告

首先强调一下&#xff0c;此问题不影响程序运行。 报错信息&#xff1a; package org.springframework.util; ...public abstract class Assert ...public static void state(boolean expression, String message) {if (!expression) {throw new IllegalStateException(messa…
阅读更多...
人工智能TensorFlow PyTorch物体分类和目标检测合集【持续更新】

人工智能TensorFlow PyTorch物体分类和目标检测合集【持续更新】

1. 基于TensorFlow2.3.0的花卉识别 基于TensorFlow2.3.0的花卉识别Android APP设计_基于安卓的花卉识别_lilihewo的博客-CSDN博客 2. 基于TensorFlow2.3.0的垃圾分类 基于TensorFlow2.3.0的垃圾分类Android APP设计_def model_load(img_shape(224, 224, 3)_lilihewo的博客-CS…
阅读更多...
flink 端到端一致性

flink 端到端一致性

背景 我们经常会混淆flink提供的状态一致性保证和数据端到端一致性保证的关系&#xff0c;总以为他们表达的是同一个意思&#xff0c;事实上&#xff0c;他们不是一个含义&#xff0c;flink只能保证其维护的内部状态的一致性&#xff0c;而数据端到端的一致性需要数据源&#…
阅读更多...
安装samba服务器

安装samba服务器

1.实验目的 &#xff08;1&#xff09;了解SMB和NETBIOS的基本原理 &#xff08;2&#xff09;掌握Windows和Linux之间&#xff0c;Linux系统之间文件共享的基本方法。 2.实验内容 &#xff08;1&#xff09;安装samba服务器。 &#xff08;2&#xff09;配置samba服务器的…
阅读更多...
unity 控制Dropdown的Arrow箭头变化

unity 控制Dropdown的Arrow箭头变化

Dropdown打开下拉菜单会以“Template”为模板创建一个Dropdown List&#xff0c;在“Template”上添加一个脚本在Start()中执行下拉框打开时的操作&#xff0c;在OnDestroy()中执行下拉框收起时的操作即可。 效果代码如下用于控制Arrow旋转可以根据自己的想法进行修改&#xff…
阅读更多...
算法：移除数组中的val的所有元素---双指针[2]

算法：移除数组中的val的所有元素---双指针[2]

文章来源&#xff1a; https://blog.csdn.net/weixin_45630258/article/details/132689237 欢迎各位大佬指点、三连 1、题目&#xff1a; 给你一个数组 nums和一个值 val&#xff0c;你需要原地移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用…
阅读更多...
【Proteus仿真】【STM32单片机】血压心率血氧体温蓝牙

【Proteus仿真】【STM32单片机】血压心率血氧体温蓝牙

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 系统运行后&#xff0c;LCD1604液晶显示心率、血氧、血压和体温&#xff0c;及其阈值&#xff1b;可通过K3键进入阈值设置模式&#xff0c;K1和K2加减调节&#xff0c;K4确定&#xff1b;当检测心率、血氧…
阅读更多...
linux 多重启动grub2详解

linux 多重启动grub2详解

https://www.gnu.org/software/grub/manual/grub/grub.pdf
阅读更多...
Linux C进程间通信（IPC）

Linux C进程间通信（IPC）

概述 每个进程有独立的进程空间&#xff1a; 好处————安全 缺点&#xff1a;开销大&#xff08;独立的地址空间&#xff09;&#xff1b;进程的通信更加困难&#xff08;对其他进程的操作开销也大&#xff09; 广义上的进程间通信&#xff1a; A进程写给文件/数据库&am…
阅读更多...
Python测试框架 Pytest —— mock使用（pytest-mock）

Python测试框架 Pytest —— mock使用（pytest-mock）

pytest-mock 安装&#xff1a;pip install pytest-mock 这里的mock和unittest的mock基本上都是一样的&#xff0c;唯一的区别在于pytest.mock需要导入mock对象的详细路径。 # weateher_r.py class Mock_weather():def weather(self):天气接口passdef weather_result(self):模…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023