Wednesday, September 25, 2013

LibGDX Tutorial 10: Button and Stage 2D

To use Buttons, you have to use Scene 2D UI.

I have two buttons, only different shades in a folder (say ImageButton)

Like Tutorial 9, I create 9-Patch images of the two buttons, and put them in the same folder:

After running Texture Packer(see Texture Packer Tutorial), and putting the resulting files in same folder these are the new contents
The file buttons.pack is a text file (which can be opened by any text software)
From the split fields, we can see that they are recognized as 9-patch,  and we note the names that we will call in program.

Now we can setup by the projects:

MyButtonStage2D.java

package com.tutorials.mybuttonstage2d;

import com.badlogic.gdx.ApplicationListener;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL10;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.g2d.BitmapFont;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.g2d.TextureAtlas;
import com.badlogic.gdx.scenes.scene2d.InputEvent;
import com.badlogic.gdx.scenes.scene2d.InputListener;
import com.badlogic.gdx.scenes.scene2d.Stage;
import com.badlogic.gdx.scenes.scene2d.ui.Skin;
import com.badlogic.gdx.scenes.scene2d.ui.TextButton;
import com.badlogic.gdx.scenes.scene2d.ui.TextButton.TextButtonStyle;

public class MyButtonStage2D implements ApplicationListener {
    private OrthographicCamera camera;
    private SpriteBatch batch;
    private Stage stage; //** stage holds the Button **//
    private BitmapFont font; //** same as that used in Tut 7 **//
    private TextureAtlas buttonsAtlas; //** image of buttons **//
    private Skin buttonSkin; //** images are used as skins of the button **//
    private TextButton button; //** the button - the only actor in program **//
   
    @Override
    public void create() {       
        camera = new OrthographicCamera();
        camera.setToOrtho(false, 800, 480); //** w/h ratio = 1.66 **//
       
        batch = new SpriteBatch();
       
        buttonsAtlas = new TextureAtlas("buttons.pack"); //** button atlas image **//
        buttonSkin = new Skin();
        buttonSkin.addRegions(buttonsAtlas); //** skins for on and off **//
        font = new BitmapFont(Gdx.files.internal("CustomFont.fnt"),false); //** font **//
       
        stage = new Stage(800, 480, true);        //** 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("PRESS ME", style); //** Button text and style **//
        button.setPosition(100, 100); //** Button location **//
        button.setHeight(300); //** Button Height **//
        button.setWidth(600); //** Button Width **//
        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. **//
                    return true;
            }
           
            public void touchUp (InputEvent event, float x, float y, int pointer, int button) {
                    Gdx.app.log("my app", "Released");
            }
        });
       
        stage.addActor(button);
    }

    @Override
    public void dispose() {
        batch.dispose();
        buttonSkin.dispose();
        buttonsAtlas.dispose();
        font.dispose();
        stage.dispose();
}

    @Override
    public void render() {       
        Gdx.gl.glClearColor(1, 1, 1, 1);
        Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
       
        stage.act();
       
        batch.setProjectionMatrix(camera.combined);
        batch.begin();
        stage.draw();
        batch.end();
    }

    @Override
    public void resize(int width, int height) {
    }

    @Override
    public void pause() {
    }

    @Override
    public void resume() {
    }
}


This is the output when button is pressed



And this the output when the button is released.


This also is the initial state.

6 comments:

  1. Thanks for the helpful tutorials! You saved me a ton of time and stress. For some reason my button's text is white and only appears where the button's image is transparent. I can't figure out how to make the button text colored and appear in front of an opaque button.

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. com.badlogic.gdx.utils.GdxRuntimeException: File not found: buttons.pack (Internal)

    Where to place the buttons.pack?

    ReplyDelete
  4. Hotel and Casino - Casinos, hotels and resorts in Las Vegas
    See what your friends are saying about Hotel 제천 출장샵 and Casino. By creating an account you are able to 성남 출장마사지 follow 경상북도 출장샵 friends and experts you trust and see the places 문경 출장샵 they are 서귀포 출장마사지

    ReplyDelete