I am using a Viewport for my libGdx landscape game like this.
public static final int WORLD_WIDTH = 1280;
public static final int WORLD_HEIGHT = 800;
camera = new OrthographicCamera();
float aspectRatio = Constants.WORLD_WIDTH / Constants.WORLD_HEIGHT;
ViewPort viewPort = new FillViewport(WORLD_WIDTH * aspectRatio,WORLD_HEIGHT, camera);
I am using all positions in terms of this width and height.
It is working fine in all devices except device that have screen resolution greater than 1300.
In device that have greater resolution than 1300,only middle part of the game is visible.I tried using stretched viewport for the greater resolution device,but it is giving all game elements stretched.
How can I make my game working in all devices fine?Do I need to change the viewport?
Finally I made it work. I am not sure whether this is the correct way to solve such problems.
I did it like this;
camera = new OrthographicCamera();
if(screenHeight>1300)
{
Constants.WORLD_WIDTH=1280;
Constants.WORLD_HEIGHT=960;
}
else{
Constants.WORLD_WIDTH=1280;
Constants.WORLD_HEIGHT=800;
}
viewPort = new FillViewport(Constants.WORLD_WIDTH, Constants.WORLD_HEIGHT, camera);
viewPort.apply();
I used a viewPort width of 1280x960 for all greater resolution devices while keeping 1280x800 resolution for all other devices that has screen width less than 1300.
While drawing background I used viewport width and height to set the size like this.
bgSprite=new Sprite(bgTexture);
bgSprite.setPosition(Constants.BG_X,Constants.BG_Y);
bgSprite.setSize(game.viewPort.getWorldWidth(),game.viewPort.getWorldHeight());
Not sure this the right way,but doing this solved my problem.
I'll recommend ExtendViewprot to use, because it keeps the world aspect ratio without black bars by extending the world in one direction. Use all positions in terms of world width and height not screen width and height and resize viewport in resize method according to your device width and height.
Your resources size should be in the respect of world width and height.
public class MyGdxGame extends ApplicationAdapter {
Stage stage;
public static final int WORLD_WIDTH = 800;
public static final int WORLD_HEIGHT = 480;
#Override
public void create() {
ExtendViewport extendViewport=new ExtendViewport(WORLD_WIDTH,WORLD_HEIGHT);
stage=new Stage(extendViewport);
//logical pixels of your current device, device specific
//float w=Gdx.graphics.getWidth(); //screen width
//float h=Gdx.graphics.getHeight();// screen height
Image image=new Image(new Texture("badlogic.jpg"));
image.setPosition(WORLD_WIDTH/2,WORLD_HEIGHT/2, Align.center); //consider world width and height instead of screen width and height
stage.addActor(image);
stage.setDebugAll(true);
}
#Override
public void render() {
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
Gdx.gl.glClearColor(0,0,0,1);
stage.act();
stage.draw();
}
#Override
public void resize(int width, int height) {
stage.getViewport().update(width,height);
stage.getCamera().position.set(WORLD_WIDTH/2,WORLD_HEIGHT/2,0);
stage.getCamera().update();
}
#Override
public void dispose() {
stage.dispose();
}
}
I'm currently working on a libgdx game and before I give it final touches I wanted to actually hear something from experienced users, that has been bothering me for a few days already.
If I want to support as many as possible devices, essentially I will be designing graphics for the biggest possible res ,which is then going to be scaled if needed, for smaller screens, right? How do I go about developing for a resolution that is even bigger than my laptop's(the 2015/16 gen phones). My laptop has a resolution of 1920x1080px and the S7 Samsung has 2k+ width.
Thank you!
I think what you are looking for is Viewports. You have to decide which strategy fits best your needs. For example a FitViewport always keeps the aspect ratio you define, which might lead to black bars on some devices.
When I personally develop with libgdx I place and size all objects relative to the screen width and height. This includes images, fonts, buttons, etc. This gives me a pretty consistent result across all devices because most devices today have a ratio 16:9 or something close to it. For developing an image larger than your screen size what's wrong with just using photoshop to create the image of the specified size?
Better you choose the screen with as 1280 and screen height as 800 and also use the fill viewPort . So you will be able to render your game in almost all the screens without the issue of stretching.
Viewport is the method which provided by the libgdx to solve this multi screen compatible issue . here i will post some sample code which you can use for the reference.
public class myGame extends ApplicationAdapter {
public OrthographicCamera camera;
public Viewport viewPort;
private SpriteBatch batch;
private BitmapFont myScoreFont;
private Texture texture;
public myGAme() {
}
#Override
public void create() {
myScoreFont = new BitmapFont(Gdx.files.internal(Constants.PATH_TO_MY_SCORE_FONT), true);
batch = new SpriteBatch();
float w = Gdx.graphics.getWidth();
float h = Gdx.graphics.getHeight();
texture = new Texture(Gdx.files.internal(Constants.PATH_TO_LEFT_BAR));
camera = new OrthographicCamera();
camera.position.set(0, 0, 0);
camera.update();
camera.setToOrtho(false, Constants.APP_WIDTH, Constants.APP_HEIGHT);
// Here is the viewport is setting up with the camera and the screen size
viewPort = new FillViewport(1280, 800, camera);
}
#Override
public void dispose() {
batch.dispose();
}
#Override
public void render() {
Gdx.gl.glClearColor(1, 1, 1, 1);
Gdx.gl.glClear(GL30.GL_COLOR_BUFFER_BIT);
float deltaTime = Gdx.graphics.getDeltaTime();
batch.setProjectionMatrix(camera.combined);
batch.begin();
batch.draw(myScorefont,"Score",0,0);
batch.end();
}
#Override
public void resize(int width, int height) {
// the game area will be resized as per the screen size of the device
viewPort.update(width, height);
}
#Override
public void pause() {
}
#Override
public void resume() {
}
}
Is it possible to set a minimum and maximum aspect ratio?
Lets say from 1:1 to 2.5:1. Or at least set min and max for width and height?
You can use a FitViewport to maintain a fixed width and height:
FitViewport viewport = new FitViewport(SCREEN_WIDTH, SCREEN_HEIGHT, camera);
If you are using a Stage to draw all your actors then all you need to do is set the viewport on the stage like this:
stage.setViewport(viewport);
However if you are not using a Stage then you need to do the following. If you are drawing directly with a SpriteBatch you will need to set up a Camera too:
SpriteBatch batch = new SpriteBatch();
OrthographicCamera camera = new OrthographicCamera(SCREEN_WIDTH, SCREEN_HEIGHT);
camera.setToOrtho(true);
//center the camera in the center of the screen
camera.position.set(SCREEN_WIDTH / 2f, SCREEN_HEIGHT / 2f, 0f);
//pass the camera to the third argument of the viewport
FitViewport viewport = new FitViewport(SCREEN_WIDTH, SCREEN_HEIGHT, camera);
Then you will need to set up the projection matrix on the Camera and SpriteBatch when rendering:
#Override
public void render(float deltaTime) {
camera.update();
batch.setProjectionMatrix(camera.combined);
// do all the rendering of textures and stuff
}
Also you need to update the viewport every time the screen is resized:
#Override
public void resize(int width, int height) {
viewport.update(width, height);
}
I am trying to construct a layout like this picture:
Should I use two stages?, two cameras?, one stage with splitPane?
I want the top screen to be half of the entire devices height. The top screen will have animated actors and a single background image with some labels close to the top of the screen.
The lower screen should be a Scrollpane with information and at the bottom ,the menu and back buttons.
How do I secure the ratio between them if the screen resizes?
Edit 2014-03-28:
Hi!
I tried using two stages as proposed and I am pretty happy. Thought I share my first try at it. The result was this code:
package se.appltini.mygdxtest;
//imports omitted
public class DualStageTutorial extends ScreenAdapter {
private Stage upperStage;
private Stage bottomStage;
private Skin skin,menuSkin;
#Override
public void show() {
upperStage = new Stage();
bottomStage = new Stage();
skin = new Skin(Gdx.files.internal("uiskin/uiskin.json"));
menuSkin = new Skin(Gdx.files.internal("menuSkin/uiSkin.json"),new TextureAtlas(Gdx.files.internal("menuSkin/uiskin.atlas")));
Image upperImage = new Image(menuSkin.getPatch("menuTexture"));
upperImage.setFillParent(true);
upperStage.addActor(upperImage);
Image bottomImage = new Image(menuSkin.getPatch("menuTexture"));
bottomImage.setFillParent(true);
//setting alpha to 0.5f so we can see the different stages
bottomImage.setColor(1f, 1f, 1f, 0.5f);
bottomStage.addActor(bottomImage);
}
#Override
public void resize(int width, int height) {
}
#Override
public void render(float delta) {
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT | GL20.GL_DEPTH_BUFFER_BIT);
upperStage.act(delta);
bottomStage.act(delta);
/*Upper Half*/
//set the openGl viewport to half the screenheight and starting y from the middle of the screen
Gdx.gl.glViewport(0,Gdx.graphics.getHeight()/2,Gdx.graphics.getWidth(),Gdx.graphics.getHeight()/2);
upperStage.draw();
/*bottom Half*/
//set the openGl viewport to half the screenheight and starting y from the bottom of the screen
Gdx.gl.glViewport(0,0,Gdx.graphics.getWidth(),Gdx.graphics.getHeight()/2);
bottomStage.draw();
}
#Override
public void hide() {
dispose();
}
#Override
public void dispose() {
upperStage.dispose();
bottomStage.dispose();
skin.dispose();
menuSkin.dispose();
}
}
The best practice here would be to use two different stages.
Using two stages will simplify design in sense that the viewport management for 2d animation will simplify by a considerable amount. Also the event handling has to be completely different style. Your information panel won't have much relative layout changes in actors as compared to 2d animation.
Using same stage would make sense only if both contents overlap each other in some form. I'm sure this is not the case here. Your info panel will always be ABOVE animation (most probably).
Hope this helps.
I have been looking for 10 hours (literally) and I'm done, I need to ask. Thing is I'm learning How use LibGdx to program Java games. I'm doing a Horizontal Space Ship Game. So, my worst problem here is that I do not know how do scroll (I think draw will explain better). I want to draw a huge background (Space) and make my OrthographicCamera move right like with my SpaceShip, so it will create a Scroll effect with the Space Background. No enemies and nothing but the ship on the screen.
I'm trying this:
public void moveCamera(float x,float y){
cam.position.set(x, y, 0);
}
Then I use that method in my WorldRender render() method:
public void render(float delta){
ship.Move(delta);
moveCamera(ship.getPosition().x,ship.getPosition().y);
cam.update();
System.out.println(""+cam.position);
spriteBatch.begin();
drawBackground();
drawShip();
spriteBatch.end();
}
I actually move the camera position (I can see that thanks to the println), but It isn't moving in the game, so SpaceShip just disappears by the edge of the window.
I also tried this before spriteBatch.end()
spriteBatch.setProjectionMatrix(camera.combined);
but when I do that windows only shows a black screen, no ship, no nothing.
As I said, I'm desperate, I see lot of examples (scroll with mouse, paralexscrolling etc) but all are to advanced or just nothing to do with my code.
This is how I draw stuff. Background and ship are textures inside WorldRender. I draw background image very wide, so my intention is do some scrolling over as I said. That's the code
private void loadTextures(){
shipTexture=new Texture(Gdx.files.internal("nave.png"));
background=new Texture(Gdx.files.internal("fondo.jpg"));
}
public void drawShip(){
spriteBatch.draw(shipTexture,ship.getPosition().x*ppuX,ship.getPosition().y*ppuY, ship.WIDTH*ppuX,ship.HEIGHT*ppuY);
}
public void drawBackground(){
spriteBatch.draw(background, -10*ppuX,0*ppuY, Gdx.graphics.getWidth()*10,Gdx.graphics.getHeight());
}
Here you can download the code if someone want to help in hardcore mode
My code (not working)
I FINALLY SOLVED IT!
That's the code I used in a class name WorldRenderer, which have methods that are called within GameScreen for render, resize etc
public WorldRenderer(World world) {
// TODO Auto-generated constructor stub
this.world=world;
this.ship=world.getShip();
this.cam = new OrthographicCamera(CAMERA_WIDTH,CAMERA_HEIGHT);
this.cam.setToOrtho(false,CAMERA_WIDTH,CAMERA_HEIGHT);
this.cam.position.set(ship.getPosition().x,CAMERA_HEIGHT/2,0);
this.cam.update();//actualizamos la camara
spriteBatch=new SpriteBatch();
loadTextures();
}
private void loadTextures(){
shipTexture=new Texture(Gdx.files.internal("nave.png"));
background=new Texture(Gdx.files.internal("fondo.jpg"));
}
public void drawShip(){
spriteBatch.draw(shipTexture,ship.getPosition().x,ship.getPosition().y,10,10);
}
public void drawBackground(){
spriteBatch.draw(background, 0,0, 500,50);
}
public void render(float delta){
ship.Move(delta);
moveCamera(ship.getPosition().x);
spriteBatch.setProjectionMatrix(cam.combined);
spriteBatch.begin();
drawBackground();
drawShip();
spriteBatch.end();
}
public void moveCemara(float x){
cam.position.set(x+20,cam.position.y, 0);
cam.update();
}
Inside the Ship I have this method which I call within render in WorldRenderer to move It
public void Move(float delta){
if(Gdx.input.isKeyPressed(Keys.LEFT)) this.position.x -=velocity *delta;
if(Gdx.input.isKeyPressed(Keys.RIGHT)) this.position.x +=velocity *delta;
if(Gdx.input.isKeyPressed(Keys.UP)) this.position.y +=velocity *delta;
if(Gdx.input.isKeyPressed(Keys.DOWN)) this.position.y -=velocity *delta;
}
Also I want to thanks very much to the people who helped me. I'm marking first answer as the good one, but, mix both was what gave me the real solution.
I leave here some tutorials I followed which are pretty good for noobs
That's a good everything-from-scratching-tutorial
LiGdxForNoobs
A simple platform game
platformGame
A very simple game
bucketGame
I can't tell if this is your only mistake, but this is ONE mistake. If this is what you say you were doing:
spriteBatch.begin();
drawBackground();
drawShip();
spriteBatch.setProjectionMatrix(camera.combined);
spriteBatch.end();
You wont see anything. When setProjectionMatrix is called inside a begin()/end() block. the current batch is flushed to the gpu. So, you are actually not drawing anything with the camera matrix. You should do this instead:
spriteBatch.setProjectionMatrix(camera.combined);
spriteBatch.begin();
drawBackground();
drawShip();
spriteBatch.end();
EDIT:
If you don't call that line, spriteBatch uses its own default camera (which wont notice your camera.update() modifications, so that's not what you want).
You should now pay more attention to the coordinates you are using. I'm not quite sure you really need the ppu conversion thing. To begin with, define everything in imaginary world coordinates, note that you'll see some stretching in your world.
public void drawShip(){
spriteBatch.draw(shipTexture,ship.getPosition().x,ship.getPosition().y, 10, 10);
}//your ship is 10 units wide and tall!
public void drawBackground(){
spriteBatch.draw(background, -10,0, 500, 100);
} //your background is 500 units wide, and 100 units tall
//camera setup
camera = new OrthographicCamera(50, 50);
//your camera will print to screen 50 units of your world
If you get to see a stretched world, try to understand how it's working (if you can't see anything, there is something wrong somewhere).
EDIT 2
I took a look at your code. First remove ppu's, as it obscures your code. You were setting your cam position to the ship.postion, while drawing at ship.position * ppu. Also your background was way too big (that's why you see it pixelated). You should see something reasonable with this. (someday you'll have to initialize your camera in another way to deal with stretching, but forget it until you understand how all works).
this.cam = new OrthographicCamera(CAMERA_WIDTH,CAMERA_HEIGHT);
public void drawShip(){
spriteBatch.draw(shipTexture, ship.getPosition().x ,ship.getPosition().y, 10, 10);
}
public void drawBackground(){
spriteBatch.draw(background, -CAMERA_WIDTH/2, -CAMERA_HEIGHT/2, 100, 100); //let bg begin where camera starts. (0,0)
}
public void render(float delta){
ship.Move(delta);
moverCamara(ship.getPosition().x, ship.getPosition().y);
spriteBatch.setProjectionMatrix(cam.combined);
spriteBatch.begin();
drawBackground();
drawShip();
spriteBatch.end();
}
Its not clear how your drawing? I'm not sure if your doing this approach correctly.. Can you provide details of your background and ship? Can you provide details on you background image, is it a huge image that your scrolling around or is it a repeated image you want to repeat as you scroll?
--EDIT--
ok i think i have an idea what might be up. I would normally apply the camera to the current context.
Place the following in your resize
public void resize(int width, int height) {
cam = new OrthographicCamera(width, height);
cam.translate(width / 2, height / 2, 0);
}
Place the following in the start of your render()
cam.position.set(posX,posY,0);
cam.update();
cam.apply(Gdx.gl10);
Gdx.gl.glClearColor(0,0,0,1);
Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT); // #14
This will make you have a clear screen with the origin set at the bottom left of the window. You should then draw your background first
spriteBatch.setProjectionMatrix(cam.combined);
spriteBatch.begin();
spriteBatch.draw(background,0,0,sizeX,sizeY);
spriteBatch.end()
see how that looks as you move your camera position posX and posY. Then add your ship to the mix
-- MORE EDITS ---
you can then calculate the posX and posY as
posX = defaultOffsetX+shipX
and so on..
Anyhow hope this helps
I'm still only learning myself so this might not be the best method.. but it seems to work.
I've edited your code. Have a look at the following:
public class WorldRenderer {
private World world;
private Ship ship;
private Texture shipTexture,background;
private SpriteBatch spriteBatch;
private OrthographicCamera cam;
float screenSizeX = 100;
float screenSizeY = 100;
float shipSizeX = 10;
float shipSizeY = 10;
public void setSize (int w, int h) {
cam = new OrthographicCamera(screenSizeX,screenSizeY);
}
public WorldRenderer(World world) {
this.world=world;
this.ship=world.getShip();
spriteBatch=new SpriteBatch();
loadTextures();
}
private void loadTextures(){
shipTexture=new Texture(Gdx.files.internal("nave.png"));
background=new Texture(Gdx.files.internal("fondo2.jpg"));
}
public void drawShip(){
spriteBatch.draw(shipTexture, ship.getPosition().x,ship.getPosition().y, shipSizeX,shipSizeY);
}
public void drawBackground(){
spriteBatch.draw(background, 0,0);
}
public void render(float delta){
ship.Move(delta);
moverCamara(ship.getPosition().x,ship.getPosition().y);
spriteBatch.setProjectionMatrix(cam.combined);
spriteBatch.begin();
drawBackground();
drawShip();
spriteBatch.end();
}
public void moverCamara(float x,float y){
cam.position.set(x, y, 0);
cam.update();
}
}
This way, your ship is always in the middle of the screen and the background moves. Hope this helps.