LibGDX - What is the best way to handle menu touch input?

Newbie & Debugging Questions
#1

Hi there,

I’m stuck at the moment. I’m trying to figure out the best method of handling touch input on menu systems with multiple buttons. Any ideas?
Also, for the sake of sanity, how can I make something happen only if touched, rather than the whole screen being touched?

Thanks!

  • A
#2

You can query input state like such: [icode]Gdx.input.isTouched();[/icode] etc, but I recommend against that.
Use InputProcessor instead: https://github.com/libgdx/libgdx/wiki/Event-handling

Even better would be to have your gui components be Scene2D.ui Actors, in which case you can do this:

actor.addListener(new ChangeListener() {
    public void changed (ChangeEvent event, Actor actor) {
        System.out.println("Changed!");
    }
});

As shown here: https://github.com/libgdx/libgdx/wiki/Scene2d.ui#changeevents

If you aren’t leveraging Scene2D, you’re using libGDX wrong IMO.

#3

How would I use the Scene2D system for, lets say, a menu? In particular, a sprite of a button. When the user touches the sprite specifically, it moves on the y axis down, then back up after the button has been released. (Also, a few moments after release, it moves on to next screen.)

Thanks!

#4

Well if you wanted to use scene2d you would probably want to use something like ImageButton (assuming you want a sprite to be your button), add it to a stage, and then move the button on the y axis in the listener like BurntPizza posted. You’d also have to do Gdx.input.setInputProcessor(stage) after.

#5

In LibGDX you are best off using the Scene2D UI framework for building your menus. It’s a great framework and if you hack something yourself it will in most cases be inferior to the Scene2D way of doing things.

As mentioned earlier, there’s some simple examples in the LibGDX docs:

The idea here is that you put e.g. a Button actor on the screen, and then attach a listener to it that is triggered when the button is clicked:

button.addListener(new ChangeListener() {
    public void changed (ChangeEvent event, Actor actor) {
        System.out.println("woohoo, button click!");
    }
});

This tutorial goes into making a simple menu, which seems ok:
http://www.toxsickproductions.com/libgdx/libgdx-basics-create-a-simple-menu/

#6

Okay, thank you all for the nice information. :slight_smile:

I’ve been reading the libGDX docs and examples and have a small question. Can someone please explain what exactly a skin does. I am wanting to setup an ImageButton, I suppose, because I want a texture as the button.

What would be required for this & how would it be setup?

#7

The “skin” defines how your GUI will look. It’s basically a set of images and one or more fonts and a JSON (text) file that defined what image and what font is used to render the different GUI elements.

Setting up a skin may look somewhat overcomplicated, but as soon as you move beyond simple things like a menu with a few buttons, it starts to become a real timesaver.

Here’s a tutorial / info on Skins: https://github.com/libgdx/libgdx/wiki/Skin

You can get started quickly by using an existing skin instead of making your own. For example, you can use the skin used by the LibGDX samples. You can find here how to do that: http://stackoverflow.com/questions/16182844/default-skin-libgdx.

Good luck!

Edit: so basically you have to do the following:

  1. Setup skin files (images, fonts, skin JSON) and load it in your game
  2. Create an ImageButton with your texture and the skin you loaded
  3. Done
#8

Okay, so I’ve spent some time getting to know ImageButtons, tables, skins, TextureAtlas, packing, all that fun stuff… I’m in need of some question answering again. :wink:

Using this:

	btnPlay.addListener(new ChangeListener() {
	    public void changed (ChangeEvent event, Actor actor) {
	    	play = true;
	    }
	});

How can I detect when pressed and when released after being pressed? Also, how can I update it so that a table or button in a table moves down a few pixels when pressed, then back up when released?

#9 

import static com.badlogic.gdx.scenes.scene2d.actions.Actions.moveBy;

btnPlay.addListener(new ChangeListener() {
    public void changed (ChangeEvent event, Actor actor) {
        if (btnPlay.isPressed()) {
            // button has been pressed code here
            // e.g.
            table.addAction(moveBy(0, -10, .25f)); // move 10 pixels in a quarter second
        } else {
            // button released code here
            table.addAction(moveBy(0, 10, .25f));
        }
    }
});

Note this probably makes more sense with something like a toggle button.

#10

Hmm, it worked… however it makes it really weird. It’s funky.

Basically, when I click it, it moves it down but it flickers. Then releasing it will send it back to normal… however whenever I press it again it moves further down than before. Like it doubles or something…

#11

Might use moveTo instead of moveBy then, and specify an absolute position, instead of a relative one.

#12

Odd… even then it doesn’t move until I’ve pressed it and released it. I’m looking for a “isHeld” type of thing.

#13

Check each frame? [icode]btnPlay.isPressed()[/icode]

#14

It outputs false if not clicked, if pressed (and even held) it outputs true. Which is good… but it seems this method of moving the table is causing a bit of problems. Any other methods of moving things? Can you, by any chance, move something in a table? Like the button, rather than the table?

#15

btn.addAction()

#16

Yea, it’s not working for me.

The table.addAction(moveTo(x, x) works… it just doesn’t move until after I let go. :frowning: