Creating the HUD (1/2)

Until now, the only output I have in my game is the console. If I get crushed, if I'm out of fuel or oxygen, or if I finish the level, I have to check the console. I need a HUD to display informations on the GameScreen.

I want the HUD to display the oxygen and fuel levels, to display a menu if the player wins or loses. I want something like this :

For that I created a HUD class.

Here is the code for the HUD.java creator :

public class HUD {
    
    final MyGdxGame game;
    public Image OxygenBar, FuelBar;
    private float posXOxygen, posYOxygen, width, height, outOfFuelAlpha;
    private Hero hero;
    private Table tableWin, tableLose, tablePause;
    private TextButtonStyle textButtonStyle;
    private TextButton nextButton, replayButton, replayButton2, replayButton3, menuButton, menuButton2, resumeButton;
    private LabelStyle menulabelStyle, hudLabelStyle;
    private Label outOfFuelLabel, loseLabel;
    private Image imageTableBackground;
    public String loseString;
    
    public HUD(final MyGdxGame game, Stage stage, Skin skin, Hero hero){
        this.game = game;
        this.hero = hero;

        outOfFuelAlpha = 0;
        posXOxygen = 9 * Gdx.graphics.getWidth()/100;
        posYOxygen = 95 * Gdx.graphics.getHeight()/100;
        width = Gdx.graphics.getWidth()/3;
        height = Gdx.graphics.getHeight()/70;
        loseString = "You lost !";

        menulabelStyle = new LabelStyle(game.assets.get("fontMenu.ttf", BitmapFont.class), Color.WHITE);
        hudLabelStyle = new LabelStyle(game.assets.get("fontHUD.ttf", BitmapFont.class), Color.WHITE);
        
        outOfFuelLabel = new Label("PRESS ESC TO RESTART", hudLabelStyle);
        outOfFuelLabel.setX(Gdx.graphics.getWidth()/2 - new GlyphLayout(game.assets.get("fontHUD.ttf", BitmapFont.class), outOfFuelLabel.getText()).width/2);
        outOfFuelLabel.setY(Gdx.graphics.getHeight()/2 - new GlyphLayout(game.assets.get("fontHUD.ttf", BitmapFont.class), outOfFuelLabel.getText()).height/2);
        outOfFuelLabel.addAction(Actions.alpha(0));

        loseLabel = new Label(loseString, menulabelStyle);
        
        textButtonStyle = new TextButtonStyle();
        textButtonStyle.up = skin.getDrawable("Button");
        textButtonStyle.down = skin.getDrawable("ButtonChecked");
        textButtonStyle.font = game.assets.get("fontTable.ttf", BitmapFont.class);
        textButtonStyle.fontColor = Color.WHITE;

        //Win table buttons
        nextButton = new TextButton("NEXT", textButtonStyle);    
        replayButton = new TextButton("PLAY AGAIN", textButtonStyle);
        //Lose table buttons
        replayButton2 = new TextButton("PLAY AGAIN", textButtonStyle);
        menuButton = new TextButton("MENU", textButtonStyle);
        //Pause table buttons
        replayButton3 = new TextButton("PLAY AGAIN", textButtonStyle);
        menuButton2 = new TextButton("MENU", textButtonStyle);
        resumeButton = new TextButton("RESUME", textButtonStyle);
        
        tableWin = new Table();
        tableWin.setFillParent(true);
        tableWin.row().colspan(2);
        tableWin.add(new Label("LEVEL CLEARED", menulabelStyle)).padBottom(Gdx.graphics.getHeight()/22);
        tableWin.row().width(Gdx.graphics.getWidth()/4);
        tableWin.add(nextButton).spaceRight(Gdx.graphics.getWidth()/100);
        tableWin.add(replayButton);
        tableWin.addAction(Actions.alpha(0));
        
        tableLose = new Table();
        tableLose.setFillParent(true);
        tableLose.row().colspan(2);
        tableLose.add(loseLabel).padBottom(Gdx.graphics.getHeight()/22);
        tableLose.row().width(Gdx.graphics.getWidth()/4);
        tableLose.add(replayButton2).spaceRight(Gdx.graphics.getWidth()/100);
        tableLose.add(menuButton);
        tableLose.addAction(Actions.alpha(0));
        
        tablePause = new Table();
        tablePause.setFillParent(true);
        tablePause.add(resumeButton).width(replayButton3.getPrefWidth()).pad(Gdx.graphics.getHeight()/50).row();
        tablePause.add(replayButton3).width(replayButton3.getPrefWidth()).pad(Gdx.graphics.getHeight()/50).row();
        tablePause.add(menuButton2).width(replayButton3.getPrefWidth()).pad(Gdx.graphics.getHeight()/50);
        tablePause.addAction(Actions.alpha(0));

        imageTableBackground = new Image(skin.getDrawable("imageTable"));
        imageTableBackground.setColor(0,0,0.25f,1);
        imageTableBackground.setWidth(1.15f*tableWin.getPrefWidth());
        imageTableBackground.setHeight(1.15f*tableWin.getPrefHeight());
        imageTableBackground.addAction(Actions.alpha(0));

        stage.addActor(imageTableBackground);
        stage.addActor(tableWin);
        stage.addActor(tableLose);
        stage.addActor(tablePause);
        stage.addActor(outOfFuelLabel);
    }
}

In the creator :

• I create several Tables, TextButtons and Labels and an Image:
  • A Table is a widget in which we can put widgets and actors. It's very useful to organize things.
  • A Label display a text. Note that to create a Label, you need to define a LabelStyle.
  • An Image is... an image, yeah that's right.
• I create one Table for each event : Win, Lose and Pause
• In each Table I put a Label that tells what's happening, and I put several TextButtons, so the player can chose to play again or go to the main menu screen.
• A Button can be added to only one Table, thus, if I want the pauseTable, and loseTable to have a "Menu" button, I need to create two "Menu" button, one for the pauseTable and one for the loseTable.
• I create an Image "imageTableBackground" that will be used as the Tables background.
• I create a Label to tell to the play to press "ESC" to restart the level when he is out of fuel, as he won't be able to control the hero without fuel. But I want to let the player decide if he wants to wait until the hero is out of oxygen.
• I set the Tables, Labels and Image alpha to 0 so they are invisible at the beginning of the game. Example of the talbeLose : tableLose.addAction(Actions.alpha(0));
• To finish the creator, I add every actors to the Stage. Note that I don't define any Stage in the HUD, because we'll use the GameScreen Stage.