【世界 UI使用大全】世界UI的各种使用方式

世界 UI使用大全

所使用编辑器版本：Online_v0.27

一、使用前介绍

相关文档：世界UI-官方文档

世界UI的各种功能的详细内容上述文档里都有讲述，下面我只做简要介绍

1.世界UI的作用

世界UI能够帮助我们将2D的UI渲染在3D的场景当中。可以把世界UI当作一个屏幕，这个屏幕可以像一个物体一样，在场景中进行位移、缩放、旋转等等的操作

2.世界UI的三种类型

World（世界空间）

世界类型世界UI是将UI组件以网格体的形式在世界场景中进行渲染，并且可被遮挡，使得UI不再脱离在场景层之外，而是成为场景层的一部分给玩家带来更强的代入感

（World类型可以用来制作一些告示牌，提示UI等）

Screen（屏幕空间）

屏幕空间类型世界UI在完全处于世界场景之外的屏幕上渲染控件，控件永远不会被遮挡，且永远面朝摄像机的功能。
（Screen类型可以用来做一些小地图提示、游戏里的标点等）

OverheadUI（头顶）

与屏幕类型相似，UI界面都会永远面朝摄像机，确保是会使用射线检测方法检测玩家和头顶UI之间是否有物体阻挡，从而控制头顶UI的显示/隐藏，同时计算两者之间的距离去缩放头顶UI实现近大远小的效果
（Overhead类型可以用来做血条、title等）

3.使用世界UI的两个前提

这两个条件缺一不可，没有世界UI，2DUI将不能添加到场景中；没有2DUI，世界UI将不能显示内容

前提一：需要有一个世界UI对象

本地资源库>游戏功能对象>世界UI

前提二：需要有一个2DUI

【2DUI使用大全】各种2DUI的使用方法！大佬们快看过来！ - 资源/心得分享 创作者论坛 (ark.online)

二、世界UI的使用方式

按照使用前提，我么们需要先创建一个2DUI。打开UI编辑面板，拼一个漂亮的UI吧！

此UI的Root大小为（1000，800）

用法一：将世界UI拖入场景，手动给世界UI绑定2DUI

步骤1：拖一个世界UI至场景中

步骤2：给世界UI绑定2DUI

修改显示类型

要修改场景中世界UI的显示类型，只需要修改属性面板上的UI类型选项即可。（注：当修改为“屏幕”和“头顶”类型时，在主视口中将看不见UI，需要运行起来才能看见）

用法二：【代码】将世界UI拖入场景，并给世界UI绑定动态创建的2DUI

步骤1：拖一个世界UI至场景中

步骤2：【代码】复制世界UI在场景中的GUID，通过GUID获取到这个世界UI

// 047B1F70 就是上图中复制的guid

let worldUI = GameObject.findGameObjectById("047B1F70") as UIWidget

步骤3：【代码】动态创建2DUI

// 创建2DUI

let myUI = mw.createUIByName("MyUI")

步骤4：【代码】给世界UI绑定2DUI

// 绑定2DUI

worldUI.setTargetUIWidget(myUI)

完整代码

@Component

export default class GameStart extends Script {



    /** 当脚本被实例后，会在第一帧更新前调用此函数 */

    protected onStart(): void {

        if (SystemUtil.isClient()) {

            // 047B1F70 就是上图中复制的guid

            let worldUI = GameObject.findGameObjectById("047B1F70") as UIWidget

            // 创建2DUI

            let myUI = mw.createUIByName("MyUI")

            // 绑定2DUI

            worldUI.setTargetUIWidget(myUI)

        }

    }

}

用法三：【代码】动态创建世界UI，并绑定动态创建的2DUI

步骤1：【代码】动态创建世界UI

let worldUI = GameObject.spawn("UIWidget") as UIWidget

后续步骤：【代码】给世界UI绑定动态创建的2DUI

@Component

export default class GameStart extends Script {



    protected onStart(): void {

        if (SystemUtil.isClient()) {

            // 动态创建世界UI

            let worldUI = GameObject.spawn("UIWidget") as UIWidget

            // 设置世界UI的位置

            worldUI.worldTransform.position = new Vector(0, 0, 200)

            // 创建2DUI

            let myUI = mw.createUIByName("MyUI")

            // 绑定2DUI

            worldUI.setTargetUIWidget(myUI)



        }

    }

}

补充：

一、用代码设置世界UI的类型

// 这里worldUI是一个已经被创建出来的世界UI对象

// 世界

worldUI.widgetSpace = WidgetSpaceMode.World

// 场景

worldUI.widgetSpace = WidgetSpaceMode.Screen

// 头顶UI

worldUI.widgetSpace = WidgetSpaceMode.OverheadUI

二、获取世界UI绑定的2DUI

// 这里假设已经获取到了世界UI对象

let worldUI: UIWidget

// 获取世界UI绑定的2DUI对象

let ui = worldUI.getTargetUIWidget()

// 从2DUI对象上获取对应的控件

let button = ui.findChildByPath("路径") as Button

拓展：

【世界UI排行榜】教你如何做一个在场景中显示的排行榜！ - 资源/心得分享 创作者论坛 (ark.online)

像个战神

贩卖美好 发表于 2023-3-23 18:17
像个战神