Design UI with Custom Styles – LLODO

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.

Here, I will choose the NutBatDau node to design.

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.

I will design the first Normal fish.

You click [empty] -> New StyleBoxFlat

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

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

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

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

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.

Therefore, 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.

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.

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

Then I add a little shadow.

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

Then you click on the arrow in pressed and select make unique.

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

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

My color: 34fc0b.

Next, you do the same with Hover.

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.