上海网站开发怎么做,襄阳网站建设哪家好,类似谷德设计网的网站,河北建设银行官网招聘网站从零开始的PICO教程#xff08;4#xff09;— UI界面绘制与响应事件 文章目录 从零开始的PICO教程#xff08;4#xff09;--- UI界面绘制与响应事件一、前言1、大纲2、教程示例 二、具体步骤1、PICO VR环境配置2、XR的UI Canvas画布创建与调整#xff08;1#xff09;C…从零开始的PICO教程4— UI界面绘制与响应事件 文章目录 从零开始的PICO教程4--- UI界面绘制与响应事件一、前言1、大纲2、教程示例 二、具体步骤1、PICO VR环境配置2、XR的UI Canvas画布创建与调整1Canvas简介2创建Canvas 画布 3、UI界面的绘制1Panel简介2Panel创建3Button对象4Text对象 4、Button 的响应事件绑定1UIController控制脚本2新建UI控制器空对象3Button绑定事件 5、Slider的创建并绑定响应事件1Slider和Text的创建2创建Slider的响应事件3Slider 事件绑定 三、结束 一、前言
1、大纲
经过该教程你将学会
创建并绘制UI界面为UI界面中的元素添加响应事件
2、教程示例 功能
点击增加 数字加1、点击减少 数字减1下面的数字跟随滑动条自动变化。
二、具体步骤
1、PICO VR环境配置
创建并完成PICO 的VR环境配置 还没配置好/配置有问题的同学可以参考这一篇 PICO系列一pico环境配置与游戏打包实机运行
2、XR的UI Canvas画布创建与调整
1Canvas简介
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 UnitUI参考像素每单位这个属性确定了Canvas中一个UI单位所代表的像素数量越大越圆润
除了Canvas组件本身可以在Canvas上添加其他UI组件比如
Image图片用于显示图片或纹理。 Text文本用于显示文本内容。 Button按钮用于创建交互式按钮。 Slider滑动条用于设置数值范围。 Input Field输入框用于接收用户输入的文本。 Scroll View滚动视图用于显示大量内容并进行滚动查看。
2创建Canvas 画布
层级窗口 XR – 》 UI Canva 注不要选UI下的 Canva 画布大小、位置调整
3、UI界面的绘制
在界面开始前要创建画板做为容器
1Panel简介
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是否接收鼠标点击或触摸事件。
2Panel创建
目前的画布还是不可见的为此需要创建一个画板 新建Panel 将画布缩小。我习惯调整Scale为0.030.03方便绘制。
3Button对象
UI --》Legacy --》 Button 创建一个 Button 刚创建有些人可能是这样的 要修改的地方 1、 Dynamic Pixeis Per Unit文本参考像素每单位值从1改为40提高清晰度。 2、旋转180度 3、选定Button对象 按T 用矩阵编辑工具编辑大小和移动位置。 4、在子对象的TextLegacy中修改 Text的文本为增加和减少
4Text对象
UI --》Legacy --》 Text 同上修改text 内容为10Alignment居中对齐。
4、Button 的响应事件绑定
1UIController控制脚本
该脚本将负责实现按键的点击之后的发生事件。 新建一个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 numInt32.Parse(text); //将文本转化为整数uiText.text num 1 ; //让整数1 然后在}public void ONDecreateButtonClick(){string textuiText.text;int numInt32.Parse(text);uiText.text num - 1 ;}
}增加两个public 函数OnAddButtonClick和ONDecreateButtonClick点击Button之后将会调用该函数。
2新建UI控制器空对象
新建一个空对象UIController然后将UIController脚本赋值给它。 将显示数字的文本Text对象引用放到Ui Text里面
3Button绑定事件 以上三个操作完成之后Buuton绑定事件完成。
减少Button的按键操作同上。 实时预览应用测试的时候没有问题增加和减少事件正常执行。 如果还不能实时预览可以参考这篇博客从零开始的PICO教程2–实时预览应用场景
5、Slider的创建并绑定响应事件
与创建Button的时候大同小异相似的操作为了节省篇幅就不截屏了。
1Slider和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 numInt32.Parse(text); //将文本转化为整数uiText.text num 1 ; //让整数1 然后在}public void ONDecreateButtonClick(){string textuiText.text;int numInt32.Parse(text);uiText.text num - 1 ;}}3Slider 事件绑定 三、结束
最终结果如下 当你跟着做到这的时候。恭喜你初步掌握了UI界面的绘制与事件绑定迈出了VR游戏的重要一步
该教程由深圳技术大学 – 元宇宙开发者协会 撰写提供。协会邮箱2981007652qq.com
