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.
Related
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();
Does it matter what height and width I use for my game? In my game I have a few polygons, they all are connected to images that I have painted, but when I have width and height as 800x480 I have to paint the images very small, this causes them to get blurry. Also, I don't really understand how this behaves on different sized phone screens.., does the images I have painted get streched, or do they stay small, even on big tablets? So my question is basically what is the optimal width and height to have on a libgdx game?
This is a part of my code, to maybe help you understand what I mean
WIDTH = Gdx.graphics.getWidth();
HEIGHT = Gdx.graphics.getHeight();
camera = new OrthographicCamera();
camera.setToOrtho(false, 800, 480 );
What will happen if I change these values? What would it be best to change them to?
I was reading on a tutorial of sorts, but they didn't really talk about this part.
Do I have to do something complicated to get my painted images to look decent on all devices?
EDIT:
This is how I currently implement a cloud into my game:
public class AnotherScreen implements Screen{
Polygon cloudPoly;
Texture cloud;
#Override
public void render(float delta) {
batch.setProjectionMatrix(camera.combined);
batch.begin();
renderBackground();
batch.draw(cloud,cloudPoly.getX(),cloudPoly.getY());
batch.end();
}
#Override
public void show() {
cloud = new Texture(Gdx.files.internal("assets/textures/cloud.png"));
cloudPoly = new Polygon();
cloudPoly.setPosition(MathUtils.random(350,600),MathUtils.random(380,440));
// theses vertices are just a little square atm
float[] cloudVertices = new float[] {
0,0,
0,20,
20,20,
20,0
};
cloudPoly.setVertices(cloudVertices);
}
}
The cloud image has width 256p and height 128p, when I set 'camera.setToOrtho(false, 800, 480 );' won't this cloud always stay in proportion?
I am sorry if I am unclear, I am a new programmer and my english could be better, love you doh for staying with me!
does the images I have painted get streched, or do they stay small, even on big tablets?
One of the greatest features of libgdx is that it lets you do things exactly as you want them. So, it is really your choice. With this snippet
WIDTH = Gdx.graphics.getWidth();
HEIGHT = Gdx.graphics.getHeight();
camera = new OrthographicCamera();
camera.setToOrtho(false, WIDTH, HEIGHT);
You would have a different viewport size in every different screen size. So your images would stay small.
In the other hand, if you use predefined values for the viewport like:
WIDTH = 800;
HEIGHT = 480;
camera = new OrthographicCamera();
camera.setToOrtho(false, WIDTH, HEIGHT);
You would get the same viewport for every screen and the images would stretch to occupy the same space in each axis. This won't necessarily be the same for each axis. So a perfect square image in one screen may look like a rectangle in another screen with a different x-y ratio.
There is a third option, you can fix one side and let the other be calculated, so you keep the ratio of your images (a square stays as square). You must decide what will be the fixed side. For a game like Super Mario Bros I would recommend you to fix the height and calculate the width:
HEIGHT = 480;
WIDTH = (Gdx.graphics.getWidth()/Gdx.graphics.getHeight())*HEIGHT;
camera = new OrthographicCamera();
camera.setToOrtho(false, WIDTH, HEIGHT);
Every screen would see the same height in the game world. But some screens would see more in the width than others. If thats a problem for you (you want them to see the same ammount of the world but keep the ratio too), than adding black bars to each side is an option.
So my question is basically what is the optimal width and height to have on a libgdx game?
The optimal solution is having a different set of images for several resolutions. And choosing whats the most appropiate at runtime. But that increases the game size a lot.
Another dirty way is having only one big set and let the images shrink in lower resolutions. It looks better than the inverse. But some people think this is just too dirty :p (not me, so I recommend it).
I'am trying to make libgdx game, adn i've got 2 problems now:
1. When im using camera.setToOrtho(false, GAME_WIDTH, GAME_HEIGHT); my textrure of player is distored, one eye is bigger than another.
2. Im using this camera and viweport:
camera= new OrthographicCamera(GAME_WIDTH,GAME_HEIGHT);
camera.setToOrtho(false, GAME_WIDTH, GAME_HEIGHT);
viewport = new StretchViewport(GAME_WIDTH,GAME_HEIGHT,camera);
and when i do :
touchPos.set(Gdx.input.getX(1),Gdx.input.getY(1),0);
game.camera.unproject(touchPos);
System.out.println(touchPos.x+" "+ touchPos.y);
I get 0 0 in right top corner but my character witch cords 0 0 is drawing in left bottom corner.
When i use:
game.camera = new OrthographicCamera(820,480);
game.viewport = new FillViewport(820,480,game.camera);
i must use game.batch.setProjectionMatrix(game.camera.combined);
when i use this code i've got corectly working unproject method and coordinate system but i've got distored texture.
When i use:
camera = new PerspectiveCamera();
viewport = new StretchViewport(900, 470, camera);
i've got distored texture and bad coords system. and i can 't use :game.batch.setProjectionMatrix(game.camera.combined);
It is distorted because you are using a fixed width and height for the camera, so it simply stretches to fit whatever size window/screen you're putting it on.
Incidentally, StretchViewport does the same thing (distorts the scene to fit the dimensions you gave it to the window). But you just created a viewport without actually calling update() on it, so it's not doing anything.
You most likely want to use ExtendViewport or FillViewport to avoid stretching, but other options are available. Read about them here.
Your viewport won't properly respond to screen rotations (or desktop window resize) unless you put viewport.update(width,height) into the resize method. And you have to call update on it at least once regardless, using the actual screen dimensions. This is most convenient by simply putting viewport.update(width,height) into the resize method.
I am adding a frame to an image in JavaFX by first adding the frame to the canvas and then the image,
so that it overlaps and the image seems to have a frame.
For some reason my image gets distorted, it scales poorly and makes everything in it look "fat".
If I try to show the image in an ImageView (variable named "image" in the code) it looks normal,
so I tried to get the values (width and height) from the normal looking ImageView, yet still no luck:
Image i = new Image(path.toUri().toString());
image.setImage(i);
canvas.setWidth(image.getFitWidth() + 20);
canvas.setHeight(image.getFitHeight() + 20);
GraphicsContext gc1 = canvas.getGraphicsContext2D();
gc1.drawImage(rimage, 0, 0, image.getFitWidth() + 20, image.getFitHeight() + 20);
GraphicsContext gc = canvas.getGraphicsContext2D();
image.preserveRatioProperty();
gc.drawImage(i, 10, 10, image.getFitWidth(), image.getFitHeight());
Original image:
Framed and distorted (the head looks rounder):
I haven't tested this myself, but theres a few things I noticed about your code.
First, the line
image.preserveRatioProperty();
doesn't actually change any state for the ImageView, all it does is tell you whether or not the ImageView is set to preserve ratios.
what you probably want instead is:
image.setPreserveRatio(true);
which I believe will probably do what you want.
If it doesn't it might be because the image has already been loaded, so if this still doesn't work, try putting image.setPreserveRatio(true); before image.setImage(i);
Isn't the window just too wide for your image? Try to crop the image using another drawImage where you can define which part of the image you want to use. Or change the window size. Or use a width and height to draw with that is relative to the one in the image.
My image is of size 720x480 and stage is of same size. The boolean parameter, whether to stretch the stage or not is kept false, so that aspect ratio is maintained, now the problem i am getting that a black area is shown on either side of the screen I want my scene to be centered. The link below refers a file, which shows the problem more clearly, that image is aligned to the bottom left i want it to be centered so that the black area is divided equally on top and the bottom.
what is the approach to solve this?
http://badlogicgames.com/forum/viewtopic.php?f=11&t=3398
You have to specify X and Y coordinate as the following way
X = (Gdx.graphics.getWidth() - sprite.getRegionWidth()) / 2.0f;
Y = (Gdx.graphics.getHeight() - sprite.getRegionHeight()) / 2.0f, sprite.getRegionWidth()/2.0f;
You have to calaculate center of the image. Using this way you can put your image in center of the screen. Also here I user Sprite to display image.