幻世（OurDream）2D图形引擎使用教程13——GUI图形用户界面系统（1）

声明：本教程版权归Lizcst Software Lab所有，欢迎转载，但是转载必须保留本段声明文字，并注明文章来源：http://blog.csdn.net/kflizcst

谢谢合作！

        从这篇教程开始，将会进入到一个重要的主题，那就是幻世引擎GUI图形用户界面系统的使用。图形用户界面系统，是应用程序与用户交互的媒介，我们每天使用Windows之类的操作系统时，实际上就不断地在接触各种各样的GUI。按钮、标签、窗口、滚动条等等都是GUI的各种组件（或者应该叫控件）。虽然操作系统本身就带有比较完备的GUI系统，但是由于游戏等图形程序往往需要自绘窗口内容，因此，这些现成的组件通常都不能使用（或者即使能够使用，也往往在绘制效能、样式等等方面与游戏等图形程序的需求不相符），因此就需要开发者自行的完成这些需要使用的基本UI组件的开发设计。

        好在如果你使用的幻世引擎，那么这些烦恼给你的影响就会小很多（甚至于不存在）。幻世引擎内部集成了一套基础的GUI系统，如果你的程序对UI的要求不是特别的夸张，幻世的这套GUI完全能够满足需要，可以大大节省重新开发GUI系统的麻烦（记得有人说过，GUI开发技术含量不高，但是纷繁的细节却是一件需要大体力劳动的事情）。

        [认识幻世GUI]

        幻世GUI提供了足以让一般幻世程序完成与用户交互的工作时必备的UI控件，包括：按钮、标签、复选框、单选框、列表框、滚动条、进度条、图片框、编辑框（支持中文输入）和窗口。凭借这些常用的组件，开发者可以快速的完成幻世程序的前端界面设计。

        幻世GUI系统的主要特点：

        1、自定义范围大；可以详细的设定好控件的所有细节，不管是位置、颜色、大小，还是纹理贴图等等，都可以充分的由开发者自定义和调整，以适应不同的场合需要。

        2、使用方法简单；本套UI系统秉承了幻世引擎一贯的调用风格——清晰简易，开发者可以基于幻世程序的开发习惯，无需过多的调整或学习就可以轻松上手。

        3、与幻世引擎完美结合，可以最大化的利用引擎的效能，无需开发者作过多优化。

        介绍了这么多，到底这套UI系统如何使用呢？下面，我们就通过代码来学习。

        [初始化GUI]

        要使用GUI系统，当然需要先初始化，这也是大家学习幻世引擎开发到目前为止 应该养成了的一个习惯。

初始化并且获取GUI系统的接口非常简单，依然是向引擎的主接口申请即可。

 

        这样便成功的获取了GUI系统的接口，然后就可以使用GUI系统的各项功能了。

        这里需要注意的是，GUI系统接口的初始化依赖于两个其他的幻世功能接口，也就是在GUI系统接口初始化之前，必须先初始化并获取这两个前提的接口，它们分别是渲染器接口和输入器接口。如果没有首先获取这两个接口，那么直接初始化GUI系统接口是无法成功的，切记！

        [创建一个UI控件]

        初始化完成GUI系统，接下来便是创建一个我们需要的UI控件了。GUI接口提供了一系列的Add*函数来完成UI控件的创建工作。这里我们以创建一个按钮为例。

        创建按钮控件的函数为AddButton，该函数拥有非常多的参数，这些参数便是设定按钮方方面面细节的关键，详细的参数介绍如下：

 

        1、控件ID，与前面我们经常遇到的资源ID差不多，该ID可任意指定（0除外），但不可重复，并且需要妥善保存，稍后对此控件的访问必须提供这个ID；

        2、控件的大小及位置；

        3、控件使用的字体ID，该字体用于控件上显示文字标题，必须为有效地已被幻世引擎成功加载的字体；

        4、标题文字的颜色；

        5、标题内容，可以任意指定，但是需要注意的时按钮不会根据标题文字的长度自行调整显示长度，需要设计者自己掌握好合适的显示长度，避免文字超过按钮边界；

        6、是否显示标题文字阴影；

        7、标题文字是否闪烁；

        8、文字闪烁的间隔时间（毫秒），如果上一参数为假，则该参数无效，为0则不闪烁即使上一参数为真也无效；

        9、控件通常状态的颜色，即没有被用户点击时的颜色；

        10、控件点燃状态的颜色，即被用户点击时的颜色；

        11、控件通常状态的纹理ID，需要是有效的纹理资源ID，如果不用纹理可以为0；

        12、通常纹理的坐标；

        13、控件点燃状态的纹理ID，需要是有效的纹理资源ID，如果不用纹理可以为0；

        14、点燃纹理的坐标；

        15、父控件的ID，父控件指可以用来包含其他控件的容器类控件，在当前版本的幻世GUI中，仅仅指窗口控件，如果没有父控件，则该参数必须置-1，否则创建函数将会失败。

 

        这是在我们的演示程序中创建按钮的代码。

        [让按钮发挥作用]

        一个新的按钮算是完成了添加工作，但是熟悉Windows GUI程序设计的朋友会注意到，我们似乎还少了某一样工作没有完成......对了！还没有给按钮添加事件处理代码啊！没有事件处理代码，那么当用户点击按钮时，幻世引擎就会不知道该做些什么，聪明的它只好什么也不做了，呵呵:-)

        所以，不添加事件处理，就只是空有一个按钮的外观而已，什么用也没有。那怎样添加事件处理代码呢？这里就需要定义一个事件处理的回调函数，然后将该函数提交给GUI系统并指定给我们的按钮使用就可以了。

        首先是写一个回调函数来作为事件处理函数。

 

        需要注意的是，回调函数有固定的函数原型，就如上面所示的那样，不能有参数，必须返回一个逻辑型的值。在该函数里面，开发者可以任意的编写各种操作的代码，示例中我们的操作是卸载引擎并关闭程序，这也符合我们添加的这个关闭按钮的设计需要。

        关于回调函数的返回值，如果函数的代码执行没有发生或者导致程序出现致命问题的话，就不要返回false，因为在幻世引擎中，回调函数返回false代表该回调执行出现致命的不可恢复的错误，会使得引擎强制的终止整个程序的运行。因此，如非必要，请不要通过回调函数返回false。

        好了，有了这个事件处理，剩下的事情就简单了，使用GUI接口的SetEvenReceiver函数将我们写好的事件处理提交就好了，如下图：

 

        该函数的参数为：

        1、提交给的控件的ID，这个相当于我们熟悉的资源ID，呵呵，没忘记吧？

        2、控件的事件类型，这个就是我们提交的函数是作为该控件的哪一个事件的处理代码。幻世GUI的控件，支持四种事件的处理，分别是：

 

        鼠标左键按下事件、鼠标左键放开事件、鼠标右键按下事件、鼠标右键放开事件还有鼠标指针的悬停事件。这些事件会在用户在指定控件上进行指定的操作时被触发，开发者可以根据需要选用，不过，不是所有的控件都支持全部的事件，有些控件甚至不能支持任何的事件，比如图片框控件。

        [GUI 的系统处理]

        完成了需要的控件的添加后，接下来就需要我们将GUI系统的运行与所编写的程序结合在一起，这主要包括两方面，一是GUI 的绘制，二是GUI的操作事件接受及广播。

很简单，GUI的绘制，只需要简单的在帧渲染函数中添加绘制代码即可，注意要添加到绘图代码段中。

 

        GUI的操作事件接受及广播也只需要在帧处理函数中添加简单的代码即可。

 

        好的！就是如此了！所有的工作都完成了，现在我们来编译运行一下，效果如图：

 

        这就是点击按钮时的效果，如果没有添加纹理，那么按钮的外形就是这样的默认外观（其实看上去也不错了，如果你要求不高的话，直接使用默认外观可以省不少事哦），控件的红色外框代表此控件当前拥有操作焦点，至于什么是操作焦点，这个就不用多介绍了，天天都能在操作系统中见到的。

 

        [完成]

        GUI系统的初步使用，我们算是学习完毕了，虽然讲了很多，但是倒回去看，综合全局，其实也可以发现，使用上是非常简单的，接口也是很清晰明了的。

        关于GUI系统的其他控件，我还会再挑几个介绍一下，剩下的控件，相信大家可以举一反三的明白使用方法。

 

        [示例代码下载]

        全部源代码下载：http://kuai.xunlei.com/d/BiIvAInT172uUgQA122