CODEWITHSUNDEEP
javalibgdx
DeterminedLearner
DeterminedLearner

Reputation: 23

Fade in strings of text one by one in libGDX

I am trying to develop a game with libGDX at the moment. Right now, I am attempting to create a short intro to the game.

The short intro is just a solid colour background, with strings of texts (different sizes) fading in one by one.

Right now, my tactic is to create a variable fade that starts from 0 and increases by delta each time the game updates. When fade is bigger or equal to one, I use an if statement to cap it at one.

Here's a snippet of my code

public class MainMenu implements Screen{

public static SpriteBatch batch;
private static OrthographicCamera camera;
private static Music music;
private static BitmapFont font;
private static CharSequence title, subTitle;
private static float fade;

public MainMenu() {

    music = AssetLoader.getMainMenuMusic();
    music.setLooping(true);
    music.play();

    camera = new OrthographicCamera();
    camera.setToOrtho(true, 480, 800);

    batch = new SpriteBatch();

    title = "Text1";
    subTitle = "Text2";
    fade = 0;

    font = new BitmapFont(Gdx.files.internal("CordiaUPC.fnt"),
            Gdx.files.internal("CordiaUPC.png"), false);


}


@Override
public void show() {
    // TODO Auto-generated method stub

}

@Override
public void render(float delta) {
    // TODO Auto-generated method stub

    fade += delta;
    if(fade >= 1) {
       fade = 1;
    }

    Gdx.gl.glClearColor(1, 1, 1, 1);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

    batch.begin();
    font.setScale(1.0f);
    font.setColor(1, 1, 1, fade);
    font.draw(batch, title, 100, 600);
    font.setScale(0.5f);
    font.draw(batch, subTitle, 200, 500);
    batch.end();

}

When I run this, my two lines of text will fade in. However, fade will keep updating itself at 1 , which I feel like it's a waste if this is calculating for the entire time the app is running.

Also, I can't figure out how to fade the texts in one by one using this method.

So how should I do this? I have a feeling my way is probably completely wrong, but I'm not familiar enough is libGDX to know how to do it anyway else.

Upvotes: 2

Views: 1364

Answers (1)

Tenfour04
Tenfour04

Reputation: 93659

I suppose you could wrap

fade += delta;
if(fade >= 1) {
   fade = 1;
}

in a if(fade < 1) block, but this kind of an optimization is a waste of your time at this stage. It's insignificant, but if you were doing something like this to hundreds of objects in a loop, it would be useful (which is the only reason I suggest it, so you can keep it in mind for future use).

By the way, if you are fading something in, it looks much better to use a curve instead of linear interpolation like you're doing. Libgdx already has built-in helper classes for this kind of thing. You could do it like this:

private static final float FADE_IN_TIME = 1f;
private float fadeElapsed = 0;

fadeElapsed += delta;
float fade = Interpolation.fade.apply(fadeElapsed / FADE_IN_TIME);

And to stagger the fade of the two objects like you asked about, it only requires an extra parameter:

private static final float SUBTITLE_FADE_DELAY = 0.5f;

float fade2 = Interpolation.fade.apply((fadeElapsed-SUBTITLE_FADE_DELAY) / FADE_IN_TIME);

//...

batch.begin();
font.setScale(1.0f);
font.setColor(1, 1, 1, fade);
font.draw(batch, title, 100, 600);
font.setScale(0.5f);
font.setColor(1, 1, 1, fade2);
font.draw(batch, subTitle, 200, 500);
batch.end();

Upvotes: 5

Related Questions