LibGdx - 缩放精灵、相机和视口
LibGdx - Scaling Sprites, Camera and Viewports
见鬼,感谢阅读,
我最近开始研究一个 2D Android/Desktop 项目,但在尝试以我想要的方式显示我的精灵时遇到了困难。
我有一个 144(w) x 160(h) 的背景精灵,我希望能够将其他精灵定位到屏幕上相对于背景精灵上的点。
我想我明白,如果我创建一个 144 x 160 的 camera/viewport,我将能够使用基于 144 x 160 背景的坐标将我的精灵定位在背景精灵上精灵。这将适用于移动设备上的不同屏幕分辨率,但会拉伸背景精灵,尽管尝试了不同的视口类型(FillViewport、FitViewport 等)。
我想要实现的是让我的背景精灵在不同的屏幕分辨率下保持它的比例,并能够将其他精灵放在背景精灵上。精灵的放置需要在不同的分辨率下工作。
如果我的解释令人困惑或没有意义,我们深表歉意。我会添加一些图像来帮助解释,但我的声誉将任何添加到 post。但是我认为 TLTR 问题是 "What is the correct way to display sprites on multiple screen resolutions while keeping a correct ratios and scaling to the screen size and position of sprite in a way that works across multiple resolutions?"
谢谢,欢迎提问
FitViewport 会执行您描述的操作(保持纵横比),但在某些设备上会出现黑条。根据您在 libgdx 论坛上 post 编写的代码,我发现您忘记在调整大小方法中更新视口,因此它的行为与设计不符。
但是,对于像您描述的静态相机游戏,我认为最好的解决方案是围绕某个区域规划您的游戏,该区域在任何设备上始终可见,例如,来自 (0,0 ) 至 (144,160)。然后使用宽度和高度分别为 144 和 160 的 ExtendViewport。在 resize
中更新视口后,您可以像这样移动相机以在矩形上居中:
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 之外绘制 extra 背景使用您喜欢的任何方法进行区域。
在您的情况下,144:160 的纵向纵横比比现有的任何屏幕都宽,因此您无需担心会填充游戏矩形两侧的区域。任何 phone 或平板电脑的最窄宽高比似乎是 9:16,因此您可以计算一下应该在游戏矩形上方和下方绘制多少额外背景,以避免在任何屏幕上显示黑色设备。
在这种情况下,它在您要填充的矩形上方和下方计算出 48 个单位:
- 144 像素宽在 9:16 将是 256 高。
- (256 - 160) / 2 = 48
编辑:我从 libgdx 论坛上的 post 了解到,您希望游戏区域停留在屏幕顶部,其余区域用于游戏控制。在那种情况下,我会像这样更改调整大小的方法,因为您希望游戏区域的顶部边缘与屏幕的顶部边缘对齐。您还可以计算控件区域底部在 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)
。请记住,有些 phone 的纵横比小至 3:4(虽然现在很少见)。因此,对于 0.9 的宽高比,在 3:4 phone 上只有屏幕底部的 17% 可用于控件。如果只有几个按钮,这可能没问题,但如果你有一个虚拟操纵杆,可能会有问题。
见鬼,感谢阅读,
我最近开始研究一个 2D Android/Desktop 项目,但在尝试以我想要的方式显示我的精灵时遇到了困难。
我有一个 144(w) x 160(h) 的背景精灵,我希望能够将其他精灵定位到屏幕上相对于背景精灵上的点。
我想我明白,如果我创建一个 144 x 160 的 camera/viewport,我将能够使用基于 144 x 160 背景的坐标将我的精灵定位在背景精灵上精灵。这将适用于移动设备上的不同屏幕分辨率,但会拉伸背景精灵,尽管尝试了不同的视口类型(FillViewport、FitViewport 等)。
我想要实现的是让我的背景精灵在不同的屏幕分辨率下保持它的比例,并能够将其他精灵放在背景精灵上。精灵的放置需要在不同的分辨率下工作。
如果我的解释令人困惑或没有意义,我们深表歉意。我会添加一些图像来帮助解释,但我的声誉将任何添加到 post。但是我认为 TLTR 问题是 "What is the correct way to display sprites on multiple screen resolutions while keeping a correct ratios and scaling to the screen size and position of sprite in a way that works across multiple resolutions?"
谢谢,欢迎提问
FitViewport 会执行您描述的操作(保持纵横比),但在某些设备上会出现黑条。根据您在 libgdx 论坛上 post 编写的代码,我发现您忘记在调整大小方法中更新视口,因此它的行为与设计不符。
但是,对于像您描述的静态相机游戏,我认为最好的解决方案是围绕某个区域规划您的游戏,该区域在任何设备上始终可见,例如,来自 (0,0 ) 至 (144,160)。然后使用宽度和高度分别为 144 和 160 的 ExtendViewport。在 resize
中更新视口后,您可以像这样移动相机以在矩形上居中:
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 之外绘制 extra 背景使用您喜欢的任何方法进行区域。
在您的情况下,144:160 的纵向纵横比比现有的任何屏幕都宽,因此您无需担心会填充游戏矩形两侧的区域。任何 phone 或平板电脑的最窄宽高比似乎是 9:16,因此您可以计算一下应该在游戏矩形上方和下方绘制多少额外背景,以避免在任何屏幕上显示黑色设备。
在这种情况下,它在您要填充的矩形上方和下方计算出 48 个单位:
- 144 像素宽在 9:16 将是 256 高。
- (256 - 160) / 2 = 48
编辑:我从 libgdx 论坛上的 post 了解到,您希望游戏区域停留在屏幕顶部,其余区域用于游戏控制。在那种情况下,我会像这样更改调整大小的方法,因为您希望游戏区域的顶部边缘与屏幕的顶部边缘对齐。您还可以计算控件区域底部在 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)
。请记住,有些 phone 的纵横比小至 3:4(虽然现在很少见)。因此,对于 0.9 的宽高比,在 3:4 phone 上只有屏幕底部的 17% 可用于控件。如果只有几个按钮,这可能没问题,但如果你有一个虚拟操纵杆,可能会有问题。