游戏引擎/GUI的设计与实现-主题
2015-05-04 06:49
302 查看
GUI的主题与中心思想没有什么关系,纯粹是一种控制GUI外观的配置方案。几乎所有的视觉效果都由主题是控制的,一个设计良好的主题模块,可以通过配置文件模拟不同的系统。主题的设计可繁可简,能满足自己的需要就可以了。这里以我写得几个GUI,FTK,CANTK和WTK为例,介绍一下主题得设计。
UI设计的基本原则就是要给用户反馈,让用户清楚当前的状况。所以每种状态会需要有不同的视觉效果,视觉效果无非就是用颜色或图片来呈现。一般来说控件由背景和文字两部分组成,背景可以用图片,或者背景颜色和边框颜色来决定,文字由字体,大小,风格和颜色决定。
综上所述,一个简单主题配置文件由多组配置信息,每组配置信息描述一种控件在不同状态下的外观。
比如下面这段配置就是WTK里关于按钮的配置,WTK是我为TANGIDE专门开发的一个GUI。这里 有完整的配置文件。
一种控件有时需要多组配置信息,比如按钮,正常的按钮用一种风格,对话框中的缺省按钮(按下回车建时自动触发的那个按钮)用另外一种风格。代码中可以提供一个函数,允许开发者指定当前控件用哪个配置。
一种控件可以没有配置信息,可能是它压根就没可见的界面,比如一些用于布局的控件。也可能它用缺省的配置信息就行了。
允许应用程序开发者改变单个控件的风格。主题只是定义每种控件的缺省风格,应用程序开发者可以定制任何单个控件,比如文本控件的字体,在不同界面变化是比较大的。
直接硬编码在代码里通常不是好的选择。我在设计FTK时,选择了用XML文件保存主题配置信息。当时受GTK+影响很深,本来应该选择gtkrc类似的格式的。但是我不喜欢gtkrc的语法,XML解析起来容易很多,而且自己写过XML解析器。自然选择了用XML文件格式。
在学习JS后,我接触到JSON格式,JSON格式的伟大之处在于,它有机的把数据的存储状态和运行状态统一起来了。在JS里使用JSON就像呼吸一样自然,JSON.parse解析出来的数据结构,和直接在代码里定义的数据结构一样可以直接访问。所以在WTK里,选择了JSON数据格式。
但是情况要分别对待,一种情况是GUI设计得非常差,它只提供一种外观,没法通过配置信息改变它。另外一种情况是GUI设计的非常灵活,它完全不管视觉效果,所有视觉效果都由使用者自己决定。
在设计CANTK时,我研究了上百个APP,发现它们之间风格差别很大,根本没有什么主题能把它们得风格统一起来。所以在CANTK里我完全没有用主题,每个控件也没有提供缺省得外观,除非调用者指定得控件需要得配置数据,否则什么也看不到。
在使用时,如果每个控件都要指定相关得配置信息,使用起来一定非常麻烦,比如要手工去写下面得数据,一定非常让人抓狂。
上面的数据确实是CANTK需要的,创建任何一个控件都需上面类似的数据。但是这些数据是由开发工具TANGIDE来生成,开发者要做的只是拖动几下鼠标而已。
主题的内容
一般来说每种控件都有一种或多种状态,常见的状态有正常状态、鼠标按下状态、鼠标OVER状态、只读状态,选中状态和禁用状态等。比如文本只用正常状态,按钮有正常状态、鼠标按下状态、鼠标OVER状态和禁用状态,而编辑器有正常状态、选中状态和只读状态。UI设计的基本原则就是要给用户反馈,让用户清楚当前的状况。所以每种状态会需要有不同的视觉效果,视觉效果无非就是用颜色或图片来呈现。一般来说控件由背景和文字两部分组成,背景可以用图片,或者背景颜色和边框颜色来决定,文字由字体,大小,风格和颜色决定。
综上所述,一个简单主题配置文件由多组配置信息,每组配置信息描述一种控件在不同状态下的外观。
比如下面这段配置就是WTK里关于按钮的配置,WTK是我为TANGIDE专门开发的一个GUI。这里 有完整的配置文件。
[code] "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里我完全没有用主题,每个控件也没有提供缺省得外观,除非调用者指定得控件需要得配置数据,否则什么也看不到。
在使用时,如果每个控件都要指定相关得配置信息,使用起来一定非常麻烦,比如要手工去写下面得数据,一定非常让人抓狂。
[code]{ "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来生成,开发者要做的只是拖动几下鼠标而已。
相关文章推荐
- 游戏引擎/GUI的设计与实现-主题
- 游戏引擎/GUI的设计与实现-常见GUI架构
- 游戏引擎/GUI的设计与实现-序
- 游戏引擎/GUI的设计与实现-序
- 游戏引擎/GUI的设计与实现-常见GUI架构
- 题目:基于Java GUI的“21点”游戏的设计与实现
- 游戏引擎中的多渲染器的设计与实现(1)--OGRE
- 游戏引擎学习笔记:介绍,架构,设计及实现
- 一种2D游戏引擎的设计与实现
- 一种2D游戏引擎的设计与实现
- 一种2D游戏引擎的设计与实现
- 游戏引擎中的多渲染器的设计与实现(1)
- 游戏引擎介绍,架构,设计及实现
- /LGC设计模式/从游戏引擎看 GUI 系统
- 游戏引擎基础(九)(现成产品与定做的游戏引擎设计工具,游戏特定主题)
- 游戏引擎剖析 (9) 现成产品与定做的游戏引擎设计工具,游戏特定主题
- 游戏引擎介绍,架构,设计及实现
- 一种2D游戏引擎的设计与实现
- 一种2D游戏引擎的设计与实现
- 游戏引擎的分层设计