Creating chat bubble using 9-patch and Glyphlayout

Question

I'm trying to create a chat bubble using 9patch as my background and text in the front.It is not drawing anything and I am unable to find the mistake in my code.

PS: I've taken some help from prev answers to write this code

Here is my code

 public void render(SpriteBatch sb) {


        chatBubble.drawSpeech(str,(int)Gdx.graphics.getWidth()/2,(int)Gdx.graphics.getHeight()/2,sb);

}

and ChatBubble class is given below:

public class ChatBubble {



    private NinePatch ninePatch;
    private Texture bubble;

    private Random rand = new Random();

    BitmapFont font = new BitmapFont();


   public ChatBubble() {



        bubble = new Texture("bubble.png");
        ninePatch = new NinePatch(new TextureRegion(bubble, 1, 1, bubble.getWidth() - 2, bubble.getHeight() - 2), 10, 10, 10, 10);



    }
    int textBoxBuffer = 5; // Allow for box to surround the text
    int textBoxWidth = 80; // the default width of the textbox
    public void drawSpeech(String str, int x, int y,SpriteBatch sb){
        sb.begin();
        GlyphLayout layout = new GlyphLayout(font,str, Color.BLACK, textBoxWidth , Align.left, true);
        ninePatch.draw(sb,x - textBoxBuffer, y - textBoxBuffer,
                layout.width + textBoxBuffer, layout.height + textBoxBuffer);
        font.draw(sb, layout, x, y);
        sb.end();
    }

}

Answer 1

I can't see where you are loading your font from the code you posted, but you need to load it with a .fnt file and an atlas. Or, you can load it from a Skin.

One way of achieving the bubble would be something like this;

package com.bornander.androidstudiosandbox;

import com.badlogic.gdx.Game;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.BitmapFont;
import com.badlogic.gdx.graphics.g2d.GlyphLayout;
import com.badlogic.gdx.graphics.g2d.NinePatch;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.g2d.TextureRegion;
import com.badlogic.gdx.scenes.scene2d.ui.Skin;
import com.badlogic.gdx.utils.Align;

public class MyAndroidStudioSandboxGame extends Game {
    private SpriteBatch batch;
    private OrthographicCamera camera;

    private Texture bubble;
    private NinePatch ninePatch;
    private BitmapFont font;
    private GlyphLayout dialogGlyphLayout = new GlyphLayout();

    @Override
    public void create () {
        batch = new SpriteBatch();

        // Set up a camera that is the same size as the window and set the lower left corner to be 0,0
        camera = new OrthographicCamera(Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
        camera.position.set(Gdx.graphics.getWidth() / 2.0f, Gdx.graphics.getHeight() / 2.0f, 0);

        // Load the skin that has the bitmap font
        Skin skin = new Skin(Gdx.files.internal("uiskin.json"));

        // Get the font from the skin
        font = skin.get("default-font", BitmapFont.class);
        bubble = new Texture("bubble.png");

        // Create the bubble nine-patch, this one has a margin of 5 pixels
        ninePatch = new NinePatch(new TextureRegion(bubble, 0, 0, bubble.getWidth(), bubble.getHeight()), 5, 5, 5, 5);
    }

    @Override
    public void render () {
        Gdx.gl.glClearColor(0, 0, 0, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
        camera.update();
        batch.begin();
        batch.setProjectionMatrix(camera.combined);
        renderBubble("Hello, world!\nHello, again!");
        batch.end();
    }

    private void renderBubble(String text) {
        // 0.75 to make the dialog max 75% the width of the screen
        dialogGlyphLayout.setText(font, text, Color.WHITE, Gdx.graphics.getWidth() * 0.75f, Align.topLeft, true);

        float tw = dialogGlyphLayout.width;
        float th = dialogGlyphLayout.height;

        // 0.05 for 5% margin, dw and dh are the width of the bubble
        // bo the bubble is the size of the text, plus a 5% margin (of the window size)
        float dw = tw + 0.05f * Gdx.graphics.getWidth();
        float dh = th + 0.05f * Gdx.graphics.getHeight();

        // bx, bh is the position of the buggle
        float bx = (Gdx.graphics.getWidth() - dw) / 2.0f;
        float by = Gdx.graphics.getHeight() - dh * 1.2f;

        ninePatch.draw(batch, bx, by, dw, dh);

        font.draw(batch,  dialogGlyphLayout, bx + (dw-tw) / 2.0f, by + dh - (dh-th) / 2.0f);
    }
}

In this case I am loading an image for the bubble that looks like this;

I also using the uiskin from libgdx tests; LibGdx tests at GitHub

The important files in there are;

• uiskin.json (This is the json definition that describes the skin)
• uiskin.png (This is the graphics)
• uiskin.atlas (This is the texture atlas that defines the texture regions the graphics, including the bitmap for the font)
• default.fnt (This is the file that describes where each letter is in the bitmap font).

Given all that, the example above creates a horizontally centered, top-aligned bubble that is sized to hold the text plus a little margin.