java - LibGDX:皮肤+自定义坐标绘制不正确

Question

我正在使用 libgdx 制作一个简单的游戏，我想使用 scene2Dui 以及舞台和皮肤来简化我的大量定位/大小调整代码。

为了进一步简化所有内容的定位，我还想定义一个自定义坐标系，以便无论屏幕大小(以像素为单位)如何，代码都将自动创建一个网格叠加层并正确定位/调整其上的所有元素。

我遇到的问题与这个新坐标系以及它如何与皮肤一起工作有关。基本上，我根据皮肤中的样式创建一个按钮，并将其放在一个表格中，根据我的坐标调整大小。我还创建了一个图像，但这次直接加载区域并自行定位。

调试行显示按钮本身工作正常并且在点击方面表现符合预期；如果我在 table 外面点击，尽管图像被放大了，但没有任何反应。调整窗口大小也符合预期。

在某个地方，舞台必须询问皮肤按钮的图片有多大，并且它以像素为单位回答它应该在我的坐标中回答的地方。有没有办法将皮肤缩小到我的坐标，并在调整窗口大小时更新它？

相关代码如下:

// *** Layout Coordinates ***//
// Use the pixels per unit to define a grid and orient
// all the elements of the screen based on that grid.
private static final float CAMERA_WIDTH = 5f; // how many boxes wide the screen is
private static final float CAMERA_HEIGHT = 8f; // how many boxes high the screen is

// Button in the table, all in my coordinate system
private static final float BUTTON_HEIGHT = 1.0f;
private static final float BUTTON_WIDTH = 3.0f;
private static final float TABLE_PADDING_LEFT = 1.0f;
private static final float TABLE_PADDING_TOP = 1.0f;

// Floating image, all in my coordinate system
private static final float IMAGE_HEIGHT = 4.0f;
private static final float IMAGE_WIDTH = 3.0f;
private static final float IMAGE_ORIGIN_X = 1.0f;
private static final float IMAGE_ORIGIN_Y = 1.0f;

private TextButton myButton;

private Image myImage;

private final Stage myStage;
private final Skin mySkin;

private int width;
private int height;

public LayoutTestScreen() {
    width = Gdx.graphics.getWidth();
    height = Gdx.graphics.getHeight();
    Gdx.app.log("SIZE_DEBUG", "Constructing to "+ width + "x" + height);
    myStage = new Stage(width, height, true, game.getSpriteBatch());
    mySkin = new Skin(Gdx.files.internal("uiskin.json"));
}

@Override
public void resize(int width, int height) {
    Gdx.app.log("SIZE_DEBUG", "Resizing to "+ width + "x" + height);
    this.width = width;
    this.height = height;
    myStage.setViewport(CAMERA_WIDTH, CAMERA_HEIGHT, false, 0, 0, this.width, this.height);
    scaleSkinToMatchScreen();
}

@Override
public void show() {
    super.show();

    scaleSkinToMatchScreen();
    buildButtonTable();
    buildImage();

    Gdx.input.setInputProcessor(myStage);
}

public void scaleSkinToMatchScreen(){
    //TODO: Use CAMERA_HEIGHT / this.height and CAMERA_WIDTH / this.width to scale
    //the skin's images down (or up!) to match our coordinate system.
}

private void buildButtonTable() {
    // Adds a table of action buttons in the top-left corner of the screen
    Table buttonTable = new Table(mySkin);

    //Set cell defaults and position the table
    buttonTable.defaults().width(BUTTON_WIDTH);
    buttonTable.defaults().height(BUTTON_HEIGHT);
    buttonTable.top().left();
    buttonTable.padLeft(TABLE_PADDING_LEFT).padTop(TABLE_PADDING_TOP);

    //Add a TextButton to the table
    myButton = new TextButton("button", mySkin);
    myButton.setColor(Color.RED);
    myButton.addListener(new ChangeListener() {
        @Override
        public void changed(ChangeEvent event, Actor actor) {
            Gdx.app.log("BUTTON","Button pressed!");
        }
    });
    buttonTable.add(myButton);
    buttonTable.row();

    //Add the table to the stage
    buttonTable.setFillParent(true);
    buttonTable.debug();
    myStage.addActor(buttonTable);
}

private void buildImage(){
    // Create a new image, size and position it, and then put it in the stage.
    myImage = new Image();
    myImage.setX(IMAGE_ORIGIN_X);
    myImage.setY(IMAGE_ORIGIN_Y);
    myImage.setWidth(IMAGE_WIDTH);
    myImage.setHeight(IMAGE_HEIGHT);
    myImage.setDrawable(new TextureRegionDrawable(new TextureAtlas("images/cards/CardImages.pack").findRegion("b1fv")));
    myStage.addActor(myImage);
}

@Override
public void render(float delta) {
    super.render(delta);    
    myStage.draw();
    myStage.act(delta);
    Table.drawDebug(myStage);
}

And here's what it looks like

我要在 scaleSkinToMatchScreen() 中放入什么来将所有皮肤的图片缩放到我的坐标？

Answer 1

是的，这个按钮使用了一个 ninepatch。您可以通过在JSON中专门定义样式(包括字体)并引用纹理图集的打包文件来设置它。 scene2d ui 库在最好的时候是挑剔的，所以需要一些尝试才能让事情正常工作。我还建议使用热代码交换来正确定位和完成此类操作。这比每次更改都重新启动应用程序要快得多。

热代码交换(假设您使用的是 eclipse，不能代表其他 IDE):

1. 在 Debug模式下运行您的程序。
2. 在 IDE 代码编辑器中进行更改
3. 保存您的更改
4. 更改已换入并且应该显示在您的应用程序中。

您还可以使用此工具:

https://github.com/cobolfoo/gdx-skineditor

就其开发而言，它还处于早期阶段，但一旦您解决了错误和怪异问题，它确实可以很好地工作。

不用说，您的 libGDX 应该更新到最新版本。它是开源的，但有时会出现错误。