Tinting Babylon JS GUI Image

I was wondering if there’s any way to apply a color tint to Images from babylonjs-gui.

It has a .color and .disabledColor but neither of these seem to have any effect on what is drawn.
Otherwise, is there any other technique with which I could tint the image sprite?

Hello and welcome!

maybe you can play with alpha? (like the buttons for instance)
https://www.babylonjs-playground.com/#XCPP9Y#4

Thanks so much for the quick response!
Unfortunately alpha only sets the opacity, whereas I’m trying to put up a set of procedurally generated UI sprites with different colors (not transparent).

I could render the image assets in different colors for all of them, but it would be a lot lighter on the download size if I do it in grey and tint it. Is there any other method I could use? :slight_smile: Thanks again in advance!

I think this is the one you are talking about
https://www.babylonjs-playground.com/debug.html#7EPK2H#22

Edit: That function at the top of the second playground will turn the image to greyscale. if you play around with it you can make it to blue, red or green scale or whatever colour.

Ahh-- would there be a way to do this without using a custom shader/render to texture though? It seems like a bit of overkill just to color some sprites :slight_smile:

Most babylon objects like Sprites or SolidParticles seem to have a .color property… is there some equivalent of this that I might be missing? :slight_smile:

You could render an image to a canvas, then modify the pixels, and then set the _domImage property of the GUI.Image to be the canvas

Pinging @Deltakosh, would it make sense that the .color propery for a Babylon.GUI.Image should change its tint?

@Fernfreak, would you be able to make a simple Playground to reproduce what you want to do via Image.color?

Could be a good idea yeah!

id be interested in that. I might look into it when i get some time :smiley:

My apologies! I was on the road for a bit-- here is a playground for it: it’s on line 14.

My objective is simply to tint a GUI Image: most major engines allow one to adjust the .color property on a sprite in order to apply a tint (similar to lighting for a material): for example:
image.color = new BABYLON.Color4(0,0,0,0);

Would this be the correct usage?
After all, if you can do image.alpha = 0 then it would seem consistent that you can do image.color = new BABYLON.Color4(0,0,0,0);

I would like to create a set of multicolored images from a single grayscale object, rather than creating assets in various colors.

I appreciate Deltakosh’s suggestion to use alpha, but here I would need a color tint, rather than alpha.
I appreciate Rah’s CustomFragmentShader, but I think that might be overkill.
I appreciate Gijs’ suggestion of modifying the image pixels via canvas, but I think that might be too slow to change colors frequently

This is the first time I’m posting a playground snippet, so I hope this link works! :slight_smile:
https://www.babylonjs-playground.com/#XCPP9Y#1117

1 Like

you mean something like ? :

https://www.babylonjs-playground.com/#XCPP9Y#1120

To elaborate on to why there might not be something like .alpha but with tinit
changing the alpha of the image is on each colour, so .rgba, so red green blue alpha. Changing the a of each value would just be setting one variable for each colour in a image.

Where as adding a tint you would have to interpolate the grey and then add the colour on top of it. Er something like that.

Heres the thread i made on this a similar topic a while ago:

I’ve added a playground out here :slight_smile: https://www.babylonjs-playground.com/#XCPP9Y#1117