In the level selection screen I'm currently working on I can't seem to make the Scene2D UI table fill the whole screen.
I've omitted a few bits from the code to reduce the length, but here is the relevant code:
Stage stage = new Stage(new ScreenViewport());
table = new Table();
table.setFillParent(true);
innerTable = new Table();
//Omitted: Add a button to innerTable for each level
ScrollPaneStyle scrollPanelStyle = new ScrollPaneStyle();
scrollPanelStyle.vScrollKnob = new BaseDrawable();
scrollPane = new ScrollPane(innerTable);
scrollPane.setScrollingDisabled(true, false);
scrollPane.setupOverscroll(30f, 30f, 150f);
//Temporarily a restart icon
Image backButton = new Image(backButtonTexture);
backButton.setScaling(Scaling.fit);
table.add(backButton).height(75f).width(75f).pad(20, 0, 20, 0).left();
table.row();
table.add(scrollPane);
It currently looks like this. The icon isn't as far to the left as I would think it would be with the current code. As far as I'm concerned it should be at 0 on the X axis.
The same thing is true for the innerTable with the ScrollPane containing all the levels, it doesn't fill the entire screen on the X axis, but it looks like I want it, so it's not really a problem there.
Answer:
Adding expandX() to my ScrollPane ended up doing the trick, resulting in this line: table.add(scrollPane).expandX();. A big thanks to flogy.
I guess the table is stretched properly to your viewport but there is some other misconfiguration. I recommend using the debug mode to get more details (see https://github.com/libgdx/libgdx/wiki/Table#debugging - also use on the back button etc). If you can't find a solution using this method by yourself, please update the screenshot, so we can investigate further. Thanks.
Final solution (see comments):
table.add(scrollPane).expandX();
The table was already filling the whole screen but the contained scroll panel was not. The table cells adapt to their content by default. By using expandX, we could finally expand the width of the cell that contains the scroll panel to the full table width.
Related
I want to create buttons in the corners of the screen for the controls of my game.
It used to work with just creating a skin, adding that skin to a new ImageButton(skin) and setting the size and position of that button to what is desired. I now use box2d and if i now set the size of the button to (1, 1) the height is correct but the width is always about 2/3 of the screen, no matter what i change it to.
I tried using a table and doing this:
table = new Table();
table.setFillParent(true);
stage.addActor(table);
table.setDebug(true);
table.add(boostButtonn).width(1).height(1).bottom().right();
But I have no clue how to draw it in the corner of the screen, also the button is drawn in the middle of the screen with the correct size using this table, but the skin is stretched out of the button. Viewport width and height are 40,24 respectively
My skin and button code:
Skin skin = new Skin(Gdx.files.internal("skin/flath-earth-ui.json"));
Button bootsButton = new ImageButton(skin);
And then i add it to the table
Problem is not in how you align or arrange your widget. Problem is why button/widget or even text is stretched and looks blurry.
Why stretched ?
Problem is in your resources. Your resources should be compatible with your viewport. If you're using small viewport then we need your resources(images and fonts) in small size.
You're using skin, that used to create Widget.
Skin depends on .json file that contains information about your Widget object and .atlas files having information of your image file.
You're using 40 as width of viewport then button image that used as drawable should be in range of approx. 10.
So what is solution now :
If you already have all resources ready then use some higher viewport dimension according to your resources else create create resources according to viewport.
Hello I'm new in LibGdx ! How can I remove this space ! :Window
level = new Label( mapHelper.getVillage().getLevel(),skin);
leveltext = new Label("Level:",skin);
upgradeButton = new TextButton("incrase Level",skin);
// adding to my coustom Window
this.add(leveltext).align(Align.bottomLeft);
this.add(level);
this.add(upgradeButton);
The problem is that your window resizes to its content. And above your 3 actors, there is more content which stretches the width of the window causing the gap.
If you want all 3 actors aligned to the bottom left you could probably, just before adding the actors to the window, call:
this.defaults().align(Align.bottomLeft);
Another thing you can do is enable debug lines.
To do this, first call:
table.setDebug(true);
Then in your render method, after drawing the stage, call:
Table.drawDebug(stage);
This will display lines showing bounds, margins and spacing to help you understand what is going on more easily.
More on tables and debugging here.
I have an explorer in my RCP application to which I added an inner composite with a RowLayout to show various category items. When the width of the explorer is resized I want the category items to wrap to new rows and expand the size of their parent composite.
If I initialize my inner composite with defaults, nothing happens, not even wrapping. If I set it to grab vertical space, it takes half the space, leaving the other half for the tree, which is ugly and not what is wanted. If I set hints, I does wrap but the size of its composite never changes, thus hiding the next rows. I tried adding a resize event listener and resizing my inner composite. That allows me to resize it and show all the rows, but it then covers up and hide part of the tree. I tried to do a setLocation and setSize for the tree itself to move/resize it accordingly but to no avail, it doesn't change.
How can this be made to work. What am I missing. Isn't there a simple way to ask for a layout that will use the minimum required height and no more but adjust if needed?
Thanks for your help.
Here the code:
innerComposite = new Composite(parent, SWT.NONE);
innerComposite.addListener(SWT.Resize, listenerComp);
GridDataFactory.fillDefaults().hint(10, 30).applyTo(innerComposite);
GridLayoutFactory.fillDefaults().applyTo(innerComposite);
Listener listenerComp = new Listener() {
public void handleEvent(Event event) {
Widget widget = event.widget;
Composite comp = (Composite)widget;
Composite parent = comp.getParent();
Point parentSize = parent.getSize();
Point size = comp.computeSize(parentSize.x, SWT.DEFAULT);
comp.setSize(size);
}
}
And here's an image:
And after resize (noticing that the 1st row of the tree is covered up):
When you are using Layouts calling setSize (or setBounds) will mess up the layout that has been setup.
Instead you should call layout(true) (or even layout(true, true) on the Composite which owns both the Tree and your innerComposite.
I have a HorizontalGroup in which I have two TextButtons. Now I want to scale these buttons to half their size, because their too big, but I haven't found a good way to do that, I have tried something but its not what I want.
Heres the code for setting it up
weaponsButton = new TextButton("Weapons", buttonStyle);
weaponsButton.getLabel().setColor(Color.BLACK);
weaponsButton.pad(10f);
statsButton = new TextButton("Stats", buttonStyle);
statsButton.getLabel().setColor(Color.BLACK);
statsButton.pad(10f);
hGroup = new HorizontalGroup();
hGroup.addActor(weaponsButton);
hGroup.addActor(statsButton);
table = new Table();
table.add(hGroup);
table.setFillParent(true);
table.debug();
stage = new Stage();
stage.addActor(table);
buttonStyle is simply a TextButtonStyle with a NinePatchDrawable and a BitmapFont. When you draw the table it looks like this:
adding hGroup.setScale(0.5f); it looks like this:
Now hGroup is not aligned in the center and .aling(Align.center) doesn't do anything when adding the hGroup.
Calling .width(float) after adding hGroup to shrink the cell doesn't seem useful either, as I dont know the exact width of the scaled hGroup, it only gives the unscaled width and I find it kind of clunky to get the width and then multiply it with the scaling factor.
Even when I do that it doesn't look like I wanted it to.
table.add(hGroup).width(hGroup.getPrefWidth()*0.5f).height(hGroup.getPrefHeight()*0.5f);
looks like this:
Any advice is appreciated
According to the documentation, the width of the HorizontalGroup is the sum of the preferred width of all its children (your buttons). Given that, you have a few options:
Call setWidth on your button actors and give them a width.
Skip the HorizontalGroup and just add your buttons directly to a table uniformly:
Table table = new Table();
table.defaults().uniformX();
table.add(weaponsButton);
table.add(statsButton);
I have a Java Eclipse RCP program in which I have a a long string inside a JFace combobox. Now when I am in the same view,The combobox attaches a scroll over it to show the full name. but as soon as I re size the window of the application, the combobox stretches itself to accommodate the lengthy string.
How do i make the combobox stay the same size. Like the size of it should remain fixed even after I resize the window. Here are two screen shots to demonstrate the issue.
P.S. I am using a comboViewer and inside it a comboBox.
Thanks in advance.
If you are using GridLayout and GridData as your layout you can specify a value in the widthHint field to suggest the width for the Combo.
GridData data = new GridData(SWT.FILL, SWT.CENTER, true, false);
data.widthHint = 100;
preferredResourceCombo.setLayoutData(data);
Using a fixed value like this might cause problems if the user uses a large font. So an alternative way of calculating the width is to use Dialog.convertWidthInCharsToPixels:
GC gc = new GC(control);
gc.setFont(control.getFont());
FontMetrics fontMetrics = gc.getFontMetrics();
gc.dispose();
data.widthHint = Dialog.convertWidthInCharsToPixels(fontMetrics, charCount);
If your code is in a Dialog you can simplify this to just:
data.widthHint = convertWidthInCharsToPixels(charCount);