[VRChat] Toggling Object Visibility with Udon: Using uGUI Buttons

Since I have already posted about how to place buttons, in this article, I will explain how to create an Udon program that runs when you click a button added via uGUI:Button.
It might look a bit long, but once you've done it once, it's easy afterward.

Environment

• Windows(10)
• VCC (2.1.6)
  • Unity (2019.4.31f1)

Prerequisites

• Visual Studio (I use 2019)
• A VRC World project

Steps

Placing uGUI:Button

1. Placing uGUI:Button

Please refer to the following article to place a button.

• 【VRChat】Quickly Adding a Button ~Part 1~
• The Canvas size looks like the image below.
  

Placing a 3D Object

1. Adding a 3D object to the Hierarchy

• Right-click in the Hierarchy and add "3D Objects > Sphere".
• Place it in a good position.
  

Adding UdonSharp Files

1. Adding Udon files to Assets

• Click on an arbitrary folder under the Assets folder.
• Right-click and click "Create > U# Script".
  *Note: I create a folder named 'Script' and create the Udon file there.
  

2. Naming and Saving the Udon File

As shown in the image below, two files will be created.
We will be working with the white one.

3. Adding the Program to the U# Script

Double-click the white file.

This will launch the installed Visual Studio.

• Add the following program.

test.cs

using UdonSharp;
using UnityEngine;
using VRC.SDKBase;
using VRC.Udon;

public class test : UdonSharpBehaviour
{
    [SerializeField]
    private GameObject obj; // Set the object you want to toggle in the Inspector
    
    void Start()
    {
    }
    // Add button processing
    public void buttonClick() // ★We will use [buttonClick] later
    {
        // obj.activeSelf gets the active state of the object
        if (obj.activeSelf)
        {
            // If active, make it inactive
            obj.SetActive(false);
        }
        else
        {
            // If inactive, make it active
            obj.SetActive(true);
        }
    }
}

4. Adding the U# Script to the Cube

• Drag "test" to Hierarchy > Canvas > Button.
• If "Test" is displayed in the Inspector, you are good to go.
  

5. Setting up the Process to Execute on Button Click

1. Click the "+" button in "On Click".
   
2. Drag Hierarchy > Canvas > Button as shown in the image.
   
3. Select "UdonBehaviour.SendCustomEvent(string)".
   
4. Set the part marked with ★ described in "Adding UdonSharp Files > 3. Adding the Program to the U# Script".
   

6. Setting the Object to Show/Hide

• Drag Hierarchy > Sphere into Inspector > Test > Utilities > Obj.
  

Result

If the display toggles on/off like this, it is successful!

Postscript

Buttons have many settings by nature, but they can execute processes assigned to other objects.
You can even click them from a distance... lol

Related Articles

• 【VRChat】Quickly Adding a Button ~Part 1~