LibGDX: Skin + Custom Coordinates Draw Incorrectly

Question

I'm using libgdx to make a simple game and I want to use scene2Dui and a stage and skin to simplify a lot of my positioning/sizing code.

To further simplify the positioning of everything, I also want to define a custom coordinate system so that regardless of the screen size in pixels, the code will automatically create a grid overlay and position/size all of my elements on it correctly.

The problem I'm having relates to this new coordinate system and how it works with the skin. Basically, I create a button based off the style in the skin and put it in a table to be sized according to my coordinates. I also create an image but this time load the region directly and position it myself.

The debug lines show that the button itself works fine and it behaves as expected regarding clicks; if I click outside the table, there is no reaction despite the fact that the image is blown up. Resizing the window also behaves as expected.

Somewhere, the stage must be asking the skin how big the button's picture is and it's answering in pixels where it should be answering in my coordinates. Is there a way to scale the skin down to my coordinates, and update it when a window is resized?

Here's the relevant code:

// *** 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

What do I put in scaleSkinToMatchScreen() to scale all the skin's pictures to my coordinates?

LibGDX: Skin + Custom Coordinates Draw Incorrectly

Answers (1)

Related Questions