Question

我是尝试制作游戏的libgdx框架的新手，但是这里的问题是我不知道如何缩放ImageButton来适应不同的屏幕尺寸，在台式机上看起来很大，而在android设备上看起来很小。我正在使用几个大小不同的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，我们必须创建一个Camera。我们创建一个OrthographicCamera。借助此相机，我们可以定义视口的虚拟宽度和高度，以使可见的宽度和高度得以实现。

Camera camera = new OrthographicCamera(100,100);

现在重要的是，您应该考虑我们定义的虚拟尺寸而不是像素。因此，我们的尺寸为100 x 100单位。

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

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

最后使用视口创建舞台：

Stage stage = new Stage(viewport);

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

因此，如果我们这样添加按钮：

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

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

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

这可能会使虚拟大小有些混乱。如果您将了解更多有关此内容的信息，那么这里的描述会更好：How Camera works in Libgdx and together with Viewport

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

我们必须使用resize方法更新视口：

@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，并且一行中的每个actor的大小都相同。而不是每个演员都在写：table.add(button1).size(10,10);
Table具有一项特殊功能，如果您为row（）设置了某些内容，这将适用于该行中的所有Actor。

所以不要写这个：

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

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

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

2 个答案: