libGdx HUD/ UI + PathFinding

Newbie & Debugging Questions
#1

Hello, I would like to know how it is possible to make an Interface in libgdx? I knew the Channel from dermetfan and some Tutorials, but I don´t get it to 100%.

Is it possible to set a screen ontop of another Screen or do I have to use Stage for the UI?

Lets say I want to make an hp/mp bar what would I have todo to draw this? Currently I am doing it just like this

    Table playerInfo = new Table();
        //playerInfo.top().left();
        playerInfo.defaults().space(3f);
        playerInfo.pad(10f, 10f, 0, 0);
        playerInfo.debug();
        playerInfo.setPosition(0, Gdx.graphics.getHeight());
        playerInfo.size(200f, -100f);
        playerInfo.add(new Label("HP: ", skin)).size(25f, 20f);
        playerInfo.add(new Label("", skin)).size(75f, 20f).row();
        playerInfo.add(new Label("MP: ", skin)).size(25f, 20f);
        playerInfo.add(new Label("", skin)).size(75f, 20f).row();

In order to use an normal Image like in every common Game how todo? Especially I dont get how to draw the pixel, when the bar is not full. So, would it be correct to draw the bar surronding and load it then per LabelStyle? So the Background? Or just an different Class? How then i draw the red pixels according to the health?

How do i do it that it looks like an Window? …Ah I can make an Window Class and then add to it an Table, great.
How can I make the positions better? When u look at the above example, its very annoying with the fixed sizes, is there somekind of Layout possible?

Well for Pathfinding Algorithms I need the Map data, so should i read everytime from the Tiledmap from libgdx or make an own Map Class and then fill it with an 2d Array just if the Tile is blocked or free?

#2

Use Image class. It extends Widget so it can be added to Table. Use full bar image, then adjust the scaleX value according to player’s HP.

#3

Thanks, but i still dont get it.

So, i should make an Image with the full HP/MP and instantiiate it as an Image, okay.
But how then i set the pixxels inside the Bar? The only thing i can think about is taking something like a Progressbar, but yeah that wouldnt be very handy…

And is there maybe an easy way to get to the informations of an TiledMap?
Only to get to the Tilesize I do :

TiledMapTileLayer layer= (TiledMapTileLayer)gameMap.getLayers().get(0);
       return layer.getTileWidth();

Especially; If there is an way how to get the Tile I am standing or clicking? Currently I am just divididing the position tru the Tile Size, but its not very sophisticated…

#4

Progress bar is handy. You don’t set pixel, you scale it.

#5

You can get the tile size easier like this:

float tileWidth = map.getProperties().get("tilewidth"); // or tileheight

The TmxMapLoader or something automatically puts the property there.

The table often sizes its children automatically. If you want them to have specific dimensions, there’s no way around setting them hard-coded or calculating them yourself.

For a health bar, I’d recommend a Slider (doc). It let’s you choose your own scale for example from 5 to 10 or in percent or any other way you want.

Check out the A* algorithm for pathfinding (MAYbe there will be a video about it). To be able to use it, you have to create a grid with custom nodes/tiles anyways, so just create one when the map is loaded.

By the way, you can create the labels quicker if you pass the Skin in the Tables constructor:

Table table = new Table(skin);
table.add("this is gonna be a label with default style from the skin");
#6

Ahh slider, right.
But how to add there the “HP”? So draw the background/borders and then how do i fill it? I see that there is an setter for that, but how to draw em? Maybe something with the draw() and then make the batch red?
BTW, is there an Bug? If I set disabled true, I am still able to change the value.

Yeah the Algorithms is not the Problem, more libgdx.
It makes Cells into TiledMapLayers and TiledTiles into Cells and Layers int MapLayers. So, what should I take to create an easy Map for the Pathfinder? It also seems taht the TileLayers dont have the same size as the created Map, at least if the TileLayer is not so big as the map.
So, from which class can i get the stuff?

Yeah i hardcoded some sizes, but they didnt aplly. Either on the texture or on the Widget.

#7

Here’s a little test I wrote for the Slider. The relevant part of my skin file:

com.badlogic.gdx.scenes.scene2d.ui.Slider$SliderStyle: {
	default-horizontal: { background: default.background, knobBefore: default.selection }
}

It worked all fine for me, so I guess there is no bug.

You could create a boolean or float array, depending on the type of your algorithm (with weighting or not) of the size of the tile map.
For example:

TiledMapTileLayer layer = (TiledMapTileLayer) map.getLayer("pathfinding");
float width = map.getProperties().get("width"), height = map.getProperties().get("height");
float[][] pathfindingMap = new float[width][height];
for(int x = 0; x < pathfindingMap.length; x++)
    for(int y = 0; y < pathfindingMap[x].length; y++)
        pathfindingMap[x][y] = layer.getCell(x, y).getTile().getProperties().get("weight", Float.class);

Then do the pathfinding using the pathfindingMap. Didn’t test though.