Interactive UI Panels

Sometimes you want to have the user pick an option from a UI panel, maybe some text, or an image, or some buttons, may be all of them. Lets understand how the same can be done in VRse Builder. There are a couple of ways to go about this in VRse Builder, you can use some pre-made panels, or you could design your own

​

Media Panels

We have used a prefab from Meta SDK 71, from the PanelwithManipulators example scene, we have customized it and make three templates which are controllable by Actions. The panels can be found at Assets/VRseBuilder/_Platform/MetaXR/Runtime/Prefabs/MediaPanels
Simply drag and drop the prefab on your scene, name it according to your use-case and start to use in your Story

​

TextMediaPanel

Used to show text information on the panel Edit text during Story (at Runtime) The panel can be controlled by the TextMediaAction, you could add the action anywhere on your story to control the panel. Simply create an action in your story, select the ‘Enable’ option in node options, and provide the content you want to display on your panel. You can use the ‘Disable’ option when you want to disable the panel Change Font/Size/Color There is a child gameobject of the TextPanelMetaXR gameobject, you can find it as below PanelInteractable > FlatUnityCanvas > Dialog > VerticalLayout > Scroll View > Viewport > Dialog_Text > Text Select that gameobject next, and in the inspector you will get a few options, you can change the font/size/color there, you might have to provide some text in the TextInput field in order to preview your change Remember to remove the text in TextInput after you are done selecting your text options.

​

ImageMediaPanel

Used to show an Image on the panel Edit Images during Story (Runtime) The panel can be controlled by the ImageMediaAction, you could add the action anywhere on your story to control the panel. Create the action in your story, select the ‘Enable’ option in node options. In the content field we must provide the address of the image inside your Unity Project’s Resources folder. Simply create a folder named Resources anywhere in your Unity project, and drag and drop your images into that folder. For eg if your image is in */Resources/Project1/sample-image.png for content field you must mention "Project1/sample-image" if the image is in the root of the Resources folder just “sample-image” should be enough

​

VideoMediaPanel

Used to play a video on the panel Play/Edit Video during Story (Runtime) The panel can be controlled by the VideoMediaAction, you could add the action anywhere on your story to control the panel. Create the action in your story, select the ‘Enable’ option in node options. Just like for images In the **content field **we must provide the address of the video inside your Unity Project’s Resources folder. Simply create a folder named Resources anywhere in your Unity project, and drag and drop your video into that folder. For eg if your image is in */Resources/Project1/sample-video.mp4for content field you must mention "Project1/sample-video" if the videois in the root of the Resources folder just “sample-video” should be enough

​

More about the Panels

Customization Feel free to add/edit the panel Canvas to your heart’s content, you can add more static text or images as a part of the panel already, you could change the background or its material, it should mostly work out fine, we have left this prefab open for edits so you can create a custom version of the panel. Moving the Panel Around The recommended way to move the panel or any gameobject around is to use the ObjectAnimationAction, the same would need the panel’s parent as the Query and a targetTransform which should be the final desitination. Make sure to chose PositionRotation in the options to make your panel fly to the destination

​

Custom UI

You can add customized UI, which can be somewhat controlled by VRseBuilder actions and triggers The template for this can be found in BuildingBlocks window, simple navigate to VRseBuilder > BuildingBlocks On the scene gets added a worldspace Canvas callewd UIButtonWithCanvas_Block as in the image below. This is the base for your Custom UI, feel free to edit/add/delete more elements to this canvas and design your perfect UI. There is no restriction on designing your Interface in this element The same is both interactable with a laser pointer or can be touched with virtual hand in VR Detecting Button as Triggers Buttons made on this UI can be detected using **UIButtonTrigger, **simply add the trigger OnRight or OnWrong, there is only one option “OnClick”, add the button you want to detect click on as Target Object. The button can be clicked both touching with hand or finger inside VR and with a Raycast pointer and pinch gesture as well. Editing Text from Actions < Not available yet >