LogoLogo
HomeDiscordVideo TutorialsBuilder Opportunities
  • Welcome to MONA
    • What is a Space?
    • Unity Overview
  • ⬛Create
    • Getting Started Building
    • MONA Crash Course
      • Setting up MONA in Unity
      • Introduction to Unity
      • Setting up Simple Assets
      • Metaverse / WebGL Limitations
      • Creating 3D Assets
      • Applying Materials & Unwrapping UVs
      • Importing Assets into Unity
      • Adding Colliders
      • Adding Lighting
      • Adding a Custom Skybox
      • Setting up Canvases
      • Uploading to your Wallet
    • Building Spaces
      • Space Limitations
      • Create your Space
        • Space Overview
        • Colliders
        • Materials
        • Portals
        • Canvases
        • Artifacts
        • Add a Custom Skybox
        • Test Your Space
        • Troubleshooting
      • Improve your Space
        • Lightmaps (Unity Lightmapper)
        • Light Probes
        • Reflection Probes
        • Animation in Unity
        • Importing Animation
        • Player Property Volumes (PPV's)
        • Warp Volumes
        • Adding Audio
        • VRM Switcher
        • Custom Canvases
        • Embedded Video
        • User Interface (UI)
        • Creating Custom Shaders
        • Imported Assets
        • Lightmaps (Bakery Asset)
      • Optimise your Space
        • Prefabs
        • 3D Asset Specs
        • Optimizing your Space
      • Adding Interactivity
        • Visual Scripting
          • Web Request Node
        • Mona Reactor
          • Creating Animation
          • Using Animator
          • The Reactor Component
          • Reactor Overview
      • MONA Tools
        • Template Utility
        • MONA Capture
        • Light Probe Generator
        • VOX Importer
      • Submit Your Space
        • Submitting your Space
        • Creating an Image & Video Preview
        • QA Process
        • Mint Your Space
      • Update your Space
      • Frequently Asked Questions
      • Troubleshooting
    • Creating Assets
      • Asset Requirements
      • 3D Asset Types
      • Asset Creation Approaches
      • Optimizing your Mesh
      • GLB Considerations
      • Example - Cyberpunk Car
    • Creating Avatars
      • Getting Started with VRM
      • VRM Requirements
      • VRM Creation
        • Using Mixamo for Rigging
        • Adding Custom Bones to the Rig (Optional)
      • Creating your Avatar using UniVRM
        • Importing UniVRM into Unity
        • Creating the VRM using UniVRM
        • Adding Spring Bones in UniVRM (Optional)
      • Creating your Avatar using 'VRM for Blender'
        • Adding 'VRM for Blender' into Blender
        • Using 'VRM for Blender' for Rigging
        • Adding a Material
        • Assigning VRM Details
        • Exporting the Avatar
      • Uploading your VRM
      • Using Avatars in WebAR
      • Submitting your VRM to the Mona Marketplace
      • Mint Your Avatar
      • Troubleshooting
    • Resources
      • MONA Claim Asset Requirements
      • Unity Wallet SDK (Alpha)
      • MONA Playground
      • MONA Tutorials
        • Retrowave Modules
      • Asset Resources
        • 3rd Party Assets
        • Textures
        • Shaders
        • 3D Assets
        • Audio
        • Tools
        • Tutorials
      • MONA Library
        • MONA Library Submission
      • Useful Unity Packages
      • Updating the Template SDK
      • Importing Mozilla Hubs Spaces to MONA
      • Importing AltspaceVR spaces to MONA
    • MONA Marketplace
  • ⬛Explore
    • How to Use MONA
    • Using VRM Avatars
    • Audio Settings
    • Explorer's Frequently Asked Questions
  • ⬛Collect
    • Setting up a wallet
      • Delegating a Wallet
    • Own a Space
      • Host an Event
      • Uploading your Images
      • Add Images to a Canvas
      • Live Music Feed
      • Token Gated Access
      • Minted 3rd Party Assets
    • MONA Create
      • Create FAQ
    • Live Streaming in MONA
      • Setting up OBS Studio
      • Livestream using OBS Studio
      • Livestream using a Mobile Device
      • How to Stream Using Twitch or YouTube
      • Add a Livestream to a Canvas
    • Collector's Frequently Asked Questions
  • General Resources
    • Web3 Introduction
    • How to sell Art in Web3
    • Game Dev Glossary
    • Buildathons / Challenges
      • 3D Asset Buildathon (Current)
        • Frequently Asked Questions
      • Emote/Emoji Challenge (Completed)
      • Stream Challenge (Completed)
      • Custom Avatars (Completed)
      • Build : NY Challenge (Completed)
      • Sculpture Challenge (Completed)
      • Portal Hub (Completed)
      • Interact (Completed)
      • The Renaissance (Completed)
Powered by GitBook
On this page
  • UI Elements
  • Adding a UI Element
  • Canvas Options
  • Screen Space - Overlay / Camera
  • World Space
  • Positioning UI Elements

Was this helpful?

  1. Create
  2. Building Spaces
  3. Improve your Space

User Interface (UI)

PreviousEmbedded VideoNextCreating Custom Shaders

Last updated 2 years ago

Was this helpful?

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.

UI Elements

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.

For more information on these you can go to the Unity Manual .

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.

  • This can be used to animate more advanced UI Elements, which means they could be used with Reactor

Adding a UI Element

  • 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.

  • Delete the EventSystem Gameobject that is added as this is a script related asset and may throw errors if it is included.

  • 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.

Canvas Options

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 / Camera

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'

  • 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.

World Space

World space allows you to create a UI element within your Mona 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.

  • 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.

Positioning UI Elements

  • 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.

For more information on these you can check the Unity Manual .

⬛
here
here
Add property to animate features
Examples of animated UI Elements
Adding a UI Element in Unity
Delete the EventSystem Object (Script related)
Set Render Mode to Screen Space Overlay
Note the UI Canvas Asset in Screen SPace mode is large!
Set the Render Mode to World Space
Adjust the scale of the Canvas in World Space
Adjust Canvas settings as needed
Modify the Canvas Anchor / Pivot and Position settings