The frontline.io menu is customizable. You can add buttons to change the behavior of the model.
For example, we can create a toggle button, that switches on and off a model.
To create a button:
In our scene hierarchy, select the Device object under UIData.
The Device object is what creates the frontline menu, so customizing it will affect the menu when we press play or view it in the app.While the device object is selected, go to custom buttons area in the inspector window, and click the plus icon.
Give the button a title,
Select it as a toggle if it's an on or off switch
and under toggle event, in the "toggle on" field, press plus and drag your objects to hide there.
Select on the function dropdown list. Game object. and choose Set Active.
This controls what happens to the object when pressing on the button.
If the Set active is off, the object will be hidden when pressing the button.Do the same for the "On Toggle Off" part. But now reverse the Set Active state, because we want the model to show instead of hide when pressing again on the button.
Press play and see how the button works.
You can also create a button that plays an animation when switching it on and off.
To add an animation button:
Create the animation, you can create an animation object by adding a new interaction to the scene in the interactions menu.
Select the interaction object, and open the timeline window, if you can't find it, it is under window. sequence. timeline.
Animate the object by dragging it into the timeline window.
Now that the animation is done, create a new button in the device object, give it a name, set it as toggle, and add the animation object to the toggle on field. then choose playable director. and select the play option. this will play the animation when switching the button on.
Repeat the process of creating an animation, but now animate the objects in the reversed direction, to get the objects back in their original position.
Drag the closing animation object again to the device, but this time into the toggle off field. select again playable director. and play.
Test the button in play mode, and see that when we toggle it on, the objects move one way, and when pressing again they will play the second animation.
Another capability of the custom button is the X-ray option. in the X-ray option we can select objects to be transparent so we can have a better look at the interior of the model:
To add an X-ray button:
Create an X-ray object.
Open the right click menu in the hierarchy tab, then select LLS. Create. and X-Ray Controller. This creates an object that contains the relevant models for X-ray.
First lock the inspector window by pressing on the Lock icon, so we can select multiple objects to drag into the list in the next step:
Now select and drag the models you want to X-ray into the Game Objects Filter list.
You can also change the transparency levels from opaque being 1 to transparent being 0.Now that the X-ray controller is set, we need to assign it to the custom button.
While the Devices object is selected, roll down to the bottom and drag the new X-ray Controller into the Device Manager Material field.
This creates a button with the name Covers X-ray.
If you would like to create more than one X-ray button, create another X-ray controller and set up the relevant models in it.
In the devices object, create a new custom button, give it a name, set it as toggle, and in the toggle on field, drag the new x-ray controller, and select material manager. Set X-ray to. and toggle on to set the X-ray on when clicking on the button.
Do the same for the turning off of the button, but choose to toggle the X-ray off.
Lets test it in play mode.
Troubleshooting:
Animation button doesn't work
Solution: Make sure there's only a "Playable Director" component on the animation object, and nothing else (such as an interaction component).