I know that there’s an Image property in the Background section, but that’s not quite an image right? It’s still a background, meaning that if we set the size of the VisualElement to 100%, and height to auto, it will make the image disappear, as the element is actually empty from a content point of view.
So let’s say I want to add a simple logo in my menu, do I need to create it via code?
For now I ended up using a css trick with a padding-top set to a percentage and changing the size of the background to fit inside its container.
[edit] Just to clarify, you can still use it in the UXML even if it is not shown in the UI Builder’s available controls. Just insert it where it needs to be in the UXML and Builder will update with it. Although I see there are no properties exposed so you would have to set the actual texture or sprite via C#.
I was kind of hoping that I was missing something. Images are a common element in UIs, so having to manually update the UXML, and then again having to set the image via a script sounded like a very weird limitation to me
Well, you’re using an alpha software with a preview package. Nothing is done in these yet. They will add the Image component to the UI Builder at some point, I’m pretty sure.
Somewhat old post but there is still no image in the “Libary” menu of the UI Builder. Actually you just have to add one, then you can copy&paste it. But the Inspector doesn’t show the fields for the image, so you have to access it from code. Plus point of images: you can add sprites. Pretty useful when making an inventory item editor window.
There is a really easy way to add it. Itr will then show up in the library under the project tab.
using UnityEngine.UIElements;
public class MyImage : Image
{
public new class UxmlFactory : UxmlFactory<MyImage, Image.UxmlTraits>{}
public MyImage()
{
}
}
The reason it was never added to the UI Builder library is because the UI Builder does not support custom USS properties. So even though you could add the Image in the UI Builder to your document, you wouldn’t be able to set its image property. It’s something we’re still figuring out.
Yeah… that’s like opening an ice cream stand without chocolate+vanilla; then when asked for one of these most common flavors, they respond,
“if you combine a few flavors that are similar, it can somewhat achieve the taste of chocolate…”
Why even have all these advanced features before the basics? It just makes no sense, seemingly another item to add to the list of “The result of Unity decision makers that don’t use their own product” nuances.
As of Unity 6000.0.48f1, Images still don’t appear to be supported in the UI Builder. I also attempted to use the technique described by @celinedrules above, but it was bothering me that I couldn’t set the Image in the UI Builder.
Here’s a revised method that worked for me, based on the fact that at least in this version of Unity, the Image class just has an underlying Texture that can be set.
[UxmlElement]
public partial class UIImage : UnityEngine.UIElements.Image
{
[UxmlAttribute]
public Texture Texture
{
get { return image; }
set { image = value; }
}
}
Using this technique, you’ll at least be able to set the Image through the UI Builder here:
This is my first exposure to the UI Builder, but I’m thinking I’ll be able to use this technique to expose any additional Image properties as needed… Hope this helps someone out there!
Crazy that 4 years later, there’s still one of the basic elements of pretty much every UI missing from the UI Builder. Other people write an entire engine in that time.
We had some infrastructure issues in the past that made it difficult to expose Image to the UI Builder. However, we’ve made improvements since then. I recently created a quick prototype, and it appears to be working fine now. Next, we’ll clean it up and try to get it into one of the upcoming releases.
