Design and implementation of game engine/gui-Themes

The theme of the GUI has nothing to do with the main idea, purely a configuration scheme that controls the appearance of the GUI. Almost all visual effects are controlled by the theme, a well-designed theme module that can be used to simulate different systems through configuration files. The theme of the design can be complex and simple, can meet their own needs on it. Here I write a few gui,ftk,cantk and WTK for example, introduce the theme design.

Content of the topic

In general, each control has one or more states, a common state with normal state, mouse down state, mouse over state, read-only state, checked state, and disabled state. For example, the text only uses normal state, the button has a normal state, mouse down state, mouse over state and disabled state, and the editor has a normal state, selected state and read-only state.

The basic principle of UI design is to give users feedback, so that users understand the current situation. So each state will need to have a different visual effect, the visual effect is nothing more than color or picture to present. Generally speaking, the control consists of the background and the text two parts, the background can be determined by the picture, or the background color and the border color, the text is determined by the font, size, style and color.

In summary, a simple theme profile consists of multiple sets of configuration information, each of which describes the appearance of a control in different states.

For example, the following configuration is WTK in the configuration of the button, WTK is my special development for Tangide a GUI. The complete configuration file is available here.

        "button": {"State-normal": {"TextColor":"Black","Font":"10pt Bold Sans-serif","Bgimage":"Bgimage_button_normal.png"},"State-active": {"TextColor":"Black","Font":"10pt Bold Sans-serif","Bgimage":"Bgimage_button_active.png"},"State-over": {"TextColor":"Black","Font":"10pt Bold Sans-serif","Bgimage":"Bgimage_button_over.png"},"State-disable": {"TextColor":"Gray","Font":"10pt Bold Sans-serif","Bgimage":"Bgimage_button_disable.png"}        }

A control sometimes requires more than one set of configuration information, such as a button, a normal button with a style, the default button in the dialog box (the button that is automatically triggered when you press ENTER) in a different style. The code can provide a function that allows the developer to specify which configuration to use for the current control.

A control can have no configuration information, possibly an interface that is not visible at all, such as some controls for layout. It can also be done with the default configuration information.

Allows application developers to change the style of individual controls. Themes simply define the default style for each control, and application developers can customize any single control, such as the font of the text control, which varies greatly across different interfaces.

The form of a theme

The theme should not be stuck in the form, I first saw the topic configuration information written in the code, it loading and switching are very fast, in a 52M clock +512k memory system is the right choice.

Direct hard coding is usually not a good choice in code. When I was designing ftk, I chose to save the topic configuration information with an XML file. It was deeply influenced by GTK + and should have chosen GTKRC in a similar format. But I don't like the GTKRC syntax, XML parsing is much easier, and I have written the XML parser. Naturally selected in XML file format.

After learning JS, I was exposed to the JSON format, the great thing about JSON format is that it organically unifies the storage state and running state of the data. The use of JSON in JS is as natural as breathing, and the data structure that Json.parse parses is directly accessible, just as it is directly defined in the code. So in WTK, the JSON data format was selected.

If you want a theme, it's a question.

Can a GUI system be used without a theme? Of course!

But the situation is to be treated separately, one situation is that the GUI is poorly designed, it provides only a look, and cannot be changed by configuration information. Another situation is that the GUI design is very flexible and it is completely visual, and all visual effects are determined by the user.

When I was designing CANTK, I researched hundreds of apps and found that there was a great difference between them, and there was no theme that would unify their style. So in CANTK, I don't have a theme at all, and every control doesn't provide a default look, unless the caller specifies that the control needs configuration data, otherwise it won't see anything.

When using, if each control to specify the relevant configuration information, it must be very cumbersome to use, such as to manually write the following data, it must be very crazy.

{    "type":"Ui-button",    "name":"Ui-button",    "W": $,    "h": the,    "x":167,    "y":218,    "text":"OK",    "vtextalign":"Middle",    "htextalign":"Center",    "Enable":true,    "Visible":true,    "xattr":0,    "yattr":0,    "widthattr":0,    "heightattr":0,    "UID":11205,    "runtimevisible":true,    "wmin": -,    "Hmin": A,    "enableautoscalefontsize":true,    "XParam":1,    "Yparam":1,    "Widthparam":1,    "Heightparam":1,    "Isuibutton":true,    "isuielement":true,    "HasChildren":true,    "style":{        "linewidth":2,        "LineColor":"Red",        "FillColor":"White",        "TextColor":"#FEFFFF",        "fontSize": +,        "fontFamily":"Serif",        "TEXTB":true,        "enablegradient":true    },    "Events":{"onClick": null, "onupdatetransform": null    },    "Images":{"display": 4, "focused_bg": "Drawapp8/images/common/buttons/red_button". PNG ","active_bg": " Drawapp8/images/common/buttons/red_button_active.png ","norm AL_BG": " Drawapp8/images/common/buttons/red_button.png ","disable_bg": " Drawapp8 /images/common/buttons/red_button.png "    },    "Deviceconfig":"{\" name\ ": \" device-general\ ", \" bg\ ": \" drawapp8/images/device.png\ ", \" platform\ ": \" android\ ", \" version\ ": \ "5\", \ "lcddensity\": \ "hdpi\", \ "width\": 560,\ "height\": 798,\ "screenx\": 36,\ "screeny\": 80,\ "screenw\": 480,\ " Screenh\ ": 720}"}

The data above is really CANTK needed, and creating any control requires similar data. But this data is generated by the development tool Tangide, and the developer is just dragging a few mouse clicks.

Design and implementation of game engine/gui-Themes