Search code examples
androidanimationfontscolorslibgdx

libgdx - how to change my font color with an animated effect

I try to explain what I need in the most clear way. Imagine I have a font with an outline, now I want this outline to change its color dynamically but not sharply, like if it changes slightly from a color to another... a kind of continuous effect which change my outline between four color and then restart from the first one.

Solution

  • I don't know how you implemented font outline so I will use a Label font color change as example - you can implement it with your outline if you want to.

    My idea is to create some kind of "animation manager" updated in every screen step - it is very "straight" resolution but should work for sure. It should work in following steps:

    1. If target color is achieved get next target color
    2. Calculate the new step-color that brings you closer target
    3. Apply color to Label

    Now you can use some existing mechanisms to achieve this goal and this two will be useful for you:

    HSL/HSB color system

    https://en.wikipedia.org/wiki/HSL_and_HSV

    Is kind of color representation using three arguments - Hue, Saturation and Value. This is actually good for you because to change color you need to modify just one of arguments - Hue, other can be the same all the time which will guarantee you that every color will have same saturation and brightness.

    Unfortunately Color class in LibGDX doesn't support hsb/hsl system so you need to use some "external" tool - the good one is Oracle implementation:

    int java.awt.Color.HSBtoRGB(float hue, float saturation, float brightness)

    which you can use to create LibGDX color this way:

    Color color = new com.badlogic.gdx.graphics.Color( java.awt.Color.HSBtoRGB(hue, saturation, brightness) );

    Of course you can use another hsb->rgb "converter" or just implement it yourself - there are some patterns to calculate r, g and b values from h, s and l and you will find them in Google easily.

    LibGDX Interpolation mechanism

    Interpolation.apply(float start, float end, float a)

    The start is the value of your beggining color and the end is value of your target one. The a argument is step in time you've got to calculate on your own.

    To sum up basic code changing the Label color would be something like:

    ...
float a = 0.0f;

@Override
protected void step()
{
    if( a < 1.0f  ) a += 0.001f; // 0.01f is your time step - "how fast change"

    label.getStyle().fontColor = new com.badlogic.gdx.graphics.Color( java.awt.Color.HSBtoRGB(Interpolation.linear.apply(0.4f, 0.9f, a), 0.5f, 0.5f) );
...

    Now using this code you can create the manager that will handle with achieving target for example:

    ...
if( a < 1.0f  ) a += 0.001f;
else
{
    a = 0.0f;
    someTargetColor = someValue; //someValue can be taken from an Array
}
...

    Regards, Michał