游戏引擎/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来生成,开发者要做的只是拖动几下鼠标而已。
游戏引擎/GUI的设计与实现-主题的更多相关文章
- 游戏引擎/GUI的设计与实现-序
几年前写<嵌入式GUI FTK设计与实现>,没写几篇就停止更新了.当时自己研究过MicroWindows, X Window, DirectFB, GTK+和Android的GUI,又写过 ...
- 游戏引擎/GUI的设计与实现-常见GUI架构
以X Window为代表的客户/服务器架构. X Window通常是指X服务器及封装了通信协议的客户端库.服务器端主要负责输入事件的分发,窗口层次的管理,以及显示输出的处理,其它功能基本上都是在客户端 ...
- [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计
源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...
- 刺猬大作战(游戏引擎用Free Pascal写成,GUI用C++写成,使用SDL和Qt4)
游戏特性[编辑] 游戏引擎用Free Pascal写成,GUI用C++写成,使用SDL和Qt4[2]. 0.9.12开始支持实时动态缩放游戏画面. 个性化[编辑] 刺猬大作战有着高度定制性 游戏模式: ...
- 3D游戏引擎设计 实时计算机图形学的应用方法 第2版 pdf 带索引书签目录
3D游戏引擎设计 实时计算机图形学的应用方法 第2版 目录 第1章 概述1.1 图形硬件和游戏发展史1.2 本书版本与软件发展史1.3 章节导读 第2章 图形系统2.1 基础知识2.1.1 坐标系 ...
- 开源战棋 SLG 游戏框架设计思考(一)简介和游戏引擎
战棋 SLG 游戏 SLG(Simulation Game)游戏是模拟游戏的简称.战棋类的SLG有两种:一种是 War Game 中的兵棋推演分支,常见的游戏有战争艺术3(TOAW3 — The Op ...
- 游戏引擎网络开发者的 64 做与不做 | Part 1 | 客户端方面
摘要:纵观过去 10 年的游戏领域,单机向网络发展已成为一个非常大的趋势.然而,为游戏添加网络支持的过程中往往存在着大量挑战,这里将为大家揭示游戏引擎网络开发者的 64 个做与不做. [编者按]时下, ...
- Unity3D游戏开发初探—1.跨平台的游戏引擎让.NET程序员新生
一.Unity3D平台简介 Unity是由Unity Technologies开发的一个让轻松创建诸如三维视频游戏.建筑可视化.实时三维动画等类型互动内容的多平台的综合型游戏开发工具,是一个全面整合的 ...
- GJM : 各大开发游戏引擎
感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...
随机推荐
- reactjs源码
'use strict'; var EventConstants = _dereq_(15);var EventPropagators = _dereq_(19);var ExecutionEnvir ...
- android 入门 007(界面跳转)
一.隐式跳转(自定义界面) 界面层: <Button android:id="@+id/sencond_contact" android:layout_width=" ...
- CODEVS 3145 汉诺塔游戏 递归
题目描述 Description 汉诺塔问题(又称为河内塔问题),是一个大家熟知的问题.在A,B,C三根柱子上,有n个不同大小的圆盘(假设半径分别为1-n吧),一开始他们都叠在我A上(如图所示),你的 ...
- BZOJ 1927 星际竞速(最小费用最大流)
题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1927 题意:一个图,n个点.对于给出的每条边 u,v,w,表示u和v中编号小的那个到编号 ...
- [翻译]投影变换 Projection Transform (Direct3D 9)
你可以认为投影变换就是控制摄像机内部的一种方式.他可以类推为为摄像机选择一个漏字板.它是三种变换中最难懂的.本文只讨论以下的一些内容. 典型的投影变换就是缩放和透视投影.投影就变换把视椎转化为一个立方 ...
- [转]ZigBee On Windows Mobile--ZigBee模块天线设计
原文出处:http://www.cnblogs.com/dearsj001/archive/2008/10/26/1320029.html
- 字段符号FIELD-SYMBOLS
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- [资源] Resources on Self-Driving Car
Talk NVIDIA at CES 2016 - Self Driving Cars and Deep Learning GPUs Projects Autoware Open-source sof ...
- T-SQL Apply的用法
SQL Server 2005 新增 cross apply 和 outer apply 联接语句,增加这两个东东有啥作用呢? 我们知道有个 SQL Server 2000 中有个 cross joi ...
- Scrum Meeting---Seven(2015-11-2)
今日已完成任务和明日要做的任务 姓名 今日已完成任务 今日时间 明日计划完成任务 估计用时 董元财 完成了服务器实现 5h 服务器与客户端连接测试 4h 胡亚坤 客户端与服务器端的通信 2h 客户端与 ...