# Creating chat bubble using 9-patch and Glyphlayout

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();
}

}


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;

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.

• I am a beginner in game dev, but when we are just using "uiskin.json", why do we need the other files for? @bornander Nov 13, 2016 at 18:55
• The uiskin.json is a description of what is in the other files plus other things. It allows you to name things, such as how a Button should look when it's pressed and released. The .json doesn't hold the images or 9-patches for the button, it just describes how they should be used. Hope this explains it @VamsiRao Nov 13, 2016 at 19:01
• Yeah it did, I have encountered another problem: I'm actually using viewport and camera in my game. When I draw the chatbubble the font is enlarged and pixelated, along with the 9patch.And when I disable the viewport(ie, spritebatch and viewport camera isn't combined), I get the normal Chatbubble without pixelated image.How do I overcome it? @bornader Nov 13, 2016 at 20:29
• For the viewport issue @VamsiRao , you're better off posting another Question than continuing the discussion in the comments on your old questions, that way more people will see the question and you're more likely to get an answer. Nov 13, 2016 at 20:31
• @VamsiRao Not a problem, glad I could help. Nov 13, 2016 at 20:33