Hi!
I just opened ue5 5.6 for the first time today and I am trying to follow a tutorial made by Tinkr Academy “How To Build MENUS AND UI In UE5 | Unreal Engine 5 Beginner Tutorial”
Link: https://www.youtube.com/watch?v=198AMGtdo-E&t=980s
At around 13 minutes in, they start to use the image function in the widget blueprint. I wanted to have a background image, so I imported my background asset and continued to follow the tutorial step by step, but one thing stood out. My asset was green (it’s not supposed to be) and when I pressed play it was still green. The tutorial is a few years old and I’m wondering if I’m missing something that I need to add in this newer ue5 version?
How my background looks like (it’s supposed to be blue and white):
Check if your Image widget has a green “Tint” property, or if any parent has a green “Content Color and Opacity” property.
Also open the image texture in content browser and check if it looks correct in preview. Also while in there, make sure the Texture Group is set to “UI” :
Thank you so much for the feedback. I checked the tint but it doesn’t seem to have a green color.
In the details panel:
I tried to navigate to the image texture in the content browser, but I can’t find it. Could you please elaborate about where I should go in order to find the image texture?
Is this image a child of another component? If so does that components content color opacity have a green tint? Or if your using an overlay possibly another component has this color tint?
I don’t think it’s a child. As far as I know, I haven’t parented anything by actively clicking on parent somewhere. I also checked in the Hierarchy but it hasn’t accidentally been grouped or something either.
These things in red are the only things in the widget blueprint that I’ve used thus far (just like the tutorial I mentioned earlier), taking an image or button and assign my own asset to it:
I did the same formula for a button and that one isn’t green, it only happened with the image widget (in the details the image widget has no binding in the brush category).
I’ve tried to start over with my image asset in the widget blueprints (Just assigning the image asset to a new one) but the same thing happened. I’ve already checked the tint property and found nothing out of the ordinary.
I decided to take a screenshot of my image asset information (when hovering over it in the content browser).
Does it say anything here that might be the reason for the green color when using my image asset in the widget blueprint?
Fairly certain @Chatouille gave you the answer above. Your screenshot says your image is encoded as a normal map. Set the proper Texture Group and set compression to UserInterface2D (RGBA8). You might want to add some LODs or mipmaps as well. If this works, please give @Chatouille credit and mark their post as the solution.
The image was (for some reason) changed into a normal map when importing it into ue5 by ue5 itself as a default for that specific image.
After importing the image asset into ue5 there was a popup box that mentioned the normal map change (it disappeared pretty quickly so no wonder I didn’t notice it at first).
I clicked on a button inside the popup box, reversing the change and now everything works as intended.
Solutions are meant for the person who actually helped you. In this case, it was @Chatouille who gave you the correct answer above. They deserve the credit.
