1
\$\begingroup\$

Im starting learning the libgdx framework and I want to "clone" some games. I know how to handle touch with

if(Gdx.input.isTouched())

But how do I render new fonts every time user clicks on the screen? (Like the Numbers going up and desapearing) I tried creating new objects, and made a array to store all "y" positions, but both no success.

like THIS

\$\endgroup\$
  • 1
    \$\begingroup\$ That's a pretty in depth answer depending on what else you've tried. Have you tried simply drawing text to the screen with the font? Has that worked? Do you encapsulate the creation, drawing, and movement of the text into a single class? \$\endgroup\$ – Jmrapp Aug 21 '15 at 2:15
  • \$\begingroup\$ I tried, but i cant get more than 1 BitmapFont at screen each time \$\endgroup\$ – Luan_Cavalcanti Aug 21 '15 at 9:29
  • \$\begingroup\$ Can you post some code or anything? \$\endgroup\$ – Jmrapp Aug 21 '15 at 13:48
1
\$\begingroup\$

There is no exact (and short) answer for what you are asking, but I'll try to help you for some parts that you need to know in order to achieve this.

for simplicity, I'll skip and resume a lot of code *


First part is How can I render text?. There are plenty of tutorial in internet. A fast example is the Scene2D library (already in libGDX yei!) using the Label class or an easiest option using the BitmapFont.

I'll follow the second one. To render text with BitmapFont you could follow this tutorial. I'll resume it skipping parts like adding the font to your project blablabla in order to create a class like the following:

public class MyText {
    // flag to know when the text expired
    private boolean stillAlive = true;
    private String text;
    private Vector2 position;
    // random lifetime...
    private float life = 1f;

    public MyText(String text, Vector2 position){
        this.text = text;    
        this.position = position;
    }

    public void update(){
        // You could move your text here...
        position.y += 1;

        // we will need something like this to remove old text
        life-=0.01f;
        if(life <= 0){ stillAlive = false; } // <-- kill text
    }

    public void draw(SpriteBatch batch, BitmapFont font){
        font.draw(batch, text, position.x, position.y);
    }
}

So now, in my principal game class I'll create a container of MyText objects called text2show, then in the render() method, I'll iterate through this object to update my text (move, expire, blablabla) and then draw it:

public class TestGame implements ApplicationListener {
    private SpriteBatch batch;
    // Default font...
    private BitmapFont font;
    // This object will contain all my text to render...
    private Array<MyText> text2show = new Array<MyText>();

    // ... constructor, create, dispose, resize, pause, resume ...

    @Override
    public void render(){
        // some code...

        // First iterate through all your available text to update them
        for(Iterator<MyText> it = text2show.iterator(); it.hasNext();){
            MyText t = it.next();
            t.update();
            // Check if some of them has expired, if true, remove them
            if(!t.isStillAlive()){ it.remove(); }
        }

        // Now you can render all your text items
        batch.begin();
        for(MyText t : text2show){
            t.draw(batch, font);
        }
        batch.end();
    }

    // ... rest of code
}

So, here we have create a container and a class that can handle the draw and update of my text. Next question is When do I will add a new text?. For this, there are two approach: by polling and by handling events. There are a lot of tutorials about this, an example is this one.

What you wrote is polling:

@Override
public void render(){
     // If a touch has occur, then add a new text item to draw...
     if(Gdx.input.isTouched()) { 
         text2show.add(new MyText(
             "test", new Vector2(Gdx.input.getX(), Gdx.input.getY())));
     }

     // rest of the code (update text, draw text blablabla)...
}

Basically you just ask every loop if a touch has been made. The other option is using the InputProcessor and/or GestureListener interfaces to separate this part and let a listener to handle it:

public class TestGame implements ApplicationListener, InputProcessor {
    // variables...
    // ... constructor, create, render, dispose, resize, pause, resume ...

    @Override
    public boolean touchDown(float x, float y, int pointer, int button) {
        // If a touch down has occur, add a new item to draw...
        text2show.add(new MyText("test", new Vector2(x, y)));
        return true;
    }

    // keyDown, keyUp, keyTyped, touchUp, touchDragged, mouseMoved, scrolled...
    // ... rest of code
}

There are pros and con for both approach, use whatever you want.

For the last part. How can I handle smooth transitions?. In the code that I post I just made horrible animations changing the position linearly. But what if you want a smooth transition? a smooth movement or a smooth fade-out before remove your text? what if you want to remove your text in a certain amount of time?

You will need an interpolator. An option is the Universal Tween Engine but you can made your own, this tool helps with the interpolation maths and is very easy to implement it, for simplicity I'll let the rest to you.

I hope this could help you to achieve what you are looking for! :)

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.