How to use tiles for your dialog box borders in Godot: The NinePatchRect component

The other day I was looking for the counterpart of the Unity Panel’s tiled image mode but it didn’t seem an easy thing to find. Lots of tutorials cover how to make your own themes, but it was hard to find how to use tiles for the borders in Godot.

When you build a tile-based game it’s what you usually want for your UI: too look pixel-perfect with that retro look.

Here is the example in Unity:

Screenshot 2020-06-28 at 16.18.53.png

In the Panel component in Unity, you have the option of using a “Tiled” image type easily. As you can see, it detects the 9 tiles automatically.

After some more digging, it turns out that in Godot Engine you have a very powerful and customisable component (even more than in Unity) called NinePatchRect. With it, you can use any texture and slice the region you are interested in to use it as the borders of your panels / dialog boxes.

The important inspector settings are:

Region Rect: Defines the area of the texture to use
Patch Margin: Defines the margins of the borders, so they keep always the same size/ratio even if your panel is resized.
Axis Stretch: Defines how to stretch the tiles when resized. Here usually you will want it as “Tiled” in both horizontal and vertical. This way the tiles are not stretched, but auto-tiled one next another when you resize the panel.

Here is an example:

Screenshot 2020-06-28 at 16.21.28.png

Basic NinePatchRect configuration in Godot for 16x16 px tiles

How to use tiles for your dialog box borders in Godot: The NinePatchRect component

Comments

GameDev

How to change CollisionShape color tint properly in Godot

More from this blog

Styling a sticky element when it gets pinned using React

Build your own Full-Stack framework

Mocking the IntersectionObserver in Jest for testing React components

StoryLite 0.6.0 released

Introducing StoryLite ⚡️, a lightweight alternative to StoryBook

Command Palette

Comments

GameDev

How to change CollisionShape color tint properly in Godot

More from this blog