Falagard skinning system for CEGUI参考手册简单翻译（一）

最新推荐文章于 2019-07-26 07:32:58 发布

halibobo520

最新推荐文章于 2019-07-26 07:32:58 发布

阅读量2.1k

点赞数

分类专栏： CEGUI 文章标签： system image components attributes xml reference

本文链接：https://blog.csdn.net/halibobo520/article/details/5817504

版权

CEGUI 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

声明：转自http://blog.csdn.net/powerkoria/archive/2008/03/31/2232283.aspx 谢谢他

What is the Falagard Skinning System
什么是 falagard skinning system?
falagard 皮肤系统是CEGUI基础库的一套组成部分，是一个编译于CEGUIFalagardBase “查看模样“模块的
一部分。这些元素目的是为了似的创建自定义皮肤或看起来就是那样子的CEGUI或其他窗口部件
falagard系统被设计成允许部件肖像定义，子部件布局和默认属性初始化,通过一个特殊的XML文件实现，
不但在c++实现而且在脚本里实现。
Falagard 扩展并不仅限于'looknfeel' xml文件,他允许在核心库里的元素也允许扩展为CEGUI 模式系统，
允许你从根本上创建新的窗口部件类型，通过影射部件到一个来自CEGUIFalagardBase module的部件类型
一旦你的新类型部件被定义在一个scheme文件里并且被装载，你可以在WindowManager singleton 创建
window或widgets时指定新类型名字，同样你可以这样使用他部件类型。使用旧的程序方式编写部件类型和
皮肤方式的部件，不需要有任何顾虑。

The Unified Co-ordinate System
统一联合坐标系统

UDim
统一系统的基本构建块，描述一个单一尺寸
UDim(scale,offset)
scale 描述父元素的比例，值为 0-1.0之间，是个百分比值。
在预统一系统中scale协调相对关系
offset 描述象素值，对于位置值，offset描述一个象素偏移量;对于大小尺寸值，
offset描述了附加的象素尺寸;在预统一系统中offset协调绝对关系

UDim Property Format
UDim 属性格式
{s,o}

UVector2 定义
UVector2(x_udim,y_udim)
由两个UDim元素组成
通常用于一起描述位置和大小,即一个UVector2就可以算出位置和大小

'x_udim'
is a UDim value that specifies the x co-ordinate or width.
'y_udim'
is a UDim value that specifies the y co-ordinate or height.

UVector2(UDim(1.0,-25),UDim(1.0,-25))
This example, intended as a size for a window, would give the window the same width as its parent, minus 25 pixels, and the same height as its parent, minus 25 pixels.
如果作为一个窗口的尺寸，将设置为
width 宽为父窗口尺寸的100%-25个象素
height 高为父窗口迟寸的100%-25个象素

UVector2 Property Format
属性格式：
{{sx,ox},{sy,oy}}

URect
最后一个联合坐标类型是URect
URect使用UDim元素来描述了一个矩形的四条边

URect(left_udim,top_Udim,right_udim,bottom_udim)

'left_udim'
is a UDim defining the left edge.
'top_udim'
is a UDim defining the top edge.
'right_udim'
is a UDim defining the right edge.
'bottom_udim'
is a UDim defining the bottom edge

每条边使用一个UDim元素来描述

属性格式为：
{{sl,ol},{st,ot},{sr,or},{sb,ob}}

窗口排列：
垂直方向排列
VerticalAlignment
enum VerticalAlignment{
VA_TOP,
VA_CENTER,
VA_BOTTOM
};

属性格式设置：
"Top"
"Center"
"Bottom"

水平方向排列
HorizontalAlignment
enum HorizontalAlignment{
HA_LEFT,
HA_CENTER,
HA_RIGHT
};

属性格式设置：
"Left"
"Center"
"Right"

Falagard in Schemes
The CEGUIFalagardWRBase module

指定渲染器

LookNFeel Elements
looknfeel元素
格式如：
<LookNFeel Filename="TaharezLook.looknfeel" />
这个looknfeel元素的位置必须在
after any Font or Imageset elements, but before any WindowSet elements

即 font ,imageset之后，windowset元素之前

FalagardMapping Elements
影射元素
如：
<FalagardMapping
WindowType="TaharezLook/Button"
TargetType="CEGUI/PushButton"
Renderer="Falagard/Button"
LookNFeel="MyButtonSkin"
/>

FalagardMapping 创建一个新的具体的窗口或控件widgets
上面的影射意思是：
创建了一个WindowType 名字为 "TaharezLook/Button" ，基于 "CEGUI/PushButton" 类型
采用CEGUIFalagardWRBase渲染器中名为 "Falagard/Button"的渲染方法，外表为"MyButtonSkin"
的影射

创建时使用
neww=CEGUI:WindowManager::GetSingleton()->createWindow("TaharezLook/Button","newwindow")
表示创建了一个newwindow名字的窗口控件，这个控件采用影射里的"TaharezLook/Button"类型

WindowType 设置定义的影射名
TargetType 设置CEGUI Widgets 基础类型
Renderer 设置widgets的窗口渲染器
LookNFeel 设置skin配置名

介绍
looknfeel xml文件

一个空的skin 为：
<? xml version="1.0" >
<Falagard>
</Falagard>

looknfeel文件里是对widgets进行skin设置
空的skin文件里首先添加wigetlook配置

<? xml version="1.0" >
<Falagard>
<WidgetLook name="TaharezLook/Button">

</WidgetLook>
</Falagard>

然后从对应的scheme文件里查看这个name的影射
<FalagardMapping
WindowType="TaharezLook/Button"
TargetType="CEGUI/PushButton"
Renderer="Falagard/Button"
LookNFeel="MyButtonSkin"
/>

知道他的Renderer为 "Falagard/Button"

查看"Falagard/Button" 的手册中可知，
我们需要指定4个状态，这四个状态为：
Normal
Hover
Pushed
Disabled
如查询的结果为：
Falagard/Button
General purpose push button widget class.

Assigned WidgetLook should provide the following:

StateImagery definitions (missing states will default to 'Normal'):

Normal - Imagery used when the widget is neither pushed nor has the mouse hovering over it.
Hover - Imagery used when the widget is not pushed and has the mouse hovering over it.
Pushed - Imagery used when the widget is pushed and the mouse is over the widget.
PushedOff - Imagery used when the widget is pushed and the mouse is not over the widget.
Disabled - Imagery used when the widget is disabled

然后针对每个状态，设置状态标象stateimagery

<? xml version="1.0" >
<Falagard>
<WidgetLook name="TaharezLook/Button">
<Stateimagery name="Normal" >
</Stateimagery>
<Stateimagery name="Hover" >
</Stateimagery>
<Stateimagery name="Pushed" >
</Stateimagery>
<Stateimagery name="PushedOff" >
</Stateimagery>
<Stateimagery name="Disabled" >
</Stateimagery>
</WidgetLook>

</Falagard>

然后要创建一些： imagerysection 这些section 将被放到stateimagery 中

如：
<ImagerySection name="label">
            <TextComponent>
                <Area>
                    <Dim type="LeftEdge"><AbsoluteDim value="0" /></Dim>
                    <Dim type="TopEdge"><AbsoluteDim value="0" /></Dim>
                    <Dim type="Width"><UnifiedDim scale="1" type="Width" /></Dim>
                    <Dim type="Height"><UnifiedDim scale="1" type="Height" /></Dim>
                </Area>
                <VertFormatProperty name="VertLabelFormatting" />
                <HorzFormatProperty name="HorzLabelFormatting" />
            </TextComponent>
</ImagerySection>

放入到 stateimagery 中为：
<StateImagery name="Normal">
            <Layer>
                <Section section="normal" />
                <Section section="label">
                    <ColourProperty name="NormalTextColour" />
                </Section>
            </Layer>
</StateImagery>

因此上面综合变为：
<? xml version="1.0" >
<Falagard>
<WidgetLook name="TaharezLook/Button">
<ImagerySection name="label">
            <TextComponent>
                <Area>
                    <Dim type="LeftEdge"><AbsoluteDim value="0" /></Dim>
                    <Dim type="TopEdge"><AbsoluteDim value="0" /></Dim>
                    <Dim type="Width"><UnifiedDim scale="1" type="Width" /></Dim>
                    <Dim type="Height"><UnifiedDim scale="1" type="Height" /></Dim>
                </Area>
                <VertFormatProperty name="VertLabelFormatting" />
                <HorzFormatProperty name="HorzLabelFormatting" />
            </TextComponent>
</ImagerySection>

在每个 imagerysection 中定义 ImageyComponent,FrameComponent,TextComponent等标签

第一件事在ImageyComponent,FrameComponent,TextComponent等标签里定义Area 来画具体的区域内容
The first thing we need to add to the ImageryComponent is an area definition telling the system where this image should be drawn
<ImagerySection name="normal">
<ImageryComponent>
<Area>
<Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
<Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
</Area>
</ImageryComponent>
<FrameComponent>
<Area>
<Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
<Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
</Area>
</FrameComponent>
</ImagerySection>

这些标签都可以在 <Falagard skinning system for CEGUI>.chm
中的 Falagard XML Element Reference 这一节中查到
We'll start by placing the image for the left end of the button. This is the simplest component to place,
since its position is known as being (0, 0).
下面Area配置为把图象显示在左边(0,0)位置

<ImagerySection name="normal">
<ImageryComponent>
<Area>
<Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
<Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
</Area>
</ImageryComponent>
<FrameComponent>
<Area>
<Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
<Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
</Area>
</FrameComponent>
</ImagerySection>

指定了左边放置位置后，指定宽高设置,宽度来自图片的宽度
指定了图片宽度，所以要在ImageryComent 标签内添加上Image的标签来引入imageset内容

<ImagerySection name="normal">
<ImageryComponent>
<Area>
<Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
<Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
<Dim type="Width" >
<ImageDim imageset="imagesetname" image="imagename" dimension="Width" />
</Dim>
<Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
</Area>
<Image imageset="imagesetname" image="imagename" />
</ImageryComponent>
<FrameComponent>
<Area>
<Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
<Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
</Area>
</FrameComponent>
</ImagerySection>

同时再指定水平排列和垂直排列格式
<VertFormat type="Stretched" />
<HorzFormat type="RightAligned"/>

可以通过DimOperator 标签来对Dim标签的值进行 +,- *,/

############################################
Falagard XML Element Reference
XML 元素参考
每一个元素按照下面4个方面描述：
Purpose:
This section describes what the elements general purpose is within the specifications.

Attributes:
This section describes available attributes for the elements, and whether they are required or optional.

Usage:
Describes where the element may appear, whether the element may have sub-elements, and other important usage information.

Examples:
For many elements, this section will contain brief examples showing the element used in context.

具体元素参考
<AbsoluteDim> Element

目的：
定义一个矩形区域的组成尺寸或定义个一个尺寸的绝对象素大小
属性：
value：提供象素数字。必要属性
用途：
1) 作为<DimOperator>标签元素的尺寸计算
2) 作为<Dim>的子元素描述一个区域
3) 作为<DimOperator>标签元素的子元素来计算尺寸
例子：
1)
<Area>
   <Dim type="LeftEdge" >
     <AbsoluteDim value="10" />
   </Dim>
   <Dim type="TopEdge" >
     <AbsoluteDim value="50" />
   </Dim>
   <Dim type="Width" >
     <AbsoluteDim value="290" />
   </Dim>
   <Dim type="Height" >
     <AbsoluteDim value="250" />
   </Dim>
</Area>

2)
<Area>
    <Dim type="LeftEdge" >
      <WidgetDim widget="myWidget" dimension="Width" >
        <DimOperator op="Subtract" >
          <AbsoluteDim value="2" />
        </DimOperator>
      </WidgetDim>
    </Dim>
    ...
</Area>
3)
<Area>
    ...
    <Dim type="Height" >
      <AbsoluteDim value="6">
        <DimOperator op="Add" >
          <PropertyDim name="someHeightProperty" />
        </DimOperator>
      </AbsoluteDim>
    </Dim>
</Area>

<Area> Element
区域元素
目的：
Area 是一个<DIM>元素的容器，或者一个<AreaProperty>元素
为了组成一个矩形区域
通常是一个渲染图象的目标区域，一个放置子控件或或者组成由基础控件的名字区域
属性：
没有其他属性

使用：
<Area> 必须包含下面任意一个：
1)单一的<AreaProperty> 元素，这个元素描述一个URect type property
2)4个UDim元素
One <Dim> element must define the left edge or x position.
One <Dim> element must define the top edge or y position.
One <Dim> element must define either the right edge or width.
One <Dim> element must define either the bottom edge or height.
<Area>元素可以出现下面的元素中
<Child> to define the target area to be occupied by a child widget.
<ImageryComponent> to define the target rendering area of an image.
<NamedArea> to define an area which can be retrieved by name.
<TextComponent> to define the target rendering area of some text.
<FrameComponent> to define the target rendering area for a frame.

例子：
<NamedArea name="exampleArea" >
    <Area>
        <Dim type="LeftEdge"><AbsoluteDim value="0" /></Dim>
        <Dim type="TopEdge"><AbsoluteDim value="0" /></Dim>
        <Dim type="Width"><UnifiedDim scale="1.0" /></Dim>
        <Dim type="Height"><UnifiedDim scale="1.0" /></Dim>
    </Area>
</NamedArea>

<AreaProperty> Element
<AreaProperty>元素
目的：
提供一个属性到目标窗口上给系统访问来确定最终目标区域的详细定义
属性：
name
给访问属性提供一个名字
用法：
1）本身不能存在子元素
2) 可以作为<Area>的子元素
例子：
无

<Child> Element
目的：
<Child>定义了控件的组成，控件被创建和加到由<WidgetLook>定义的任意窗口中
某些基本控件必须提供<Child>元素
属性：
type 提供创建的widget type类型，必要属性
namesuffix 名字后缀，创建时加到type后,必要属性
look 仅在指定falagard基础控件时需要，可选属性
用法：
1) <Child>元素必须包含一个 <Area>元素
2) 可选方式指定单一<VertAlignment> 元素
3) 可选方式指定单一<HorzAlignment> 元素
4) 指定<Property>元素设置默认值到支持的<Child> 元素上
5) <Child>只出现在<WidgetLook>元素里

例子：
<WidgetLook name="TaharezLook/FrameWindow">
...
<Child type="TaharezLook/Titlebar" nameSuffix="__auto_titlebar__">
    <Area>
      <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
      <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
      <Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
      <Dim type="Height" >
        <FontDim type="LineSpacing">
          <DimOperator op="Multiply">
            <AbsoluteDim value="1.5" />
          </DimOperator>
        </FontDim>
      </Dim>
    </Area>
    <Property name="AlwaysOnTop" value="False" />
</Child>
...
</WidgetLook>

<ColourProperty> Element
目的：
<ColourProperty> 元素提供一个让系统访问目标窗口的颜色信息通常在画某部分组成
属性：
name
指定一个属性名字提供访问，这个名字必须可访问一个colour value 颜色值, 必要属性
用法：
1) <ColourProperty> 不存在子元素
2) <ColourProperty> 可作为下面元素的子元素
<ImageryComponent> to specify a modulating colour to be applied when rendering the image.
<ImagerySection> to specify a modulating colour to be applied to all imagery components within the imagery section as it is rendered.
<Section> to specify a modulating colour to be applied to all imagery in the named section as it is rendered.
<TextComponent> to specify a colour to use when rendering the text component.
<FrameComponent> to specify a colour to use when rendering the text frame

例子：
<PropertyDefinition name="NormalTextColour" initialValue="FF607FFF" redrawOnWrite="true" />
<StateImagery name="Normal">
   <Layer>
     <Section section="normal" />
     <Section section="label">
       <ColourProperty name="NormalTextColour" />
     </Section>
   </Layer>
</StateImagery>

<ColourRectProperty> Element
目标：
<ColourProperty> 元素提供一个让系统访问目标窗口的颜色信息通常在画某部分目标区域
属性：
name
指定一个属性名字提供访问，这个名字必须可访问一个ColourRect value 颜色区域值, 必要属性
用法：
1) <ColourRectProperty> 不存在子元素
2) 可作为下面元素的子元素
<ImageryComponent> to specify a modulating colour to be applied when rendering the image.
<ImagerySection> to specify a modulating colour to be applied to all imagery components within the imagery section as it is rendered.
<Section> to specify a modulating colour to be applied to all imagery in the named section as it is rendered.
<TextComponent> to specify a colour to use when rendering the text component.
<FrameComponent> to specify a colour to use when rendering the text frame

例子：
<PropertyDefinition name="BackgroundColours" initialValue="tl:FFDFDFDF tr:FFDFDFDF bl:FFDFDFDF br:FFDFDFDF" redrawOnWrite="true" />
<StateImagery name="SpecialState">
<Layer>
    <Section section="special_main">
      <ColourRectProperty name="BackgroundColours" />
    </Section>
</Layer>
</StateImagery>

<Colours> Element
目标：
<Colours> 准确指定一个ColourRect区域的颜色信息
属性：
topLeft
specifies a hex colour value, of the form ?AARRGGBB?, to be used for the top-left corner of the ColourRect. Required attribute.
topRight
specifies a hex colour value, of the form ?AARRGGBB?, to be used for the top-right corner of the ColourRect. Required attribute.
bottomLeft
specifies a hex colour value, of the form ?AARRGGBB?, to be used for the bottom-left corner of the ColourRect. Required attribute.
bottomRight
specifies a hex colour value of the form ?AARRGGBB?, to be used for the bottom-right corner of the ColourRect. Required attribute
用法：
1) 没有子元素
2）可作为如下元素的子元素
<ImageryComponent> to specify a modulating ColourRect to be applied when rendering the image.
<ImagerySection> to specify a modulating ColourRect to be applied to all imagery components within the imagery section as it is rendered.
<Section> to specify a modulating ColourRect to be applied to all imagery in the named section as it is rendered.
<TextComponent> to specify a ColourRect to use when rendering the text component.
<FrameComponent> to specify a colour to use when rendering the text frame.

例子：
<ImageryComponent>
   <Area>
     <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
     <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
     <Dim type="Width" ><AbsoluteDim value="12" /></Dim>
     <Dim type="Height" ><AbsoluteDim value="24" /></Dim>
   </Area>
   <Image imageset="newImageset" image="FunkyComponent" />
   <Colours
     topLeft="FFFFFF00"
     topRight="FFFFFF00"
     bottomLeft="FFFFFF00"
     bottomRight="FFFFFF00"
   />
   <VertFormat type="Stretched" />
   <HorzFormat type="Stretched" />
</ImageryComponent>

<Dim> Element
目标：
<Dim>作为一个矩形区域尺寸的容器
属性：
type
指定定义的尺寸类型，具体类型如下
用法：
1) <Dim> 只允许出现在<Area>中
2) 可以存在以下尺寸元素
<AbsoluteDim>
<FontDim>
<ImageDim>
<PropertyDim>
<UnifiedDim>
<WidgetDim>
例子：
无

<DimOperator> Element
目的：
<DimOperator> 允许你通过简单的数学操作组合两个不同的尺寸元素。由于
尺寸通常用于二次回滚计算，所以可以创造出各种复杂的操作
属性：
op
指定一个DimensionOperator的标志值。必要属性
用法：
1）一个<DimOperator>元素可以作为子元素出现在下面元素中
<AbsoluteDim>
<FontDim>
<ImageDim>
<PropertyDim>
<UnifiedDim>
<WidgetDim>
2) 一个<DimOperator>元素可以包含下面的元素
<AbsoluteDim>
<FontDim>
<ImageDim>
<PropertyDim>
<UnifiedDim>
<WidgetDim>
例子：
<AbsoluteDim value="10">
   <DimOperator op="Multiply">
     <AbsoluteDim value="4" />
   </DimOperator>
</AbsoluteDim>
表示 10 * 4

<AbsoluteDim value="2">
   <DimOperator op="Multiply">
     <AbsoluteDim value="4">
       <DimOperator op="Add">
         <FontDim type="LineSpacing" />
       </DimOperator>
     </AbsoluteDim>
   </DimOperator>
</AbsoluteDim>
表示 (2 * (4 + LineSpacing)) 而不是 ((2 * 4) + LineSpacing)

<Falagard> Element

目的：
作为 skin file的根元素。包含了多个<WidgetLook>元素
属性：
没有
用法：
1) 作为 skin file的根元素
2) 可包含多个<WidgetLook>元素
3）没有任何元素可以将<Falagard>作为子元素

例子：
<?xml version="1.0" ?>
<Falagard>
   <WidgetLook name="TaharezLook/Button">
     ...
   </WidgetLook>
   <WidgetLook ... >
     ...
   </WidgetLook>
   ...
</Falagard>

<FontDim> Element
目的：
<FontDim>元素主要用于度量一个字体，作为一个矩形区域的组成
属性：
widget 可选属性
描述一个子窗口在访问时的前缀
specifies the name suffix of a child window to access when automatically obtaining the font or text string to be used when calculating the dimension's value. The final name used to access the widget will be that of the target window with this suffix appended. If this suffix is not specified, the target window itself is used. Optional attribute.
type
必要属性
描述尺寸度量类型
specifies the type of font metric / measurement to use for this dimension. This should be set to one of the values from the FontMetricType enumeration. Required attribute.
font
可选属性
描述一个字体名
specifies the name of a font. If no font is given, the font will be taken from the target window at the time the dimension's value is taken. Optional attribute. string
For horizontal extents measurement, specifies the string to be measured. If no explicit string is given, the window text for the target window at the time the dimension's value is taken will be used instead. Optional attribute.
padding
可选属性
绝对象素添加到字体值
an absolute pixel 'padding' value to be added to the font metric value. Optional attribute.
用法：
Usage:

The <FontDim> element may contain a single <DimOperator> element in order to form a dimension calculation.
可能包含一个<DimOperator>元素用于组成尺存计算
The <FontDim> element can appear as a sub-element in <Dim> to form a dimension specification for an area.
可以作为子元素在<Dim>组成一个区域的尺寸描述
The <FontDim> element can appear as a sub-element of <DimOperator> to specify the second operand for a dimension calculation.
可以作为子元素在<Dim>组成二次计算

例子：
<Dim type="Height">
<FontDim type="LineSpacing" />
</Dim>

<FontProperty> Element
目的：
<FontProperty>元素允许系统访问目标窗口的属性，当渲染TextComponent时得到字体属性
属性：
name
必要属性
一个字体的名字

用法：
1)不可以存在子元素
2)只在<TextComponent> 元素中作为子元素存在

例子：
无