Design UI with Custom Styles

In this section, I will show you how to design UI for games instead of using other UIs on the net. I will show you how to use it directly in Godot.

Styles

For versions from 3.3 and below, it is called Custom Styles in the Inspector box of a certain node in the Control node.

And in Godot version 3.4 and above, it is located in Theme Overrides -> Styles.

And of course the design of these Control nodes will have two ways:

+ One is that you will use the Theme and when you use the Theme you adjust at the root node, the child nodes will also be adjusted.

+ Second, you will adjust the own styles of node.

[Tạo 2D Platformer Game với Godot]  Part 17: Designing UI with Custom Styles

Here, I will choose the NutBatDau node to design.
[Tạo 2D Platformer Game với Godot]  Part 19: Designing UI with Custom Styles 85

In the Inspector panel of the NutBatDau node, select Theme Overrides -> Styles.

You will see 5 lines:

  • Hover: The style of the node when the mouse hovers over the node.
  • Pressed: style when button is clicked.
  • Focus: similar to pressed but when it’s focused
  • Disabled: style when you are disabling this node.
  • Normal: style when in the normal state doing nothing.

[Tạo 2D Platformer Game với Godot]  Part 19: Designing UI with Custom Styles 86

I will design the first Normal fish.

You click [empty] -> New StyleBoxFlat

[Tạo 2D Platformer Game với Godot]  Part 19: Designing UI with Custom Styles 87[Tạo 2D Platformer Game với Godot]  Part 19: Designing UI with Custom Styles 88

You will then see that the Button has turned gray and a new line tab appears below Normal.

[Tạo 2D Platformer Game với Godot]  Part 19: Designing UI with Custom Styles 89[Tạo 2D Platformer Game với Godot]  Part 19: Designing UI with Custom Styles 90[Tạo 2D Platformer Game với Godot]  Part 19: Designing UI with Custom Styles 91

I will change the Bg Color to green and the Color id here I have is 41d822.

[Tạo 2D Platformer Game với Godot]  Part 19: Designing UI with Custom Styles 92

Next I will go to Conner Radius to adjust the corner radius.

If you adjust it to high, the corner will be rounded again.

[Tạo 2D Platformer Game với Godot]  Part 19: Designing UI with Custom Styles 93[Tạo 2D Platformer Game với Godot]  Part 19: Designing UI with Custom Styles 94

This is after I set the Corner Radius to 8.

But the Button is quite small and the text is close to the node, so it is not very beautiful.

[Tạo 2D Platformer Game với Godot]  Part 19: Designing UI with Custom Styles 95

[Tạo 2D Platformer Game với Godot]  Part 19: Designing UI with Custom Styles 96[Tạo 2D Platformer Game với Godot]  Part 19: Designing UI with Custom Styles 97[Tạo 2D Platformer Game với Godot]  Part 19: Designing UI with Custom Styles 98Therefore, I will go through the rect part and adjust it to a reasonable min size.

Remember to adjust at min size, not in size, if you adjust it in size when running the game it will still reset to the old size.

[Tạo 2D Platformer Game với Godot]  Part 19: Designing UI with Custom Styles 99

Next, I will add the outer details = how to apply Blend at Border and adjust the color to make it reasonable. Here my color is: 385831.

[Tạo 2D Platformer Game với Godot]  Part 19: Designing UI with Custom Styles 100

After adjusting the Border, go to Border width and adjust it from 1 to 3 so that it will appear border.

[Tạo 2D Platformer Game với Godot]  Part 19: Designing UI with Custom Styles 101

Then I add a little shadow.

[Tạo 2D Platformer Game với Godot]  Part 19: Designing UI with Custom Styles 102[Tạo 2D Platformer Game với Godot]  Part 19: Designing UI with Custom Styles 103[Tạo 2D Platformer Game với Godot]  Part 19: Designing UI with Custom Styles 104

Next I will do it with pressed but instead of having to start over, I will copy and paste it.

[Tạo 2D Platformer Game với Godot]  Part 19: Designing UI with Custom Styles 105

Then click on the arrow in pressed and choose make unique.

If you do not press make unique, when you edit Styles in Normal, Pressed will also be changed.

[Tạo 2D Platformer Game với Godot]  Part 19: Designing UI with Custom Styles 106

I will adjust the bg color of pressed a little brighter so that users know that they have already pressed it.

My color: 34fc0b.

[Tạo 2D Platformer Game với Godot]  Part 19: Designing UI with Custom Styles 107

Next, you do the same with Hover.[Tạo 2D Platformer Game với Godot]  Part 19: Designing UI with Custom Styles 108

I will have the final result.

summary

So I showed you how to design UI with Godot and in the next part I will show you how to create custom fonts.

Leave a Reply