Libgdx：在另一个演员上放置2个演员

Question

我使用libgdx的scene2d内置UI库来创建游戏中的用户界面。我很感兴趣如何在表格中绘制两个图像(或演员)互相叠加？我想要类似于Android中的LayerDrawable的效果。是否有任何现成的工具可以实现这个效果？

- andrei_zaitcev

Answer 1

libGDX UI库中有一个名为Stack的部件可用于这些目的。

更新: 如果您想将一个部件放在另一个部件之上，并且这些部件具有不同的大小，则应该包装较小的部件。类似这样:

//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变量是一个堆栈实例。

这是我项目中的一个实际摘录。您应该根据您的情况进行调整。

- Alexander Mironov

---

谢谢您的回答！我找到了这个小部件，但它似乎只是将两个演员叠在一起，没有任何改变子元素大小的可能性。正如我注意到的那样，它会将所有子元素调整为其中一个子元素的最大尺寸。让我解释一下我想做什么。我有两张图片。一个是正方形，另一个是圆形。正方形约为80x80像素，圆形约为20x20像素。我想在正方形的右上角绘制。如何在Stack小部件中放置演员？ - andrei_zaitcev

我不知道在堆栈中使用不同大小部件的包装器是如何工作的！+1 :)供参考，您可以使用Container <T>而不是Table作为包装器 - Xavier Guzman

Answer 2

你可以像这样使用某些东西：

    //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();
    }

同时，您还可以为舞台/表格或图像等添加动作...：

   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));
                               }
                           })));

当然你可以绘制更多的东西，比如按钮、文本按钮、标签等等，或者为表格添加滚动窗格，但在此之前先看一下libgdx上的皮肤。 例如，一个通过编程方式创建的九宫格文本按钮：

   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);

创建位图字体可以看看Gdx freetype，它非常容易使用。

- Adandev