In my last post, I talked about some simple tools that I had been working on, and how you need to know UXML, USS and C# to make editor extensions. Well actually… You don’t need to know UXML and USS now thanks to the UI Builder package.

It’s a visual editor that lets you add buttons, text, sliders etc into a custom editor window. Kind of like using a website builder or something similar. You can tweak sizing, styling, names, tool-tips and almost everything else without doing any programming!

In the Package Manager window, you can find the UI Builder package (make sure to have “Show Preview Packages” enabled). If you install it, you can then find the editor in Windows > UI > UI Builder. Create a new UXML and USS file pair in File > New and start making some buttons!

This is typically what the window looks like. The above picture is of my current WIP of some art helping tools. I made the icons myself just to make it look a little nicer too. You can add the images as the background-image of a visual element child of a button.

Obviously… if you add a button, it’s not going to do anything unless we tell it to. More importantly, we also need our window to actually open up and show in the windows menu. So we still have to write a C# script, and put it in the Editor folder.

I’ve put a comment on each line to explain what it does, but a lot of it is quite difficult to understand, or new to me I have to admit.

// You might not need to include all of, but I did for my full script
using System;
using UnityEditor;
using UnityEngine;
using UnityEngine.SceneManagement;
using UnityEngine.UIElements;
using UnityEditor.UIElements;
 
// Make sure it's an EditorWindow and not MonoBehaviour
public class RyansTools : EditorWindow
{
    // Add window to Window, open with Ctrl + Shift + T
    [MenuItem("Window/RyansTools _%#T")]
    public static void ShowWindow()
    {
        // Open and focus the window
        var window = GetWindow<RyansTools>();

        // Add a title to the window
        window.titleContent = new GUIContent("(A)RTools");
    }

    private void OnEnable()
    {
        // Rerence to the root of the window
        var root = this.rootVisualElement;

        // Assign a stylesheet to the root and its children
        root.styleSheets.Add(Resources.Load<StyleSheet>("RyansTools"));

        // Loads and clones our VisualTree (Our UXML structure) inside the root
        var RyansToolsVisualTree = Resources.Load<VisualTreeAsset>("RyansTools");
        RyansToolsVisualTree.CloneTree(root);

        // Queries all the buttons (via type) in our root and passes them in the SetupButton method
        var toolButtons = root.Query<Button>();
        toolButtons.ForEach(SetupButton);
    }

After this sets up, we need to define the SetupButton() function that is used in the loop of all buttons.

    private void SetupButton(Button button)
    {
        // Get the button that has "Rotate" in its name
        if (button.name.Contains("Rotate"))
        {
            // Pair a function to the click of the button
            button.clickable.clicked += () => RandomizeRotation();
        }

Honestly I don’t understand the exact code of that line above, but it seems to me its assigning the function that runs when you click the button.

That’s pretty much the basics of it but you can do whatever you like when its clicked. In this example, I was making it randomize the rotation of the selected objects, from looping through the transforms in Selection.transforms.

Unity Learning has a tutorial that covers this stuff over on their site too! https://learn.unity.com/tutorial/editor-scripting