Simple In-Game Gui Overlay

Another tutorial is released, this time it’s about GUIs. In this tutorial I will explain how you can insert a GUI of any kind into the in-game GUI. I will also be including a very simple example on using this tutorial, to prove that this indeed works. I will be adding more ways to customize GUIs next time.

First, you will need to create a forge event handler. Create the following class:

public class RenderGuiHandler
{
    @SubscribeEvent
    public void onRenderGui(RenderGameOverlayEvent.Post event)
    {

    }
}

RenderGameOverlayEvent is fired every client render tick, and Post simply means it executes AFTER the vanilla objects render. This is used to render the experience bar, the hotbar, and so forth. We can make use of the event listener forge provided, to render at the same layer as the GUI objects I mentioned.

Don’t forget to register the event handler! In your main class’ FMLPostInitializationEvent method, add this line:

MinecraftForge.EVENT_BUS.register(new RenderGuiHandler());

That’s done, now we have a hook that we can tap into with a GUI class, to make it render with the in-game overlay.

Now, let’s create a simple GUI class.

public class GuiExample extends Gui
{

}

Let’s add a constructor that we will use to render the GUI. Add this to your GUI class:

public GuiExample(Minecraft mc)
{

}

We need the Minecraft parameter, because we will use this to invoke the fontRenderer object as well as the screen size, which in this tutorial will be used to make a simple text GUI.

Note that, Minecraft’s GUI pixels is proportionate to the GUI size (Minecraft settings) and is different to actual Minecraft screen width and height (screen resolution), so we need to scale things around to make the text truly centered. You’ll understand in a moment.

Add these to the constructor you just made:

ScaledResolution scaled = new ScaledResolution(mc, mc.displayWidth, mc.displayHeight);
int width = scaled.getScaledWidth();
int height = scaled.getScaledHeight();

That’ll get the exact width and height of the screen. Also, notice we’re using the Minecraft parameter.

Now that’s done, so let’s actually get some text displayed.

drawCenteredString(mc.fontRenderer, text, width / 2, (height / 2) - 4, Integer.parseInt("FFAA00", 16));

The first argument is the fontRenderer object, the second is the displayed text which does not exist at the moment, the fourth and fifth argument is the width and height, and the last argument is the text colour.

The width and height I used will display the text perfectly centered on screen. The “- 4” in the height argument is used because a full text height is 8 pixels high, so we need to subtract it by half of that to make the text centered vertically, since the text’s vertical position anchor is on the top edge instead of in the perfect center.

The colour argument only accepts integer values of hexadecimal colour codes, so I am using “Integer.parseInt(string, value)” to convert the specified string (a hexadecimal colour code) to hexadecimal (16 values). “FFAA00” is the hexadecimal colour code for §6 (gold colour). More can be viewed in Minecraft’s official wiki.

Our GUI class should look like this now:

public class GuiNotif extends Gui
{
    String text = "Hello world!";

    public GuiNotif(Minecraft mc)
    {
        ScaledResolution scaled = new ScaledResolution(mc, mc.displayWidth, mc.displayHeight);
        int width = scaled.getScaledWidth();
        int height = scaled.getScaledHeight();

        drawCenteredString(mc.fontRenderer, text, width / 2, (height / 2) - 4, Integer.parseInt("FFAA00", 16));
    }
}

You can write the text directly on the drawCenteredString method, or you can do it like I did, in a variable.

Now, we need to run this class via the event hook we made earlier. Add this line to the onRenderGui method:

if (event.type != ElementType.EXPERIENCE) return;
new GuiNotif(Minecraft.getMinecraft());

That if-check is used so that our GUI is only drawn when the game draws the experience bar. We’ll need this to not screw up other parts of the GUI.

And we’re done! When you run Minecraft, you should have your text in the exact center on the screen when in-game.

Stay tuned for how to add more stuff to this gui!