We Keep Coding

How would i add textures to textButtons in libgdx

I'm new to libGDX I've been trying to follow tutorials on how to create buttons and add textures to them however I am really struggling with it. How would I add textures to the continue and back buttons? I only have the png image and a .pack file for the textures
Also if anyone would be able to suggest some ways I can change the font of the labels I have for my buttons e.g. lbl_ip
Any help would be really appreciated.
public class MenuScreen implements Screen {
private Viewport viewport;
private Stage stage;
#SuppressWarnings("unused")
private MainGame game;
private Label lbl_ip;
private Label lbl_name;
private Label lbl_back;
private LabelStyle lbl_style;
private Skin txt_skin;
private TextButtonStyle btn_style;
private TextField txt_ip;
private TextField txt_name;
//private TextField txt_back;
private Button btn_confirm;
private Button btn_back;
public static String ip = "localhost"; // change with user input
public static String name = "Player 1";
public static String back = "<---";
public MenuScreen(MainGame game) {
this.game = game;
viewport = new FitViewport(MainGame.V_WIDTH/6, MainGame.V_HEIGHT/6, new OrthographicCamera());
stage = new Stage(viewport, ((MainGame) game).batch);
lbl_style = new Label.LabelStyle();
lbl_style.font = new BitmapFont();
txt_skin = new Skin(Gdx.files.internal("uiskin.json"));
btn_style = new TextButton.TextButtonStyle();
btn_style.font = new BitmapFont();
Table table = new Table();
table.top();
table.setFillParent(true);
lbl_ip = new Label("please enter an IP address:" , lbl_style);
lbl_name = new Label("enter your name: " , lbl_style);
lbl_back = new Label("Return to Main Menue", lbl_style);
txt_ip = new TextField(ip, txt_skin);
txt_name = new TextField(name, txt_skin);
//txt_back = new TextField(back, txt_skin);
btn_confirm = new TextButton("confirm", btn_style);
btn_back = new TextButton("<--", btn_style);
table.add(lbl_ip).expandX();
table.add(txt_ip).width(200);
table.row();
table.add(lbl_name).expandX();
table.add(txt_name).width(200);
table.row();
//table.add(lbl_back).expandX();
table.add(btn_back);
//table.add(txt_back).width(200);
table.row();
table.add(btn_confirm);
table.row();
stage.addActor(table);
Gdx.input.setInputProcessor(stage);
}
private void buttonHandler() {
if(Gdx.input.isKeyPressed(Input.Keys.ENTER)) {
/*
game.setScreen(new PlayScreen(game));
*/
txt_ip.setTextFieldListener(new TextField.TextFieldListener() {
#Override
public void keyTyped(TextField textField, char c) {
ip = textField.getText();
}
});
txt_name.setTextFieldListener(new TextField.TextFieldListener() {
#Override
public void keyTyped(TextField textField, char c) {
name = textField.getText();
}
});
new MPClient(txt_ip.getText(), txt_name.getText(), game);
dispose();
}
}
#Override
public void show() {
// TODO Auto-generated method stub
}
#Override
public void render(float delta) {
Gdx.gl.glClearColor(0, 0, 0 , 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
stage.draw();
stage.act(delta);
buttonHandler();
}
#Override
public void dispose() {
stage.dispose();
}
}

You need to use ImageTextButton for that. You need to provide it with ImageTextButtonStyle, which is easy to create (you need to assign its imageUp property, other properties can be null).
As far as label font goes, you need to create a new LabelStyle and assign it a new BitmapFont. An example:
Label lab = new Label("This is the text", new LabelStyle(myFont, Color.RED));
"myfont" is a BitmapFont.
Here is a real-world example how to create a BitmapFont:
FreeTypeFontGenerator generator;
FreeTypeFontParameter parameter;
generator = new FreeTypeFontGenerator(Gdx.files.internal("fonts/nidsans-webfont.ttf"));
parameter = new FreeTypeFontParameter();
parameter.size = 12;
parameter.minFilter = TextureFilter.Linear;
parameter.magFilter = TextureFilter.Linear;
myfont = generator.generateFont(parameter);

You need to change the -style- associated with the widget. And you may want to make a new style per widget rather than sharing a style across all (because that would update all widgets with the new background)
LabelStyle newLabelStyle = new LabelStyle(originalLabel.getStyle());
tobeChangedLabel.setStyle(newLabelStyle);
newLabelStyle.background = new Image( //however you like to make the image
Changing the font is somewhat tricky... as the fonts are baked into the style as bitmaps (for rendering speed). You may find that given you don't like the background of your style, or even the font, that you might want to use a different skin. You can make your own or use one from here.
https://github.com/czyzby/gdx-skins
If you have to dynamically choose font you can dynamically build your bitmaps of rendered fonts with gdx-freetype-font-manager
https://jitpack.io/p/1nt3g3r/gdx-freetype-font-manager

Problems rendering map position with LibGDX

I've been following along with a LibGDX tutorial on Youtube and have come across an issue rendering a TiledMap to my screen. At the moment, I can render some labels/images using my HUD java class
public class HUD {
public Stage stage; //the background
private Viewport viewport; //so the HUD stays fixed and the world can move
private int score;
private int timer;
private int bactoCount;
private Texture foodTexture, antioBioBottle;
//these are widgets
Label antioBioTxt;
Image antiBioImg;
Label countDown;
Label countTxt;
Image foodImg;
Label foodTxt;
Label bactoCountLabel;
Label bactoTxt;
//these images need to be buttons...
public HUD (SpriteBatch sb) {
foodTexture = new Texture("Bacto food.png");
antioBioBottle = new Texture("Antibioticbottle.png");
bactoCount = 0;
timer = 0;
viewport = new FitViewport(BactoBuds.V_WIDTH, BactoBuds.V_HEIGHT, new OrthographicCamera());
stage = new Stage(viewport, sb);
//stage = new Stage();
//use a Table to organise widgets on the stage
Table table = new Table();
table.top();
table.setFillParent(true); //the table is the size of our stage
antioBioTxt = new Label("Antibiotic", new Label.LabelStyle(new BitmapFont(), Color.WHITE));
antiBioImg = new Image(antioBioBottle);
// %03d means its 3 digits long
//bitmap font sets the font to bit style
//string.format for changing from a string to a int
countDown = new Label(String.format("%03d", timer), new Label.LabelStyle(new BitmapFont(), Color.WHITE));
countTxt = new Label("Time to flood:", new Label.LabelStyle(new BitmapFont(), Color.WHITE));
foodImg = new Image(foodTexture);
foodTxt = new Label("Food", new Label.LabelStyle(new BitmapFont(), Color.WHITE));
bactoCountLabel = new Label(String.format("%06d", bactoCount), new Label.LabelStyle(new BitmapFont(), Color.WHITE));
bactoTxt = new Label("Bacteria:", new Label.LabelStyle(new BitmapFont(), Color.WHITE));
//if multiple labels use expandX then they all share an equal portion of the screen
table.add(antioBioTxt).expandX().padTop(10);
table.add(foodTxt).expandX().padTop(10);
table.add(bactoTxt).expandX().padTop(10);
table.add(countTxt).expandX().padTop(10);
table.row();
table.add(antiBioImg).expandX();
table.add(foodImg).expandX();
table.add(bactoCountLabel).expandX().align(Align.center);
table.add(countDown).expandX().align(Align.center);
stage.addActor(table);
}
}
These render nicely on the screen. However, when I try to render up a background TMX map image, it renders in the wrong location. I've been messing with the code for a few days now, trying to change the position of the map position. At the first instance I was only able to see a tiny corner of the map and now I've gotten the whole thing to render, but it only takes up ~1/4 of the screen. Now I am at a loss as to how to proceed.
public class playScreen implements Screen{
private BactoBuds game;
private OrthographicCamera gamecamera;
private Viewport gameView;
private HUD HUD;
private TmxMapLoader mapLoader; //loads map to screen
private TiledMap map; //reference to map
private OrthogonalTiledMapRenderer renderer;
public playScreen (BactoBuds game) {
this.game = game;
gamecamera = new OrthographicCamera();
gameView = new FitViewport(BactoBuds.V_WIDTH, BactoBuds.V_HEIGHT, gamecamera);
HUD = new HUD(game.batch);
mapLoader = new TmxMapLoader(); //make a new map loader, set map to maploader, then pass it to the renderer
map = mapLoader.load("grassy.tmx");
renderer = new OrthogonalTiledMapRenderer(map);
gamecamera.setToOrtho(false);
gamecamera.position.set(gameView.getWorldWidth() / 2, gameView.getWorldHeight() / 2, 0); //this changes map position
renderer.setView(gamecamera);
}
#Override
public void show() {
}
#Override
public void render(float delta) {
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
renderer.render();
game.batch.setProjectionMatrix(HUD.stage.getCamera().combined);
HUD.stage.draw();
}
Please forgive the dodgy coding, I'm quite new and I'm still learning about good practices. I think it has something to do with the camera positioning, but swapping out the values doesn't appear to change anything.
public class BactoBuds extends Game {
public static final int V_WIDTH = 800;
public static final int V_HEIGHT = 480;
public static final String Title = "BactoBuds";
public SpriteBatch batch; //public to let other screens have access to images
private Texture img;
private Game game;
private Screen screen;
private OrthographicCamera camera;
public BactoBuds () {
game = this;
}
#Override
public void create () {
batch = new SpriteBatch();
img = new Texture("badlogic.jpg");
// change this to menuScreen later
setScreen(new playScreen(this));
}
public void dispose () {
batch.dispose();
img.dispose();
}
#Override
public void render () {
super.render();
}
public void resume (){
}
public void pause () {
}
}
Thanks for the help!

You need to call camera.update() within render method.

Have you tried moving your camera? If only 1/4 of the map is visible your camera might be centered at 0,0 while your map uses that as the bottom left origin of the texture.
Try camera.position.set(BactoBuds.V_WIDTH / 2, BactoBuds.V_HEIGHT / 2, 0);

Drawing Big Smooth Text with libGDX

I'm trying to draw simple text with libGDX on the screen. The thing that I want to consider is the size of the text. I would like to draw score of the player on the screen which i would like it to be big. But even i use the freetype fonts, it's not looking smooth. Here is the code:
SpriteBatch batch;
String string;
FreeTypeFontGenerator generator;
FreeTypeFontParameter parameter;
BitmapFont font;
#Override
public void create () {
batch = new SpriteBatch();
generator = new FreeTypeFontGenerator(Gdx.files.internal("arial.ttf"));
parameter = new FreeTypeFontParameter();
parameter.size = 100;
font = generator.generateFont(parameter);
string = "0123456";
}
#Override
public void render () {
Gdx.gl.glClearColor(0, 0, 0, 1);
batch.begin();
font.draw(batch, string, 50, 400);
batch.end();
}
Am i on the right path to draw the score or some HUD screen to the viewport? Is there a nicer way or is there a way to do this with the fonts easily? (For starting to learn from scratch?)
EDIT: Here is how it looks like

Try setting the minFilter and magFilter of FreeTypeFontGeneratorParameter to Linear, like this:
#Override
public void create () {
batch = new SpriteBatch();
generator = new FreeTypeFontGenerator(Gdx.files.internal("arial.ttf"));
parameter = new FreeTypeFontParameter();
parameter.size = 100;
parameter.minFilter = Texture.TextureFilter.Linear;
parameter.magFilter = Texture.TextureFilter.Linear;
font = generator.generateFont(parameter);
string = "0123456";
}

LibGdx label background with 9patch

So i've come across this problem that i simply can't manage to sort out.
I'm making a game with the help of LibGdx and am trying to create a chat bubble functionality. The problem is, when i try to change the background of the label style to a 9patch drawable, it doesn't scale it well, or at all?
public class ChatBubble
{
private Label textLabel;
private BitmapFont font;
private Label.LabelStyle lStyle;
private int scaledWidth = 0;
private int scaledHeight = 0;
private Timer.Task currentTask;
private Texture bkg;
public ChatBubble()
{
font = new BitmapFont();
font.setColor(Color.BLACK);
bkg = new Texture("data/ui/chatb.9.png");
NinePatch np = new NinePatch(bkg,11,11,9,10);
NinePatchDrawable npd = new NinePatchDrawable(np);
lStyle = new Label.LabelStyle(font,font.getColor());
lStyle.background = npd;
textLabel = new Label("",lStyle);
textLabel.setVisible(false);
textLabel.setAlignment(Align.center);
currentTask = new Timer.Task() {
#Override
public void run() {
textLabel.setVisible(false);
}};
}
public void show(String text, float duration)
{
if(currentTask.isScheduled())currentTask.cancel();
textLabel.setText(text);
textLabel.setVisible(true);
scaledHeight = (int)textLabel.getPrefHeight();
scaledWidth = (int)textLabel.getWidth()/2;
Timer.schedule(currentTask,duration);
}
public void show(String text)
{
if(currentTask.isScheduled())currentTask.cancel();
textLabel.setText(text);
textLabel.setVisible(true);
scaledHeight = (int)textLabel.getPrefHeight();
scaledWidth = (int)textLabel.getWidth()/2;
Timer.schedule(currentTask,(float)(text.length()*0.1));
}
public void draw(SpriteBatch batch, float x, float y)
{
if(!textLabel.isVisible())return;
textLabel.setPosition(x - scaledWidth, y + scaledHeight);
batch.begin();
textLabel.draw(batch, 1);
batch.end();
}
}
How it looks ingame:
How the 9batch looks:
Any help would be appreciated!
Update:
I've found out that my 9patch scales ok, the problem being in label not updating it's size when setText() is called, thus having it width and height 0 since constructor was "".. calling layout() on label doesn't solve this either.

Call .pack() on the label after .setText() to tell it to size itself to its text (plus whatever padding there is in the background drawable). You don't need to call layout() since that's handled automatically.
I'm not sure the exact reason you have to manually call pack(), but this is generally the case with Widgets that you are not children of a WidgetGroup subclass (i.e. Table, VerticalGroup, etc.).

Smart and automatic button placement

I'm using LibGDX buttons for touch input(previously used desktop mode and keyboard keys. So far, the button listeners work as intended, but I can't position those buttons the way I want. I tried to look through the documentation and some examples and can't figure out the problem here, but from what I've read few key things I've noticed:
buttons should be placed in a table
tables can (and should) be nested
only the main table should fill the parent.
What I want to accomplish is to have labels (tableLabs) packed at the top (as per the original Mario) and the buttons to be aligned to bottom corners (so button left would be in the bottom left corner and button right at the bottom right) with jump buttons being directly above the direction buttons without regard for the screen size, something similar to having a Java Swing border layout.
Finally, I use simple "->" , "<-" and "^" as placeholders for future button graphics.
So far The result looks like this:
public class Hud implements Disposable{
public Stage stage;
public Viewport viewport;
private Integer worldTimer;
private float timeCount;
private static Integer score;
Label countDownLabel;
static Label scoreLabel;
Label timeLabel;
Label levelLabel;
Label worldLabel;
Label marioLabel;
TextButton butL, butR, butJ;
public Hud(SpriteBatch spriteBatch){
worldTimer = 300;
timeCount = 0;
score = 0;
viewport = new FitViewport(SuperMario.WORLDWIDTH, SuperMario.WORLDHEIGHT, new OrthographicCamera());
stage = new Stage(viewport, spriteBatch);
Table mainTable = new Table();
// mainTable.top().center();
mainTable.setFillParent(true);
Table tableLabs = new Table();
tableLabs.top();//align to top
// table.setFillParent(true);//fill
countDownLabel = new Label(String.format("%03d", worldTimer), new Label.LabelStyle(new BitmapFont(), Color.WHITE));
scoreLabel = new Label(String.format("%06d", score), new Label.LabelStyle(new BitmapFont(), Color.WHITE));
timeLabel = new Label("TIME", new Label.LabelStyle(new BitmapFont(), Color.WHITE));
levelLabel = new Label("1-1", new Label.LabelStyle(new BitmapFont(), Color.WHITE));
worldLabel = new Label("WORLD", new Label.LabelStyle(new BitmapFont(), Color.WHITE));
marioLabel = new Label("MARIO", new Label.LabelStyle(new BitmapFont(), Color.WHITE));
tableLabs.add(marioLabel).expandX().padTop(10);
tableLabs.add(worldLabel).expandX().padTop(10);
tableLabs.add(timeLabel).expandX().padTop(10);
tableLabs.row();
tableLabs.add(scoreLabel).expandX().padTop(10);
tableLabs.add(levelLabel).expandX().padTop(10);
tableLabs.add(countDownLabel).expandX().padTop(10);
// stage.addActor(table);
//button setup
Table butTable = new Table();
butTable.bottom();
// table.setFillParent(true);
TextButton.TextButtonStyle tbs = new TextButton.TextButtonStyle();
tbs.font = new BitmapFont();
butR = new TextButton("b1", tbs);
butR.setText("->");
butR.setColor(Color.FIREBRICK);
butR.addListener(new ChangeListener() {
#Override
public void changed(ChangeEvent event, Actor actor) {
Gdx.app.log("B-right", "pressed");
}
});
butL = new TextButton("b2", tbs);
butL.setText("<-");
butL.setColor(Color.FIREBRICK);
butL.addListener(new ChangeListener() {
#Override
public void changed(ChangeEvent event, Actor actor) {
Gdx.app.log("B-left", "pressed");
}
});
butJ = new TextButton("b3", tbs);
butJ.setText("^");
butJ.setColor(Color.FIREBRICK);
butJ.addListener(new ChangeListener() {
#Override
public void changed(ChangeEvent event, Actor actor) {
Gdx.app.log("B-jump", "pressed");
}
});
butTable.setDebug(true);
butTable.add(butJ).expandX().padBottom(10).left().expand().padRight(10);
butTable.add(butJ).expandX().padBottom(10).right().expand().padLeft(10);
butTable.row();
butTable.add(butL).expandX().padBottom(10).left().expand().padRight(10);
butTable.add(butR).expandX().padBottom(10).right().expand().padLeft(10);
mainTable.add(tableLabs).expand();
mainTable.row();
mainTable.add(butTable).expand();
mainTable.setDebug(true);
// stage.addActor(butTable);
stage.addActor(mainTable);
Gdx.input.setInputProcessor(stage);
}
public void update(float dt){
timeCount+= dt;
if(timeCount >=1){
worldTimer--;
countDownLabel.setText(String.format("%03d", worldTimer));
timeCount--;
}
}
public static void addScore(int value){
score += value;
scoreLabel.setText(String.format("%06d", score));
}
#Override
public void dispose() {
stage.dispose();
}
}

What you're missing when setting up your table cells is the fill parameter. Calling expand on a cell like you're doing makes the cell stretch to fit, but the widget inside the cell will not get bigger unless you also call fill on the cell.
So that part near the bottom where you add the two inner tables to the main table should look like this:
mainTable.add(tableLabs).expand().fill(); //stretch the inner table to the size of the cell
mainTable.row();
mainTable.add(butTable).expand().fill(); //as above
mainTable.setDebug(true);
stage.addActor(mainTable);