如何更改LibGdx的CheckBox图像的大小？

Question

I'm using the skin from libgdx tests: uiskin.json.

For some reason the checkbox is displayed much smaller as fe in badlogic/gdx/tests/MipMapTest.java What does the size of the Checkbox depend on? the camera's resolution? Or is there a way to set it manually?

Helper.RESOLUTION_WIDTH = 800 and

Helper.RESOLUTION_HEIGHT = 1280

@Override
public void show() {

    skin = new Skin(Gdx.files.internal("skins/uiskin.json"));
    cam = new OrthographicCamera(Helper.RESOLUTION_WIDTH, Helper.RESOLUTION_HEIGHT);
    cam.position.set(Helper.RESOLUTION_WIDTH / 2, Helper.RESOLUTION_HEIGHT / 2, 0); 
    stage = new Stage(Helper.RESOLUTION_WIDTH, Helper.RESOLUTION_HEIGHT, true);
    stage.setCamera(cam);

    CheckBox checkBox1 = new CheckBox("", skin);
    checkBox1.addListener(new ChangeListener() {

        @Override
        public void changed(ChangeEvent event, Actor actor) {
            game.setScreen(new WinScreen2a(game));
        }
    });
    CheckBox checkBox2 = new CheckBox("", skin);
    checkBox2.addListener(new ChangeListener() {

        @Override
        public void changed(ChangeEvent event, Actor actor) {
            game.setScreen(new WinScreen2b(game));
        }
    });

    Window window = new Window("Dialog", skin);
    window.debug();
    window.setPosition(Helper.RESOLUTION_WIDTH/2 - 375, 10);
    window.setSize(750, 350);

    table.add(checkBox1).left();
    table.getCells().get(0).size(200, 100);
    table.add(option1).width(500).height(100).pad(10f);
    table.row();

    table.add(checkBox2).left();
    table.getCells().get(2).size(200, 100);
    table.add(option2).width(500).height(100).pad(10f);
    table.row();

    window.add(table).top().left();
    stage.addActor(window);

Answer 1

This changes the checkbox image size, but I noticed that the click detection is not accurate then. Couldn't change that with setting the bounds of the box, but maybe there is still some way yet to be discovered.

CheckBox cb = new CheckBox(" Label text", xxx.getDefaultSkin());
// Changes the checkbox image size
cb.getImageCell().height(50);
cb.getImageCell().width(50);
// Change the text size accordingly
cb.getLabel().setFontScale(0.6f, 0.6f);

My thoughs though are that it may be nicer to create a custom component for this => Create a class that extends Actor . The class wraps an image button with a label. Then add helper methods to easily modify the component as needed. This way I have had success in creating complex easily reusable components that look neat.

Answer 2

You need to set image scaling type. Default is none.

CheckBox soundCB = new CheckBox("Sound", uiskin);
soundCB.getImage().setScaling(Scaling.fill);
soundCB.getImageCell().size(GameConfig.WIDTH/6);
soundCB.left().pad(PAD);
soundCB.getLabelCell().pad(PAD);
//...
content.add(soundCB).width(GameConfig.WIDTH/1.5f).row(); //add to table