Guide to the Godot game engine/UI skinning

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. You will need to create a new resource using the file system. Search for.

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  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. 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  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:

modulate.a -= (., ).


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


 * When disabling a button, consider setting its  to , 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   to   when you enable the button again.