CEGUI的使用简单说明

●在介绍CELayoutEditor的使用前，先来介绍一下CEGUI的文件结构：

CEGUI文件结构很简单，共定义了四种格式的xml文件：scheme，looknfeel，imageset,layout。

.scheme文件：

.scheme文件可以将许多数据组合在一起使用，它也是装载与注册widget最方便的方法。因为它是一个XML文件，改变装载的资源时不需要重新编译。一个Schema可以包含以下一个或者多个类型的定义(这些文件描述的资源可以在schema被装载时装载)。

.scheme文件的结构：

      根元素包括名字属性、Imageset、LookNFeel、WindowRendererSet、FalagardMapping。

 Name — 指定scheme文件在系统里使用的名字。

 Imageset — 指定一个Imageset文件被装载进来作为scheme文件的一部分。

 Font — 指定一种字体被装载进CEGUI中。可以定义两种类型的字体供CEGUI使用动态字体    基于true-type(.ttf)的字体文件静态字体    一个位图字体，这种字体基于一个定义了Images的Imageset。

 LookNFeel — 指定一个LookNFeel文件被装载进来作为scheme文件的一部分。

 WindowRenderSet — 指定一个模块包含WindowRenderer类和它们的工厂。CEGUI0.5.0仅仅提供了一个WindowRendererSet : Falagard.

 FalagardMapping — 把look’n’feel影射到一个窗体工厂和为新的窗体指派类型结果，有效地为特定的look’n’feel创建新的窗体工厂。

 通过上述元素的设定，.scheme文件将可以使用look’n’feel文件了。这样新的窗体类型将在C++代码部分和XML layouts文件中可以随便使用了。

.looknfeel文件：

     .looknfeel文件中的Falagard系统在CEGUI 0.5.0中是一个强而有力的工具。使用它你能创建出你想要的GUI元素。使用Falagard你能通过XML格式的文件创建出很多漂亮的窗体，而无需使用C++代码。

      使用Falagard，你不仅仅可以确定如果渲染一个窗体，还可以创建出新的代表性的特征，就好像为一个窗体创建新的属性控件，你可以在你的imagery配置中使用它了。

     Falagard数据结构：

     WidgetLook：为look’n’feel增加组件的地方.

     Property definitions：一个窗体新属性的创建在look’n’feel中得到确定。

     Imagery sections：一个imagery section赋予一个名称，它是一系列imagery组件的一个集合。 我们可以使用imagery sections来分开原本可以渲染的部分，分开后它们都是可以独立绘制的部分。最后依照你想设计图像，在State imagery里把他们一层层地叠加起来。

     State imagery：在state imagery里，我们可以绘制所有不同的，为特定窗体设计的imagery sections。在这里实现了imagery sections所定义控件的使用。

.Imageset文件：

      .Imageset文件可将一幅图像看做若干小图像的集合。换句话说，就是将一幅图像的某个区域看做一幅独立的图片来使用。就是要把tga图片上的位置信息记录下来，位置信息由左上角横纵坐标，长宽信息组成，每组成的范围就是一幅独立的图片，每张独立的图片只有唯一一个名称。

.layout文件：

     .layout文件是布局文件包含了一个窗口布局的信息，它也是xml格式的。其中每个'window'元素定义了被创建的window或者widet，'Property'元素定义每个window的属性值。

这个文件最终是提供给

●工作流程：

根据美术组产生的UI资源图，生成一个.XML格式的. imageset文件，这个文件包含了各个供.looknfeel使用的小图案。这个文件提供给后面的.scheme和.looknfeel文件的使用。

接着手工生成一个.looknfeel文件。通过这个文件定义各种类型的控件(widget)。这些widget在.scheme文件中装载进去，并进行了注册。

手工生成一个.scheme文件，这个文件的内容包括要使用的imageset文件、所对应的looknfeel文件，以及将要在looknfeel定义的控件的类型、工厂、渲染器和在looknfeel中的名字，并对widgets进行注册。

接着通过使用CELayoutEditor来生成.layout文件。启动CELayoutEditor，文件.scheme会自动加载进去。我们可以使用Widgets树下的Widget来布局我们游戏的UI，布局完成后就会生成一个.layout文件。

经过上面所述的流程，我们手上就具备了使用CEGUI来制作界面的数据文件了。

最后我们使用 CEGUI 来制作界面 , 不论在何种平台下 , 有基本的以下步骤要做 :

在使用CEGUI之前，我们需要加载一些数据文件，并且完成初始化工作。而这些数据文件就是前面所介绍的.scheme、. Imageset、.looknfeel文件。

 1、装载了imageset文件，经过这一步程序的后面就可以使用Vanilla的widgets了。

Imageset* taharezImages = ImagesetManager::getSingleton().createImageset(“Vanilla.imageset”);

2、初始化鼠标的图像。名称为MouseArrow的鼠标图像，就是包含在Vanilla.imageset中，所以我们必须先要执行第一步。（这一步不是必须的）

System::getSingleton().setDefaultMouseCursor(&taharezImages->getImage("MouseArrow"));  

3、通过FontManager getSingleton来装载字体。

FontManager::getSingleton().createFont("Commonwealth-10.font");

4、通过WidgetLookManager getSingleton来装载looknfeel。之后Vanilla.looknfeel中的Widgets就可以在程序中使用了。

WidgetLookManager::getSingleton().parseLookNFeelSpecification("Vanilla.looknfeel");    

5、使用SchemeManager getSingleton()来装载VanillaSkin.scheme文件来注册Vanilla Widgets组件。

SchemeManager::getSingleton().loadScheme("VanillaSkin.scheme"); 

在此系统的初始化操作已经完成了。我们就可以在CEGUI中创建UI元素了。

而在 CEGUI 中，所有的 window 都是由 WindowManager singleton object 来统一创建的。我们首先得到这个对象：
using namespace CEGUI;
WindowManager& wmgr = WindowManager::getSingleton();

一般来讲，我们总是创建一个 DefaultWindow 来做为我们将使用的窗口的 Root, 在这种方式下，我们会有比较好的灵活性。
Window* myRoot = wmgr.createWindow(“DefaultWindow”, “root”);
System::getSingleton().setGUISheet(myRoot); //安装myRoot作为GUI的底层元素。
createwindows() 函数所使用的第一个参数，指明了将要创建的窗口类型，它一般是在我们使用的 .scheme 文件中所注册过的，当然还有一些系统定义的，总是有效的窗口类型如上面所提到的 DefaultWindow.DefualtWindow 是不可见的，它只是做为所有窗口的 root 来使用。

一般我们总是要创建一个 Framewindow, 它可以包括其他窗口与 widget ，本身也是可视的。
FrameWindow* fWnd = (FrameWindow*)wmgr.createWindow(“TaharezLook/FrameWindow”, “testWindow”);
之后，我们将创建的窗口挂到 root 上，形成一个层次关系。
myRoot->addChildWindow(fWnd);

myRoot->addChildWindow(winMgr.loadWindowLayout("VanillaWindows.layout"));注意这种方法就直接装载celayouteditor生成的.layout文件，把.layout生成的图像直接挂到root上。

 CELayoutEditor使用流程：

1、 File->New,生成一个界面布局框，这个框就是.layout文件的最底层root。

2、 在Main Dialog窗口点击Add Window按钮，生成一个Add Window窗口。

3、 在这里你可以命名你想新建控件的名称和选择你想添加的控件。

假如我填写了”Frame”，和选择了widgets->TaharezLook->FrameWindow，接着点击OK按钮，就会在布局框里生成一个Frame的控件。

假如你想在在Frame控件下添加其他控件的话，就继续点击Main Dialog窗口的Add Window窗口来继续添加窗口。

如果你想在上一层上继续添加窗口的话，就在Main Dialog窗口中点击root字样，返回上一层，然后你就可以点击Add Window，在root层下添加窗口了。

如此类推，你就可以建立起一个具有层次关系的UI图了。如下图所示：

其层次关系图如下图所示： 

4、File->Save，就会弹出一个Save as对话框，把文件保存为.layout格式。