libgdx resize image on multiple screens ratio - android

I know how to set Image width and height using pixel coords. Is there a way to set relative coords? I want to deal with multiple screens.
For example i have 1920x1080 screen size. And i have relative coords width (-100,100) and height = 200*1080/1920=112.5, height(-56.25, 56.25)
Can i use this relative coords to set width and height? and how to do it?
Is there any best practices to handle different screens ratio, handle orientation change correctly?
thanks in advance.
here is how i'm using it in my app:
create()
public void create() {
stage = new Stage();
Gdx.input.setInputProcessor(stage);
camera = new OrthographicCamera(Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
camera.setToOrtho(true, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
camera.update();
Skin skinBackground = new Skin();
skinBackground.add("background", new Texture(Gdx.files.absolute(FilePathSlicer.preparePath(taskSheet.background.getPicUrl()))));
background=new Image(skinBackground,"background");
if(background!=null) {
background.setWidth(width);
background.setHeight(height);
stage.addActor(background);
}
}
render
public void render() {
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
Gdx.gl.glClearColor(255/255f, 255/255f, 255/255f, 1);
stage.getBatch().setProjectionMatrix(camera.combined);
stage.act(Gdx.graphics.getDeltaTime());
stage.draw();
}

that is what Viewports are for. Viewport is kind on flexible are connected with a stage (which is actually something like transparency that you are adding items [buttons, labels etc...] on).
It cares for scaling in a way you defined by creating a proper type of viewport.
Main steps are:
//create() method
stage = new Stage(); //creating a stage
viewport = new FillViewport( screenWidth, screenHeight ); //creating viewport choosing a proper Viewport class - for example Fill
stage.setViewport( viewport ); //applying actors (buttons, labels etc...) to a stage
//render() method
stage.act(); //acting a stage to calculate positions of actors etc
stage.draw(); //drawing it to render all
//resize(width, height) method
viewport.update(width, height); //updateing viewport that it scales in proper way
You have many types of vieports like just for example:
FillViewport - stretches graphics to fill the display
FitViewport - adding black stripes when screen is to wide
ExtendViewport - cutting what is out of the screen
etc.
Of course you can have many stages and others viewport for each of them.
To read more about stages, actors and viewports visit: https://github.com/libgdx/libgdx/wiki/Scene2d
You don't have to care about screen orientation - all you need to do is to define your app orientation in android Manifest

Related

LibGdx Tiled Map with proper dimensions given screen size

I have set up my Tiled Map likes so:
level = new Level("level_1.tmx");
renderer = new OrthogonalTiledMapRenderer(level.getMap(), UNIT_SCALE);
spriteBatch = renderer.getBatch();
debugRenderer = new ShapeRenderer();
camera = new OrthographicCamera();
camera.setToOrtho(false, 18, 10); //View is 18 by 10 tiles
camera.update();
However, since the number of tiles is hardcoded in, the screen will accordingly stretch with different screen sizes.
How do I customize the screen width so that it has the proper ratio and will properly scale to fill the screen with LibGDX and Android?
If you want to see more tiled area on a screen, when its resolution more than origin, when you must set new camera viewport:
camera.setToOrtho(false, Gdx.graphics.getWidth() / YOUR_TILE_PIXEL_WIDTH, Gdx.graphics.getHeight() / YOUR_TILE_PIXEL_HEIGHT)
But if you always want to see the same amount of tiles on the screen, streched if screen resolution more than origin, then use StretchViewport
and take a look here

Libgdx, scale sizes based on device screen

I am working on my first libgdx app, a game. I have made some apps in IntelliJ before, but this is different. I am struggling with how my game will look over several devices, how to make everything scale appropriately.
If you can take a look at how I have it now, and maybe help me understand how it 'should' be to get the most out of it?
I have three classes, 'MyGame', 'MainMenuScreen' and 'GameScreen'.
// MyGame.java
WIDTH = Gdx.graphics.getWidth();
HEIGHT = Gdx.graphics.getHeight();
// MainMenuScreen
public void show(){
WIDTH = Gdx.graphics.getWidth();
HEIGHT = Gdx.graphics.getHeight();
camera = new OrthographicCamera();
camera.setToOrtho(false, 800, 480);
}
// GameScreen
public void show(){
camera = new OrthographicCamera();
camera.setToOrtho(false, 800, 480);
}
So, the 800, 480 is pixels, lets say I want to add something to this, and make it 32x32px (height, width), will it look the same on all devices? Bigger on large screens, and smaller on small screens, but always relevant to, lets say a background that is 800x480px?
I hope you understand what I am getting at. I posted the code I thought was relevant to the question, if u want more code, just say so, just tell me what you need.

What is Gdx.graphics.getWitdth() measured in?

I'm using getWidth and getHeight a lot for scaling textures in my Libgdx project. What units are these in (pixels?)
Also, if I want the texture to look consistent on different phones, should I use getWidth/Height to scale, or some number value like width = 100, height = 50?
Yes, getWidth and getHeight are both measured in pixels. Although you can use these for your dimensions, usually what you'll want to do to get a consistent look across phones is to use a camera of some sort (for 2d games, generally an OrthographicCamera).
What you'll probably want to do is give the camera some fixed width and height, and then do all of your drawing through the camera's transformations. Something like:
SpriteBatch batch = new SpriteBatch();
OrthographicCamera camera = new OrthographicCamera(800, 600);
//some code here
batch.setProjectionMatrix(camera.combined);
batch.begin();
//draw your textures here
batch.end();
This should keep the scale of your images consistent across phones. Keep in mind that if there is too much of a stretch/compress, your textures may look distorted.
#clearlyspam23 that's exactly what I'm looking for, thank you! Just a note, set it up like:
OrthographicCamera camera = new OrthographicCamera();
camera.setToOrtho(false, 800, 600);
The other way looks like it positioned the camera origin at 800, 600.
Thanks again!

Libgdx 1.0.0 stage fullscreen android

I am trying to set my libgdx game to use a certain resolution on all android devices regardless of the devices native resolution.
to be specific my device has a resolution of 720x1280 and I want to use a resolution of 480x800.
On devices where the aspect ratio is different I don't mind how this is resolved.
My current code is
Camera cam = new OrthographicCamera(480,800);
view = new StretchViewport(480, 800, cam);
stage = new Stage();
Gdx.gl.glViewport(0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
but all this seems to do is give me a 480x800 area in the bottom left corner (in which everything renders correctly)! How do I get libgdx to stretch this area to the whole of the devices screen?
Don't set the glViewport yourself, but let the Viewport do that for you.
You need the following code snippet in your resize() method.
public void resize(int width, int height) {
view.update(width, height);
}

Why is my sprite not being drawn correctly (libgdx)?

I have a 1024x1024 pixel image in a jpg file. I am trying to render it onscreen with libgdx such that it fills the whole screen. At this stage I am not concerned with the image preserving its aspect ratio.
In my show() method I parse the jpg and initialize the sprite thus:
mWidth = Gdx.graphics.getWidth();
mHeight = Gdx.graphics.getHeight();
mCamera = new OrthographicCamera(1, mHeight/mWidth);
mBatch = new SpriteBatch();
mTexture = new Texture(Gdx.files.internal("my jpg file"));
mTexture.setFilter(TextureFilter.Linear, TextureFilter.Linear);
TextureRegion region = new TextureRegion(mTexture);
mSprite = new Sprite(region);
mSprite.setSize(0.99f, 0.99f);
mSprite.setOrigin(mSprite.getWidth()/2, mSprite.getHeight()/2);
mSprite.setPosition(-mSprite.getWidth()/2, -mSprite.getHeight()/2);
and in the render() method, I draw the sprite thus
Gdx.gl.glClearColor(1, 1, 1, 1);
Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
mBatch.setProjectionMatrix(mCamera.combined);
mBatch.begin();
mSprite.draw(mBatch);
mBatch.end();
but all that is actually rendered is a blank white screen. What am I doing wrong?
You should use
mCamera = new OrthographicCamera(mWidth, mHeight);
in stead of
mCamera = new OrthographicCamera(1, mHeight/mWidth);
in most cases, unless you want to scale things in a different way.
Check if your code has actually found and read the file successfully. If not, check things like full path, file extension, intermediate spaces etc.
In resize method, try adding following
mBatch.getProjectionMatrix().setToOrtho2D(0, 0, mWidth, mHeight);
If it isn't working even then, I'd recommend falling back to the working libgdx logo sprite being drawn when you create a new project with setup ui. Change things slowly from there.
For reference, use https://code.google.com/p/libgdx-users/wiki/Sprites
Good luck.
To the best of my knowledge, mSprite.setSize(0.99f, 0.99f); sets the pixel width and height of a sprite whereas setScale scales the sprite's dimensions. Setting setSize to something larger such as 256 x 256 should make your sprite visible and setting it to the resolution of the screen should make it fill the screen if all goes well. The examples linked by Tanmay Patil are great so look into them if you're having trouble.

Categories

Resources