libGDX scene2d小部件的精确位置

Question

我想在我的libGDX应用程序中布置一个可按下的钢琴键，如下所示：

按下某个键时，我需要将其从上到下更改（使用图像按钮很容易）。

我正在努力解决的问题是如何布置所有按钮，使其成为类似钢琴键盘的东西。白色钢琴键图像是矩形的，但需要在其上放置黑色钢琴键。下面显示我的白色钢琴键图像是什么样的，在顶角有死角，我打算放一个黑色音符。

使用Table将不起作用，因为表格并排排列所有内容，这会让我留下空白。我已经看到你可以使用Stack，但这只是将每个孩子直接放在最后一个上面，所以这似乎也无济于事。

如果有帮助，我的代码是这样的：

Skin skin;
Stage stage;
SpriteBatch batch;
private TextButton button1;
private TextButton button2;

@Override
public void create () {
    batch = new SpriteBatch();
    stage = new Stage();
    Gdx.input.setInputProcessor(stage);

    createSkin();

    Table table = new Table();
    table.setFillParent(true);
    stage.addActor(table);

    // Create a button with the "default" TextButtonStyle. A 3rd parameter can be used to specify a name other than "default".
    button1 = new TextButton("First note", skin);
    button1.getLabel().setFontScale(5);

    button2 = new TextButton("Second note", skin);
    button2.getLabel().setFontScale(5);

    table.add(button1).width(500).height(500);
    table.add(button2).width(500).height(200);
}

@Override
public void render () {
    super.render();
    Gdx.gl.glClearColor(0.2f, 0.2f, 0.2f, 1);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
    stage.act(Gdx.graphics.getDeltaTime());
    stage.draw();
}

@Override
public void resize (int width, int height) {
    stage.getViewport().update(width, height, true);
}

@Override
public void dispose () {
    stage.dispose();
    skin.dispose();
}

private void createSkin() {
    skin = new Skin();

    Pixmap pixmap = new Pixmap(1, 1, Pixmap.Format.RGBA8888);
    pixmap.setColor(Color.WHITE);
    pixmap.fill();
    skin.add("white", new Texture(pixmap));

    skin.add("default", new BitmapFont());

    TextButton.TextButtonStyle textButtonStyle = new TextButton.TextButtonStyle();
    textButtonStyle.up = skin.newDrawable("white", Color.DARK_GRAY);
    textButtonStyle.down = skin.newDrawable("white", Color.BLUE);
    textButtonStyle.checked = skin.newDrawable("white", Color.DARK_GRAY);
    textButtonStyle.over = skin.newDrawable("white", Color.DARK_GRAY);
    textButtonStyle.font = skin.getFont("default");
    skin.add("default", textButtonStyle);
}

其中呈现：

据我所知，使用表格无法重叠事物，但我无法找到另一种方法。使用scene2d可以做到这一点吗？

Answer 1

最简单的解决方案似乎是创建具有相同视口的第二个阶段（阶段需要在调整大小时以相同的方式运行）并将其放在当前视图上。你需要创建相同的表，但只用黑色笔记填充它（当前阶段当然只包含白色）。

请注意，您需要使用InputMultiplexer从两个阶段获取事件 - 您可以read here了解如何使用它。

Answer 2

直接将表示键的所有按钮添加到舞台，而不将它们放在表格中。手动设置他们的位置。由于钢琴键具有清晰的图案，因此手动操作非常容易。添加白键后添加黑键。然后你不必担心白键是非矩形的，因为黑键会被优先接收输入。