How to make Textures Lighter/Reduce Color in 2D.

Questions & Answers
1

Hi,

I have an issue that I can’t figure out how to reduce color in textures without making those transparent or darker. Currently the effect I want is created by changing Alpha of the texture, which looks as I want it to look, but at the same time background objects are shown through the forefront object, which isn’t something I want.

35108-problem.png
35108-problem.png700×410 480 KB

In the picture you can see that in the area surrounded by red line the image in background, in this case cloud, is shown through the ground texture. This isn’t something I want. However, if you compare the color of ground (the opaque ground on which the ball, trees and bushes are) to the background ground (the semi-transparent ground) you can see there is a difference in color. The shallow/lighter/colder/reduced color is something I want to achieve without making the texture transparent.

There are few solutions I’ve come up with, but not yet tested.

  1. Creating a second texture just behind the mountain layer which is just the size of the layer I want to reduce color from AND the same color the background of that area is, without clouds. I.E. create a second mountain range and transform the color of that area to the same as in the light-blue sky. The fading would be done, but since there is a second layer just behind which is opaque, the clouds wouldn’t be seen through.
  2. Create a custom shader which would calculate the color as if it was faded in but yet keep the texture opaque.

The reason why I asked, is that I think that there is already a tool for reducing the color but that I just haven’t found it. The problem is so specific that using Google brings me to threads which have more to do with using Alpha than reducing color and I can’t think of anymore search words to use. This problem has pestered me for two months now (I’ve progressed in other problems while periodically returning to this).

2

What you’re looking for is actually a reduction in saturation. You want to desaturate the colors in that texture, but doing so is unintuitive when colors are in RGB representation.

Try to open the texture in a standard image processor, e.g. Paint.Net or Photoshop, then lower the saturation, just to confirm that what happens to the image is the effect you desire in-game.

To do it to a texture in-game, the most intuitive way is probably to convert the RGB color representation to HSV/HSL, lower the saturation value of it in this representation, then reconvert it to RGB and save it back to the texture.

The algorithm for converting back and forth between RGB and HSL is very simple. There’s sample code at this site to help get you started: