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();
}
}
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 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.
I'm trying to set a cell width in my LibGDX's table and it's ignoring the value I pass. I suspect it is because it's under rows that are fill and has colspan but I can't explain exactly why It is happenning.
Here's a screen:
I would like the cell of my play button to be smaller in width, so I wrote that code:
setDebug(true, true); //just mentionning, this is in the constructor of a class that extends Table, to prevent having table creation code on my screen
setWidth(400f);
setHeight(80f);
padLeft(30f);
padRight(30f);
Image image = new Image(assets.getTexture("gfx/menu/level-online.png")); //TODO icon depends on state
image.setScaling(Scaling.fill);
Button playButton = new TextButton(level.getType() == LevelType.RACE ? "Play" : "Visit", skin);
Button editButton = new TextButton("Edit", skin);
add(level.getName()).bottom().left().colspan(2).expand();
add(image).width(30f).height(30f);
row();
add(level.getOwner()).top().left().colspan(3).expand();
row();
add(playButton).width(40f).center(); //HERE
add(editButton).left().colspan(2);
As you can see, the width of the cell of the play button is supposed to be 40 but it's way more. (For reference, the cloud is 30 x 30) How can I fix this ?
Fixed it using a table in my last row to separate elements. Thanks to Xoppa and Tenfour04 for their help.
add(level.getName()).bottom().left().colspan(2).expand();
add(image).width(30f).height(30f);
row();
add(level.getOwner()).top().left().colspan(3).expand();
row();
Table buttons = new Table();
buttons.add(playButton).padRight(10f);
buttons.add(editButton);
add(buttons).expand().colspan(3).left();
I want to add multiple images in a ScrollPane when clicking a button. Now when I click the button a new rectangle is created and fitted with a new image.
The problem is the scrollbar is not displaying when a new image is added.
Here is the code:
#FXML
public void handleButtonPause(){
Rectangle r = new Rectangle();
if(counterIm==0){
//Ap1.setMinSize(Sp1.getWidth(), Sp1.getHeight() - 10);
r.setY(Sp1.getHeight() *((double)1/36));
r.setWidth(Sp1.getWidth()*0.75);
rectWidth=r.getWidth();
r.setHeight(Sp1.getHeight()/6);
rectHeight=r.getHeight();
}
else {
r.setY(Sp1.getHeight()*((7*counterIm+1)/36));
r.setWidth(rectWidth);
r.setHeight(rectHeight);
}
r.setX(Sp1.getWidth() / 10);
r.setArcWidth(20);
r.setArcHeight(20);
Ap1.getChildren().add(r);
Image image = new Image(new File("C:\\Users\\Manuel\\Desktop\\error.png").toURI().toString());
r.setFill(new ImagePattern(image));
Sp1.setVvalue(1);
counterIm=counterIm+1;
I don't know how your composition looks like.
A good approach could be to put the images into a VBox and put the VBox into the ScrollPane.
And check if you have set the VBar Policy of your SrollPane:
srollbar.setVbarPolicy(ScrollBarPolicy.AS_NEEDED);
You can also set the maximal height of the VBox to double maximum to make it sure it will always grow vertically:
vbox.setMaxHeight(Double.MAX_VALUE);
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.