Making a Simple Collapsible Menu | AR Unity Developer

With realistic assets in the AR world, the number of placement prefabs continues to grow. Right now, the only way to select the placement prefab is to define which one in the AR Placement Interactable. This can be remedied by creating a menu where users can pick and choose which prefab to place in the AR world in the app.

Begin by creating a Canvas in the Hierarchy, and create a button child GameObject to the Canvas. You’ll see that the button is directly in the middle of the Game View. This button will be placed near the bottom center of the screen and anchored into the corresponding area. To ensure that the button will scale correctly on whatever device you are building on, the UI Scale Mode on the Canvas Slider component should be set to Scale with Screen Size. This is located on the Canvas.

Once the button is positioned and sized to your liking, it’s time to make it interactable. Since we’ll be selecting different placement prefabs, another button will be needed. However, duplicating the buttons as is will place them on top of one another. Select the two buttons in the Hierarchy and create an empty parent GameObject. This GameObject will set our buttons in a horizontal row. This is done by adding the component Horizontal Layout Group. This component can group together the child button GameObjects and organize them in a horizontal group, which we can then reposition as needed.

For this app, I’ll be placing the buttons at the bottom center of the device’s screen.

These buttons won’t place the selected placement prefab, but will instead communicate to the AR Placement Interactable which prefab to select for placement. The On Click event for each button will differ by the placement prefab selected.

To prevent the AR Placement Interactable from having a default placement prefab, simply remove the prefab from the Placement Prefab field. You can view this in the Inspector View while testing to see if it is selecting the correct placement prefab with each button press.

We can add an extra button that will act as a way for the user to add an item. Duplicate another button and rename it AddItemButton. Make sure this is the 2nd child button so that is already centered in the app when testing.

Having three buttons might appear cluttered for some users, but using the On Click event can make things more visually clear. The buttons for the two placement prefabs are going to be disabled by default. When the plus button is selected, the two placement prefab buttons will appear and the plus button will disappear. In other words, the placement prefab buttons will be active and the plus button will be deactivated.

What if we want the plus button to return? Rather than set the placement prefab buttons to bring it back, we can use Interactable Events on the AR Placement Interactable to reactivate the plus button. In addition, once a prefab has been placed in the AR world, the prefab buttons will deactivate until the plus button is selected. Finally, the Placement Prefab setting in the AR Placement Interactable will be set to no GameObject once the prefab is set. It will set itself once the appropriate prefab button is selected.