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.
Related
I am attempting to have an ImageView that scales with its parent. I have searched through every StackOverflow post I can find on this, and here is what I've tried:
taggedImage.setPreserveRatio(true);
//taggedImage.fitWidthProperty().bind(
// Bindings.min(imagePane.widthProperty(), imagePane.widthProperty()));
//taggedImage.fitHeightProperty().bind(
// Bindings.min(imagePane.heightProperty(), imagePane.heightProperty()));
taggedImage.fitWidthProperty().bind(imagePane.widthProperty());
taggedImage.fitHeightProperty().bind(imagePane.heightProperty());
The commented lines I tried as well and the issue with these approaches is that when the imageview binds to the parent, the parent can only scale up and not down. Therefore, if you increase the size of the window, the picture will get bigger. If you decrease the size of the picture again, it doesn't decrease the picture size. In this example, imagePane is a StackPane. I have also tried a borderFrame. As well, I've tried using a Pane as the parent. This way, the image successfully scales up and down. However, the image isnt centered and is always in the top left corner of the pane if it doesnt match the size of the pane exactly.
Scene Tree:
https://gyazo.com/45e0daebbfd98dfd3446185d21eb91ee
Values:
Top gridpane:
https://gyazo.com/f48ebb39f48d876a02d44792a73eaad4
lower level gridpane:
https://gyazo.com/3399d9f3ab00e8babd36ee3b0e3b27ba
BorderPane:
https://gyazo.com/51c24f8de50ae3865a299fdddf3a1490
ImageView:
https://gyazo.com/7dfc1071d2b516a83baed301596be2b9
Note, here I'm trying it with a borderpane instead of what I was using before. However, the result is the same no matter which object is the parent of the imageview.
Solved. I've been messing around and found a fix. This isn't exactly intuitive but it worked for me: I left the image inside the borderframe and, in the java code, I created a pane in the same part of the gridpane as the image. I then bound the imageview's width and height to the pane. Then, the centering of the image was correct as well as the scaling.
Here is what i did:
imageView.setPreserveRatio(true);
Pane pane = new Pane();
testGridPane.add(pane, 1, 1);
imageView.fitWidthProperty().bind(pane.widthProperty());
imageView.fitHeightProperty().bind(pane.heightProperty());
I'm trying to create a button that will scale when pushed.
textureAtlas = assetManager.get("btn.txt", TextureAtlas.class);
skin = new Skin(textureAtlas);
btnStyle = new Button.ButtonStyle();
btnStyle.up = howToBtn_skin.getDrawable("button");
btnStyle.down = howToBtn_skin.getDrawable("button_pushed");
myButton = new Button(btnStyle);
howToBtn.setPosition((Constant.WIDTH / 2) - 41, (Constant.HEIGHT / 2 - 150));
"button" - is the smaller one
"button_pushed" - is the larger one
The button switches image when clicked, but it doesn't scale based on the image size. So when the user click the button, it looks like nothing happened because the size of the button remains the same.
Size of the button remains same(normal state and pressed state) and you need some UI interaction touch feel.
Three options. 1st and 2nd are in similar context.
Take two button state image (button-up,button-down),with same dimension but different tint value. like this -
If you want same tint value, make image smaller for down state button image but dimension should be same. canvas size for both state should be same and you've to scale down by center.
Scale button by yourself when you touch button. You can also add Action on your button that will give you better effect. You've to enable transform on your button.
button.setTransform(true);
button.setScale(0.5f);
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.
is there a way to show an image larger than the small imageIcon?
I have a 64x64 png image that I am trying to show on a button (take up the whole button).
but when I use
ImageIcon icon = new ImageIcon("somePath");
JButton btnBuildStructure = new JButton(icon);
the image that is shown is only the 16x16 in the top left corner of the image I want shown
how do I do this?
I want it to look like this
The JButton should naturally size to an optimal preferred size that shows the entire icon. If this is not happening, then you are likely restricting the size of the JButton artificially. The solution: use the layout managers well, call pack() after adding all components and before setting the GUI visible, avoid null layouts, call revalidate() and repaint() on containers if you change any components, or their sizes or preferred sizes (such as if you change an icon while a program runs).
A have a list with small thumbnails and want to show a fancy tooltip with a larger version of the image of the thumbnail left to the thumbnail if one hovers with the mouse over the thumbnail. If one drags the mouse down to the next list element the old tooltip should disappear and a new tooltip next to the new cell should appear.
Unlike the existing text tooltip javax.swing.JComponent.setToolTipText(String) my fancy tooltip should always be displayed left of the current column. The problem is, that this is a very complex relative layout I cannot change for this. The fancy tooltip should appear above all other components like the real tooltip does too, i.e. I cannot reserve some free space for it.
I took a look in the implemenation of the real tooltip and think about something like getting the absolute coordinates of the mouse mouseEvent.getX() and subtracting the position inside the thumbnail to get the right corner of my fancy tooltip. Is it possible to get the coordinates of the mouse event inside the component where the listener is registered? Any better ideas for my needs?
I thought java.awt.event.MouseEvent.getX() is the absolute point, but thats java.awt.event.MouseEvent.getXOnScreen(), i.e. this is already the answer...