Making Responsive UI in Godot

Making the Screen Align With the Player

To fix the player movement, you’ll add a Camera node with a camera follow script to prevent the player from moving out of the screen.

First, create a Camera2D node as a child of the root MainScene node. The Camera2D node will focus the viewport on the area around the camera’s position.

Next, attach the Camera Follow script, camera_follow.gd, to the Camera2D node. Select the Camera2D node and find its Script property.

Then, click the Quick Load button, choose the camera_follow.gd script, and click Open. This script will center the player on the screen and match the camera’s position to the player’s.

After setting this up, run the game to see the changes.

You’ll find that the camera now follows the player and prevents them from moving out of the visible area.

But, you may notice that the Heads-Up Display (HUD) isn’t correctly positioned. The level and experience panels are not centered. You’ll fix this problem next.

Using CanvasLayer to Build the Heads-Up Display

To ensure the camera doesn’t affect the UI, use a CanvasLayer node to contain the UI elements, like the HUD.

Now, you’ll fix the issue with the CanvasLayer node.

First, select the MainScene node and create a CanvasLayer node as its child.

After adding the CanvasLayer, drag the HUD node under it in the scene hierarchy.

Build and run your project to see the changes.

I recommend using the CanvasLayer node to hold UI elements when you create the UI.

You’ve learned a straightforward approach to creating a responsive UI. This approach is great for prototyping and Game Jam. It’s also cost-effective.

Understanding Stretch Setting

Before diving into the second approach, you must know more about the stretch settings.

The stretch settings control how to stretch view content to fit different screens.

There are four settings in the stretch section.

• Mode: Controls how the content stretches to fit the screen.
• Aspect: Controls how the content’s aspect ratio is maintained and how to extend the game content.
• Scale: Provides extra scale to the content.
• Scale Mode: Controls whether the scale factor is an integer.

Exploring the Stretch Mode Setting

The Stretch Mode setting controls if the content is stretched on a resolution change.

Stretch Mode = Disabled

The content isn’t scaled to the final screen resolution when this mode is off.

Here’s a demonstration:

This option is typically used during the development of tools or applications.

Stretch Mode = CanvasItem (2D) or Viewport:

These two modes scale the content based on the design and final screen resolutions.

The Viewport mode scales everything, including 3D nodes. The CanvasItem mode only scales the 2D nodes.

Here’s a demonstration:

Exploring the Stretch Aspect Setting

When the stretch mode is CanvasItem or Viewport, you can use the Stretch Aspect setting.

The Stretch Aspect setting controls the final aspect ratio and scaling when the resolution changes.

Here’s a breakdown of each option:

Ignore: This option disregards the aspect ratio when the resolution changes. The content will scale to fill the screen entirely and will be distorted. For this reason, this option isn’t recommended.

Keep: This setting keeps the content’s aspect ratio when the resolution changes. The content is centered on the screen, and the other area is black.

Keep Width: The UI maintains its width while its height is stretched to fill the screen.

Keep Height: The UI maintains its height while its width is stretched to fit the screen.

Expand: The UI scales and stretches to fill the screen completely.

When using the Keep Width, Keep Height, and Expand modes, the aspect ratio and size of the UI elements will change. Therefore, when using this mode, you must set the Anchor of them to adapt to the new aspect ratio.

Understanding Anchors

When building a responsive UI, the Anchor setting is important.
It tells the UI node how to resize or position when its parent size is changed.

You can set this using the Anchor Preset property in the Control node’s inspector.

There are two major kinds of anchors:

• Position anchors: Tell the UI nodes how to align with their parents.
• Fill anchors: Tell the UI nodes how to fill against their parents.

Position Anchors

There are nine position anchors. They’re based on combining the parent node’s Top, Bottom, Left, Right, and Center. When using this kind of anchor, the UI node isn’t scaled.

Here’s a demonstration of the position anchors:

Fill Anchors

There are seven fill anchors. They’re based on filling the parent node’s Top, Bottom, Left, Right, and Center together. When using this kind of anchor, the UI node is scaled.

Here are demonstrations of the fill anchors:

Top Wide, Bottom Wide, Left Wide, and Right Wide:

V Center Wide, H Center Wide, and Full Rect:

Second Approach: Filling the Window With the Content

Now, you’ll learn the second approach, extending the view and UI to fill the screen.

To do this, open the Project Settings and select Display > Window. Change the Aspect property to Expand.

When you run the game, you’ll find that the map and UI will use the full screen without black padding around the edges.

Improving the HUD With Anchors

You may notice that the size of the HUD is incorrect when you resize the game window.

That’s because the anchor isn’t set up. To fix this, configure the HUD with the following settings:

• Anchor Preset: Top Wide
• Size: X = 1024, Y = 100

Rerun the game. The HUD layer matches the screen even when it’s resized. Yet, you may find that the level and experience information are still misaligned.

Again, this is also the Anchor problem, and you need to modify the nodes’ Anchor Preset.

Here are the configurations of the LevelLabel and ExpLabel.

LevelLabel:

• Layout Mode: Anchors
• Anchor Preset: Center Top
• Position: X = 312, Y = 0

ExpLabel:

• Layout Mode: Anchors
• Anchor Preset: Center Top
• Position: X = 312, Y = 50

The above setting will center LevelLabel and ExpLabel on a window resize.

Run the game, and you’ll see the corrected responsive UI.