LibGDX技术问题：如何通过Camera与Viewport绘制纹理

问题描述 #

作为LibGDX新手，尝试用Camera和Viewport在屏幕右上角绘制图像，设置了50x50世界单位的OrthographicCamera和StretchViewport，但运行后仅显示红屏，无法看到图像。基础项目未使用Camera时图像会显示在左下角，希望调整代码让图像显示在右上角。

原代码 #

package com.mygdx.game;

import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.utils.ScreenUtils;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.utils.viewport.StretchViewport;

public class MyGdxGame extends ApplicationAdapter {
    SpriteBatch batch;
    Texture img;
    OrthographicCamera camera;
    StretchViewport viewport;
    
    @Override
    public void create () {
        batch = new SpriteBatch();
        img = new Texture("badlogic.jpg");
        camera = new OrthographicCamera(50, 50);
        viewport = new StretchViewport(camera.viewportWidth, camera.viewportHeight, camera);
    }

    @Override
    public void render () {
        ScreenUtils.clear(1, 0, 0, 1);
        viewport.apply();
        batch.setProjectionMatrix(camera.combined);

        batch.begin();
        batch.draw(img, 0, 0);
        batch.end();
    }
    
    @Override
    public void dispose () {
        batch.dispose();
        img.dispose();
    }
}

问题原因及修改方案 #

1. 核心问题点 #

• 相机初始化后未调用camera.update()，无法生成正确的投影矩阵，导致坐标映射失效。
• 默认相机位置在世界坐标(0,0)，视口中心对应屏幕中心，而默认badlogic.jpg尺寸远大于50x50世界单位，图像超出视口范围无法显示。

2. 修改后的代码 #

package com.mygdx.game;

import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.utils.ScreenUtils;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.utils.viewport.StretchViewport;

public class MyGdxGame extends ApplicationAdapter {
    SpriteBatch batch;
    Texture img;
    OrthographicCamera camera;
    StretchViewport viewport;
    // 定义图像在世界单位中的显示大小
    private final float IMAGE_SIZE = 10;
    
    @Override
    public void create () {
        batch = new SpriteBatch();
        img = new Texture("badlogic.jpg");
        camera = new OrthographicCamera(50, 50);
        // 将相机位置设为视口中心，让世界坐标(0,0)对应屏幕左下角，和基础项目逻辑一致
        camera.position.set(camera.viewportWidth / 2, camera.viewportHeight / 2, 0);
        // 更新相机投影矩阵，确保坐标映射正确
        camera.update();
        viewport = new StretchViewport(camera.viewportWidth, camera.viewportHeight, camera);
    }

    @Override
    public void render () {
        ScreenUtils.clear(1, 0, 0, 1);
        viewport.apply();
        batch.setProjectionMatrix(camera.combined);

        batch.begin();
        // 计算右上角绘制位置：视口宽度减去图像宽度，视口高度减去图像高度
        float x = camera.viewportWidth - IMAGE_SIZE;
        float y = camera.viewportHeight - IMAGE_SIZE;
        // 以世界单位指定图像位置和大小，避免超出视口
        batch.draw(img, x, y, IMAGE_SIZE, IMAGE_SIZE);
        batch.end();
    }
    
    @Override
    public void dispose () {
        batch.dispose();
        img.dispose();
    }
}

关键修改说明 #

• camera.position.set(...)：对齐相机与视口中心，让世界坐标逻辑和基础项目一致，(0,0)对应屏幕左下角，(50,50)对应右上角。
• camera.update()：生成正确的投影矩阵，确保SpriteBatch能正确将世界坐标转换为屏幕坐标。
• 调整绘制坐标和尺寸：通过50 - 10计算出右上角的起始位置，同时固定图像的世界单位大小，避免因图像像素尺寸过大超出视口。

内容的提问来源于stack exchange，提问作者Copha