Create a MAGES button¶

In MAGES SDK you can create your own MAGES User Interface by using our custom MAGES Graphic Raycaster Component. In this tutorial we will create a button that spawns an object when pressed (an alcohol spray bottle).

1. First of all create a new button inside your scene by right clicking on the Hierarchy and selecting UI > Button - TextMeshPro. A new button component will be created as well as the canvas that contains it.

   

2. Click on the canvas that contains the button. From the Inspector remove the Graphic Raycaster component and add a MAGES Graphic Raycaster component in the canvas. It is similar to the original Graphic Raycaster but with some new extra features (for example you can set the maximum distance that the raycast can reach or check for occlusion).

   

3. Customize the button to your own preferred style.

   Note

   You can use some of our already created UI components (for example the OperationStartMedical prefab) and make some minor changes to suit your needs. In this way you will keep the original MAGES UI style in your project.

   

   Important

   The MAGES Graphic Raycaster supports all of Unity’s native UI elements (Text, Buttons, Scrollbars etc.) and the canvas works similarly to the Unity’s original one.

   For more information regarding the Unity UI you can check the Unity’s Documentation.

4. Create a new Script by right clicking on the Assets > Create > C# Script. Implement a function that spawns an instance of the Alcohol Spray Bottle and then destroys the button:

   public class SpawnAlcoholSpray : MonoBehaviour
   {
      public GameObject spray_bottle;
   
      public void OnCLick()
      {
         GameObjectSpawner.Instance.SpawnObject(spray_bottle);
         GameObjectSpawner.Instance.DestroyObject(gameObject);
      }
   }
   

5. Attach the script to the new canvas you have created and set the spray_bottle gameobject to the prefab you want to spawn (In our case the alcohol spray bottle).

   

6. Navigate on the new button in the Hierarchy and add on the OnClick() list the object and the function that you want to run when you press the button.

   

That’s it! You have successfully created a new MAGES UI element that spawns an alcohol spray bottle when clicked.