java - LibGdx - 缩放 Sprite 、相机和视口(viewport)

Question

见鬼，感谢您的阅读，

我最近开始从事 2D Android/桌面项目，并且一直试图以我想要的方式显示我的 Sprite 。

我有一个 144(w) x 160(h) 的背景 Sprite ，我希望能够将其他 Sprite 相对于背景 Sprite 上的点定位到屏幕上。

我想我明白，如果我创建一个 144 x 160 的相机/视口(viewport)，我将能够使用基于 144 x 160 背景 Sprite 的坐标将我的 Sprite 定位在背景 Sprite 上。这将适用于移动设备上的不同屏幕分辨率，但尽管尝试了不同的视口(viewport)类型(FillViewport、FitViewport 等)，但仍会拉伸(stretch)背景 Sprite 。

我想要实现的是让我的背景 Sprite 在不同的屏幕分辨率下保持其比例，并且能够将其他 Sprite 放置在背景 Sprite 上。 Sprite 的放置需要在不同的分辨率下工作。

如果我的解释令人困惑或没有意义，我深表歉意。我会添加一些图像来帮助解释，但我认为可以在帖子中添加任何图像。不过，我认为 TLTR 问题是“在多种屏幕分辨率上显示 Sprite ，同时保持正确的比例并以跨多种分辨率工作的方式缩放到屏幕大小和 Sprite 位置的正确方法是什么？”

谢谢，欢迎提问

Answer 1

FitViewport 会执行您所描述的操作(保持纵横比)，但在某些设备上会出现黑条。根据您在 libgdx 论坛上发布的代码，我发现您忘记在调整大小方法中更新视口(viewport)，因此它的行为不符合设计。

但是，对于像您所描述的静态相机游戏，我认为最好的解决方案是围绕在任何设备上始终可见的某个区域来规划您的游戏，例如从 (0,0) 到(144,160)。然后使用宽度和高度分别为 144 和 160 的 ExtendViewport。在 resize 中更新视口(viewport)后，您可以将相机移动到矩形的中心，如下所示:

private static final float GAME_WIDTH = 144;
private static final float GAME_HEIGHT = 160;

public void create(){
    //...
    viewport = new ExtendViewport(GAME_WIDTH, GAME_HEIGHT);
    //...
}

public void resize(int width, int height){
    viewport.update(width, height, false); //centering by putting true here would put (0,0) at bottom left of screen, but then the game rectangle would be off center

    //manually center the center of your game box
    Camera camera = viewport.getCamera();
    camera.position.x = GAME_WIDTH /2;
    camera.position.y = GAME_HEIGHT/2;
    camera.update();
}

现在，您的 144x160 框位于屏幕中央，就像使用 FitViewport 一样，但您不会被锁定为黑条，因为您可以使用任何方法在 144x160 区域之外绘制额外背景喜欢。

就您的情况而言，144:160 是比任何屏幕更宽的纵向长宽比，因此您无需担心填充游戏矩形两侧的区域。任何手机或平板电脑的最窄长宽比似乎都是 9:16，因此您可以计算一下游戏矩形上方和下方应绘制多少额外背景，以避免在任何设备上显示黑色。

在本例中，计算结果为您要填充的矩形上方和下方 48 个单位:

• 9:16 时宽 144 像素，高 256 像素。
• (256 - 160)/2 = 48

<小时/>

编辑:我从您在 libgdx 论坛上的帖子中看到，您希望游戏区域停留在屏幕顶部，而其余区域用于游戏控制。在这种情况下，我会像这样更改调整大小方法，因为您希望游戏区域的顶部边缘与屏幕的顶部边缘对齐。您还可以计算控件区域底部在 Y 轴上的位置。 (顶部位于 Y=0。)

public void resize(int width, int height){
    viewport.update(width, height, false); 

    //align game box's top edge to top of screen
    Camera camera = viewport.getCamera();
    camera.position.x = GAME_WIDTH /2;
    camera.position.y = GAME_HEIGHT - viewport.getWorldHeight()/2;
    camera.update();

    controlsBottomY = GAME_HEIGHT - viewport.getWorldHeight();
}

我不确定您打算如何进行控件，但它们需要适合 (0,controlsBottomY) 到 (GAME_WIDTH, 0) 的框。请记住，有些手机的纵横比小至 3:4(尽管现在很少见)。因此，对于 0.9 的纵横比，在 3:4 的手机上，只有屏幕底部 17% 的区域可用于控制。如果只有几个按钮，这可能没问题，但如果您有虚拟操纵杆，则可能会出现问题。