Design and implementation of game engine/gui-theme

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

Generally speaking, each control has one or more states, common State has normal state, mouse down state, mouse over state, read-only state, selected state and disabled state. For example, the text only in normal state, the button has a normal state, the mouse down state, the mouse over state and disabled state, and the editor has a normal state, checked state and read-only state.

The basic principle of UI design is to give the user feedback, let the user know the current situation. So each state will need to have a different visual effect, the visual effect is to use color or picture to render. Generally, a control is made up of background and text, and the background can be determined with a picture, or background and border color, and text is determined by the font, size, style, and color.

To sum up, a simple topic profile consists of multiple sets of configuration information, each describing the appearance of a control in a different state.

For example, the following configuration is WTK about the button configuration, WTK is a specially developed for Tangide GUI. Here are the complete configuration files.

        "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 in a style, a default button in a dialog box (the button that is automatically triggered when the enter is built) in another style. The code can provide a function that allows the developer to specify which configuration the current control is configured with.

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

Allows application developers to change the style of a single control. The theme simply defines the default style for each control, and the application developer can customize any single control, such as the font of the text control, which is larger in different interfaces. form of the subject

The theme should not rigidly adhere to the form, I first saw the topic configuration information written in the code, it loaded and switched quickly, in a 52M frequency +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 theme configuration information with an XML file. At that time was affected by GTK + very deep, should have chosen GTKRC similar format. But I don't like GTKRC syntax, XML parsing is much easier, and I have written XML parsers myself. Naturally selected in the XML file format.

After learning JS, I have access to the JSON format, JSON format is the great thing is that it is organic to the data storage state and operation of the State unified. Using JSON in JS is just as natural as breathing, json.parse parsed data structures that are directly accessible as well as directly defined in the code. So in WTK, the JSON data format is selected. If you want a theme, it's a problem.

A GUI system can be without themes. Of course.

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

When I was designing CANTK, I studied hundreds of apps, and found that there was a big difference between the styles and there was no theme to unify them. So in CANTK, I didn't use the theme at all, and each control does not provide a default appearance, and nothing is visible unless the caller specifies that the control needs to configure the data.

When used, if each control has to specify the relevant configuration information, it must be very cumbersome to use, such as the manual to write the following data, it must be very annoying.

{"type": "Ui-button", "name": "Ui-button", "W": "H": "," X ": 167," Y ": 218," text ":" OK "," vtextalign ":" Middle "," htextalign ":" Center "," Enable ": True," visible ": True," xattr ": 0," y Attr ": 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, "l Inecolor ":" Red "," FillColor ":" White "," TextColor ":" #FEFFFF "," FontSize ":" Fontfamil
        Y ":" Serif "," TEXTB ": True," Enablegradient ": true}," events ": {" OnClick ": null, "Onupdatetransform": null}, "Images": {"Display": 4, "FOCUSED_BG": "Drawapp8/images/common/butt
   Ons/red_button.png ",     "ACTIVE_BG": "Drawapp8/images/common/buttons/red_button_active.png", "NORMAL_BG": "Drawapp8/images/common/but Tons/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 one control requires the same data as above. But the data is generated by the development tool Tangide, and the developer simply drags a few mouse clicks.