声明:转自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元素的位置必须在
after any Font or Imageset elements, but before any WindowSet elements
即 font ,imageset之后,windowset元素之前
FalagardMapping Elements
影射元素
如:
FalagardMapping 创建一个新的具体的窗口或控件widgets
上面的影射意思是:
创建了一个WindowType 名字为 "TaharezLook/Button" , 基于 "CEGUI/PushButton" 类型
采用CEGUIFalagardWRBase渲染器 中名为 "Falagard/Button"的渲染方法,外表为"MyButtonSkin"
的 影射
创建时使用
neww=CEGUI:WindowManager::GetSingleton()->createWin dow("TaharezLook/Button","newwindow")
表示创建了一个newwindow名字的窗口控件,这个控件采用影射里的"TaharezLook/Button"类型
WindowType 设置定义的影射名
TargetType 设置CEGUI Widgets 基础类型
Renderer 设置widgets的窗口渲染器
LookNFeel 设置skin配置名
介绍
looknfeel xml文件
一个空的skin 为:
looknfeel文件里是对widgets进行skin设置
空的skin文件里首先添加wigetlook配置
然后从对应的scheme文件里查看 这个name的影射
知道他的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
然后要创建一些: imagerysection 这些section 将被放到stateimagery 中
如:
放入到 stateimagery 中 为:
因此上面综合变为:
在 每个 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
这些标签都可以在 .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)位置
指定了左边放置位置后,指定 宽高设置,宽度来自图片的宽度
指定了图片宽度,所以要在ImageryComent 标签内添加上Image的标签来引入imageset内容
同时再指定水平排列和垂直排列格式
可以通过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.
具体元素参考
Element
目的:
定义一个矩形区域的组成尺寸或定义个一个尺寸的绝对象素大小
属性:
value: 提供象素数字。 必要属性
用途:
1) 作为标签元素的尺寸计算
2) 作为的子元素描述一个区域
3) 作为标签元素的子元素来计算尺寸
例子:
1)
2)
...
3)
...
Element
区域元素
目的:
Area 是一个元素的容器 ,或者一个元素
为了组成一个矩形区域
通常是一个渲染图象的目标区域,一个放置子控件或或者组成由基础控件的名字区域
属性:
没有其他属性
使用:
必须包含下面任意一个:
1)单一的 元素,这个元素描述一个URect type property
2)4个UDim元素
One element must define the left edge or x position.
One element must define the top edge or y position.
One element must define either the right edge or width.
One element must define either the bottom edge or height.
元素可以出现下面的元素中
to define the target area to be occupied by a child widget.
to define the target rendering area of an image.
to define an area which can be retrieved by name.
to define the target rendering area of some text.
to define the target rendering area for a frame.
例子:
Element
元素
目的:
提供一个属性到目标窗口上给系统访问来确定最终目标区域的详细定义
属性:
name
给访问属性提供一个名字
用法:
1) 本身不能存在子元素
2) 可以作为的子元素
例子:
无
Element
目的:
定义了控件的组成,控件被创建和加到由定义的任意窗口中
某些基本控件必须提供元素
属性:
type 提供创建的widget type类型,必要属性
namesuffix 名字后缀,创建时加到type后,必要属性
look 仅在指定falagard基础控件时需要,可选属性
用法:
1) 元素必须包含一个 元素
2) 可选方式 指定单一 元素
3) 可选方式指定单一 元素
4) 指定元素设置默认值到支持的 元素上
5) 只出现在元素里
例子:
...
...
Element
目的:
元素提供一个让系统访问目标窗口的颜色信息通常在画某部分组成
属性:
name
指定一个属性名字提供访问,这个名字必须可访问一个colour value 颜色值, 必要属性
用法:
1) 不存在子元素
2) 可作为下面元素的子元素
to specify a modulating colour to be applied when rendering the image.
to specify a modulating colour to be applied to all imagery components within the imagery section as it is rendered.
to specify a modulating colour to be applied to all imagery in the named section as it is rendered.
to specify a colour to use when rendering the text component.
to specify a colour to use when rendering the text frame
例子:
Element
目标:
元素提供一个让系统访问目标窗口的颜色信息通常在画某部分目标区域
属性:
name
指定一个属性名字提供访问,这个名字必须可访问一个ColourRect value 颜色区域值, 必要属性
用法:
1) 不存在子元素
2) 可作为下面元素的子元素
to specify a modulating colour to be applied when rendering the image.
to specify a modulating colour to be applied to all imagery components within the imagery section as it is rendered.
to specify a modulating colour to be applied to all imagery in the named section as it is rendered.
to specify a colour to use when rendering the text component.
to specify a colour to use when rendering the text frame
例子:
Element
目标:
准确指定一个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) 可作为如下元素的子元素
to specify a modulating ColourRect to be applied when rendering the image.
to specify a modulating ColourRect to be applied to all imagery components within the imagery section as it is rendered.
to specify a modulating ColourRect to be applied to all imagery in the named section as it is rendered.
to specify a ColourRect to use when rendering the text component.
to specify a colour to use when rendering the text frame.
例子:
Element
目标:
作为一个矩形区域尺寸的容器
属性:
type
指定定义的尺寸类型,具体类型如下
用法:
1) 只允许出现在中
2) 可以存在以下尺寸元素
例子:
无
Element
目的:
允许你通过简单的数学操作组合两个不同的尺寸元素。由于
尺寸通常用于二次回滚计算,所以可以创造出各种复杂的操作
属性:
op
指定一个DimensionOperator的标志值。必要属性
用法:
1) 一个元素可以作为子元素出现在下面元素中
2) 一个元素可以包含下面的元素
例子:
表示 10 * 4
表示 (2 * (4 + LineSpacing)) 而不是 ((2 * 4) + LineSpacing)
Element
目的:
作为 skin file的根元素。 包含了多个元素
属性:
没有
用法:
1) 作为 skin file的根元素
2) 可包含多个元素
3) 没有任何元素可以将作为子元素
例子:
...
...
...
Element
目的:
元素主要用于度量一个字体,作为一个矩形区域的组成
属性:
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 element may contain a single element in order to form a dimension calculation.
可能包含一个元素用于组成尺存计算
The element can appear as a sub-element in to form a dimension specification for an area.
可以作为子元素在组成一个区域的尺寸描述
The element can appear as a sub-element of to specify the second operand for a dimension calculation.
可以作为子元素在组成二次计算
例子:
Element
目的:
元素允许系统访问目标窗口的属性,当渲染TextComponent时得到字体属性
属性:
name
必要属性
一个字体的名字
用法:
1)不可以存在子元素
2)只在 元素中作为子元素存在
例子:
无