Hello,
I simply want to have a GUI node rectangle which instead of having one solid color has a radial gradient from its center outward, how can I achieve this?
Thanks!
You can draw this in any graphics editor and then put this as a texture for your node.
I am aware but doing this with every gradient type leaves me with an absolutely massive quantity of atlas size because the gradients have to be hi-res enough to not be noticeably drawn from an image and I need enough of them to interpolate, so I was hoping there would be some way for simple programmatical gradients
You could also make a gradient in shader - do you need some tips how to do it or would like to try on your own for now? In any case, you can get back with questions 
How many gradients do you need? Will it be selectable by user from some finite list or would you like to allow the user to adjust colors at will? Would you like to mix two colors or make shades of one color?
2 Likes
If you want just a tinted color on gradient, there is one simple trick:
You can draw just one texture in grayscale only and then use it on any node and select color I am using such one texture for all bars in my GUI and notice their tint:
(sorry for quality, but I made a screen on my phone 
)
4 Likes
Making gradients in shaders might be a preferable option however I would appreciate your help with that as I’ve never used shaders before (I didn’t understand the Defold reference material and manuals regarding shaders, and have never understood how to properly implement them).
I will need the ability to programmatically generate gradients based on the colors at various radii across the gradient and their opacity, but each gradient only needs to be capable of holding 4 radii colors maximum. This is because I intend to animate the colors and their associated radii to make some very cool visuals 
2 Likes
Is there a way to modify this strategy to allow the gradient’s inflection point to be programmatically altered?
The bars look very nice!
(No sweat, the quality is very good and your storyboard looks absolutely awesome)
1 Like
A very, very basic project I’ve made is attached below No textures, just a pure fragment program
You can modify the fragment program my_gui.fp and use your preffered radial gradient function, tinker a little bit there Further modifications could allow you to change the behavior of the fillings of the nodes and so on.
Notice the fragment program applies to all of your nodes separately - If you would need to use few different gradients in one GUI, you would need to think of a workaround (more GUIs e.g.) or something more sophistiticated
Regarding controling the shader from your game/app logic - it’s a little bit tricky, but you can control it from your render script, as figured out here
GUI_shader.zip (19.2 KB)
4 Likes
Another option would be to generate the gradient as an image at runtime and set it using gui.new_texture() and gui.set_texture(). It could be encapsulated into a Lua module to make it highly reusable.
4 Likes
Thank you very much! I am going to spend the next two days trying to decode this
1 Like
Thank you, this sounds much simpler and therefore would be preferable to implement but can new_texture handle complex textures with opacity and whatnot? How can I actually design the graphic and convert that to a buffer to pass to gui.new_texture? How does the texture data field work gui.new_texture?
Yes, you create the raw pixel data (rgba) so you can without problem create transparent or semi transparent images.
2 Likes
What actual data format is it though, or how can I generate raw pixel data? is it a 2d table of vector4s?
It’s a binary string with raw pixel data in rgb or rgba format. See the example here:
This might not necessarily be the case. I have used 16x16 bitmaps for full-screen gradients in my projects. This has worked remarkably well.
3 Likes