LIBGDX/BOX2D: Re-sizing Touchpad is not working when the Table.setBounds is called

Question

public class PlayScreen implements Screen {



private final float PPM = 100f;

private final float GAME_WORLD_WIDTH = 1920;
private final float GAME_WORLD_HEIGHT = 1080;

private OrthographicCamera cam;
private Viewport viewport;
private Stage uiControls;
private TextureAtlas uiAtlas;
private Skin uiSkin;
private Table uiTable;

private Touchpad leftTouchPad;

private World world;
private Box2DDebugRenderer renderer;
private Body ship;

private SpriteBatch batch;

@Override
public void show() {

    batch = new SpriteBatch();
    world = new World(new Vector2(0,0), true);
    renderer = new Box2DDebugRenderer();

    //////////////////////////////////////////////////////////////////////////////
    //*************************SET UP CAMERA/VIEWPORT***************************//
    //////////////////////////////////////////////////////////////////////////////

    float aspectRatio = (float)Gdx.graphics.getHeight() / (float)Gdx.graphics.getWidth();

    cam = new OrthographicCamera(GAME_WORLD_WIDTH / PPM ,GAME_WORLD_HEIGHT / PPM);
    cam.position.set(0,0,0);

    viewport = new ExtendViewport( (GAME_WORLD_WIDTH * aspectRatio) / PPM, (GAME_WORLD_HEIGHT)/PPM, cam);
    viewport.apply();

    ////////////////////////////////////////////////////////////////////
    // ****************** SET UP STAGE AND ADD UI ******************* //
    ////////////////////////////////////////////////////////////////////

    uiControls = new Stage(viewport);
    uiAtlas = new TextureAtlas(Gdx.files.internal("ui/playScreen/playUI.pack"));
    uiSkin = new Skin(uiAtlas);
    uiTable = new Table(uiSkin);
    uiTable.setBounds(-(GAME_WORLD_WIDTH / PPM) / 2, -(GAME_WORLD_HEIGHT / PPM) / 2, GAME_WORLD_WIDTH / PPM, GAME_WORLD_HEIGHT / PPM);


    ////////////////////////////////
    // ** UI CONTROLS AND VIEW ** //
    ////////////////////////////////

    //*** CONTROL PAD ***//
    TouchpadStyle positionControlStyle = new TouchpadStyle();
    positionControlStyle.knob = uiSkin.getDrawable("knob");
    positionControlStyle.background = uiSkin.getDrawable("background");

    leftTouchPad = new Touchpad(1, positionControlStyle);

    ////////////////////////
    // ** ADD TO STAGE ** //
    ////////////////////////

    uiTable.top();
    uiTable.add(leftTouchPad);

    uiControls.addActor(uiTable);


    ///////////////////////////////////////////////////////////////////
    // ************************* SET UP WORLD ********************** //
    ///////////////////////////////////////////////////////////////////

    BodyDef testDef = new BodyDef();
    testDef.type = BodyDef.BodyType.DynamicBody;
    testDef.linearDamping = 2f;
    testDef.position.set(0, 0);

    PolygonShape shape = new PolygonShape();
    shape.setAsBox(1,1);

    FixtureDef def = new FixtureDef();
    def.shape = shape;

    ship = world.createBody(testDef);
    ship.createFixture(def);

    ///////////////////////////////////////////////////////
    // **************** SET UP SPRITES ***************** //
    ///////////////////////////////////////////////////////



    Gdx.input.setInputProcessor(uiControls);

}

@Override
public void render(float delta) {
    Gdx.gl20.glClearColor(0, 0, 0, 1);
    Gdx.gl20.glClear(GL20.GL_COLOR_BUFFER_BIT);

    ship.applyForceToCenter(5 * leftTouchPad.getKnobPercentX(), 5 * leftTouchPad.getKnobPercentY(), true);
    cam.update();

    world.step(1 / 30f, 8, 3);
    renderer.render(world, cam.combined);

    batch.begin();
    batch.end();

    uiTable.act(delta);
    uiTable.debug();
    uiControls.draw();

}

@Override
public void resize(int width, int height) {
    viewport.update(width,height);
    cam.position.set(0, 0, 0);
    uiControls.getViewport().update(width,height,false);
}

@Override
public void pause() {

}

@Override
public void resume() {

}

@Override
public void hide() {

}

@Override
public void dispose() {

}

}

So, here is what's happening. I added the touchpad to the table, but it seems to be way off of where it's supposed to be, and much larger than normal. The debug drawing indicates that the stage and table are definitely in the correct position.

I've tried to call touchpad.setBouds(), and touchpad.setSize(), but neither of them worked.

Is the stage perhaps the issue?

score 0 · Answer 1 · answered Dec 18 '15 at 12:47

When you put any Actor into a Table, calling setBounds or setSize on it will no longer work because the Table is now managing the bounds of the Actor and will keep overwriting your direct changes to the Actor's bounds. You instead can control its size through the Table Cell that it is in.

When you call table.add(), a Cell is returned, and that is where you can adjust the cell size and how the Actor in the cell should be handled within the cell. For example:

uiTable.add(leftTouchPad).width(300).height(300).fill();

will make the cell 300 x 300, and the fill call tells it to scale the Actor in it to the same dimensions as the cell.

Also, you should not be calling uiTable.act but instead call uiControls.act.

Actually, I figured out the issue. You have to set the minimum height and width of the background and knob textures. If you don't, they will not resize when you call width() and height() on the table itself. uiSkin.getDrawable("knob").setMinHeight(1); — Adam Reed, Dec 31 '15 at 01:27

LIBGDX/BOX2D: Re-sizing Touchpad is not working when the Table.setBounds is called

1 Answers1