As a Roblox developer, it is currently too hard to apply filters to images. If you want to invert an image, apply grayscale, or change its brightness, you have to do it in an image editor and re-upload the image. Enabling this functionality in-engine will speed up development time and reduce the number of image assets that need to be downloaded. This would also allow more dynamic interfaces in cases where it’s impossible to edit the image offline, for example, showing a dead player’s character image in grayscale on a player list.
Possible filters include:
- Blur (pixels length)
- Brightness (percentage)
- Contrast (percentage)
- Grayscale (percentage)
- Hue Rotate (angle)
- Invert (percentage)
- Saturate (percentage)
Order matters when applying filters. For example, applying a 0% brightness filter followed by the invert filter could convert a multi-colored icon into a pure white icon. Additionally, some of the filters should be allowed to go higher than 100% to provide a more extreme effect.
There are a lot of ways this could be implemented. I think the best option would be to mirror the way PostEffects work in Lighting and UIComponents work in GuiObjects right now. These proposed “ImageFilter” instances would modify their parent ImageLabel or ImageButton, and could have two properties: Percentage/Angle/Length and FilterOrder, which would be a number, and filters with a lower FilterOrder are applied first.
- Pros: Mirrors current PostEffect and UIComponent system and is arguably easier to use than possible alternatives like creating a new data type or a bunch of new properties while maintaining filter order. This also has the potential to be extended to other image objects like Decals and Textures.
- Cons: Bloats the creatable instance list even further and doesn’t line up with the way ImageColor3 works, which may be confusing.
That’s just one implementation, there are countless other ways this could be done. Regardless of how it’s done, this feature would be really useful to me and I’m sure to others as well. Every time I have a black or multicolored icon and I want to change its color to match the interface I’m creating, I wish I could just apply some filters to the image instead of taking the time to download the image, edit it, and re-upload it.
I also hope this is even possible with the Roblox engine so I didn’t just type all of this for nothing. 