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格式。

posted @ 2013-01-14 11:06  冷夜 - 网游编程技术  阅读(4840)  评论(0编辑  收藏  举报