Hey everyone! I’ve got an image in my UI, and I want to change its tint based on blueprints. I know that the image is essentially a Slate Brush, but I really want to tint it on the fly, based on some in-game factors. Is there a way I can do that? Any help would be appreciated.
Hi Soul, from what I understand, you already have an image texture or material setup and you just want to add an additional tint on top of it. That is definitely possible. You can use the Set Color & Opacity node for it.
For example, here my image is a black and white texture, but then it has this reddish tint applied on top of it.
oh nice! Thanks a lot! Is there a way I can add a glow to the brush as well?
Hey! A couple weird things seem to happen when I use the Set Color and Opacity node:
- A few UI elements around my image are also affected by the blueprint, despite them having different bindings. They’re also not hierarchically connected to my image.
- My image is a PNG with an alpha channel (attaching it here), and I just want to change the ring’s colour. However, the image just turns into a rectangle of the selected colour, which is not what I want.
Any idea what might be going wrong? Sorry I’m a total newbie with respect to UI haha.
If you want only the ring pattern to be tinted, it should be possible by having only the ring in white color, with the rest of the image being black. This way, when we apply a tint, the tint color is multiplied with the white color (1,1,1) and thus gives a tinted ring pattern, while the black region when multiplied (0,0,0) ends up remaining the same.
Also make sure that you have set the Compression Settings & Texture Group for your texture to UI.
I wasn’t using that node with the correct thought in mind haha. ‘Set Color and Opacity’ affects all the child objects in the widget. However, I just want to tint the ring texture. Is there a way I can only affect that?
Oh alright, for that you’re going to need a UI material for the ring, then create a Dynamic Material Instance based on it. You can then adjust the color of the ring like this:
I have an old tutorial for making ring materials without textures. You can use it to quickly setup the material. Just make sure to change its Material Domain to User Interface:
Hey, thanks a lot for the reply! I actually figured out a way to do it before I realised you’d sent an update haha. All i did was hook up the alpha value of the linear color structure with the variable I was using as a reference. Then I made my own Linear Color Structure variable and set the RGB values I wanted. Combine those two and voila! There was my output!