7
\$\begingroup\$

I am new to LibGDX. I am trying to develop a game for Android (so it will support different screen sizes), but I don't know how to put a button with an image. I tried ImageButton but I can't resize it. I have put TextButtons in my app and it works and resizes fine too.

Any suggestions ?

\$\endgroup\$
1

4 Answers 4

5
\$\begingroup\$

You have the freedom to create your own button class, attach to it a sprite, make some methods to handle input and you're good to go.

public class SimpleButton {

    private Sprite skin; 

    public SimpleButton(Texture texture, float x, float y, float width, float height) {
        skin = new Sprite(texture); // your image
        skin.setPosition(x, y);
        skin.setSize(width, height);
    }

    public void update (SpriteBatch batch, float input_x, float input_y) {
        checkIfClicked(input_x, input_y);
        skin.draw(batch); // draw the button
    }

    private void checkIfClicked (float ix, float iy) {
        if (ix > skin.getX() && ix < skin.getX() + skin.getWidth()) {
            if (iy > skin.getY() && iy < skin.getY() + skin.getHeight()) {
                // the button was clicked, perform an action
                System.out.println("Button clicked !");
            }
        }
    }

}

For the screen size issue you could use percentage of the screen size:

public float convertToPercents_width (float p) {
    return Gdx.graphics.getWidth()*p/100;
}

public float convertToPercents_height (float p) {
    return Gdx.graphics.getHeight()*p/100;
}

 

\$\endgroup\$
2
\$\begingroup\$

follow the steps:

create a atlas:

atlasUiPadrao = new TextureAtlas("ui/uiPadrao.pack");

(how to pack: put png images in a folder and compress with libgdx texturepack).

create a skin:

skinPadrao = new Skin(atlasUiPadrao);

create a style: ImageButtonStyle:

fireButtonStyle = new ImageButtonStyle();  //Instaciate
fireButtonStyle.up = skinPadrao.getDrawable("uFireUpI");  //Set image for not pressed button 
fireButtonStyle.down = skinPadrao.getDrawable("uFireDownI");  //Set image for pressed
fireButtonStyle.over = skinPadrao.getDrawable("uFireOverI");  //set image for mouse over
fireButtonStyle.pressedOffsetX = 1; 
fireButtonStyle.pressedOffsetY = -1;

now you can create button in Screen file

ImageButton item1Button = new ImageButton(Assets.fireButtonStyle);

for every size screen, you have to define what image will be displayed

\$\endgroup\$
3
  • \$\begingroup\$ there are a lot of screen size, and how can I create an image for each screen? \$\endgroup\$ Aug 13, 2014 at 7:10
  • \$\begingroup\$ @Leo Lima I use that kind of button in an actor, but it's not working like I want, Have you already do that? \$\endgroup\$
    – letroll
    Oct 27, 2014 at 16:20
  • \$\begingroup\$ This is the easiest way to do it. \$\endgroup\$ May 26, 2015 at 14:25
2
\$\begingroup\$

I use scene2d library for making UI elements in the screen like button,Text ,Image etc.

The final result looks something like this: enter image description here

  • 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\$
0
\$\begingroup\$

I have created an introduction tutorial to create Button, ImageButton and TextButton on LibGDX here: https://libgdx.info/buttons-scene2d/

Take a look and let me know if you have questions.

\$\endgroup\$

You must log in to answer this question.

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