You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

LibGDX中如何使用屏幕坐标而非世界坐标进行渲染?

在LibGDX中实现固定屏幕位置的UI渲染,不受相机移动影响

核心思路:分离场景与UI的渲染上下文

LibGDX默认的相机是服务于世界场景的,要让UI固定在屏幕上,关键是用两套独立的渲染逻辑:一套处理世界场景(用你原来的相机),另一套专门负责UI(基于屏幕坐标系)。

方法一:使用Stage(最推荐)

Stage是LibGDX官方为UI设计的组件,天生适配屏幕坐标系,完全不受世界相机的影响:

  • 创建Stage时指定ScreenViewport,它会自动适配屏幕尺寸,坐标原点在屏幕左下角,x范围0到屏幕宽度,y范围0到屏幕高度:
Stage uiStage = new Stage(new ScreenViewport());
  • 将你的自定义UI类作为Actor添加到Stage里,直接用屏幕坐标设置位置:
YourCustomUI uiElement = new YourCustomUI();
uiElement.setPosition(50, 50); // 屏幕左下角向右50px、向上50px的位置
uiStage.addActor(uiElement);
  • 渲染时先处理世界场景,再单独渲染Stage,注意渲染前要调用act()处理UI的逻辑更新:
@Override
public void render(float delta) {
    // 渲染世界场景
    Gdx.gl.glClearColor(0, 0, 0, 1);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
    
    worldCamera.update();
    batch.setProjectionMatrix(worldCamera.combined);
    batch.begin();
    // 绘制世界中的物体
    batch.end();

    // 渲染UI
    uiStage.act(delta);
    uiStage.draw();
}
  • 窗口大小变化时,更新Stage的Viewport以保持UI适配:
@Override
public void resize(int width, int height) {
    uiStage.getViewport().update(width, height, true);
}

方法二:手动用正交相机渲染UI

如果不想依赖Stage,也可以自己创建一个仅针对屏幕的正交相机:

  • 创建UI相机,用setToOrtho(false)让坐标系和屏幕一致(原点在左下角,y轴向上):
OrthographicCamera uiCamera = new OrthographicCamera();
uiCamera.setToOrtho(false, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
  • 渲染UI时,切换Batch的投影矩阵为UI相机的矩阵,直接用屏幕坐标绘制:
@Override
public void render(float delta) {
    // 先渲染世界场景...

    // 渲染UI
    batch.setProjectionMatrix(uiCamera.combined);
    batch.begin();
    // 比如在屏幕右上角绘制UI:
    yourCustomUI.draw(batch, Gdx.graphics.getWidth() - 100, Gdx.graphics.getHeight() - 50);
    batch.end();
}
  • 窗口大小变化时更新相机参数:
@Override
public void resize(int width, int height) {
    uiCamera.setToOrtho(false, width, height);
}

为什么你之前的方案不是最优解

用cam.position.x - n这种方式,本质是把UI强行绑定到世界相机的位置,不仅计算繁琐,还会因为相机的缩放、旋转(如果有这类操作)导致UI变形或位置偏移;要是相机有平滑移动等复杂逻辑,UI还会出现位置滞后的问题,远不如用独立的UI渲染上下文稳定可靠。

内容的提问来源于stack exchange,提问作者eisa.exe

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.25 09:06:37