1
\$\begingroup\$

I'm having issues with optimizing my game for android. I've basically created a simple menu with two buttons (see pictures below)! The size of the window is 720x480px ( in the Desktop Launcher ). My Problem is now the following: On my PC everything looks fine, but when launching my game on an android device, everything is "zoomed out" too much! This is obviously caused by the resolution (1440 x 2560 pixels). My question is now: How do I "scale" the screen correctly, so that it look identical with the desktop version?

Desktop Desktop version Android Android

CODE: http://pastebin.com/HtMfd4Jz

\$\endgroup\$
2
  • \$\begingroup\$ You have to scale the images. Android uses Canvas and it can be scaled and in most cases images and the canvas is scaled by the folder the images are in. I dont know how to scale it in libgdx but that is what you have to do for it to not look like that on android \$\endgroup\$
    – user69046
    Jan 1, 2016 at 13:16
  • \$\begingroup\$ I'm not sure about this...and even if it worked, i would have to scale it to every possible size(e.g 1920x1080 1440x1920 etc) \$\endgroup\$
    – Niemand
    Jan 1, 2016 at 17:14

1 Answer 1

0
\$\begingroup\$

What you have do is make UI Buttons and Text resolutions dependent on screen in which your game is running,Instead of entering fixed values like

button.height=100;
button.width=50;

Instead Give value like this.

button.height=Gdx.graphics.getheight()/4;
button.width=Gdx.graphics.getwidth()/8;

if you follow the above code you can run your game in any device the buttons will look the same with out zooming in or zooming out.

Here is a small code example with a single button,I am using scene2d for setting stage and adding actor button

  • Create a class start that extends the Game class and call setScreen function to set screen to main menu
  • MainMenu Class implements screen.It have stage that contains buttons that also have on/off state ,An input listener is added to button to handle touch inputs

You can find button.pack and new.fnt files from here

Start Class

public class Start extends Game{
    public OrthographicCamera camera;
    public SpriteBatch batch;
    public BitmapFont font;



    @Override
    public void create() {

        camera=new OrthographicCamera(Constants.width,Constants.width*Constants.aspectRatio);
        batch=new SpriteBatch();


        setScreen(new MainMenu(this));

    }

}

MainMenu Class

public class MainMenu implements Screen{
    Start game;
     private Stage stage; //** stage holds the Button **//
        private BitmapFont font; 
        private TextureAtlas buttonsAtlas; //** image of buttons **//
        private Skin buttonSkin; //** images are used as skins of the button **//
        private TextButton button; 


public MainMenu(Start game)
{
    this.game=game;

}

    @Override
    public void show() {


    buttonsAtlas = new TextureAtlas("img/button/button.pack"); //**button atlas image **//
    buttonSkin = new Skin();
    buttonSkin.addRegions(buttonsAtlas); //** skins for on and off **//
    font = new BitmapFont(Gdx.files.internal("font/new.fnt"),false); //** font **//

    stage = new Stage();        //** window is stage **//
    stage.clear();
    Gdx.input.setInputProcessor(stage); //** stage is responsive **//

    TextButtonStyle style = new TextButtonStyle(); //** Button properties **//
    style.up = buttonSkin.getDrawable("buttonOff");
    style.down = buttonSkin.getDrawable("buttonOn");

    style.font = font;

    button = new TextButton("START", style); 
    //** Button text and style **//
    button.setHeight(Gdx.graphics.getHeight()/3); //** Button Height **//
    button.setWidth(Gdx.graphics.getWidth()/4); //** Button Width **//

    button.setPosition(Gdx.graphics.getWidth()/2-button.getWidth()/2, Gdx.graphics.getHeight());

    button.addListener(new InputListener() {
        public boolean touchDown (InputEvent event, float x, float y, int pointer, int button) {
                Gdx.app.log("my app", "Pressed"); //** Usually used to start Game, etc. **//


                // TODO Auto-generated method stub



                return true;

        }

        public void touchUp (InputEvent event, float x, float y, int pointer, int button) {
                Gdx.app.log("my app", "Rggggggeleased");

          ///and level
                game.setScreen(new MyNextScreen(game));

                dispose();

        }
    });



    MoveToAction moveAction = new MoveToAction();//Add dynamic movement effects to button
    moveAction.setPosition(Gdx.graphics.getWidth()/2-button.getWidth()/2, Gdx.graphics.getHeight()/2+ Gdx.graphics.getHeight()/6);
    moveAction.setDuration(.5f);
    button.addAction(moveAction);

    stage.addActor(button);

}
@Override
public void render(float delta) {
    // TODO Auto-generated method stub
     Gdx.gl.glClearColor(1, 1, 1, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
        stage.act();
     game.batch.begin();
        stage.draw();
       game.batch.end();

}

@Override
public void resize(int width, int height) {
    // TODO Auto-generated method stub

}

@Override
public void pause() {
    // TODO Auto-generated method stub

}

@Override
public void resume() {
    // TODO Auto-generated method stub

}

@Override
public void hide() {
    // TODO Auto-generated method stub

}

@Override
public void dispose() {
    // TODO Auto-generated method stub

}

}

\$\endgroup\$
1
  • \$\begingroup\$ I'm going to try that later on! Thanks for your answer \$\endgroup\$
    – Niemand
    Jan 4, 2016 at 17:22

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .