游戏引擎/GUI的设计与实现-主题

GUI的主题与中心思想没有什么关系，纯粹是一种控制GUI外观的配置方案。几乎所有的视觉效果都由主题是控制的，一个设计良好的主题模块，可以通过配置文件模拟不同的系统。主题的设计可繁可简，能满足自己的需要就可以了。这里以我写得几个GUI，FTK，CANTK和WTK为例，介绍一下主题得设计。

主题的内容

一般来说每种控件都有一种或多种状态，常见的状态有正常状态、鼠标按下状态、鼠标OVER状态、只读状态，选中状态和禁用状态等。比如文本只用正常状态，按钮有正常状态、鼠标按下状态、鼠标OVER状态和禁用状态，而编辑器有正常状态、选中状态和只读状态。

UI设计的基本原则就是要给用户反馈，让用户清楚当前的状况。所以每种状态会需要有不同的视觉效果，视觉效果无非就是用颜色或图片来呈现。一般来说控件由背景和文字两部分组成，背景可以用图片，或者背景颜色和边框颜色来决定，文字由字体，大小，风格和颜色决定。

综上所述，一个简单主题配置文件由多组配置信息，每组配置信息描述一种控件在不同状态下的外观。

比如下面这段配置就是WTK里关于按钮的配置，WTK是我为TANGIDE专门开发的一个GUI。这里有完整的配置文件。

        "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"

            }

        }

一种控件有时需要多组配置信息，比如按钮，正常的按钮用一种风格，对话框中的缺省按钮(按下回车建时自动触发的那个按钮)用另外一种风格。代码中可以提供一个函数，允许开发者指定当前控件用哪个配置。

一种控件可以没有配置信息，可能是它压根就没可见的界面，比如一些用于布局的控件。也可能它用缺省的配置信息就行了。

允许应用程序开发者改变单个控件的风格。主题只是定义每种控件的缺省风格，应用程序开发者可以定制任何单个控件，比如文本控件的字体，在不同界面变化是比较大的。

主题的形式

主题的其实不应该拘泥于形式，我最早见到的主题配置信息写在代码里的，它加载和切换都很快，在一个52M主频+512K内存的系统里是正确的选择。

直接硬编码在代码里通常不是好的选择。我在设计FTK时，选择了用XML文件保存主题配置信息。当时受GTK+影响很深，本来应该选择gtkrc类似的格式的。但是我不喜欢gtkrc的语法，XML解析起来容易很多，而且自己写过XML解析器。自然选择了用XML文件格式。

在学习JS后，我接触到JSON格式，JSON格式的伟大之处在于，它有机的把数据的存储状态和运行状态统一起来了。在JS里使用JSON就像呼吸一样自然，JSON.parse解析出来的数据结构，和直接在代码里定义的数据结构一样可以直接访问。所以在WTK里，选择了JSON数据格式。

要不要主题，是个问题

一个GUI系统可以不用主题吗？当然！

但是情况要分别对待，一种情况是GUI设计得非常差，它只提供一种外观，没法通过配置信息改变它。另外一种情况是GUI设计的非常灵活，它完全不管视觉效果，所有视觉效果都由使用者自己决定。

在设计CANTK时，我研究了上百个APP，发现它们之间风格差别很大，根本没有什么主题能把它们得风格统一起来。所以在CANTK里我完全没有用主题，每个控件也没有提供缺省得外观，除非调用者指定得控件需要得配置数据，否则什么也看不到。

在使用时，如果每个控件都要指定相关得配置信息，使用起来一定非常麻烦，比如要手工去写下面得数据，一定非常让人抓狂。

{

    "type": "ui-button",

    "name": "ui-button",

    "w": 200,

    "h": 69,

    "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": 50,

    "hMin": 41,

    "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": 19,

        "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",

        "normal_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}"

}

上面的数据确实是CANTK需要的，创建任何一个控件都需上面类似的数据。但是这些数据是由开发工具TANGIDE来生成，开发者要做的只是拖动几下鼠标而已。