中级教程九 - OGRE 3D 中文

2012-2-26
文档:教程:中级教程:中级教程九 - OGRE 3D 中文
Page 2 of 7
CEGUI通过“OgreGUIRenderer”类与Ogre进行结合。这个类所在文件存放在Ogre的“Samples”文件夹 下，然而却定义在“CEGUI”命名空间内。OgreGUIRenderer简单的取得了CEGUI中的一些绘制命令， 并将这些命令转译成Ogre中的网格和材质数据，并将其放置到"层渲染队列（Overlay render queue）"中，通过这种手段Ogre就可以对其进行绘制了.同时，这样可以使UI在我们的渲染场景中永远 处于近屏顶端。 在我们的程序代码中，我们除了提供一个OgreGUIRenderer类的实体对象给CEGUI，其他的渲染相关 部分我们不用操心。
接下来,看编码
CEGUI
在本文中我们将准备把CEGUI整合到实际开发项目中。 这个版本的代码将告别VC71项目，并采用VC8（Visual C++2005）项目。实际上，自我工作以来，一 直到最近我都一直使用VC71。那些使用VC71的朋友应该有足够的经验把VC71的项目转移到VC8上---这是非常简单直接的事情。 这个例子的代码是基于Ogre1.4.x版本的----另外，如果你使用Ogre1.2.x版本，你可能会发现下面的例 子是需要修改一些问题才能顺利运行的。这是因为这1.4.x版本的Ogre消息泵（message pump）有一些 变动，另外OIS库本身也有些更变了。总之，下面的例子代码最好能够使用OgreSDK1.4.1进行编译测 试。 CEGUI是一个2D的UI渲染库。它支持大部分渲染引擎，不仅支持Ogre，也同样的支持OpenGL和 Irrlicht引擎. 它同时又是基于XML脚本文件格式应用的一个重量级库。当然，你可以在你的代码中定义所有的UI 信息，但如果你在使用XML文件进行UI文件的定义也会非常简单，CEGUI也能够在运行时对这些 XML文件进行读取和分析。CEGUI本身有一些例子和支持这些例子的资源。你可以看一看这些例子 中是如何使用XML脚本文件，如何进行UI单元的定义的。也可以去看看例子中的 .layout 文件和 .xsd 文件，这些会对你学习CEGUI有所帮助。当然，你可能需要在自己的程序中自定义一些UI组件。但 是，很遗憾，自定义组件已经出了本文的讲解范围。请到CEGUI官方获得更多信息。
CEGUI数据文件
说起来，你可能能够在代码中完美的进行你的UI层的定义。但是用以下几种XML文件做为CEGUI的 配置方法将会更加简单和高效。这些文件包括”scheme”, ”looknfeel”, ”layout”, ”imagesets”和CEGUI显 示使用的文字”font”。
Scheme 定义着在同一个配置下不同的有效UI元件。例如. 我们程序中需要使用的一些按钮Buttons,下拉选菜单ListBoxes等等UI元件都能 Look-And-Feel 定义着每个需要显示的UI元件的各种属性，包括了它的纹理，颜色，状态属性等。我们可以查看 .looknfeel文件。 Layout 定义了UI元件的父层级关系，位置，大小等与其他UI元件可能联系到的属性。我们可以查看 .layout 文件。 Imageset 定义了一种配置下的纹理，UV值等信息，我们可以查看 .imageset 文件。 font 显而易见。CEGUI需要知道我们程序中使用的文字纹理类型，纹理清晰度等信息这些都记录在 . font 文件中。
2012-2-26
文档:教程:中级教程:中级教程九 - OGRE 3D 中文
Page 3 of 7
际上很简单。在Ogre的Debug文件夹下resource目录下有个压缩包是gui.zip，你在里面会发现一个文件 叫”yout”，下面是该文件的全部内容：
<?xml version="1.0" ?> <GUILayout> <Window Type="TaharezLook/FrameWindow" Name="Main"> <Property Name="UnifiedAreaRect" Value="{{0.0,0},{0.0,0},{1.0,0},{1.0,0}}" /> <Property Name="FrameEnabled" Value="false" /> <Property Name="TitlebarEnabled" Value="false" /> <Property Name="CloseButtonEnabled" Value="False" /> <Window Type="TaharezLook/Button" Name="cmdQuit"> <Property Name="Text" Value="Quit" /> <Property Name="UnifiedAreaRect" Value="{{0.4,0},{0.7,0},{0.6,0},{0.77,0}}" /> </Window> <Window Type="TaharezLook/Button" Name="cmdOptions"> <Property Name="UnifiedAreaRect" Value="{{0.4,0},{0.6,0},{0.6,0},{0.67,0}}ห้องสมุดไป่ตู้ /> <Property Name="Text" Value="Options" /> </Window> <Window Type="TaharezLook/Button" Name="cmdInstantAction"> <Property Name="UnifiedAreaRect" Value="{{0.4,0},{0.5,0},{0.6,0},{0.57,0}}" /> <Property Name="Text" Value="Instant Action" /> </Window> </Window> </GUILayout>
文档:教程:中级教程:中级教程九 - OGRE 3D 中文
Page 1 of 7
文档:教程:中级教程:中级教程九
From OGRE 3D 中文
我想，迟到总比没到好。（译者：作者这句话意思大约是说，这篇文章虽然发布的晚了些，但是总比 完全没有CEGUI这方面的教程好。）
目录
■ 1 CEGUI ■ 1.1 UI的渲染 ■ 1.2 输入系统和CEGUI ■ 1.3 CEGUI数据文件 ■ 2 编码 ■ 2.1 数据 ■ 2.2 接下来,看编码 ■ 2.2.1 初始化CEGUI ■ 2.2.2 CEGUI的输入支持 ■ 3 结束语 ■ 4 下载这些代码
你在浏览这些代码的时候，首先可能发现里面那些神秘的数字。在CEGUI 0.5.x版本中，UI元件需要 定义的是UI元件的绝对尺寸大小。而在这个layout文件中，我们使用的是统一的相对尺寸范围。Value =”” 中定义了元件的左，右，上，下点的位置。但这个位置我们既可以定义这些点的绝对位置，也可 以是定义这些点针对其父容器UI元件的相对位置。例如，下面这个UI元件的区域定义：
{{0.4,0},{0.5,0},{0.6,0},{0.57,0}}
这些数值告诉了CEGUI，这个UI元件在其上一层元件容器中的相对位置和大小。 如本例，这个元件左上角将距离其上一层元件容器的左上角的右偏移距离为 （0.4 * 上一层元件容器 宽度），这个元件左上角将距离其上一层元件容器的左上角的下偏移距离为 （0.5 * 上一层元件容器 高度）。该UI元件宽度将为(（0.6 – 0.4）* 上一层元件宽度 )大小，高度将为( (0.57 – 0.5) * 上一层元 件告诉 )大小。 那么，那些参数中的”0”是什么意义呢？如果你想同时指定UI元件的绝对象素位置的话，可以把这些” 0”替换为该元件的象素位置。所以这就意味着，你能够根据自己喜好，为UI元件设置相对坐标或者象 素的绝对坐标。我想不起来指定象素绝对坐标时这些数值的意义，如果谁看到本例并且知道这些绝对 坐标数值意义的话，请帮助补充到本文中。：）不过，如果谁是曾经做过网页的话，将会非常熟悉这 些绝对坐标的意义和顺序，因为这俩完全是一个东西。 (补充：译者推荐在游戏制作中使用相对坐标，这样的话在对窗口缩放或对单一UI窗口缩放时会容易 的避免一些问题。) 在上面的这个Layout文件中，第一行告诉CEGUI，我们想创建一个顶层的窗口”Main”，而且这个窗口 大小是占满整个程序显示区----它的相对宽高是(1.0 - 0.0 )。我们不希望看到它的标题栏，也不希望看 到这个顶层窗口右上边的关闭按钮和其边框。于是，下面我们设置他们的Value为false。（这三项是 FrameWindow框架窗口默认存在的捆绑控件）。 接下来，我们在屏幕中放置三个按钮----这样的话，在我们运行程序的时候将会从上到下见到“Instant Action”“Options”“Quit”三个按钮。按钮控件的名称属性是非常重要的，这是我们在代码中获取该控件 行为的唯一标识，这点我们一会就会见到。
数据
首先，我们来看一下CEGUI中至关重要的数据文件---Layout文件。你可以通过CEGUI的Layout编辑器 来生成和编辑该文件，但是在本例中下面这个XML格式的 .layout 文件完全是我手动编写出来的，实