How could I draw text in an 'info bubble' with libgdx?

Question

I am making an android game using libgdx where there are textures on the screen which represent people. When you touch a person sprite I want a little info bubble to pop above their head displaying some information about them in text form (something a bit like how speech is shown in a comic book). The sprites move and the info should follow above them until it is tapped closed.

I have got something working at the moment, which is really basic. I have rectangle that is part of the ShapeRenderer that is drawn, I then draw the text over the top using the batch draw.

I want the rectangle to have curved edges and resize depending on the size of the text but before I start writing something.

Does anyone have any suggestions on how I should go about it? Should I try and use dialog from scene2d and render my whole game using scene2d? From what I have seen it seems good for menus but I'm not sure about rendering a whole game using it.

Or is there something else?

Answer 1

Ok so two parts to this;

rectangle to have curved edges and resize depending on the size of the text

This sounds great for 9patch! 9patch can scale up textures using only certain portions of the image, so you get to keep undistorted smooth corners when scaling both vertically and horizontally.

depending on the size of the text

LibGDX has a useful tool for this, BitmapFonts. We can call : font.draw(Batch batch, java.lang.CharSequence str, float x, float y, float targetWidth, int halign, boolean wrap). Then to find out how tall we need to draw the box after specifying the width with targetWidthby capturing information from the GlyphLayout object returned.

... However we have already drawn it so this is no good! Instead we can use a GlyphLayout object directly and then call font.draw(Batch batch, GlyphLayout layout, float x, float y). Once we have added all the text and more importantly drawn the background.

//It might look something like this
BitmapFont font = new BitmapFont();
...
int textBoxBuffer = 5; // Allow for box to surround the text
int textBoxWidth = 80; // the default width of the textbox
void drawSpeech(String str, int x, int y){
    GlyphLayout layout = new GlyphLayout(str, x, y, textBoxWidth , Align.left, true);
    draw9PatchTextBox(x - textBoxBuffer, y - textBoxBuffer,
                      layout.width + textBoxBuffer, layout.height + textBoxBuffer);
    font.draw(batch, layout, x, y);
}