If you look at our custom title-screen from the first example, you will see that our button definitions have some redundant data like a bottom-margin of 10 pixel and they are all resizable. It is fine in our example, but in more complex scenarios this becomes a huge problem if we decide later to make a change like using 15 pixel margin instead of 10. Because then we have to go through all of our controls and change it. That's where styles can help you out!

Define a style

A style allows you to define a set of properties just once and then re-use it for as many controls or layouts as you like. If you want to define a new style, you can do it in every script you like or even create a new script. All default styles are in "Styles" folder in "Style_Default" script. An example style could look like this:

ui.UIManager.styles.titleScreenButton = {

    "resizable": true,

    "margin": [0, 0, 0, 10]

}

We put that at the end of "Style_Default" script. The first line always has the same format:

ui.UIManager.styles.<style_name> = {

Its not necessary to completely understand that line but it is important to know that you have to define a unique name for your style. The name shouldn't contain any spaces or special characters.

After we defined our style, we can change our title-screen example as follows:

ui.UIManager.layouts.titleLayout = {

  "type": "ui.FreeLayout",

  "frame": [0, 0, Graphics.width, Graphics.height],

  "controls": [

      {

          "type": "ui.Image",

          "image": "bg-generic",

          "frame": [0, 0, "100%", "100%"]

      },

      {

          "type": "ui.StackLayout",

          "orientation": "vertical",

          "frame": ["35%", "60%", "30%", "30%"]

          "controls": [

              {

                  "type": "ui.Button",

                  "params": { "text": "New Game", "action": { "name": "newGame" } },

                  "style": "titleScreenButton"

              },

              {

                  "type": "ui.Button",

                  "params": { "text": "Load Game", "action": { "name": "switchLayout", "params": { "name": "loadMenuLayout", "savePrevious": true } } },

                  "style": "titleScreenButton"

              },

              {

                  "type": "ui.Button",

                  "params": { "text": "Quit", "action": { "name": "quitGame" } },

                  "style": "titleScreenButton"

              }

          ]

      }

  ]

}

You can even apply multiple styles on one item like this:

"styles": ["titleScreenButton", "otherStyle"]

In that case the styles are applied one after another. If there are colliding properties like if two styles contain the same property, the last applied style wins.

Events

It is also possible to change the style of a control at runtime if a certain event takes place. For Example: If we hover a control's area with the mouse pointer, another style can be applied to give some visual feedback to the use like changing the control's color.

To bind a style to an event, you first need to define the base style used as long as no special event takes place:

ui.UIManager.styles.hyperlink = {

    "font": { "color": [255, 255, 255], "size": 30 }

}

In .this example, we want to make a style which can be used to make hyperlinks. So if we hover over it the text color will change.

ui.UIManager.styles["hyperlink:hover"] = {

    "font": { "color": [255, 0, 0], "size": 30 }

}

To bind a style to an event, we use the syntax:

:<event>

The following events are available:

• hover - Applies the style if the control's area is hovered with mouse pointer.
• selected - Applies the style if the control is selected.

In our example, we used the "hover" event so our styles is applied on mouse-hover to each control with the base "hyperlink" style set. So if we create text like this now:

{

    "type": "ui.Text",

"style": "hyperlink",

"text": "Hover Me",

"frame": [0, 0],

"sizeToFit": true

}

It will change its color on hover!