如何为移动设备缩放libgdx UI？

Question

目前应用的桌面版本不错，按钮缩放得很好，但是当我在安卓上部署时，它们变得非常小，几乎无法使用。

DesktopLauncher..

public class DesktopLauncher {
    public static void main (String[] arg) {
        LwjglApplicationConfiguration config = new LwjglApplicationConfiguration();
        config.title = "Color Catchin";
        config.width = 800;
        config.height = 480;
        new LwjglApplication(new ColorCatch(), config);
    }
}

AndroidLauncher ..

public class AndroidLauncher extends AndroidApplication {
    @Override
    protected void onCreate (Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        AndroidApplicationConfiguration config = new AndroidApplicationConfiguration();
        config.useAccelerometer = false;
        config.useCompass = false;
        initialize(new ColorCatch(), config);
    }
}

核心 代码 ...

public class MainMenu implements Screen {

    Skin skin = new Skin(Gdx.files.internal("ui/uiskin.json"));
    Stage stage = new Stage();

    final private ColorCatch game;

    public MainMenu(final ColorCatch gam) {

        game = gam;

        Gdx.input.setInputProcessor(stage);

        Table table = new Table();
        table.setFillParent(true);
        stage.addActor(table);

        final TextButton play = new TextButton("Play", skin);
        final TextButton quit = new TextButton("Quit", skin);
        table.add(play).pad(10);
        table.row();
        table.add(quit).pad(10);

        play.addListener(new ChangeListener() {
            public void changed(ChangeEvent event, Actor actor) {
                game.setScreen(new GameScreen(game));
                dispose();
            }
        });
    }

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

        stage.act(delta);
        stage.draw();
    }

    @Override
    public void resize(int width, int height) {
        stage.getViewport().update(width, height, true);
    }
}

桌面版 ..

安卓版 ..

- bobbyrne01

Answer 1

默认情况下，Stage 将具有 ScalingViewport，虚拟视口大小为 Gdx.graphics.getWidth() x Gdx.graphics.getHeight，缩放比例为 Scaling.stretch（见此处）。

在桌面上，您将从大小为 800x480 的界面开始，因为这是您告诉启动器的尺寸。在 Android 上，这是动态的，取决于设备。在您的设备上，它可能是 1920x1080。

由于您没有更改按钮的大小，它们在两个设备上都将具有相同的像素大小。但是由于完全不同的屏幕密度，Android 上的按钮看起来会小得多。

使两个设备的 UI 界面看起来一致的最简单解决方案是使用具有固定虚拟大小的 Viewport。例如，使用 new FitViewport(800, 480) 来创建一个 viewport。然后，您可以通过 new Stage(viewport) 将该 viewport 提供给 stage。

然而，根据屏幕大小放大或缩小以保持宽高比和虚拟分辨率通常不是 UI 界面的好主意。更好的方法可能是使用 ScreenViewport，并将演员的大小相对设置。例如，您可以使用 Value.percentWidth(0.5f, rootTable) 将小部件的宽度设置为根表格的 50％（通过 setFillParent(true) ，该表格占据整个屏幕）。

- noone