如何缩小 libgdx 中的纹理以适应较小的屏幕？

Question

我的应用在表格行中提供了两个按钮。每个图像的宽度为 300 像素（来源）。如果我提供大于 600 的初始窗口宽度，该应用程序会显示两个按钮的所有部分。即使将窗口大小调整为更小的尺寸也可以顺利进行。两个按钮都完全显示，并且在调整窗口大小时，如果需要，它们会按比例缩小。一旦我提供了小于 600 像素的初始窗口大小，按钮就会被切断。如何默认在小屏幕上显示整个按钮？

截图：

我的代码如下所示：

public class LevelChooserState extends GameState {

private Stage stage;
private Texture bgTexture;
private Pixmap bgPixmap;
private Viewport viewportStage;
private Container<Table> container;
private Table table;

public LevelChooserState(final GameStateController gsc) {
    super(gsc);

    Gdx.app.log(TAG, "Setup Level Chooser State.");

    // Setup Background Color
    bgPixmap = new Pixmap(1, 1, Pixmap.Format.RGB565);
    bgPixmap.setColor(Color.WHITE);
    bgPixmap.fill();
    bgTexture = new Texture(bgPixmap);
    TextureRegionDrawable textureRegionDrawableBg = new TextureRegionDrawable(new TextureRegion(bgTexture));

    // Setup viewports
    viewportStage = new ExtendViewport(Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
    viewportStage.setScreenBounds(0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());

    // Setup stage
    stage = new Stage(viewportStage);
    Gdx.input.setInputProcessor(stage);

    // Setup font
    int Help_Guides = 12;
    int row_height = Gdx.graphics.getWidth() / 12;

    FreeTypeFontGenerator generator = new FreeTypeFontGenerator(Gdx.files.internal("fonts/PatrickHand-Regular.ttf"));
    FreeTypeFontGenerator.FreeTypeFontParameter parameter = new FreeTypeFontGenerator.FreeTypeFontParameter();
    parameter.size = 30;
    parameter.borderWidth = 1;
    parameter.color = Color.BLACK;
    BitmapFont myFont = generator.generateFont(parameter);
    generator.dispose();

    // Setup background pictures
    TextureAtlas textureAtlas = new TextureAtlas("atlas/onoff.atlas");
    TextureRegion backgroundTR1 = textureAtlas.findRegion("onoff_off");
    TextureRegion backgroundTR2 = textureAtlas.findRegion("onoff_on");

    // Setup TextButtons
    TextureRegionDrawable up1= new TextureRegionDrawable(backgroundTR1);
    TextureRegionDrawable down1= new TextureRegionDrawable(backgroundTR2);
    TextureRegionDrawable checked1= new TextureRegionDrawable(backgroundTR2);
    String text1 = "Deceptive dance in the poultry house.";
    ClickListener clickListner1 = new ClickListener() {
        @Override
        public void clicked(InputEvent event, float x, float y) {
            Gdx.app.log(Constants.TAG, "Button click received.");
            gsc.setState(GameStateController.State.PLAY);
        }
    };
    TextButton textButton1 = createTextButton(myFont, text1, up1, down1, checked1, clickListner1);

    // ... created some more buttons at this point

    // Setup Layout
    container = new Container<Table>();
    container.setBounds(0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
    container.setBackground(textureRegionDrawableBg);
    container.align(Align.bottomLeft);

    table = new Table();
    table.setBounds(0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
    table.setTouchable(Touchable.enabled);
    table.setDebug(true);
    table.debugAll();
    table.setBackground(textureRegionDrawableBg);
    table.setFillParent(true);
    table.align(Align.top);

    // TODO take care of scaling too when setting padding
    float padding = 10;
    table.row();
    table.add(textButton1).expandX().pad(padding);
    table.add(textButton2).expandX().pad(padding);
    table.row();
    table.add(textButton3).expandX().pad(padding);
    table.add(textButton4).expandX().pad(padding);
    table.row();

    container.setActor(table);
    stage.addActor(container);
}

private TextButton createTextButton(BitmapFont font, String text, TextureRegionDrawable up, TextureRegionDrawable down, TextureRegionDrawable checked, ClickListener clickListener) {
    Label.LabelStyle labelStyle = new Label.LabelStyle();
    labelStyle.font = font;

    Label label = new Label(text,labelStyle);
    label.setWrap(true);

    TextButton.TextButtonStyle style = new TextButton.TextButtonStyle();
    style.up =  up;
    style.down = down;
    style.checked = checked;
    style.font = font;

    TextButton button = new TextButton(label.toString(), style);
    //button.setSize(50,100);
    button.setLabel(label);
    button.getLabelCell().pad(20f);
    button.getLabel().setAlignment(Align.topLeft);
    button.setPosition(0,0);
    button.addListener(clickListener);

    return button;
}

@Override
public void update(float delta) {

}

@Override
public void render() {
    Gdx.gl.glClearColor(1f,1f,1f,1f);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
    batch.setProjectionMatrix(camera.combined);
    batch.begin();
    stage.getViewport().apply();
    stage.draw();
    stage.act();
    batch.end();
}

@Override
public void dispose() {
    Gdx.app.log(TAG, "dispose(); Level Chooser");
    stage.dispose();
    bgPixmap.dispose();
    bgTexture.dispose();
}

@Override
public void resize(int w, int h) {
    Gdx.app.log(TAG, "resize() LevelChooserState;");
    stage.getViewport().update(Gdx.graphics.getWidth(), Gdx.graphics.getHeight(), true);
    container.setFillParent(true); // makes sure the container will expand on resize
}
}

Answer 1

LibGDX 使用实像素到屏幕像素的映射。 您正在使用 ExtendViewport 来初始化游戏，该游戏的最小高度和宽度取自 Gdx.graphics.getWidth(), Gdx.graphics.getHeight() 中的实际窗口大小。 这意味着您拥有的“假屏幕”实际上是由窗口大小决定的，您可以根据需要调整其大小。

我建议您从 ExtendViewport 的固定尺寸开始 - 例如，600 宽，400 高 - 稍后您可以根据需要更改它以适应不同的尺寸。

具有固定尺寸的 ExtendViewport 效果非常好，即使在超大屏幕上显示也是如此。

Answer 2

一旦我手动计算并设置所需的按钮，它就可以顺利运行。宽度和高度根据屏幕尺寸计算。

我改变了这个：

table.add(textButton1).expandX().pad(padding);

到这里：

float buttonWidth = Gdx.graphics.getWidth()/2 * 0.9f;
float buttonHeight = buttonWidth * 1.3f;
table.add(textButton1).width(buttonWidth).height(buttonHeight).expandX().pad(padding);