Guide to the Godot game engine/UI skinning

<-- Multiplayer UI skinning Exporting-->

UI skinning allows you to turn a game's UI (user interface) to something more fancy than the default. The deafult styling for buttons and panels is an ugly shade of gray. But you can change it as far as complex textures as backgrounds. Whether you go that far or not depends on the game, your time, and your artistic skills.

Basic skinning with themes

To do this, let's first create a Theme. You will need to create a new resource using the file system. Search for Theme.

After saving it, a dock will open which allows you to preview the theme. Looks pretty dull, right?

Lets make buttons look nice first. Click Edit theme, and select Add Class Items. Do not confuse with Add Class Item.

Type Button in the popup, under "type". Then press Add All.

In the Inspector, you will see a property category called "Button". Expand it. Expand the sub-categories "colors" and "styles". Set the style for "normal" to a new StyleBoxFlat. Some of the more common things you can change are:

Background color
Corner radius (the higher the value, the bigger the curve)
Border width and Border color
Shadow
Content margin (a margin between the border and the content within)
Expand Margin (a margin to expand the style outside the Button's bounding-box, without increasing its size - you can only interact with a button by clicking the area inside the bounding box itself)

Have fun changing styles as much as you like! Remember to choose a single styling theme, like retro, or ski-fi, that suits your game.

You can change much more than just buttons. But only skin the UI elements that are needed, not every single Control-derived node.

After you are done, go to Project->ProjectSettings->Gui->Theme and set the custom value to the path to the newly created theme. Save, and then play your main menu scene.

Fancy skinning with themes

Instead of using StyleBoxeFlat, use StyleBoxeTexture. This allows using images instead of styled boxes. You can also set the icons for certain Control node elements, like the "increment" and "decrement" buttons in number edits and the "clear" button for text edits.

Custom UI events

Some games show fancy effects when clicking on buttons, like fading menus out. Here are some suggestions:

When clicking on a button that changes the scene, consider fading the screen out for a fraction of a second before changing the scene, then fading the new scene in. The whole process should take less than a tenth of a second, or less. It should be subtle and quick, or you risk boring the player as the ui "loads", which could in theory happen instantly. Here is a code example:

extends Control
# main_menu.gd

func _on_play_button_up():
  # screen_blocker should be a hidden Control node placed on top all the other UI elements
  $screen_blocker.show() # This stops you clicking any more buttons and causing weird stuff afterwards
  for _i in range(20):
    modulate.a -= .2
    yield(get_tree().create_timer(.002), "timeout")
  get_tree().change_scene("Target scene here")

The opposite to this (to fade in a new menu) can be done with an AnimationPlayer set to "autoplay", or initiated in the _ready() function.

When disabling a button, consider setting its mouse_mode to MOUSE_MODE_IGNORE, for stylistic purposes. Not doing so layers the "disabled" style and the "clicked" style on top of each other when clicking it, which doesn't look that good. Remember to set the mouse_mode to MOUSE_MODE_STOP when you enable the button again.