I am trying to get equal space between my buttons across the screen for any screen size (width). I am using Libgdx tables inside a stage. I think my logic is on the right track but it is not returning anything close to what I want.. most of the buttons are off the screen. (I have 5 buttons total)
int width = Gdx.graphics.getWidth();
int spacing = width / 5;
System.out.println(width);
System.out.println(spacing);
//BOTTOM TABLE
tableBottom = new Table(skin);
stage.addActor(tableBottom);
tableBottom.setBounds(0,0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
tableBottom.setFillParent(true);
tableBottom.columnDefaults(1).width(spacing);
tableBottom.add(inventoryButton).size(144,160).center();
tableBottom.add(assignButton).size(148,180).center();
tableBottom.add(shopButton).size(130,152).center();
tableBottom.add(collectButton).size(182,198).center();
tableBottom.add(fightButton).size(162,178).center();
As Requested Images:
This is what the code above is doing! and it is not accurate it does different based on every screen size.
This is what I WANT it to look like. On every Sized screen equal spacing and take up the whole bottom.. obviously a bigger screen they will be not as close together but that is fine! thanks been struggling with this.
To get equal spacing in horizontal direction change
tableBottom.add(inventoryButton).size(144,160).center();
tableBottom.add(assignButton).size(148,180).center();
tableBottom.add(shopButton).size(130,152).center();
tableBottom.add(collectButton).size(182,198).center();
tableBottom.add(fightButton).size(162,178).center();
to
tableBottom.add(inventoryButton).size(144,160).expandX();
tableBottom.add(assignButton).size(148,180).expandX();
tableBottom.add(shopButton).size(130,152).expandX();
tableBottom.add(collectButton).size(182,198).expandX();
tableBottom.add(fightButton).size(162,178).expandX();
Related
I have animation working with tabsView, when the tabs are changed, the icons of these tabs move to the center with distance of int 54 which is transformed into dp-s shown below, and I have also indicator moving the distance of 70dp the same way, the problem is that animation works perfectly, but the distance is the same for all screen sizes which looks bad for small or too big screens, so is there any way to replace these distances using MATCH_PARENT variable so that result would be same for all screen sizes?
IndicatorTranslationX = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,54,getResources().getDisplayMetrics());
endViewsTranslationX = (int) ((mCenterImage.getX() - mStartImage.getX()) - IndicatorTranslationX);
newTranslationX = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,70,getResources().getDisplayMetrics());
mIndicator.setTranslationX((positionOffset -1) * newTranslationX);
Use DisplayMetrics to get width and height of the device screen.
See this question
I'm trying to draw 2048 boxes onto a screen with a width and a height. (I am making this in Java)
I have the following variables:
width = 1024
height = 768
population = 2048
Based on these variables, how can I draw a grid with x amount of columns and y amount of rows allowing the whole layout to perfectly fit the desired width and height?
For example:
I have a width and height of 4 x 4 and a total population of 4, I therefore would have 2 columns and 2 rows.
Example 2:
I want to reproduce the exact same thing in the screenshot above, but I do not know how many rows and columns I need to loop through as well as the size of each square.
All I know is the total width/height of the window, along with the total number of boxes I want to draw.
The best thing you can do to answer questions like this for yourself is to get out a piece of paper and a pencil, and draw out a bunch of examples. Label the width and height of the window, as well as the position and width and height of each individual box. Keep drawing examples until you notice a pattern.
Stack Overflow isn't really designed for general "how do I do this" type questions. It's for specific "I tried X, expected Y, but got Z instead" type questions. You need to break your problem down into smaller pieces and take those pieces on one at a time. That being said, I can try to help in a general sense.
First, you need to figure out how many rows and columns your grid should have. There isn't just a single correct way to go from a population to a row and column count. In fact, it might not even be possible- how would you split up a population of 3? There are also multiple solutions: if your population count is 20, then you could have a grid that's 1x20, 2x10, 4x5, 5x4, 10x2, or 20x1. I recommend you treat this as a separate problem and post a separate question about that.
But once you have the row and column count, you can use some basic math to figure out the position and size of each box. Again, drawing out some examples would help, but the basics would look like this:
float cellWidth = width/columns;
float cellHeight = height/rows;
for (int row = 0; row < rows; row++) {
for (int column = 0; column < columns; column++) {
float cellX = cellWidth*column;
float cellY = cellHeight*row;
rect(cellX, cellY, cellWidth, cellHeight);
}
}
Note that I got this code from this tutorial, but you'll find examples all over the internet if you do some googling. If you still can't get it working, please post a MCVE showing exactly what you tried, and we'll go from there. Good luck.
If the boxes need to be rectangular, there are multiple possible solutions. eg. for area 12, box can be of 12x1, 1x12, 4x3, 3x4, 6x2, 2x6, etc.. let alone the floating values.
If square boxes are OK:
area = available_width * available_height
area_per_box = area / no_of_boxes
length = sqrt(area_per_box)
fill grid with this obtained length as width and height of small boxes.
Another approach would be to fill the grid as you like and scale the grid to your desired dimension.
Screenshot for context
So I have created a little menu system that uses RectF for each button. This is mainly for persistant options, like inverting the accelerometer's X orY axis, or setting the number of dots displayed. The dimensions for the buttons are calculated using the screen size and orientation so that they look the same size on every device, and whichever orientation.
So since I have these rectangles defined, I would like to put text in them that is scaled to those rectangles. One way I thought of was to draw large text to a bitmap that is the hieght of the text bounds height of "Aq" and just wide enough for the text. With that, I could just scale the bitmap down to the size proportional to the recatngles. But I'm not sure it is the most efficient way of doing this. Is there some math for calculating the text size property (in the Paint object?) based on the dimensions of these rectangles so that I can just use DrawText to place the text over these rectangles? Or should I just use the bitmap idea?
Okay, so the text size is actually the height of the text, so I just gave it a size that is half the value of the height of the rectangle it was to be drawn in. Poof it's a perfect size every time. From there, I set the alignment on the text to centered, and placed drew the text at the center coordinates of the rectangle. I also had to add half of the size from the text to the texts y coordinate so the text would center.
canvas.drawText("Flip X Axis",myRect.centerX(),myRect.centerY()+ (textSize/2), myPaint);
Result
So since I seem to can't put font into a Table and expand it to top and right, I wonder what is the solution to draw fonts on top right of the screen.
I'm trying with this:
highScoreFont.draw(batch, "" + getHighScore, Gdx.graphics.getWidth() - 1070, Gdx.graphics.getHeight() - 650);
which aligns it perfectly when I'm testing it on my Xperia Z1 which has resolution of 1920x1080. But when I test it on Nexus S which is 800x400 the alignment is completly wrong, the font draws itself in the on the bottom left part of the screen.
Any solutions?
Using scene2d, you can use a BitmapFont with Tables, you just need to use a Label, not the BitmapFont directly.
BitmapFont font = ...;
Label label = new Label(new LabelStyle(font, Color.WHITE));
Table table = new Table();
table.add(label).expand().top().right();
This is preferred, as scenes will size to your device and you won't have to worry about the device's screen size.
Using Gdx.graphics.getWidth() returns the device's width, not necessarily your viewport's width, so positioning elements using that value will result in inconsistencies across devices. Hardcoding positions typically becomes very difficult to maintain, but if you want to go this route I'd suggest looking into positioning elements based on the viewport size, not the value returned from Gdx.graphics.
So i have a created a background which is 1920 x 1080 in size.
And i have a window that is 1280 x 720 (will not always be this size)
Now when i render the sprite using this code:
#Override
public void render(float delta)
{
Gdx.gl20.glClearColor(0.2F, 0.5F, 1F, 1F);
Gdx.gl20.glClear(GL20.GL_COLOR_BUFFER_BIT);
sb.begin();
sb.draw(Assets.splash_spr_bg, 0, 0);
sb.end();
}
The sprite appears in the window but not the whole sprite, just like 1/2 of it.
Now here's my question:
·How can i make the sprite fill the whole screen no matter what size the screen is?
Thanks for any help! :)
I recommend using Viewports for this: https://github.com/libgdx/libgdx/wiki/Viewports
Its a great way to handel screen sizes.
To make it fill the whole screen u probably have to try something like:
Picture1.setX(stage.getWidth() / 2 - Picture1.getWidth() / 2);
Picture1.setY(stage.gethight() - Picture1.getHeight() /)
In this example i use a stage, but it will work without just remember that u get the screen width and height instead or set them to 0,0 and place it under in the corner. Also notice that i cut the width in half, this is because it will otherwise always render outside your screen. Then u could try and use something like:
Picture1.setSize(stage.getWidth() / 2, stage.getHeight()):
the other way u could do it is by setting your viewport zoomed in on the picture (so the same size) that way it will also give you a full screen view even tho i dislike that idea, but thats a personal preference. Also this later one wont make your background look all stretched and pixelated because it isn't being resized, but if u take a picture thats big enough you also wont notice it in the first option.
Just mess around a little with it, its pretty easy.
Example of how to implement Viewport: http://pastebin.com/3SrWKcEg