如何在libgdx中使用ViewPorts缩放不同分辨率的ImageButtons？

Question

我是一个尝试制作游戏的libgdx框架的新手，但这里的问题是我不知道如何根据不同的屏幕尺寸缩放ImageButton，它在桌面上看起来很大，但在安卓设备上看起来很小。我使用了几个不同大小的ImageButtons，并使用表格来组织它们。有没有人可以修改一下代码，这样我就可以理解如何使用视窗来缩放图像了？

public class BabyPhone extends Game {

public static final int WIDTH = 480;
public static final int HEIGHT = 800;

public void create () {


    bg = new BabyActor();
    bg.setTexture(new Texture("background-orange.png"));
    bg.setSize(Gdx.graphics.getWidth(),Gdx.graphics.getHeight());


    phone = new BabyActor();
    phone.setTexture(new Texture("blue-phone.png"));
    phone.setSize(Gdx.graphics.getWidth(),Gdx.graphics.getHeight());


    TextureRegion btLeft = new TextureRegion(new Texture("10OFF.png"));
    Drawable drawableLeft = new TextureRegionDrawable(new TextureRegion(btLeft));
    buttonLeft = new ImageButton(drawableLeft);

    TextureRegion btRight = new TextureRegion(new Texture("12OFF.png"));
    Drawable drawableRight = new TextureRegionDrawable(new TextureRegion(btRight));
    buttonRight = new ImageButton(drawableRight);

    TextureRegion btCenter = new TextureRegion(new Texture("11OFF.png"));
    Drawable drawableCenter = new TextureRegionDrawable(new TextureRegion(btCenter));
    buttonCenter = new ImageButton(drawableCenter);

    TextureRegion bt1 = new TextureRegion(new Texture("1OFF.png"));
    Drawable drawable = new TextureRegionDrawable(new TextureRegion(bt1));
    button1 = new ImageButton(drawable);

    TextureRegion bt2 = new TextureRegion(new Texture("2OFF.png"));
    Drawable drawable1 = new TextureRegionDrawable(new TextureRegion(bt2));
    button2 = new ImageButton(drawable1);

    TextureRegion bt3 = new TextureRegion(new Texture("3OFF.png"));
    Drawable drawable2 = new TextureRegionDrawable(new TextureRegion(bt3));
    button3 = new ImageButton(drawable2);

    TextureRegion bt4 = new TextureRegion(new Texture("4OFF.png"));
    Drawable drawable3 = new TextureRegionDrawable(new TextureRegion(bt4));
    button4 = new ImageButton(drawable3);

    TextureRegion bt5 = new TextureRegion(new Texture("5OFF.png"));
    Drawable drawable4 = new TextureRegionDrawable(new TextureRegion(bt5));
    button5 = new ImageButton(drawable4);

    TextureRegion bt6 = new TextureRegion(new Texture("6OFF.png"));
    Drawable drawable5 = new TextureRegionDrawable(new TextureRegion(bt6));
    button6 = new ImageButton(drawable5);

    TextureRegion bt7 = new TextureRegion(new Texture("7OFF.png"));
    Drawable drawable6 = new TextureRegionDrawable(new TextureRegion(bt7));
    button7 = new ImageButton(drawable6);

    TextureRegion bt8 = new TextureRegion(new Texture("8OFF.png"));
    Drawable drawable7 = new TextureRegionDrawable(new TextureRegion(bt8));
    button8 = new ImageButton(drawable7);

    TextureRegion bt9 = new TextureRegion(new Texture("9OFF.png"));
    Drawable drawable8 = new TextureRegionDrawable(new TextureRegion(bt9));
    button9 = new ImageButton(drawable8);


    gamecam = new OrthographicCamera(WIDTH,HEIGHT);
    gamecam.position.set(WIDTH/2,HEIGHT/2,0);
    gamePort = new ScreenViewport(gamecam);
    backStage = new Stage(gamePort);
    fitPort = new FitViewport(gamecam.viewportWidth,gamecam.viewportHeight,gamecam);
    frontStage = new Stage(fitPort);
    backStage.addActor(bg);
    frontStage.addActor(phone);

    Table table = new Table();
    table.padLeft(40);
    table.setPosition(phone.getWidth()/2,phone.getHeight()/2*0.6f);
    table.row().size(95,95);
    table.add(buttonLeft);
    table.add(buttonCenter);
    table.add(buttonRight);
    table.row().size(95,95);
    table.add(button1);
    table.add(button2);
    table.add(button3);
    table.row().size(95,95);
    table.add(button4);
    table.add(button5);
    table.add(button6);
    table.row().size(95,95);
    table.add(button7);
    table.add(button8);
    table.add(button9);

    frontStage.addActor(table);


}
public void render(){

    backStage.act(Gdx.graphics.getDeltaTime());
    frontStage.act(Gdx.graphics.getDeltaTime());
    backStage.draw();
    frontStage.draw();


}

@Override
public void resize(int width, int height) {
    gamePort.update(width, height);
    frontStage.getViewport().update(width, height);

}

​

​

Answer 1

我只是将其设置为设备大小的百分比。它是这样的洛克。

float BUTTON_SIZE = 0.1f;
table.add(button2).size(Gdx.graphics.getWidth()*BUTTON_SIZE,Gdx.graphics.getWidth()*BUTTON_SIZE);

Answer 2

如果要使用视口，则必须选择要使用的视口。

ScreenViewport

ScreenViewport将始终充满整个屏幕，并将您的纹理等拉伸到全屏。

FitViewport

FitViewport不会拉伸你的纹理，它看起来宽度和高度的比例总是一样的。如果屏幕与定义的比例不匹配，此视口将在侧边栏上生成边栏。因此，较短的一侧将与屏幕相匹配。

FillViewport

FillViewport不会拉伸你的纹理，它看起来宽度和高度的比例总是一样的。此视口不会创建像FitViewport那样的侧边栏，因为它会将较长的一侧与屏幕相匹配。因此，可能会发生某些东西被切断的情况。

更多视口：https://github.com/libgdx/libgdx/wiki/Viewports

在我的示例中，我将使用FitViewport。

要使用FitViewport，我们必须创建一个摄像头。我们创建一个OrthographicCamera。有了这个相机，我们可以定义我们的视窗的虚拟宽度和高度，所以我们可以看到的宽度和高度。

Camera camera = new OrthographicCamera(100,100);

现在重要的是，你要考虑我们定义的虚拟大小，而不是像素。所以我们有一个100 x 100单位的尺寸。

现在，让我们使用相机创建FitViewport：

FitViewport viewport = new FitViewport(camera.viewportWidth, camera.viewportHeight, camera);

最后用Viewport创建我们的舞台：

Stage stage = new Stage(viewport);

因此，如果我们现在将我们的按钮添加到表中，我们可以在我们的虚拟大小中定义按钮的大小。

因此，如果我们像这样添加Button：

table.add(button1).size(10,10);

按钮将始终占屏幕的10%，因为在100个单位的世界中，按钮是10个单位大小

现在FitViewport的优点是:我们将按钮定义为10x10，因此比例为1:1，一个正方形。如果我们现在调整屏幕大小或使用不同的屏幕大小，按钮将始终是一个正方形，并且将始终填充100个单位的屏幕中的10个单位。

这可能会与虚拟大小有点混淆。如果你想阅读更多关于它的内容，这里有一个更好的描述：How Camera works in Libgdx and together with Viewport

在视口完美工作之前，我们还必须做一件事。

我们必须在resize方法中更新Viewport：

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

我希望这能帮助你使用视窗。

你已经写过你是LibGdx的新手，所以我会给你一些额外的建议。

这是行不通的：

Gdx.input.setInputProcessor(stage);
Gdx.input.setInputProcessor(stage1);

Gdx.input每次只能保存一个InputProcessor，因此stage1将重写stage。如果要使用多个InputProcessor，请使用InputMultiplexer：https://github.com/libgdx/libgdx/wiki/Event-handling

例如，如果您使用一个表，并且一行中的每个参与者都具有相同的大小。而不是由每个参与者编写：table.add(button1).size(10,10);

Table有一个特殊的特性，如果你在row()中设置了一些东西，它将应用于这一行中的所有参与者。

因此，与其写这样的代码：

table.add(button1).size(10,10);
table.add(button2).size(10,10);
table.add(button3).size(10,10);
table.row();
table.add(button4).size(10,10);
table.add(button5).size(10,10);
table.add(button6).size(10,10);

你可以这样写：

table.row().size(10,10);
table.add(button1);
table.add(button2);
table.add(button3);
table.row().size(10,10);
table.add(button4);
table.add(button5);
table.add(button6);

我希望这些小建议能对你有所帮助。