How to Configure a Custom Button That Opens a Page

  1. Create a button.

  1. Modify the icon size of the button in the Inspector window.

  1. Create an image under the button, name the image Img1, and adjust its content and size.

  1. Create an "x" button under the image for closing the image. Adjust the content and size of "x".

  1. Add methods to the two buttons that need to be operated.
    1. Edit the speaker button. Drag the image to be displayed to the node under On Click, select GameObject.SetActive, and select the check box. In this way, when you click the speaker button, the image will be activated and displayed.

      2. Edit the "x" button. Drag the image to be closed to the node under On Click, select GameObject.SetActive, and unselect the check box. In this way, when you click the "x" button, as the parent node can control the status of a child node, the image will be closed together with the "x" button.

  1. Unselect the check box on the left of Img1.

  1. Drag the speaker button to the Assets folder and save the button as a prefab.

  1. Add a new empty node, name it UIControl, and add the Para Custom TopBar component to it. The component can automatically align a button to the upper-right corner and hide it when photos are being taken. Drag the button prefab to the Element input box.

  1. Upload the World, then you can experience these custom buttons.