Repository navigation
Openverse UI System
The Openverse has a special system to handle UI in front of the user. The system is designed to be able to create any UI from code. In the future it will probebly be possible to load UI layouts from json or xml. Currently the UI system supports three kinds of user interaction. Physical, Lazer and Positional. A short breakdown of the systems:
Physical
This mode requires you to move your hand on to the UI and collide with UI elements to interact with them. This system is the most intuitive but the least practical.
Lazer
Lazer is the most well known interaction method. It allows you to point a lazer on to the UI as a sort of mouse you use to click stuff. This system is very practical only it can be hard to precisely click on elements if you are not close up to the UI.
Positional
This is a system that works using a mouse controlled via the controller position. When the user presses their grip button their cursor appears on the UI. Moving their controller on the xy axis also moves the cursor on the UI on those axis. Just like the lazer system. Elements can be clicked using the trigger.
In the Openverse the user is free to pick whichever input method they like the most. This however does mean that all UI Elements are required to work with all input methods. Keep this in mind when programming your own UI Elements.
You can check the current UI Mode of the user via the following line of code:
if(UIManager.Instance.settings.CurrentUIMode == ControlMethod.Physical) {
//The current mode is physical
}You can create your own UI Elements by Extending the UI Element class
using Openverse.UI;
public class MyElement : UIElement, ILazerInteractable //ILazerInteractable is optional but required if you want to implement lazer interactions
{
//You might have to overwrite these methods if your element is not compatible with a RectTransform's Sizedelta
public override Vector2 GetSize()
{
return transform.localScale;
}
public override void OnResize(Vector2 newSize)
{
transform.localScale = new Vector3(newSize.x, newSize.y, (newSize.x + newSize.y) / 2f);
}
//Functions provided by the ILazerInteractable interface
public void OnLazerHover()
{
Debug.Log("Element is hovered");
}
public void OnLazerClick()
{
Debug.Log("Element is clicked");
}
}You can show UI in two ways:
Create your own ui panel
This is for when you need to show your own more detailed UI (For the demo, the source code of the AlertBox function has been provided)
UIPanel alert = UIManager.Instance.CreateUIPanel();
alert.background.texture = UIManager.Instance.settings.backgrounds.defaultBG;
UIText text = UIManager.Instance.CreateText(alert, Vector2.up * 0.125f, message);
UIButton button = UIManager.Instance.CreateButton(alert, -Vector2.up * 0.25f, UIManager.Instance.settings.icons.xMark, "Close");
alert.width = 1f;
alert.height = 1f;
text.size *= 0.1f;
text.width *= 0.95f;
button.size *= 0.1f;
alert.showBackground = true;
Vector3 forward = OpenverseClient.Instance.player.head.transform.forward;
forward.y = 0;
alert.panelPosition = OpenverseClient.Instance.player.transform.position + forward * 2f + (OpenverseClient.Instance.player.head.transform.localPosition.y / 2f * Vector3.up);
alert.lookAtPlayer = true;
text.color = new Color(0.03189604f, 0.03189604f, 0.03189604f, 1);
button.onClickEvent += () => { alert.Close(); };Open an alert box
This is great for when you need to show a small info message.
UIManager.Instance.AlertBox("Something has requested me to show you this epic popup.");