libGDX: UI using ImageButton in a table layout

Hi,

Does anyone have a link to a turorial or some code (so i can learn by example) of how to use Libgdx’s ImageButton.
Code snippet of some of your own creation would be great!

I’m trying to create a settings screen for my game using a table layout where i want some buttons (images) that i can click and on Click i want the image and some variables to change.

I found some tutorials & code on how to use tables/actors & textButtons, but cant find anything on ImageButtons and for a noob like me it’s all just horribly complex to figure out how everything works by just looking at the LibGDX documentation:http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/scenes/scene2d/ui/Image.html

Previously there was a post about it on JGO:
http://www.java-gaming.org/index.php?topic=30390.0

but it doesnt help me much in really figuring out how to use & implement ImageButton exactly within a table layout

Whomever it may concern:

I found a way to do it & created a first version of a settingsScreen with clickable buttons that interact with each other.
I used some “creative” coding though. It’s probably not an optimal way to code it, but it workable.
Instead of ImageButton I used ButtonStyle which also has a way to switch between the two images in my textureAtlas (star & star_uit).

Here is a link to my code:
http://www.java-gaming.org/?action=pastebin&id=1072
If you have any ideas how i could do things better, please share!

This is what it looks like:

e58TxCRPkBE

Uhhh…ImageButtonStyle? :stuck_out_tongue:
Anyways I think you could improve the way you’re displaying stars, why not this:


ImageButton[] stars = new ImageButton[5];
for(int i = 0; i < stars.length; i++){
     stars[i] = new ImageButton(); //use skin, imagebuttonstyle or whatever
     stars[i].addListener(new ClickListener() {
         @Override
         public boolean touchDown(InputEvent event, float x, float y, int a,
               int b) {
            for(int j = 0; j < i; j++){
                 stars[j].setChecked(true);
            }
            for(int k = stars.length - i; k < stars.length; j++){
                 stars[k].setChecked(false);
            }

            return true;

         }
      });
}

or something of the sort (note this code is untested but the concept is there)

hehe, duhh yeah. That’s indeed a way to improve the code. Tnx :slight_smile:

Hey @Norakomi have you figured it out yet? If not, what’s the problem? That thread I started which you’ve linked to is pretty old, but if I recall properly, I followed the advice I received there and used a Button rather than an ImageButton. I created skins programmatically by adding the textures I wanted, then created the Button, using the skin in the constructors as required.

And yes I agree with you, it was a horrible nightmare figuring out how to use scene2d in Libgdx, and now I create my own UI classes.

Anyways, after you’ve created a Button, you can add it to the table and use the chain methods to position it. I never used TextureAtlases, just changed the Button texture directly by giving it another texture when needed, e.g. in onClick actions.

BTW: I just noticed all the “star” buttons in your code. You could use a for loop to manage all that if you want, not relevant but I cleaned up something similar in my project just before writing this.

@Rayexar: No haven’t found out how should get ImageButton working, but ran into ButtonStyle (havent gotten a chance to look at imageButtonStyle yet) which got me where I wanted to. And yes I will definitely clean up my code and use a for loop