Tasharen Entertainment Forum

Support => NGUI 3 Support => Topic started by: Lex on April 24, 2012, 03:25:53 PM

Title: Change Sprite Coloring Mode
Post by: Lex on April 24, 2012, 03:25:53 PM
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.
Title: Re: Change Sprite Coloring Mode
Post by: ArenMook on April 24, 2012, 11:32:56 PM
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. }
Title: Re: Change Sprite Coloring Mode
Post by: Lex on April 25, 2012, 08:10:04 AM
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.
Title: Re: Change Sprite Coloring Mode
Post by: Lex on April 25, 2012, 10:25:13 AM
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:

(http://dl.dropbox.com/u/29307820/No%20Idea/no%20idea.png)
Title: Re: Change Sprite Coloring Mode
Post by: ArenMook on April 25, 2012, 11:41:06 AM
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. :)
Title: Re: Change Sprite Coloring Mode
Post by: Lex on April 25, 2012, 11:56:17 AM
Quote from: ArenMook on April 25, 2012, 11:41:06 AM
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.