Non-Interactive Custom UI Screen Overlay
Custom UI helps create non-interactive screen overlays on both desktop and VR platforms. Naturally, the screen overlay experiences vary between these two platforms. This feature empowers creators to exhibit non-interactive overlay elements such as health bars or ammo counts.
- If a button or a pressable component is placed within a screen overlay view and the cursor is released by any means, interaction with these components is still not possible. This behavior is consistent across mobile and VR platforms.
- When we create an elaborate screen overlay for 2D platforms (i.e. mobile or desktop) and attempt to adapt it for VR, the UI renders correctly without any issues. However, the layout experience doesn’t match up to that of 2D platforms. This is because VR lacks a specific screen dimension for laying out CustomUI views.
- Through experimentation, we’ve created a canvas measuring 800px by 600px with a depth of 1 unit, which acts as a transparent overlay. This enables us to build or integrate any custom UI view into this canvas, allowing us to customize it according to our design needs and requirements.
- Full screen overlays that are positioned below the system UI and platform controls.
Based on the above information, you’ll notice that this screen overlay feature is more flexible on web and mobile than VR. Let’s start building a screen overlay on web and mobile first.
Creating a Screen Overlay from the Ground Up - When you create a UI with the Custom UI Gizmo, you’ll find the Display Mode property in the configuration panel under the Visual & Interaction section.
- Switch the Display Mode to Screen Overlay.
- Next, write Typescript code to craft a screen overlay UI that aligns with your design.
- Ensure that the outermost view container includes the position: “absolute” property.
- Please be aware that the panelHeight and panelWidth properties of the UIComponent class are not applicable when creating a Screen Overlay Custom UI. Instead, we should use CSS styling to define the height and width of the view. The remaining part of the full screen will be completely transparent.
- Finally, customize the layout of the view container. For example, you can set left: 0 and bottom: 0.
class ScreenOverlay extends UIComponent {
static propsDefinition = {};
initializeUI() {
return View({
children: ...,
style: {
position: 'absolute',
height: 200,
width: 300,
backgroundColor: '#220022',
left: 0,
bottom: 0,
},
});
}
}
UIComponent.register(ScreenOverlay);
Have an existing Custom UI spatial panel in your testing world If you already have Custom UI panels in your testing world, you’ll notice the Display Mode property in the configuration panel under the Visual & Interaction section. By default, this value is set to Spatial.
While it’s possible to change this property to Screen Overlay to transform a Spatial UI into a screen overlay, we advise against this approach for several reasons:
- The panelHeight and panelWidth properties of the UIComponent class are not applicable in a Screen Overlay Custom UI.
- `On the Web and Mobile platforms, the entire full screen is used as a canvas. This necessitates defining the height and width of the Custom UI using CSS styling.
- `Due to the above two points, position: “absolute” is required in the component-level view container.
Converting a spatial UI to a screen overlay UI involves a significant amount of changes. Our recommendation is to construct a new screen overlay from scratch, using the guidance provided in the earlier section.
Creating Multiple Screen Overlays We also have the capability to display multiple screen overlays simultaneously. By incorporating various UI widgets into your world and associating each with well-crafted Typescript, you can ensure that all Custom UI screen overlays are displayed correctly on the screen.
Assuming you already have one screen overlay from following the previous section, let’s create a new screen overlay with a different script attached.
class ScreenOverlay2 extends UIComponent {
initializeUI() {
return View({
children: ...,
style: {
position: 'absolute',
height: 200,
width: 300,
backgroundColor: '#220022',
right: 0,
bottom: 0,
},
});
}
}
Now that you have created these two screen overlays, you can see two UI layouts as shown in this screenshot. The content varies depending on your TypeScript code.
Player-specific screen overlay Similar to Spatial Custom UI, we’re using the
Binding class to display content for players which means you can display different screen overlay content to different for each player. Custom UI screen overlay also fully supports
player-specific UI.
Controlling Visibility of Screen overlay
Entity Level Visibility(single screen overlay) The visibility of the screen overlay can be managed through the entity’s visible property. This can be achieved in two ways:
- Switch the Visible property found under the Behavior tab.
- Utilize the TypeScript APIs:
uiEntity.visible.setuiEntity.setVisibilityForPlayers
At present, we’re facilitating these use cases to display or conceal screen overlays. In the future, we may expand our support to include more user flows for altering the visibility of screen overlays.
- Open
NuxCheatSheet menu through ESC key, the screen overlay will hide. Dismiss the NuxCheatSheet, the screen overlay will show up again. - Bring up the PUI panel, the screen overlay will hide. Dismiss the PUI panel, the screen overlay will show up again.
- The screen overlay will be dismissed in the build mode, switching to preview mode, you should see the UI attached to the screen.
Screen Overlay Experiences in VR
If you’ve adhered to the steps outlined above, the screen overlays we’ve developed will automatically be applied to VR when you enter the testing world with a VR device. However, there’s an important point to note here.
There isn’t a specific dimension that we can use to properly layout the screen overlays. For Web and Mobile, the full screen dimension can be utilized as a canvas for arranging the screen overlays. In VR, we’ve set up a canvas with dimensions of 800px in width and 600px in height, which acts as a transparent overlay. The depth of this canvas is 1 unit from the avatar. This enables you to build or integrate any custom UI view into this canvas, customized to your specific design needs and requirements.
In certain scenarios, you may observe that the UI aligns well on web and mobile platforms. However, when transitioning to the VR platform, it may not appear as visually appealing as it does in 2D. We understand that it might be challenging to accommodate all the use cases you wish to layout in VR.
