10
\$\begingroup\$

I'm looking into prototyping a game in Unity which will consist of solid square sprites / tiles. I figure I can represent different types of objects with different colors for each of the tiles in the game.

I figure that I can import a single square sprite and shade it appropriately in Unity as opposed to imported squares of many different colors.

My experience with adjusting the hue and saturation within Photoshop shows that white is not an easy color to change as things that are white often stay white. My testing in Unity shows that I can change the "color" of a sprite to anything other than white and the sprite is seemingly shaded appropriately, despite what I would have thought given my Photoshop experience.

Since white objects do seem to take on the appropriate color shading when changed within Unity my gut tells me that this is the best base color to begin with, meaning that I can import a single white square sprite and simply adjust the color to represent different objects and object states.

Is a white sprite actually the best color sprite to begin with and why does something like this work in Unity as opposed to adjusting the hue and saturation within Photoshop?

enter image description here

\$\endgroup\$
1
  • \$\begingroup\$ First, define "best". \$\endgroup\$
    – Krythic
    Commented Oct 11, 2016 at 14:55

2 Answers 2

13
\$\begingroup\$

White is the best base color for true representation. Also keeping your sprite grayscale can make for some easy color adjustments for teams, etc.

Unity applies a Multiply blend mode to the sprite texture and color.

Unity's Color type is ranged from 0 to 1 inclusive.

Color.White is equal to (1, 1, 1, 1).

Knowing that 1 times anything is itself.

If the grayscale texture is blended with the Sprite Renderer Color field, each pixel is itself. Changing this field will simply multiply each uniform grayscale value by each component of the color.

Tinting some a sprite


You can play with the Multiply blend mode in your favorite image editor like Photoshop or GIMP.

Photoshop Setup

\$\endgroup\$
3
\$\begingroup\$

Sprites-Additive.shader - GitHub Gist

Unity colors have 4 float values typical of many color formats RGBA, corresponding to the individual percentage color values Red, Green, Blue and the Alpha transparency channel.

Also as mentioned above the default "Tint" applied by Unity is a multiplicative shader Photoshop calls this effect "Multiply" and the process is literally multiplying the color values in the pixels of your sprite with the color value selected.

The problem with this is, a Multiplicative color math shader will ALWAYS produce the same hue (if you "multiply" by white) or darker color if you multiply by anything else. I came across the situation where I wanted the exact opposite effect in a blacksmithing type situation. Heated metal should not be Multiplied by Yellow to produce a darker hue:

multiplicative shader by Yellow

Instead, I rewrote Unity's default multiplicative shader to be an additive one. The results were more along the lines of what I was looking for:

additive shader

I'll provide a gist to the rewritten Sprites-Additive.shader if anyone is interested.

Here is a good reference on color terminology and modes: http://www.northlite.net/ps/blend.htm

\$\endgroup\$
3
  • \$\begingroup\$ A user without enough reputation to comment has expressed interest in seeing the shader code for this effect. Do you still have it available to share? \$\endgroup\$
    – DMGregory
    Commented Oct 11, 2016 at 14:27
  • 1
    \$\begingroup\$ Hey, I don't have it readily available now, but I will dig it up and get a link as soon as I can. Tonight if possible. \$\endgroup\$
    – Joe
    Commented Oct 13, 2016 at 14:30
  • 2
    \$\begingroup\$ I take that back, I found it relatively easily and added it to a Gist on my GitHub. The one MAJOR difference between an additive and multiplicative shader is dealing with transparency. In the additive shader I set a 10% transparency cutoff to maintain the relative alpha of pixels with low alpha values. You don't have to worry about this sort of thing on a multiplicative shader due to the nature of that math. \$\endgroup\$
    – Joe
    Commented Oct 13, 2016 at 17:26

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .