2d sprite "lightness"

[Sako]

Hi, I have kind of a newbie question.

I have a normal 2d Sprite object, and I want to make it colors darker or ligher (is a way that resembles the "lightness" slider in photoshop)

To make it darker, I can just use Sprite.setColor(0.5f, 0.5f, 0.5f, 1) and its colors will go towards black. How can I get the colors to go towards white?

[devilstick]

You could always make a completely white copy of your sprite, draw it behind the normal sprite, then use the setColor with an alpha less than 1 to control the opacity of your normal sprite.

[Sako]

It's kinda expensive in terms of storage to have a copy of every sprite. Cool solution nonetheless.

Maybe drawing the sprite with something like glBlendFunc(GL10.GL_ONE, GL10.GL_ONE) would make it completely white? I could experiment with that when I get home.

[Magnesus]

It would be very cool if there was posibble to set color to 2.0f for example to lighten the sprite. That would also allow for colorizing of dark sprites.

[Malkierian]

Just double the brightness on your sprite and set the default color to 0.5, 0.5, 0.5. That way, you'll have a full half to go either way.

[Magnesus]

It will oversatured the colors most of the time.

[kalle_h]

Make custom vertex shader that multiplies vertex color by two. Then you have range of 0-2.
Normal volor value is then 0.5.

[davedes]

In GL11 you would use a different texture environment mode. The default is GL_MODULATE, i.e. multiply vertex color by texel color. To brighten an image, we would use GL_ADD -- for e.g. vertex color (0, 0, 0) does nothing, and (1, 1, 1) turns the image pure white. (GL clamps the final value between 0.0 and 1.0)

It would look like this in code:

Code: Select all

//if we are brightening, use GL_ADD. if we are darkening, use GL_MODULATE
Gdx.gl11.glTexEnvi(GL11.GL_TEXTURE_ENV, GL11.GL_TEXTURE_ENV_MODE, GL11.GL_ADD);

batch.begin();
//0.0 => do nothing, 1.0 => full brightness
batch.setColor(brighten, brighten, brighten, 0f);
batch.draw(...);
batch.draw(...);
batch.end();

//we should reset the tex env to GL_MODULATE
Gdx.gl11.glTexEnvi(GL11.GL_TEXTURE_ENV, GL11.GL_TEXTURE_ENV_MODE, GL11.GL_ADD);

If we are using GL20 then the above solution would not be possible. You could use multiple draw calls with a particular blend mode, but that may get expensive. This is where shaders come into use. kalle_h provides one solution. Here is another one that allows you to modify brightness and contrast. It's based on my post here.

ShaderBatch:
http://pastebin.com/dK53uK12

You might use it like so:

Code: Select all

... create ...
      shaderBatch = new ShaderBatch(100); //tweak your size to minimize memory waste
      if (!shaderBatch.isCompiled) {
         System.err.println(shaderBatch.log); //due to GL11 or an error compiling shader
         //if we try using it now, it will behave just like a regular sprite batch
      }

... render ...
      shaderBatch.brightness = 0.5f; // 0.0 -> no change
      shaderBatch.contrast = 1.5f; // 1.0 -> no change
      shaderBatch.begin();
      shaderBatch.draw(...);
      shaderBatch.end();

The problem with this is that you need to flush the batch (begin/end) every time you want to change the brightness or contrast. If you are doing this per-sprite, then it can become costly and defeats the purpose of a batch. It also means you are using two SpriteBatches in your application, which is generally a heavy object. A more involved solution might be to pass the brightness/contrast as a custom attribute to your shader, and create your own sprite batcher of sorts using LibGDX's Mesh utility. Ultimately it really depends on your game and how you need this feature to be implemented.

[Sako]

davedes - that's a great explanation and just what I needed. I'm using GL11 so I guess I'll go with the GL_ADD method.