Rendering in the Hud 1.20.4

Learn how to use the HudRenderCallback event to render to the hud.

WARNING

This page is written for version 1.20.4. Documentation for older versions may be incomplete.

We already briefly touched on rendering things to the hud in the Basic Rendering Concepts page and Drawing to the GUI, so on this page we'll stick to the HudRenderCallback event and the deltaTick parameter.

HudRenderCallback

The HudRenderCallback event - provided by Fabric API - is called every frame, and is used to render things to the HUD.

To register to this event, you can simply call HudRenderCallback.EVENT.register and pass in a lambda that takes a GuiGraphics and a float (deltaTick) as parameters.

The GUI graphics can be used to access the various rendering utilities provided by the game, and access the raw matrix stack. You should check out the Drawing to the GUI page to learn more about them.

DeltaTick

The deltaTick parameter is the time since the last frame, in seconds. This can be used to make animations and other time-based effects.

For example, let's say you want to lerp a color over time. You can use the deltaTick parameter to do this:

HudRenderCallback.EVENT.register((context, tickDelta) -> {
	int color = 0xFFFF0000; // Red
	int targetColor = 0xFF00FF00; // Green

	// Total tick delta is stored in a field, so we can use it later.
	totalTickDelta += tickDelta;

	// "lerp" simply means "linear interpolation", which is a fancy way of saying "blend".
	float lerpedAmount = Mth.abs(Mth.sin(totalTickDelta / 50F));
	int lerpedColor = FastColor.ARGB32.lerp(lerpedAmount, color, targetColor);

	// Draw a square with the lerped color.
	// x1, x2, y1, y2, z, color
	context.fill(0, 0, 100, 100, 0, lerpedColor);
});