User Interface (UI)
It is possible to add User Interface (UI) elements in a space. As scripting is not possible in Mona elements like buttons etc will not be functional, that said, elements like text, images etc could be used in interesting ways for your Mona space.
It is possible to use Animation/Reactor on UI Elements however, and once again if it can be animated it can be triggered by Reactor.
Note that UI in Unity is a bit of an interesting process and has a bit of a learning curve due to how it is applied. As the Camera is generally controlled by Mona, certain elements are more difficult or invalid approaches.
Mona would work best with the following UI Elements :
- Text / Text Mesh Pro - Useful for any text you may want to display. Text Mesh Pro is recommended as it has a higher quality result.
- Image - Displays images in your UI. It has a number of ways to use it such as Simple, Sliced, Tiled, and Filled.
- Raw Image - Image displays a sprite where a Raw Image takes a texture. That said Image is usually recommended for UI based assets.
If you are planning on using animation/Reactor to control the more interactive UI elements you could possibly use other elements, but as you cannot use scripts for them to control other elements (eg. a slider to control text) this may have limited functionality.
- You may not be able to use the Record button for certain elements of Interactive UI (Such as the toggle) but it is possible to animate this feature using the 'Add Property' at the left of the Animation panel. This could be applied to any animation situation.
Add property to animate features
- This can be used to animate more advanced UI Elements, which means they could be used with Reactor
Examples of animated UI Elements
- To add a UI element, select the Mona 'Space' object (as all objects need to be a child of this asset) or under an asset in your space and right click to add a UI element. UI is added on a Canvas gameobject (which is different from the Mona Canvas asset).
- If you add a Text Mesh Pro element you will be asked to import the assets to do so.
Adding a UI Element in Unity
- Delete the EventSystem Gameobject that is added as this is a script related asset and may throw errors if it is included.
Delete the EventSystem Object (Script related)
- It is recommended to keep UI Elements under the one canvas, however it is possible to have multiple canvases. eg. if you are using World Space canvases.
There are three different ways to apply UI in Mona. Screen Space - Overlay, Screen Space - Camera, and World Space.
Screen Space - Camera would require a Camera in the scene, which is generally not recommended unless you have a specific reason to do so (cinematics etc.). Adding a camera to a space will override the player characters camera.
This setting can be found on the Canvas Gameobject that is added when you add the UI element.
Screen Space - Overlay will apply the UI over the top of the browser screen, much like most games have a HUD/UI to display health, score etc.
Screen Space - Camera will apply the UI over the top of a specific camera similar to the Overlay. As noted, only add a custom character if you are planning to override the players camera.
- Select the Canvas Gameobject, and set the Render Mode to 'Screen Space - Overlay'
Set Render Mode to Screen Space Overlay
- Note that the canvas asset will be rather large, and not aligned with your space. This is how it is meant to look. The arrow points to the default Mona Space flooring as an example.
Note the UI Canvas Asset in Screen SPace mode is large!
World space allows you to create a UI element within your Mona Space.
- Set the Render Mode to World Space.
Set the Render Mode to World Space
Note that you do not need to add an Event Camera and the warning under the Event Camera can be ignored as events are not supported at this time.
- You may need to edit the scale of the Rect Transform component on the Canvas so that it scales to the size of your space. This will keep each UI Element at a reasonable size moving forward.
Adjust the scale of the Canvas in World Space
- Note that the settings can be tweaked to use the settings that feel right to you. It all depends on the size of the UI element in your space.
Adjust Canvas settings as needed
- The position of your UI elements depends on it's settings, modify the Rect Transform settings in order to position your UI Element as you like. This would be similar to aligning text to the left, middle, or right as well as the top, middle, or bottom.
- Using Shift or Alt can help affect the pivot and position with Hotkeys.
- If you want the Canvas to take up the entire screen (not using World Space), you should use the Stretch options (vertical, horizontal, or both). Otherwise your elements may be placed more in the centre of the screen. Stretch will take into consideration the size of the screen regardless of what resolution it is.
Modify the Canvas Anchor / Pivot and Position settings
Last modified 3mo ago