Sign in to follow this  
CarlJ

Unity gui gradient scaling?

Recommended Posts

CarlJ    122
In a continuation from this thread i would like to ask a follow up question. Basically i want to have a Y axis gradient but in the other thread nife87 said to keep the borders 1xA were 'A' is the size of the corners. If i do that i would be able to have a gradient so how exactly are gradients done in GUI development? Thanks

Share this post


Link to post
Share on other sites
Kambiz    758
For simple linear gradients you can use per vertex colors. The gpu will do the linear interpolation and create the gradient.

Share this post


Link to post
Share on other sites
nife87    520
Quote:
Original post by carlj133
But for this GUI i'm using images so how would i do it using them?


You cannot have Y-axis gradient on the vertical borders using the previously explained method. Normally such gradients will be made with simple colors like Kambiz suggested or perhaps by actually making/creating the images run-time (this will then be needed every time the window is scaled) to avoid scaling static/premade images. The latter solution is clearly the most flexible, since you can do much more than just simple linear gradients. But should you choose the latter solution, you could also go with a shader-based approach (may be too much for your needs), where some parts of the GUI are still stored as static images (only parts that cannot be calculated via simple formulas), and where some parts (preferably most parts) are created dynamically in shaders.

Share this post


Link to post
Share on other sites
CarlJ    122
Quote:
Original post by nife87
Quote:
Original post by carlj133
But for this GUI i'm using images so how would i do it using them?


You cannot have Y-axis gradient on the vertical borders using the previously explained method. Normally such gradients will be made with simple colors like Kambiz suggested or perhaps by actually making/creating the images run-time (this will then be needed every time the window is scaled) to avoid scaling static/premade images. The latter solution is clearly the most flexible, since you can do much more than just simple linear gradients. But should you choose the latter solution, you could also go with a shader-based approach (may be too much for your needs), where some parts of the GUI are still stored as static images (only parts that cannot be calculated via simple formulas), and where some parts (preferably most parts) are created dynamically in shaders.

It's not on the vertical borders. It's the left-hand side border.

Share this post


Link to post
Share on other sites
Kambiz    758
Quote:
Original post by carlj133
But for this GUI i'm using images so how would i do it using them?


Use gray scale images and multiply the colors with the gradients. This doesn't even require shades. (If you are using OpenGL look how the boxes in NeHe lesson 12 are colored, it is really simply: just set the vertex colors and render just like before... )
EDIT:
To make it clear, unlike lesson 12 you have to give each vertex a different color:


[Edited by - Kambiz on August 16, 2008 6:43:22 PM]

Share this post


Link to post
Share on other sites
DumitruSorin    104
But what do you do if you want more control over the gradient. Where the second color
starts blending in and where it's the only color. I don't you can get this using this method.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this