How to make a Toggle copy a set of Images

Unity Engine
1

Hello,

I am developing a random avatar generation system: x.com

Now, the avatar is composed by 3 Images, in the Hierarchy:

  • silhouette
  • eyes
  • mouth

Once the Player selects the avatar, I would like to show it as image component on the Toggle, instead of the default one.

Any hint of where should I start to see solutions?

2

Hi, I am new in UIElements and I am building my level editor step by step. I already found some ways how to achive what I want. 1. lot of things can be done simply with styles 2. UIElements Debugger is your friend :slight_smile:

If I put Toggle into UI and display it in UIElements debugger, it looks like this:

5069528--498380--UIDebugger.png
5069528--498380--UIDebugger.png712×508 45.7 KB

Toggle added whole small hierarchy of elements. Last element is the one, that has background image with square (either checked or unchecked - both is single image)

Now, with style in .uss file you cen get to this element and style it to display different images. This is what I tried:

Toggle > VisualElement > VisualElement {
width: 40px;
height: 40px;
background-image: url('/Assets/_GAME_/UI/Editor/Images/SmileyBad.png');
-unity-background-scale-mode: scale-to-fit;
-unity-slice-left: 0px;
-unity-slice-top: 0px;
}

Toggle:checked > VisualElement > VisualElement {
background-image: url('/Assets/_GAME_/UI/Editor/Images/SmileyGood.png');
}

First, for unchecked Toggles I replaced image with red unhappy face. I also had to override unity slicing, as original Toggle style sets it (your style is always stronger than Unity’s one)
Secondly, in case Toggle is checked, I am overriding my style for Toggle with different background image.

This is how it looks in array of Toggles:
5069528--498377--Toggles.png