I made .pack file and load it to skin. I can set it as drawable for Image class and it works fine. But Table.setBackground do nothing.
Drawable background = skin.getDrawable("tooltip_background");
tooltipGroup.setBackground(background);
Why this code not work?
Full code:
tooltipGroup = new Table(skin);
tooltipGroup.setWidth(w/6);
Label.LabelStyle headerStyle = new Label.LabelStyle(headerFont, Color.GREEN);
Label headerLabel = new Label(effect.getName(), headerStyle);
headerLabel.setWidth(w/6);
headerLabel.setX(20);
headerLabel.setWrap(true);
headerLabel.setAlignment(Align.topLeft);
tooltipGroup.addActor(headerLabel);
Label.LabelStyle style = new Label.LabelStyle(font, Color.WHITE);
Label descriptionLabel = new Label(effect.getDescription(), style);
descriptionLabel.setWidth(w/6);
descriptionLabel.setWrap(true);
descriptionLabel.setAlignment(Align.topLeft);
descriptionLabel.setPosition(20, -descriptionLabel.getHeight());
tooltipGroup.addActor(descriptionLabel);
tooltipGroup.setPosition(mouseX, h - mouseY);
Drawable background = skin.getDrawable("tooltip_background");
tooltipGroup.setBackground(background);
stage.addActor(tooltipGroup);
Don't use addActor on the Table. In order to add Actors to the table, use the add method, and specify custom parameters like fill or width / height of the actors in chaining methods. Like this, you can control how you add the actors to the table, since the table does auto layouting.
Table rootTable = new Table();
rootTable.setFillParent(true);
TextField fieldFirst = new TextField("First", skin);
TextField fieldSecond = new TextField("Second", skin);
rootTable.add("First:");
rootTable.add(fieldFirst).width(100).row();
rootTable.add("Second:");
rootTable.add(fieldSecond).width(100);
stage.addActor(rootTable);
As you can see, this allows you to specify the width, in the table, with the expand(), and fill() methods, you can even have an element fill all the available space within one row. Once you use this auto layouting of your table, the table should have the appropriate size, and your background should show. More on how to use the libGdx table layouting can be found here.
Related
My scrollpane is fully working if you want to scroll from top to bottom. My problem is when I call a setScreen command I want my camera/screen to start at a specific section on the scrollpane, for example at
table.add(menuButton1).row();
Or at the bottom of my ScrollPane. I have read through the Libgdx ScrollPane document, but I can't find a solution to my problem.
My scrollpane at the moment:
camera = new OrthographicCamera(500,600);
stage.getHeight();
stage.getWidth();
extendViewport =new ExtendViewport(500,1500, camera);
stage=new Stage(extendViewport);
Table scrollableTable = new Table();
scrollableTable.setFillParent(true);
stage.addActor(scrollableTable);
Table table = new Table();
table.add(label2).spaceBottom(1200).row();
//table.add(smile).spaceBottom(2300).row();
table.add(label).spaceBottom(2300).row();
table.add(menuButton1).row();
//table.add(topbutton).spaceBottom(2300).row();
table.add(label3).spaceBottom(2300).row();
table.pack();
table.setTransform(true); //clipping enabled
stage.setDebugAll(true);
table.setOrigin(table.getWidth()/2,table.getHeight()/2);
// table.setScale(.5f);
final ScrollPane scroll = new ScrollPane(table);
scrollableTable.add(scroll).expand().fill();
Gdx.input.setInputProcessor(stage);
ScrollPane.scrollTo works well, but as you use a table, you need to validate ScrollPane before calling it.
I tried to do a simple scrollable table with buttons. Here is the code:
craft = new Stage();
craftbl = new Table();
craftbl.setDebug(true);
craftbl.add(button1);
craftbl.row();
craftbl.add(button2);
scroll = new ScrollPane(craftbl);
scroll.setSize(640, 480);
craft.addActor(scroll);
But as a result I have only one button on screen:
How can i fix it?
Solved. To fix this, you need to set size at least of one of table's cells. E.G. like this: table.add(somewidget).width(100);
I create a ScrollPane, with table inside. It works fine, but when I add this ScrollPane to layout Table (or VecrticalGroup) it stops working.
layoutTable = new Table();
groupTable = new Table();
SP = new ScrollPane(groupTable, skin);
SP.setWidth(1105);
SP.setHeight(300);
groupTable.top();
groupTable.left();
layoutTable.add(inputTable);
layoutTable.row();
layoutTable.add(SP);
layoutTable.row();
layoutTable.add(resultTable);
layoutTable.setFillParent(true);
stage.addActor(layoutTable);
Once you add it to the table, the table manages its size, so your earlier calls (SP.setWidth() and SP.setHeight()) are overwritten (probably with whatever is the prefSize of the scroll pane's contents, which is zero if it's an empty table). If you want to control the scroll pane's size, do it by adjusting its cell when you add it to the table:
layoutTable.add(SP).width(1105).height(300).fill();
The fill() call tells the table to resize the scroll pane to fit the cell dimensions.
Basically, I'm trying to draw an empty health bar as an image, and then the actual health bar on top of it as another image so that I can just shorten the actual health bar when I need to update it. This is what I have so far:
TextureAtlas HUDatlas = new TextureAtlas(Gdx.files.internal("data/ui/HUDPack/textures.pack"));
emptyPlayerHealthBar = new Image(HUDatlas.findRegion("empty-health-bar"));
playerHealthBar = new Image(HUDatlas.findRegion("health-bar"));
//Creating the table
table = new Table(skin);
table.debug();
table.setBounds(0, 0, Gdx.graphics.getWidth(), 50);
table.left();
table.top();
table.add(playerHealthBar);
table.add(emptyPlayerHealthBar);
stage.addActor(table);
But this draws them side-by-side. How do I draw it so that the images are overlapping (empty-health-bar on the bottom and health-bar on top)?
I used this code to place a diamond over a box:
Image boxImage = new Image(Assets.instance.gifts.box);
Image diamondImage = new Image(Assets.instance.gifts.diamond);
Stack diamondBox = new Stack();
diamondBox.addActor(boxImage);
diamondBox.addActor(diamondImage);
tbl.add(diamondBox).width(20).height(20);
tbl.row();
You should probably use Scene2D's WidgetGroup (or, if you're not using layout managers, e.g. Table, Group) for that, e.g.
TextureAtlas HUDatlas = new TextureAtlas(Gdx.files.internal("data/ui/HUDPack/textures.pack"));
emptyPlayerHealthBar = new Image(HUDatlas.findRegion("empty-health-bar"));
playerHealthBar = new Image(HUDatlas.findRegion("health-bar"));
// creating the group
WidgetGroup group = new WidgetGroup();
group.addActor(playerHealthBar);
group.addActor(emptyPlayerHealthBar);
// creating the table
table = new Table(skin);
table.setBounds(0, 0, Gdx.graphics.getWidth(), 50);
table.debug().left().top().add(group);
stage.addActor(table);
Note that you can offset those bars simply by using .setPosition() on them, as usual with libGDX's 2.5D objects. Also, you can make your libGDX code more concise by using method chaining, although that's mostly a matter of style.
I am drawing a table in using libgdx game framework. Everything is rendered perfectly what I was trying to achieve. All I need now is to display cell borders of the table but I found nothing regarding this so far. I am also inclined to use the debug border lines to fullfill the purpose but also could not change the color of them.
Here is my code.
Table table = new Table();
table.setFillParent(true);
table.left().top();
table.add(new Label("Results", new LabelStyle(font, Color.BLACK))).colspan(2).expandX();
table.row();
table.add(new Label(text_you_score, new LabelStyle(font, Color.BLACK)));
table.add(new Label(text_actual_score, new LabelStyle(font, Color.BLACK)));
return table;
There are many properties available for the table and cell but not the border property.
We can also draw grid lines manually but that won't work perfectly on every device resolution I think. Any help or idea is highly appreciated. Thanks
This is based on libGDX 1.5.3:
A solution to this is to use a NinePatch as the background image for your Table.
NinePatch patch = new NinePatch(new Texture(Gdx.files.internal("background.png")),
3, 3, 3, 3);
NinePatchDrawable background = new NinePatchDrawable(patch);
Table table = new Table();
table.setBackground(background);
Using the number variables, you can modify the border radius. Make sure that this matches the png file.
Register your table for debug mode
table.debug();
Call in render() method
Table.drawDebug(stage);
Example
I achieved the display of the debug lines by converting from using a ShapeRenderer with the table.drawDebug(shapeRenderer shapes) call (which I couldn't get to work) to using a stage and adding the table as an actor.
The example linked in the answer above does show it clearly, but here is a short snippet for reference sake. This is on libGDX 1.5.3.
public class MyGdxGame extends ApplicationAdapter {
Texture img;
Stage stage;
#Override
public void create () {
img = new Texture("badlogic.jpg");
stage = new Stage();
final Skin skin = new Skin();
Label.LabelStyle style = new Label.LabelStyle(new BitmapFont(),Color.WHITE);
TextField.TextFieldStyle textFieldStyle = new TextField.TextFieldStyle();
textFieldStyle.fontColor = Color.WHITE;
textFieldStyle.font = new BitmapFont();
skin.add("default", style);
skin.add("default", textFieldStyle);
// Keep your code clean by creating widgets separate from layout.
Label nameLabel = new Label("Name:", skin);
TextField nameText = new TextField("",skin);
Label addressLabel = new Label("Address:", skin);
TextField addressText = new TextField("",skin);
Table table = new Table();
table.add(nameLabel); // Row 0, column 0.
table.add(nameText).width(100); // Row 0, column 1.
table.row(); // Move to next row.
table.add(addressLabel); // Row 1, column 0.
table.add(addressText).width(100); // Row 1, column 1.
table.setOriginX(0);
table.setOriginY(0);
table.setX(200);
table.setY(200);
table.debug();
stage.addActor(table);
}
#Override
public void render () {
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
stage.act(Gdx.graphics.getDeltaTime());
stage.draw();
}
public void resize (int width, int height) {
stage.getViewport().update(width, height, true);
}
public void dispose () {
stage.dispose();
}
}