Change Sprite Coloring Mode

[Lex]

Hello everyone,

NGUI has an option to change the color of sprites based on a color chosen in the UIWitdgetInspector, this approach works in a way that everything that is white changes to the chosen color and everything darker (gray, black) becomes a darker spectrum of the color.

I want to be able to choose a color that is not the brightest one. I want to pick a color that will be represented as gray in my original file and everything darker or brighter changes its spectrum accordingly. What I'm trying to achieve here is to make a button where I choose for example Red and the lighter areas of my button becomes like a "glowing" red.

So the question is, how can I achieve this? Is this even possible? Maybe changing material shader os scripts?

I hope I made my doubt clear, if not let me know and I'll try to use some images to explain.

[ArenMook]

It's possible, yup -- but you will need to ether modify NGUI's shaders or just create your own.

For example, if you open up Unlit / Transparent Colored shader, you will see this at the end:

1. SetTexture [_MainTex]
2. {
3.         Combine Texture * Primary
4. }

Change it to:

1. SetTexture [_MainTex]
2. {
3.         Combine Texture * Primary double
4. }

[Lex]

Creating a new atlas using a custom shader with its material might be the right way to do things here as I can easily setup everything I want colored this way in this new atlas and I'm ready to go.

But the code provided is not quite what I want, it just makes everything even "brigther". That is probably the line I want to edit though, I just have to find the right blending mode for what I want and apply the algorithm there.

Edit: Okay, I found that what I want is similar to the "Overlay" effect used on Photoshop Layers.

- Create grayscale image on photoshop using 127 gray as your "main" color.
- Create a new layer on top of that and paint it any color you want.
- Select "Overlay" in the dropdown box close to the opacity option.

[Lex]

I finally got this code working and is exactly what I wanted, I'm posting it here so it may help anyone in the future trying to achieve the same, it's based on Unlit / Transparent Colored shader and copies the Photoshop Overlay effect described in previous post.

1. Shader "Unlit/Photoshop Overlay"
2. {
3.         Properties
4.         {
5.                 _MainTex ("Base (RGB), Alpha (A)", 2D) = "" {}
6.         }
7.        
8.         SubShader
9.         {
10.                 LOD 100
11.  
12.                 Tags
13.                 {
14.                         "Queue" = "Transparent"
15.                         "IgnoreProjector" = "True"
16.                         "RenderType" = "Transparent"
17.                 }
18.                
19.                 Pass
20.                 {
21.                         Cull Off
22.                         Lighting Off
23.                         ZWrite Off
24.                         Fog { Mode Off }
25.                         Offset -1, -1
26.                         ColorMask RGB
27.                         AlphaTest Greater .01
28.                         Blend SrcAlpha OneMinusSrcAlpha
29.                         ColorMaterial AmbientAndDiffuse
30.                        
31.                         SetTexture [_MainTex]
32.                         {
33.                                 Combine Texture +- Primary, Texture * Primary
34.                         }
35.                        
36.                         SetTexture [_MainTex]
37.                         {
38.                                 Combine Texture +- previous, Texture * Primary
39.                         }
40.                 }
41.         }
42. }

And this is how I felt while doing this:

[ArenMook]

Change:

1. Blend SrcAlpha OneMinusSrcAlpha

To:

1. Blend One One

(in the original shader)

This will use additive blending, and will do the overlay thing. But if you say your shader works, that's fine too.

[Lex]

Change:

1. Blend SrcAlpha OneMinusSrcAlpha

To:

1. Blend One One

(in the original shader)

This will use additive blending, and will do the overlay thing. But if you say your shader works, that's fine too.

Not sure if I did it right but I couldn't achieve the same results using this piece of code. Try it out and you'll see the difference, by the way I just realized that my code is great to create white fonts with colored borders too if you create a white glyph with 50% gray borders.