Jump to content

[GUI] How to apply tint to an image?


gnatogryz
 Share

Recommended Posts

Hi everyone, I have gui assets from my previous Unity project - mostly greyscale textures. That's because we've been using tint color on ui elements to make it easier to adjust color palette project-wide, and also to create color transitions on ui elements.

Is there any way to replicate that behaviour in Babylon? The only thing I've figured out so far is to use the css hue filter, but I can't get even that to work.

Here's a playground (the texture is not really suitable, but I just want to achieve a proof of concept)
https://www.babylonjs-playground.com/#50VN6Q

Link to comment
Share on other sites

Hello and welcome!!

The GUI is rendered using HTML canvas 2d operations and thus we can use composite operations (https://stackoverflow.com/questions/2688961/how-do-i-tint-an-image-with-html5-canvas)

 

You could probably replace control._draw but if you are interested I could add a new observable (like control.onBeforeDrawObservable) so you could change the current canvas context

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...