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.

2015-08-15_13.47.30

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

Advertisements

16 thoughts on “Simple In-Game Gui Overlay

  1. Exhileraxe September 26, 2015 / 1:37 AM

    Thanks, this was an easy tutorial to look through and it worked perfectly.

    Liked by 1 person

  2. The Beaver September 26, 2015 / 2:08 AM

    Whenever i try to make the:
    public class RenderGuiHandler
    {
    @SubscribeEvent
    public void onRenderGui(RenderGameOverlayEvent event)
    {

    }
    }
    it says “void is an invalid type for the variable onRenderGui”

    Like

    • Emx2000 January 10, 2016 / 5:42 PM

      It appears you have a name conflict, or a syntax error. Try renaming onRenderGui to something else.

      Like

  3. Barbara February 19, 2016 / 10:55 PM

    thanks for this.
    i have just one problem.
    In Survival Mode my Live Hearts look after that curious : color like the hello world text and special design.

    Like

  4. vFrozzen April 6, 2016 / 2:53 PM

    When I start the client via eclipse and try to load a world my minecraft just crashes?

    Like

    • Emx2000 April 7, 2016 / 4:00 PM

      Show me your crash report via PasteBin or Gist

      Like

      • vFrozzen April 8, 2016 / 6:58 PM

        Where are the crash reports?

        Like

      • Emx2000 April 12, 2016 / 11:57 AM

        Eclipse log window, copy that and give me the PasteBin link

        Like

  5. Ringosham May 26, 2016 / 10:02 PM

    There is something missing in the tutorial that causes the GUI for armor points, health, hunger, experience bar, and boss health glitched out.
    Here is a fix to this:
    1. In the event handler, use “RenderGameOverlayEvent.Post” instead of “RenderGameOverlayEvent”. This would fix the health and experience bar.

    2. Add the following lines to the event:

    if (event.type != ElementType.EXPERIENCE)
    return;

    This would fix the remaining parts of the GUI.

    3. Use drawStringWithShadow instead of the others.

    Like

    • Emx2000 June 5, 2016 / 2:32 PM

      Edited! Thanks for the assistance.

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s