World UI ​

It takes about 10 minutes to reading this article.

This article outlines how to make a world UI and modify properties to achieve various effects.

What is the World UI? ​

The primary role of the World UI is to provide a surface in a 3D environment where UI components normally rendered to the screen can be rendered onto the object, such as the World Type UI for creating shop signs, game boards, and the Head Type UI for character health bars, character names.

How to edit the World UI? ​

• Find the world UI in the Local Library - Game Function Objects list, and drag it into the scene to create the world UI
• Then drag and drop the 2DUI made in the project content into the Binding UI object in the World UI Property Panel. After completing the binding, the World UI will be displayed in the main viewport.
• If it's an overhead type of world UI, you need to mount the world UI object on the character and set the relative position to the character

There are three types of world UI: World / Screen / Overhead.

1. UI Category ​

World Type ​

• World UI is to render UI widget in the form of grids in the world scene, and can be blocked, so that the UI no longer leaves the world scene, but becomes part of the world scene to bring a stronger sense of substitution for players.

Screen Type ​

• Screen Type World UI renders widgets on a screen that is completely outside the world scene, never blocked, and always facing the camera.

Overhead Type ​

• Similar to the screen type, the UI widget will always face the camera, making sure to use a ray detection method to detect if there is an object blocking between the player and the overhead UI, so as to control the display/hide of the overhead UI, and calculate the distance between the two to scale the overhead UI to achieve the perspective zooming effect.

Essentially, only the world-type UI is truly rendered in the scene as a grid, so it is shaded by the model in the scene; the screen type and the overhead type are rendered in the same way as the normal UI, except that size and position are automatically calculated.

2. Interactive ​

• When checked, this property allows interaction with various UI components in the World UI. This function penetrates the camera touchpad area; however, it cannot penetrate the joystick. If there is an interactive World UI in the scene, do not use the joystick with an excessive size.

3. Special Attributes of the Overhead type World UI ​

• Blockable: Can the overhead UI be blocked and hidden by objects such as buildings, checked to be blocked, unchecked to not be blocked.

• Enable perspective zooming: The overhead UI will be scaled according to the distance from the camera? Check it to have a perspective zooming effect; if not, it will always be the same size and will not change.

• Distance Scaling Factor: Zooms the size of the world UI by percentage per n meter unit of distance from the camera. For example, in a space game, every planet has a name but it's far away, so the factor can be set larger, with UI scaling every 10,000 meters. In normal games, most are closer, and the factor can be smaller to allow UI scaling every 10 meters.

• Enable Maximum Visible Distance: Enable the maximum distance of the overhead UI, if not, it will not be hidden no matter how far away.
• Maximum Visible Distance: The maximum distance that the overhead UI can see, beyond which the overhead UI will be hidden.

How to create a world UI dynamically using script? ​

Example One: Dynamically Create a World UI and Bind 2DUI ​

• In addition to the previous usage of manually binding 2DUI to the World UI by dragging it into the scene, we can also write script to dynamically create and complete binding of the World UI.
• Due to performance reasons, the current rendering size of the world UI is limited to a maximum of 512x512*, so the size of the Root of the 2DUI that you want to use to dynamically create the world UI object should not exceed 512x512*, otherwise the world UI will not be able to display completely.

• Write script to dynamically create world UI objects and complete binding to 2DUI

// Create World UI dynamically
			let worldUI = GameObject.spawn<mw.UIWidget> ("UIWidget") 
			// Set the position of the world UI
			worldUI.localTransform.position = new Vector(0, 0, 200)
			// Create 2DUI
			let worldui = createUIByName("worldui")
			// Bind 2DUI
			worldUI.setTargetUIWidget(worldui)
			// Set the rendering size, max 512*512, need to match the Root size in 2DUI, otherwise the rendering is incomplete.
			worldUI.drawSize = new Vector2(500, 500)

// Create World UI dynamically
			let worldUI = GameObject.spawn<mw.UIWidget> ("UIWidget") 
			// Set the position of the world UI
			worldUI.localTransform.position = new Vector(0, 0, 200)
			// Create 2DUI
			let worldui = createUIByName("worldui")
			// Bind 2DUI
			worldUI.setTargetUIWidget(worldui)
			// Set the rendering size, max 512*512, need to match the Root size in 2DUI, otherwise the rendering is incomplete.
			worldUI.drawSize = new Vector2(500, 500)