- Home /
Fill rectangle with a gradient not using GUI
Hi,
I'm new to unity.. I'm working in 2D mode. I can't figure out how to place a rectangle with color fill in the scene. I don't want to use the GUI methof of doing this, because the rectangle needs to be part of the scene.
Also I'd like to fill it with a gradient going from one color to another. Say from Red to Blue. How can I achieve this, best practice. I need the colors to change dynamically, so one frame could be red to blue but the next frame could be pink to yellow or something, but would need to be the same game object. Thanks for your help.
Answer by giulio-pierucci · Feb 10, 2015 at 07:38 PM
You can use:
http://docs.unity3d.com/ScriptReference/Graphics.DrawMesh.html
or
GLDRAW http://docs.unity3d.com/ScriptReference/GL.html
You have to set with first color 2 vertices color, other 2 with second color. The shader MUST read vertex color (like Particle)
Grazie mille! I'll see how I go and if I get stuck I'll come back.
Answer by brebarth · Feb 12, 2015 at 07:57 PM
Okay. I found a solution for this. My solution wasn't exactly how giulio.pierucci suggested, but it helped my get to the right way. Anyway there is more than one way. What I did was:
(1) Make a quad in the hierarchy
(2) import a perfect white image into the project view.
(3) create a material with the white swatch
(4) drag the material on the quad's inspector into the mesh renderer Materials property.
(5) create a script file and add code:
MeshFilter viewedModelFilter = (MeshFilter)GetComponent("MeshFilter");
Mesh mesh = viewedModelFilter.mesh;
Color[] colors = new Color[mesh.vertices.Length];
Color BottomColor = Color.red;
Color TopColor = Color.blue;
colors[0] = BottomColor;
colors[1] = TopColor;
colors[2] = BottomColor;
colors[3] = TopColor;
mesh.colors = colors;
into the Update or Start function, depending where you want it.
(6) in the quad's inspector pick the white material's shader as Particles/Alpha Blended Premultiply
I'm almost happy with this solution. I have a couple of question though:
(question a) Is this solution efficient or computationally wasteful?
(question b) I've added a screen shot. On the left is my Blue to Red gradient in photoshop, on the right is my quad / material gradient in Unity. Now, when I open the screen shot image in my image editor and use color picker to see the R,G,B values of the respective gradients, I get different colors for unity-sourced gradient vs the editing-sourced gradient, even though they should be exactly the same. The image editor's gradient is on the left, the unity gradient is on the right. In code I use Color.red/Color.blue, and in the editor I use perfect red (255,0,0) and perfect blue (0,0,255) Why is unity changing the color from perfect red to (248,15,0)-> color-picked, which is almost perfect but not quite. Btw, I also color-picked the screen shot of the original gradient from the editor and the color grab was also not perfect red but different values than the unity-sourced gradient. But shouldn't the changes the color picker has be exactly identical? Is there a modification in Unity, because of the shader? What can I do to have unity not modify the on-screen colors in that way?
The difference of color maybe caused by texture importing parameters (like compression, RGB sampling, etc)
The solution isn't too expensive, but is better not compose mesh in Update function, but you should instantiate and modify the mesh in Start, if possible.
Colors: I used lossless compression for my editor output images. Whatever screen capture does I don't know, so there might be lossy compression. But even in that case, shouldn't both gradients then have exactly the same loss error? But this is not the case, they slightly vary.
$$anonymous$$esh: Where is the mesh composed in that piece of code? Is it composed "hidden" inside one of the calls I make? Otherwise I don't see that it es composed.. Or were you speaking in general?
$$anonymous$$esh: Oh, in general. In your code you get a quad mesh from asset, sorry for my mysunderstanding.
Colors: You probably use a loseless compression for exporting images by your favourite image editor, BUT ... Unity imports, corverts and optimizes them PER PLATFOR$$anonymous$$!
If you click image in Project window, you can see import parameters in inspector.
See the image above, for example:
Your answer
![](https://koobas.hobune.stream/wayback/20220613182959im_/https://answers.unity.com/themes/thub/images/avi.jpg)
Follow this Question
Related Questions
Gradient Text in Unity 5.2.2 "BaseVertexEffect is obsolete use BaseMeshEffect instead" 3 Answers
Particle System - Get 'Start Color' as Gradient 1 Answer
Apply gradient between two colors on x amount of objects 1 Answer
Smooth gradient between colours? 1 Answer
change Mesh.colors over time help? 2 Answers