5
\$\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\$
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\$
  • \$\begingroup\$ there are a lot of screen size, and how can I create an image for each screen? \$\endgroup\$ – Vahe Muradyan Aug 13 '14 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 '14 at 16:20
  • \$\begingroup\$ This is the easiest way to do it. \$\endgroup\$ – JDSweetBeat May 26 '15 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\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.