|Topic was automatically imported from the old Question2Answer platform.
I am pretty new to godot and graphic engine overall. I am trying to create a fix background for a mobile app project with a gradient color (from white to blue). I was thinking of doing this with a ColorRect node but it does not seem to have this as an option. I found the Gradient object class in godot doc but I cannot find how to apply it to the ColorRect. Any suggestion on how to do this ?
I forgot to mention that the mobile app I work on only uses 2D interfaces.
quillaur | 2020-09-04 14:04
you can make a setup as follows
flags: fixed size
parameters: Depth Draw Mode > never
parameters: Billboard > enabled
Albedo: Texture > your gradient
then make the quad as large aas the viewport of the camera
this should do it
Ok. That’s definitly an approach I would not have thought of. Not sure I understand the logic behind it either though.
My app is a 2D interface. Why would you go for using a camera?
Otherwise, you suggest using the gradient I want as a texture. So, I would need to make a texture outside of godot and import it? Would that work in a ColorRect node as well? Is there a way in godot to create a texture that applies the wanted gradient described in my original post?
Thanks a lot for your help !
quillaur | 2020-09-04 14:01
When its a 2d Interface then just use TextureRect. There you can load a texture or create a new gradient texture with a new gradient.
Check expand on the textureRect for upscaling.
TextureRect and creating a new gradient texture in it works great ! Thanks a lot for your help klaas !
quillaur | 2020-09-04 18:27
This helped me, thanks!
anssiko | 2021-02-24 08:33
The comment by @klaas deserves to be an answer for those of us wanting to have a simple gradient background behind a GUI of
When its a 2d Interface then just use TextureRect.
Steps to do this:
- Add a
TextureRect node to fill the area you want the gradient in
- Click to add a “New GradientTexture1D” or GradientTexture2D
- Set the “to” and “from” colors as you like
Here’s an example: