资讯 热点 聚焦 探测 工具 行业 公司 行情 市场 招标
您的位置: 首页>热点 > >正文
2023-02-13 22:12:50 来源:哔哩哔哩

首先我们需要明确的是——3D UI是什么?

Ⅰ、3D UI本质上,依然是UI


(相关资料图)

是UI,就需要承担UI的交互职能

例如:

当我们点击UI上的按钮(Button)时,按钮(Button)会带来交互反馈,并触发设定的事件,以达到逻辑运行的目的。

拥有这些UI的特征,并且以3D形式呈现的“UI”,归于今天说到的——3D UI

Ⅱ、3D UI大体上可以分为两种

其一,是位于3D场景中,不跟随游戏窗口(Game)运动而运动的UI。它更像是一个位于3D场景中的物件,并带有UI的交互特征,我们可以尝试将其定义为——场景化UI

其二,是始终位于游戏窗口(Game)上,和常规的UI一样。但3D UI可以进行XYZ三个轴上的运动,带来明显的透视变化,我们可以尝试将其定义为——透视UI

值得注意的一点是,可爱的UI设计师们,可以在UI设计之初就导出——带透视的切图资源,并导入引擎中,用常规搭建UI的方式,最终产生出“透视”UI的效果。

3D UI方式实现的透视UI,和常规方式实现的“透视”UI,最大的区别在于,3D UI实现的透视UI,可以进行透视方向上的运动

Ⅲ、场景化UI的实现方式

①将UI预制体(Prefab)拖拽到场景的层级窗口(Hierarchy)中

②选中UI预制体(Prefab)生成的节点,属性窗口(Inspector)中找到Canvas组件,将渲染模式(Render Mode),设置为——世界空间(World Space),将目标摄像机(Event Camera)设置为Main Camera,然后确定Main Camera的投影(Projection)设置为透视(Perspective)。实际项目中UI节点可能是动态生成的,所以链接摄像机这一步,需要前端小伙伴的帮助。

到这一步为止,我们创建的UI预制体(Prefab)在场景中,已经是3D UI了。以下是验证阶段

③在层级窗口(Hierarchy)中,右键创建Cube,然后将UI节点拖拽为Cube的子节点。调整Cube和Main Camera的空间位置,让Cube置于Main Camera拍摄范围之内,可以切换到游戏窗口(Game)查看,或是点击Main Camera节点,在场景窗口右下角查看。

修改UI节点的Transform。Position和Rotation设置为0。这里着重强调一下,UI节点本质还是UI的创建方式,Cube本质是Mesh的创建方式。而UI和Mesh,Transform的单位是有区别的。所以当我们完成上面操作时,会发现UI特别大。此时我一般会通过调整UI节点的Scale来进行适配。为了使UI,更像是Cube头顶的场景化UI,轻微调节UI节点,Position Y。

④运行,通过手动调整Main Camera和Cube的Transform,可以看到UI跟随着Cube的运动而运动,且会跟随摄像机的旋转而离开画面。

⑤在运行情况下,点击画面中UI上的按钮(Button),依然可以执行打开弹窗的逻辑,UI的特征没有消失

完成

Ⅳ、透视UI的实现方式

①在层级窗口(Hierarchy)中,选中UI预制体(Prefab)生成的节点,在属性窗口(Inspector)中找到Canvas组件,将渲染模式(Render Mode),设置为——屏幕空间-摄像机(Screen Space - Camera),将目标摄像机(Event Camera)设置为Main Camera,确定Main Camera的投影(Projection)设置为透视(Perspective)

②选中UI预制体(Prefab)生成的节点,属性窗口(Inspector)中找到Canvas组件,将渲染模式(Render Mode),设置为——世界空间(World Space),将目标摄像机(Event Camera)设置为Main Camera,然后确定Main Camera的投影(Projection)设置为透视(Perspective)。实际项目中UI节点可能是动态生成的,所以链接摄像机这一步,需要前端小伙伴的帮助。

②运行。首先,这个设置下的UI预制体(Prefab)生成的节点不再具备Transform的属性,所以通过手动调整子节点的Transform,可以看到UI变成了有透视变化的3D UI,且调整摄像机的Transform并不会对UI带来影响,这就是场景化UI和透视UI最大的区别。

点击透视UI上的按钮(Button),依然可以执行打开弹窗的逻辑,UI的特征没有消失

完成

标签: 游戏窗口 依然可以 可以进行