(UI Toolkit @ runtime) How to assign a texture to a button via code?

Good Evening guys! So I am working on my Metroidvania and one of the main mechanics in my game is the player being able to transform into various different forms (10 to be exact) so eventually I plan on implementing a menu for the 10 different forms and the player will be able to assign 3 of the 10 forms to the ui buttons (example below)

As you can see in the lower left hand corner I have the Wolf, Bear, and Panther (these are the only forms I have coded so far so I am just attempting to test them) so I have many questions and I am struggling on figuring out where to start. I have got the buttons working on click no problem. My questions are as follows

Is it possible to assign a texture to a button via code? If so can I link a bool from my PlayerStateMachine script to said texture (example: The panther texture on the panther button I want linked to my inPantherForm bool and when the button is clicked the player will go into panther form) Is there another way to do this? Am I overthinking things?

Here is a simplified breakdown from my devmap document

  • Implement placement of transformation
    buttons
  • Implement a base material that will change depending on what spirit form is assigned. Make textures for each spirit form 10 in total
  • Add functionality to buttons to change the player into corresponding spirit forms When the button is clicked again the player will go back to base form
  • Implement functionality for assigning the various spirit forms to the buttons from a menu (havent made yet) . Think Megaman X4

Here is my code for my TransformUIController

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UIElements;

public class TransformUIControl : MonoBehaviour
{
    public Button TransformButton1;
    public Button TransformButton2;
    public Button TransformButton3;
    public GameObject player;
    Player thePlayer;
    PlayerStateMachine players;

    void Start()
    {
        var root = GetComponent<UIDocument>().rootVisualElement;

        TransformButton1 = root.Q<Button>("TransformButton1");
        TransformButton2 = root.Q<Button>("TransformButton2");
        TransformButton3 = root.Q<Button>("TransformButton3");

        thePlayer = player.GetComponent<Player>();

        players = player.GetComponent<PlayerStateMachine>();

        TransformButton1.clicked += TransformButton1Pressed;
        TransformButton2.clicked += TransformButton2Pressed;
        TransformButton3.clicked += TransformButton3Pressed;
    }
    void TransformButton1Pressed()
    {
        Debug.Log("Transform 1 has been pressed");
    }

    void TransformButton2Pressed()
    {
        Debug.Log("Transform 2 has been pressed");
    }

    void TransformButton3Pressed()
    {
        Debug.Log("Transform 3 has been pressed");
    }
}

I do hope I explained things properly I had a really hard figuring out how to word the question if there is any confusion or needing more clarification let me know!

Kindly,

Harpoaian

Still struggling with this bumping the post to get help :slight_smile: <3

Is it possible to assign a texture to a button via code?
Yes. element.style.backgroundImage = texture; for example.

But probably prefer doing so in the uxmlor uss files (UI Builder or text editor) as it will help separate visual design from logic this way.

PS: Don’t bind your ui on Start() but OnEnable(), you will experience errors later on otherwise.