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

news2025/1/17 18:04:17

从零开始的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 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

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

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

相关文章

【雷达原理】雷达信号级建模与仿真

【雷达原理】雷达信号级建模与仿真

目录 前言一、LFMCW信号概述1.1 优点1.2 缺点 二、LFMCW信号模型2.1 发射信号模型2.2 接收信号模型2.3 信号混频 三、MATLAB仿真3.1 仿真结果3.2 代码 四、参考文献 前言 雷达信号形式多种多样，按照雷达的体制进行分类，有脉冲雷达和连续波雷达。脉冲雷达…
阅读更多...
C#程序到底从哪里开始看，从Main函数开始，那么Main函数是什么？

C#程序到底从哪里开始看，从Main函数开始，那么Main函数是什么？

视觉人机器视觉粉丝问我，拿到自己公司得架构，问我，C#程序到底从哪里看，从Main函数开始，那么Main函数是什么？ Main()函数 Main()是C#应用程序的入口点，执行这个函数就是执行应用程序。也就是说，在执行过程开始时，会执行Main()函数，在Main（）函数执行完毕时，执行过…
阅读更多...
微信小程序上拉触底事件

微信小程序上拉触底事件

一、什么是上拉触底事件 上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。 二、监听上拉触底事件 在页面的.js文件中，通过onReachBottom()函数即可监听当前页面的上拉触底事件。 三、配置上拉触底距…
阅读更多...
vue组件库开发，webpack打包，发布npm

vue组件库开发，webpack打包，发布npm

做一个像elment-ui一样的vue组件库 那多好啊！这是我前几年就想做的 但webpack真的太难用，也许是我功力不够 今天看到一个视频，早上6-13点，终于实现了，呜呜 感谢视频的分享-来龙去脉-大家可以看这个视频：htt…
阅读更多...
【List篇】ArrayList 的线程不安全介绍

【List篇】ArrayList 的线程不安全介绍

ArrayList 为什么线程不安全？ 主要原因是ArrayList是非同步的,没有同步机制,并且其底层实现是基于数组，而数组的长度是固定的。当对 ArrayList 进行增删操作时，需要改变数组的长度，这就会导致多个线程可能同时操作同一个数组&…
阅读更多...
Unlikely argument type for equals(): int seems to be unrelated to String

Unlikely argument type for equals(): int seems to be unrelated to String

前面字符串 后面数值 if (new Integer(2).equals(loginUser.getStatus())) 或者另外定义一个吧
阅读更多...
JAVASE 窗口

JAVASE 窗口

本文目录 1、前言2、JFrame、JButton3、JLabl4、ImageIcon 1、前言 java提供了很多已经写好了的类供我们使用，而我们没必要去细腻研究它的构成原理，就好比我们让我们编程让机器人动起来，没必要细腻研究机器人每个器件是怎么做出来的一样&…
阅读更多...
Qt Designer UI设计布局小结

Qt Designer UI设计布局小结

目录 前言1 居中布局2 左右布局3 上下布局4 复杂页面布局总结 前言 本文总结了在开发Qt应用程序时使用 Designer 进行UI布局的一些心得体会。Qt Designer是Qt提供的一个可视化界面设计工具，旨在帮助开发人员快速创建和布局用户界面。它提供了丰富的布局管理器和控件…
阅读更多...
系统架构设计专业技能 · 计算机组成与结构

系统架构设计专业技能 · 计算机组成与结构

现在的一切都是为将来的梦想编织翅膀，让梦想在现实中展翅高飞。 Now everything is for the future of dream weaving wings, let the dream fly in reality. 点击进入系列文章目录 系统架构设计高级技能 计算机组成与结构 一、计算机结构1.1 CPU 组成1.2 冯诺依曼…
阅读更多...
【数据结构-队列】阻塞队列

【数据结构-队列】阻塞队列

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…
阅读更多...
vue学习之 v-for key

vue学习之 v-for key

v-for key Vue使用 v-for渲染的元素列表时&#xff0c;它默认使用“就地更新”的策略。如果数据项的顺序被改变&#xff0c;Vue 将不会移动 DOM元素来匹配数据项的顺序&#xff0c;而是就地更新每个元素。创建 demo9.html,内容如下 <!DOCTYPE html> <html lang"…
阅读更多...
60、RESTful 的高级配置---HttpMessageConverter

60、RESTful 的高级配置---HttpMessageConverter

★ HttpMessageConverter的作用 RequestBody修饰处理方法的参数&#xff0c;如获取json格式的数据&#xff0c;将json格式的数据转换成我们需要的java对象&#xff0c; ResponseBody 这些把对象转成json格式响应给前端&#xff0c; 底层都是由这个HttpMessageConverter类实现的…
阅读更多...
【Redis专题】大厂生产级Redis高并发分布式锁实战

【Redis专题】大厂生产级Redis高并发分布式锁实战

目录 前言课程内容一、一个案例引发的思考二、Redis分布式锁的演进2.1 单纯使用Redis的setnx实现分布式锁2.2 setnx 过期时间3.3 Redisson实现分布式锁&#xff1a;setnx 过期时间 锁续命 三、Redisson客户端实现的分布式锁及源码分析 学习总结 前言 Redis中间件&#xff0…
阅读更多...
文件上传之图片码混淆绕过（upload的16,17关）

文件上传之图片码混淆绕过（upload的16,17关）

目录 1.upload16关 1.上传gif loadup17关&#xff08;文件内容检查&#xff0c;图片二次渲染&#xff09; 1.上传gif&#xff08;同上面步骤相同&#xff09; 2.条件竞争 1.upload16关 1.上传gif imagecreatefromxxxx函数把图片内容打散&#xff0c;&#xff0c;但是不会…
阅读更多...
Selenium - Tracy 小笔记2

Selenium - Tracy 小笔记2

selenium本身是一个自动化测试工具。 它可以让python代码调用浏览器。并获取到浏览器中加们可以利用selenium提供的各项功能。帮助我们完成数据的抓取。它容易被网站识别到&#xff0c;所以有些网站爬不到。 它没有逻辑&#xff0c;只有相应的函数&#xff0c;直接搜索即可 …
阅读更多...
dubbo 服务注册使用了内网IP,而服务调用需要使用公网IP进行调用

dubbo 服务注册使用了内网IP,而服务调用需要使用公网IP进行调用

一、问题描述&#xff1a; 使用dubbo时&#xff0c;提供者注册时显示服务地址ip为[内网IP:20880]&#xff0c;导致其他消费者在外部连接的情况下时&#xff0c;调用dubbo服务失败 二、解决办法 方法一、修改hosts文件 &#xff08;1&#xff09;. 先查询一下服务器的hostna…
阅读更多...
【动态规划刷题 13】最长递增子序列 摆动序列

【动态规划刷题 13】最长递增子序列 摆动序列

300. 最长递增子序列 链接: 300. 最长递增子序列 1.状态表示* dp[i] 表⽰&#xff1a;以 i 位置元素为结尾的「所有⼦序列」中&#xff0c;最⻓递增⼦序列的⻓度。 2.状态转移方程 对于 dp[i] &#xff0c;我们可以根据「⼦序列的构成⽅式」&#xff0c;进⾏分类讨论&#…
阅读更多...
RabbitMQ管控台使用

RabbitMQ管控台使用

安装成功RabbitMQ后&#xff0c;进入到管理控制台界面 拷贝配置文件到指定目录当中然后重启RabbitMQ。
阅读更多...
FIR滤波器简述及FPGA仿真验证

FIR滤波器简述及FPGA仿真验证

数字滤波器的设计&#xff0c;本项目做的数字滤波器准确来说是FIR滤波器。 FIR滤波器&#xff08;有限冲激响应滤波器&#xff09;&#xff0c;与另一种基本类型的数字滤波器——IIR滤波器&#xff08;无限冲击响应滤波器&#xff09;相对应&#xff0c;其实就是将所输入的信号…
阅读更多...
算法通关村第十九关——动态规划是怎么回事（青铜）

算法通关村第十九关——动态规划是怎么回事（青铜）

算法通关村第十九关——动态规划是怎么回事&#xff08;青铜&#xff09; 前言1 什么是动态规划2 动态规划的解题步骤3 简单入门3.1 组合总和3.2 最小路径和3.3 三角形最小路径和 4 理解动态规划 前言 动态规划是一种解决复杂问题的算法思想&#xff0c;它将一个大问题分解为多…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023