CEGUI：LookNFeel .

LookNFeel：CEGUI控件外观文件。

 

CEGUI提供了一些定义好的控件：按钮、列表、文本框。

要使用这些控件，我们必须为其提供一些基本的外观属性信息。

比如一个按钮，它有几种显示状态：通常、获得焦点、按下、禁用。而每一种状态下都有各自的位置、大小属性。

LookNFeel都是为了定义这些属性而存在的。下面做简单的介绍。

 

在开始之前，你首先要了解CEGUI使用的坐标系统：统一坐标系统

 

相对坐标、绝对坐标：  事实上我们在为窗口定义位置属性的时候，系统用的都是绝对坐标。相对坐标只是允许我们提供一个scale，系统会自动使用这个值为进行绝对坐标的计算。

 

统一坐标系统：CEGUI在定义窗口位置和大小的时候，同时使用了这两种坐标表示法来表示。

 

1、UDim：它用来表示一个数值。

scale：相对坐标，读取父窗口坐标值，在父坐标值的基础上，按传入的参数进行比例计算。

offset：在参数1计算后的结果上，再以传入的数值进行位置偏移。

 

例子可以以表示为，以父窗口的60%的位置上偏移10个单位。如果读取的父窗口的数值为100，则为 100*0.6+10 = 70。虽然它的最终位置会随着父窗口的位置移动，但一定会有一个10个单位的偏移。

 

2、UVector2：表示一个点，我们都知道，在平面上一个点要由x、y两个数值来表示。

{{''x-scale'',''x-offset''},{''y-scale'',''y-offset''}}   例:   {{1,0},{1,0}}

 

第一个点为X，第二个点为Y。像例子中那样传参数，那么你定义的点人位置，在父窗口的右下角。

 

3、URect：表示一个矩形区域。URect用两个点来描述一个矩形。分别是一个矩形的左上角和右下角。表示右下角的两个数值，可以看作是宽度和高度值。这与一般的二维图形库中的Rect的定义并没有什么不同，只是使用UDim来计算每个点。

{{ls,lo},{ts,to},{rs,ro},{bs,bo}}   例1: {{0,0},{0,0},{1,0},{1,0}}   例2：{{0,10},{0,10},{1,-10},{1,-10}}

如果按例子1中的数值传参，会得到一个与父窗口完全重合的窗口。

例子2会在父窗口的基础上，留下10个单位的边框。

 

LookNFeel XML标签

 

CEGUI通过读取XLM文件，来读取LookNFeel的各种属性信息。定义这些属性标签并不困难，只要熟悉了每个标签的意义就可以了。和写XHTML没多大的不同。

 

以下，通过一个简单的例子来演示LookNFeel的基本用法。这个例子使用staticimage控件来演示。很简单，他只渲染一张图片，不处理任何的用户键盘或鼠标行为。

 

你可以把这段代码加入到你的lookNFeel中去。更改一下<ImageDim>与＜Image＞里的imageset与image的属性。用你自己定义的图片。这段代码会自动读取你定义的图片的宽度与高度信息。

[xhtml] view plain copy print ?

1. <FalagardMapping WindowType="MYUI/PlayerProperty"      TargetType="DefaultWindow"  Renderer="Falagard/StaticImage"       LookNFeel="MYUI/PlayerPanelLeft" />  

<FalagardMapping WindowType="MYUI/PlayerProperty" TargetType="DefaultWindow" Renderer="Falagard/StaticImage" LookNFeel="MYUI/PlayerPanelLeft" />

 

 

 

[xhtml] view plain copy print ?

1. <!--  
2.   **************************************************  
3.       MYUI/PlayerPanel  
4.   **************************************************  
5. -->  
6. <WidgetLook name="MYUI/PlayerPanelLeft">  
7.   <ImagerySection name="main">  
8.     <ImageryComponent>  
9.       <Area>  
10.         <Dim type="LeftEdge">  
11.           <AbsoluteDim value="0" />  
12.         </Dim>  
13.         <Dim type="TopEdge">  
14.           <AbsoluteDim value="0" />  
15.         </Dim>  
16.         <Dim type="RightEdge">  
17.           <ImageDim imageset="MYUI" image="PlayerPanelLeft" dimension="Width" />  
18.         </Dim>  
19.         <Dim type="BottomEdge">  
20.           <ImageDim imageset="MYUI" image="PlayerPanelLeft" dimension="Height" />  
21.         </Dim>  
22.       </Area>  
23.       <Image imageset="MYUI" image="PlayerPanelLeft" />  
24.     </ImageryComponent>        
25.   </ImagerySection>  
26.   <StateImagery name="Enabled">  
27.     <Layer>  
28.       <Section section="main">  
29.       </Section>  
30.     </Layer>  
31.   </StateImagery>  
32.   <StateImagery name="Disabled">  
33.     <Layer>  
34.       <Section section="main" />  
35.     </Layer>  
36.   </StateImagery>  
37. </WidgetLook>  

<!-- ************************************************** MYUI/PlayerPanel ************************************************** --> <WidgetLook name="MYUI/PlayerPanelLeft"> <ImagerySection name="main"> <ImageryComponent> <Area> <Dim type="LeftEdge"> <AbsoluteDim value="0" /> </Dim> <Dim type="TopEdge"> <AbsoluteDim value="0" /> </Dim> <Dim type="RightEdge"> <ImageDim imageset="MYUI" image="PlayerPanelLeft" dimension="Width" /> </Dim> <Dim type="BottomEdge"> <ImageDim imageset="MYUI" image="PlayerPanelLeft" dimension="Height" /> </Dim> </Area> <Image imageset="MYUI" image="PlayerPanelLeft" /> </ImageryComponent> </ImagerySection> <StateImagery name="Enabled"> <Layer> <Section section="main"> </Section> </Layer> </StateImagery> <StateImagery name="Disabled"> <Layer> <Section section="main" /> </Layer> </StateImagery> </WidgetLook>

 

 

<WidgetLook name="MYUI/PlayerPanelLeft"> </WidgetLook>

每一个控件外观的定义，都要放在这个标签对中。

还记得Scheme的定义吗？

 

<WidgetLook >的name就是与LookNFeel对应的。

 

跳过中间的标签，看下面的 <StateImagery name="Enabled"></StateImagery>标签。

Scheme中<FalagardMapping>的Rendererr属性定义了窗口的渲染方式。

而系统就是通过<StateImagery>与之前行连接。

 

而哪一种Render需要用到哪些<StateImagery>，官方提供了详细的说明，我们在使用的时候，只要查找并给于相应的定义就可以以了。

http://cegui.org.uk/docs/current/fal_man.html

 

<ImagerySection name="main"> </ImagerySection>这个标签对就是为<StateImagery>提供渲染所用的具体属性信息的。

 

 

UDim：{''scale'',''offset''}  例： {0.6,10}