像胫骨一样的 Libgdx 侧边栏

Question

我是 LibGDX 的新手，我正在尝试制作一个简单的 RPG 游戏。 我已经实现了一个基本的运动和战斗系统。 现在我想添加一个包含库存、角色信息等的侧边栏（就像在 Tibia 中一样）。 然后我也想添加一个底栏。 但是，我不知道如何做到这一点。 我已经读过添加第二阶段可能是一个解决方案，但我不知道如何将它实现到我的代码中。

screen how that supposed to look like

这是我当前使用渲染方法的代码：

public class Game extends ApplicationAdapter {

private final static int TURN_DURATION_IN_MILLIS = 2000;

TiledMap tiledMap;
OrthographicCamera gameCamera;
OrthographicCamera guiCamera;
private Map renderer;

Player player;
Monster rat;

private Map.Drawing playerDrawing;
private Map.Drawing ratDrawing;
private SpriteBatch sb;
BitmapFont font;
BitmapFont font2;
Stage stage;
float guiToCameraRatioX;
float guiToCameraRatioY;

long lastTurn;

@Override
public void create() {

    sb = new SpriteBatch();

    tiledMap = new TmxMapLoader().load("map.tmx");
    renderer = new Map(tiledMap, 1 / TILE_CELL_IN_PX, sb);

    gameCamera = new OrthographicCamera(NUMBER_OF_TILES_HORIZONTALLY, NUMBER_OF_TILES_VERTICALLY);
    gameCamera.update();

    guiCamera = new OrthographicCamera(GAME_WINDOW_WIDTH, GAME_WINDOW_HEIGHT);
    guiCamera.update();

    guiToCameraRatioX = guiCamera.viewportWidth / gameCamera.viewportWidth;
    guiToCameraRatioY = guiCamera.viewportHeight / gameCamera.viewportHeight;

    player = new Player();

    playerDrawing = new Map.Drawing(true, null, player.positionX - 0.5f, player.positionY + 0.5f, player.width, player.height, gameCamera, guiCamera);

    player.initHealthPointsBar();
    renderer.addCreature(player);

    stage = new TiledMapStage(tiledMap, player);
    Gdx.input.setInputProcessor(stage);
    stage.getViewport().setCamera(gameCamera);

    rat = new Monster(MonsterType.RAT);
    ratDrawing = new Map.Drawing(false, null, rat.positionX, rat.positionY, rat.width, rat.height, gameCamera, guiCamera);
    renderer.addDrawing(ratDrawing);
    renderer.addDrawing(playerDrawing);

    rat.initHealthPointsBar();
    renderer.addCreature(rat);

    initFont();

}

private void initFont() {
    FreeTypeFontGenerator generator = new FreeTypeFontGenerator(Gdx.files.internal("martel.ttf"));
    FreeTypeFontGenerator.FreeTypeFontParameter parameter = new FreeTypeFontGenerator.FreeTypeFontParameter();
    parameter.size = 10;
    parameter.color = new Color(0, 0.75f, 0.15f, 1);
    parameter.borderWidth = 1.2f;
    font = generator.generateFont(parameter);
    parameter.size = 12;
    parameter.color = new Color(0.8f, 0.1f, 0.1f, 1);
    font2 = generator.generateFont(parameter);
    generator.dispose();
}

@Override
public void render() {
    Gdx.gl.glClearColor(1, 0, 0, 1);
    Gdx.gl.glBlendFunc(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

    float deltaTime = Gdx.graphics.getDeltaTime();

    player.updateState(deltaTime);
    rat.updateState(deltaTime);

    gameCamera.position.set(player.positionX + 0.5f, player.positionY + 0.5f, 0);
    gameCamera.update();

    renderer.setView(gameCamera);

    renderer.render();

    stage.act();

    playerDrawing.x = player.positionX;
    playerDrawing.y = player.positionY;

    ratDrawing.x = rat.positionX;
    ratDrawing.y = rat.positionY;

    //TODO implement real combat system
    if (System.currentTimeMillis() - lastTurn >= TURN_DURATION_IN_MILLIS) {
        lastTurn = System.currentTimeMillis();
        if (rat.state != Creature.State.DEAD && Math.abs(rat.positionX - player.positionX) < 2 && Math.abs(rat.positionY - player.positionY) < 2) {

            player.givenHit = (int) (Math.random() * rat.attack + 1) * 2 - player.defence / 2;
            player.currentHealthPoints -= player.givenHit;

            rat.givenHit = (int) (Math.random() * player.attack + 1) * 2 - rat.defence / 2;
            rat.currentHealthPoints -= rat.givenHit;

            if (rat.currentHealthPoints <= 0) {
                rat.currentHealthPoints = 0;
                rat.state = Creature.State.DEAD;
                rat.moveDestinationX = -1;
                rat.moveDestinationY = -1;
            }
        } else {
            player.givenHit = 0;
            rat.givenHit = 0;
        }
    }

    // used solution below https://stackoverflow.com/questions/20595558/libgdx-sprite-batch-font-bad-scale-rendering
    player.renderPlayer(font, font2, playerDrawing, sb, guiCamera.position.x - (gameCamera.position.x - player.positionX) * guiToCameraRatioX, guiCamera.position.y - (gameCamera.position.y - player.positionY) * guiToCameraRatioY, player.givenHit, System.currentTimeMillis() - lastTurn);
    rat.renderMonster(font, font2, ratDrawing, sb, guiCamera.position.x - (gameCamera.position.x - rat.positionX) * guiToCameraRatioX, guiCamera.position.y - (gameCamera.position.y - rat.positionY) * guiToCameraRatioY, rat.givenHit, System.currentTimeMillis() - lastTurn);
}

@Override
public void dispose() { // SpriteBatches and Textures must always be disposed
    sb.dispose();
}

感谢您的帮助:)

Answer 1

您的Game 类中已经有一个guiCamera。这个可用于绘制侧边栏（或其他任何不随地图其余部分移动的内容）。
如果此相机已被使用（例如，用于菜单），您可以创建一个新相机，以便在需要时进行更改（无需更改菜单或其他任何用途）。

基本上你只需要为你设置相机的投影矩阵SpriteBatch（最好使用新的SpriteBatch）并开始绘图。

解决方案可能如下所示：

private SpriteBatch sb2; // better use a different sprite batch here (and initialize it in your create method, just like the other one)

// ...

@Override
public void render() {
  // ... other rendering stuff ...

  // set the projection matrix
  sb2.setProjectionMatrix(guiCamera.combined);
  sb2.begin();
  // draw whatever you want on your sidebar to appear
  // all things you draw here will be static on the screen, because the guiCamera doesn't move with the player, but stays in it's position

  // when you are ready drawing, end the SpriteBatch, so everything is actually drawn
}
  sb2.end();