Libgdx: place 2 actors one on another

Question

I use libgdx's scene2d built-in UI library to make an UI in my game. I'm interesting how can I draw 2 images(or actors) in a table one on another? I'm looking to the similar like LayerDrawable in Android. Is there any exists stuff to make it?

Answer 1

There is a Stack widget in libGDX UI library for these purposes.

UPDATE: if you want to place one widget on top of another widget and these widgets have different size then you should wrap the smaller widget. Something like:

//First add actual content
stack.add(content);

//Second add wrapped overlay object
Table overlay = new Table();
overlay.add(overlayWidget).expand().fillX().bottom().left();
stack.add(overlay);

stack variable is a Stack instance

It's an actual excerpt from my project. You should tune it for your case.

Answer 2

You can use somethings like this :

    //create stage
    stage = new Stage(new StretchViewport(game.width, game.height));

    //create table
    Table table = new Table();
    table.setSize(game.width,game.height); //fullscreen

    //add Image 1
    table.add(new Image(game.skin.getDrawable("image1")));
    //add Image 2 (create new col)
    table.add(new Image(game.skin.getDrawable("image2"))).width(xx).height(xx);

    //add new row
    table.row();

    //add Image 3 - padding to draw over image1/2 && colspan
    table.add(new Image(game.skin.getDrawable("image3"))).width(xx).height(xx).padTop(-50f).colspan(2);

    //add table to stage
    stage.addActor(table);

    /*
     * Add action
     *
     */

    @Override
    public void render(float delta) {
        ...
        //don't forget to draw ur stage
        stage.act(delta); // or stage.act(Gdx.graphics.getDeltaTime())
        stage.draw();
    }

Also you can add action to stage/table or image etc ... :

   stage.addAction(Actions.sequence(
                           Actions.fadeOut(0.0001f),
                           Actions.fadeIn(0.5f),
                           Actions.delay(0.1f), 
                           Actions.run(new Runnable() {
                               @Override
                               public void run() {
                                   //mmmm new screen 
                                   dispose();
                                   game.setScreen(new BoobsScreen(game));
                               }
                           })));

Of course you can draw more than image : button, textbutton, label etc or add scrollPane for Table but before take a look at Skin on libgdx For exemple a programmatically ninepatch textbutton :

   private NinePatch processNinePatchFile(String fname) {
        final Texture t = new Texture(Gdx.files.internal(fname));
        final int width = t.getWidth() - 2;
        final int height = t.getHeight() - 2;
        return new NinePatch(new TextureRegion(t, 1, 1, width, height), 3, 3, 3, 3);
    }

    //create skin
    skin = new Skin();
    ...
    //create font
    ...
    //create ninepatch button from android/assets/style/button
    NinePatch ninepatch = processNinePatchFile("style/button.9.png");
    skin.add("button.9", ninepatch);

    //create textbuttonstyle
    TextButton.TextButtonStyle textButtonStyle = new TextButton.TextButtonStyle();
    textButtonStyle.font = skin.getFont("font_black_38");
    textButtonStyle.fontColor = Color.DARK_GRAY;
    textButtonStyle.up = skin.getDrawable("button.9");
    skin.add("buttonTextStyle", textButtonStyle);


    //now you can create textbutton
    TextButton btn = new TextButton("Hello", game.skin.get("buttonTextStyle", TextButton.TextButtonStyle.class));

    //add a clicklistener
    btn.addListener(new ClickListener(){
        @Override
        public void clicked(InputEvent event, float x, float y) {
            //mmmmmm add action for exemple
            stage.addAction(Actions.sequence(Actions.fadeOut(0.5f), Actions.run(new Runnable() {
                @Override
                public void run() {
                    //dispose and load screen
                    dispose();
                    game.setScreen(new MoreBoobsScreen(game));
                }
            })));
        }
    });
    table.add(btn);

To create bitmapfont take a look at Gdx freetype, it's really easy to use.