扩展libgdx UI的移动版? [英] Scale libgdx UI for mobile?

问题描述

目前应用程序的 desktop 版本很好，按钮的缩放比例非常好，但是当我部署到 android 时，它们很小而且几乎无法使用.

At the moment desktop version of application is fine, the buttons are scaled quite nice but when I deploy to android they're tiny and barely usable.

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);
    }
}

桌面..

android ..

android ..

推荐答案

默认情况下， Stage 会将 ScalingViewport 设置为 Scaling.stretch 虚拟视口大小为 Gdx.graphics.getWidth() x Gdx.graphics.getHeight (请参见

By default Stage will have a ScalingViewport set to Scaling.stretch with a virtual viewport size of Gdx.graphics.getWidth() x Gdx.graphics.getHeight (see here).

在桌面上，您将以800x480的大小开始，因为这就是您告诉启动器的内容.在Android上，这是动态的，并取决于设备.在您的设备上，可能是1920x1080.

On Desktop you will start with a size of 800x480, because that's what you told your launcher. On Android, this is dynamic and depends on the device. On your device it might be 1920x1080.

由于您没有更改按钮的大小，因此在两个设备上它们的大小均相同，按像素计算 .由于屏幕密度完全不同，因此在Android上，按钮似乎要小得多.

Since you do not change your button sizes, they will have the same size on both devices in terms of pixels. because of the totally different screen density though, on Android the buttons will appear to be much smaller.

使两者达到同一级别的最简单解决方案是使用具有固定虚拟大小的 Viewport .例如，新的FitViewport(800，480).您可以通过 new Stage(viewport)将该视口提供给舞台.

The easiest solution to get both to the same level would be to use a Viewport with a fixed virtual size. For example a new FitViewport(800, 480). You can supply that viewport to the stage via new Stage(viewport).

但是，对于UI而言，根据屏幕尺寸缩放以保持纵横比和虚拟分辨率通常不是一个好主意.最好改用 ScreenViewport 并设置角色的相对大小.例如，您可以使用 Value.percentWidth(0.5f，rootTable)将小部件的宽度设置为占整个屏幕的根表的50％(通过setFillParent(true)).

However, scaling up or down depending on the screens size to keep the aspect ratio and the virtual resolution is usually not a good idea for UIs. It might be better to use a ScreenViewport instead and set your actors' sizes relative to each other. You can use Value.percentWidth(0.5f, rootTable) for example, to set the width of a widget to 50% of the root table, that takes the whole screen (via setFillParent(true)).

这篇关于扩展libgdx UI的移动版?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！