# Guide to the Godot game engine/UI skinning

Guide to the Godot game engine
<-- Multiplayer UI skinning Exporting-->
Skip to bottom
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:
       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.

### Guide to the Godot game engine

    Getting started
       Installation
       What is a node?
       Programming
       Resources and importing
       Signals and methods
       Your first game
    Making it work
       Debugging
       Input
       Physics
       Saving and loading
       Multiplayer
    Making it look good
       UI skinning
       Animation
    Advanced help
       Servers (singletons)
       Platform specific
       Optimisation
       Encryption
       Exporting
       Plugins
    Miscellaneous
       Helpful links
       Authors and contributors
       Print version
<Binance Lock Delfi screen Trade Mororing Screen type debugging skills Scheme account Shared screen Trade
<-- previous back to top next -->