CEGUI自定义UI使用有以下5个步骤:
1.找一张图片,里面是UI会读取的材质
2.用CEImagesetEditor生成一个imageset的xml文件,这个文件表述了在材质图片中控件各部分要读取的材质的区域划分
3.写一个looknfeel的xml文件
4.写一个scheme的xml文件
5.用CELayoutEditor生成一个layout的xml文件,这个文件是最终程序使用的界面布局
1.暂时找一张图片使用,PS不会玩
2.使用CEImagesetEditor生成imageset文件,生成后文件内容(此文件只使用了第二个按钮和鼠标指针):
<Imageset Name="WOWLookImage" Imagefile="WOWLook.png" AutoScaled="true" >
<Image Name="ButtonLeft" XPos="3" YPos="21" Width="10" Height="22" />
<Image Name="MouseArrow" XPos="0" YPos="43" Width="26" Height="20" />
<Image Name="ButtonRight" XPos="118" YPos="21" Width="10" Height="22" />
<Image Name="WholeButton" XPos="0" YPos="21" Width="128" Height="22" />
<Image Name="ButtonMiddle" XPos="33" YPos="21" Width="10" Height="22" />
</Imageset>
3. 写一个looknfeel文件,这个玩意在这几个XML中最复杂,找了很多别人写的东西,并对照TaharezLook.looknfeel大概理解了意思,完成后文件内容如下:
<?xml version="1.0" ?>
<Falagard>
<!--StaticImage部分-->
<ImagerySection name="main">
<ImageryComponent>
<Area>
<Dim type="LeftEdge">
<AbsoluteDim value="0" />
</Dim>
<Dim type="TopEdge">
<AbsoluteDim value="0" />
</Dim>
<Dim type="RightEdge">
<ImageDim imageset="WOWLookImage" image="WholeButton" dimension="Width" />
</Dim>
<Dim type="BottomEdge">
<ImageDim imageset="WOWLookImage" image="WholeButton" dimension="Height" />
</Dim>
</Area>
<Image imageset="WOWLookImage" image="WholeButton" />
</ImageryComponent>
</ImagerySection>
<StateImagery name="Enabled">
<Layer>
<Section section="main">
</Section>
</Layer>
</StateImagery>
<StateImagery name="Disabled">
<Layer>
<Section section="main" />
</Layer>
</StateImagery>
</WidgetLook>
<!--Button部分-->
<PropertyDefinition name="NormalTextColour" initialValue="FF000000" redrawOnWrite="true" />
<PropertyDefinition name="HoverTextColour" initialValue="FF00FFFF" redrawOnWrite="true" />
<PropertyDefinition name="PushedTextColour" initialValue="FF00FFFF" redrawOnWrite="true" />
<PropertyDefinition name="DisabledTextColour" initialValue="FF7F7F7F" redrawOnWrite="true" />
<PropertyDefinition name="VertLabelFormatting" initialValue="CentreAligned" />
<PropertyDefinition name="HorzLabelFormatting" initialValue="CentreAligned" />
<PropertyDefinition name="NormalImage" initialValue="" redrawOnWrite="true" />
<PropertyDefinition name="HoverImage" initialValue="" redrawOnWrite="true" />
<PropertyDefinition name="PushedImage" initialValue="" redrawOnWrite="true" />
<PropertyDefinition name="DisabledImage" initialValue="" redrawOnWrite="true" />
<PropertyDefinition name="VertImageFormatting" initialValue="Stretched" redrawOnWrite="true" />
<PropertyDefinition name="HorzImageFormatting" initialValue="Stretched" redrawOnWrite="true" />
<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 name="normal">
<FrameComponent>
<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>
<Image type="LeftEdge" imageset="WOWLookImage" image="ButtonLeft" />
<Image type="RightEdge" imageset="WOWLookImage" image="ButtonRight" />
<Image type="Background" imageset="WOWLookImage" image="ButtonMiddle" />
</FrameComponent>
<ImageryComponent>
<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>
<ImageProperty name="NormalImage" />
<VertFormatProperty name="VertImageFormatting" />
<HorzFormatProperty name="HorzImageFormatting" />
</ImageryComponent>
</ImagerySection>
<ImagerySection name="hover">
<FrameComponent>
<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>
<Image type="LeftEdge" imageset="WOWLookImage" image="ButtonLeft" />
<Image type="RightEdge" imageset="WOWLookImage" image="ButtonRight" />
<Image type="Background" imageset="WOWLookImage" image="ButtonMiddle" />
</FrameComponent>
<ImageryComponent>
<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>
<ImageProperty name="HoverImage" />
<VertFormatProperty name="VertImageFormatting" />
<HorzFormatProperty name="HorzImageFormatting" />
</ImageryComponent>
</ImagerySection>
<ImagerySection name="pushed">
<FrameComponent>
<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>
<Image type="LeftEdge" imageset="WOWLookImage" image="ButtonLeft" />
<Image type="RightEdge" imageset="WOWLookImage" image="ButtonRight" />
<Image type="Background" imageset="WOWLookImage" image="ButtonMiddle" />
</FrameComponent>
<ImageryComponent>
<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>
<ImageProperty name="PushedImage" />
<VertFormatProperty name="VertImageFormatting" />
<HorzFormatProperty name="HorzImageFormatting" />
</ImageryComponent>
</ImagerySection>
<ImagerySection name="disabled">
<FrameComponent>
<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>
<Image type="LeftEdge" imageset="WOWLookImage" image="ButtonLeft" />
<Image type="RightEdge" imageset="WOWLookImage" image="ButtonRight" />
<Image type="Background" imageset="WOWLookImage" image="ButtonMiddle" />
</FrameComponent>
<ImageryComponent>
<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>
<ImageProperty name="DisabledImage" />
<VertFormatProperty name="VertImageFormatting" />
<HorzFormatProperty name="HorzImageFormatting" />
</ImageryComponent>
</ImagerySection>
<StateImagery name="Normal">
<Layer>
<Section section="normal" />
<Section section="label">
<ColourProperty name="NormalTextColour" />
</Section>
</Layer>
</StateImagery>
<StateImagery name="Hover">
<Layer>
<Section section="hover" />
<Section section="label">
<ColourProperty name="HoverTextColour" />
</Section>
</Layer>
</StateImagery>
<StateImagery name="Pushed">
<Layer>
<Section section="pushed" />
<Section section="label">
<ColourProperty name="PushedTextColour" />
</Section>
</Layer>
</StateImagery>
<StateImagery name="PushedOff">
<Layer>
<Section section="hover" />
<Section section="label">
<ColourProperty name="HoverTextColour" />
</Section>
</Layer>
</StateImagery>
<StateImagery name="Disabled">
<Layer>
<Section section="disabled">
<Colours topLeft="FF7F7F7F" topRight="FF7F7F7F" bottomLeft="FF7F7F7F" bottomRight="FF7F7F7F" />
</Section>
<Section section="label">
<ColourProperty name="DisabledTextColour" />
</Section>
</Layer>
</StateImagery>
</WidgetLook>
</Falagard>
里面定义了2个组件,一个是StaticImage,一个是Button。StaticImage相对简单一些,Button的属性多一些,且有normal、hover、pushed、disabled4个状态。对照TaharezLook的looknfeel将Imageset修改为自己使用的Imageset名称(注意:是Imageset文件的Imageset Name="WOWLookImage" 标签)
以 Normal状态为例:
①.首先有一句<PropertyDefinition name="NormalTextColour" initialValue="FF000000" redrawOnWrite="true" /> 用于设置普通状态下按钮上的文字颜色
②.这部分用于设置按钮各个部分的贴图,貌似还能设置得更细(加入上下边界),这个部分只设置了左右和背景(实际就是”中“)
<FrameComponent>
<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>
<Image type="LeftEdge" imageset="WOWLookImage" image="ButtonLeft" />
<Image type="RightEdge" imageset="WOWLookImage" image="ButtonRight" />
<Image type="Background" imageset="WOWLookImage" image="ButtonMiddle" />
</FrameComponent>
<ImageryComponent>
<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>
<ImageProperty name="NormalImage" />
<VertFormatProperty name="VertImageFormatting" />
<HorzFormatProperty name="HorzImageFormatting" />
</ImageryComponent>
</ImagerySection>
4. 写一个scheme的xml文件,这个文件可以直接拷贝TaharezLook.scheme的内容并将其中文件名修改一下即可,如果是用不到的组件可以删掉,修改后内容如下:
<GUIScheme Name="WOWLook">
<Imageset Filename="WOWLook.imageset" />
<Font Filename="avqest-10.font" />
<LookNFeel Filename="WOWLook.looknfeel" />
<WindowRendererSet Filename="CEGUIFalagardWRBase" />
<FalagardMapping WindowType="WOWLook/Button" TargetType="CEGUI/PushButton" Renderer="Falagard/Button" LookNFeel="WOWLook/Button" />
<FalagardMapping WindowType="WOWLook/StaticImage" TargetType="DefaultWindow" Renderer="Falagard/StaticImage" LookNFeel="WOWLook/StaticImage" />
</GUIScheme>
里面只有一个Button组件和一个StaticImage组件,字体用的暗黑字体,.font文件可以把DejaVuSans-10.font文件中的.ttf文件名改掉就OK,另外也可以使用imageset中的图片做字体
5.layout文件,拿CELayoutEditor拖就行了,拖完后内容:
<GUILayout >
<Window Type="DefaultWindow" Name="Root" >
<Property Name="InheritsAlpha" Value="False" />
<Property Name="UnifiedMaxSize" Value="{{1,0},{1,0}}" />
<Property Name="UnifiedAreaRect" Value="{{0,0},{0,0},{1,0},{1,0}}" />
<Window Type="WOWLook/Button" Name="Root/Test">
<Property Name="UnifiedMaxSize" Value="{{1.0,0},{1.0,0}}" />
<Property Name="UnifiedPosition" Value="{{0.25,0},{0.3,0}}" />
<Property Name="UnifiedSize" Value="{{0.1,0},{0.05,0}}" />
<Property Name="Text" Value="Test" />
</Window>
<Window Type="WOWLook/Button" Name="Root/Quit">
<Property Name="UnifiedMaxSize" Value="{{1.0,0},{1.0,0}}" />
<Property Name="UnifiedPosition" Value="{{0.25,0},{0.5,0}}" />
<Property Name="UnifiedSize" Value="{{0.1,0},{0.05,0}}" />
<Property Name="Text" Value="Quit" />
</Window>
</Window>
</GUILayout>
开始没创建Root,显示正常,但是无法接收鼠标点击事件,why?
6.主要代码:
{
//关闭程序
}
void Game::InitGUI()
{
mRenderer = &CEGUI::OgreRenderer::bootstrapSystem();
CEGUI::Imageset::setDefaultResourceGroup("Imagesets");
CEGUI::Font::setDefaultResourceGroup("Fonts");
CEGUI::Scheme::setDefaultResourceGroup("Schemes");
CEGUI::WidgetLookManager::setDefaultResourceGroup("LookNFeel");
CEGUI::WindowManager::setDefaultResourceGroup("Layouts");
CEGUI::SchemeManager::getSingleton().create("WOWLook.scheme");
CEGUI::System::getSingleton().setDefaultMouseCursor("WOWLookImage","MouseArrow");
CEGUI::MouseCursor::getSingleton().setImage(CEGUI::System::getSingleton().getDefaultMouseCursor());
CEGUI::WindowManager &wmgr = CEGUI::WindowManager::getSingleton();
CEGUI::FontManager::getSingleton().create("avqest-10.font"); //要显示文字必须读取字体
CEGUI::Window *sheet = CEGUI::WindowManager::getSingleton().loadWindowLayout("WOWButton.layout");
CEGUI::System::getSingleton().setGUISheet(sheet);
CEGUI::Window *quit=wmgr.getWindow("Root/Quit");
quit->setText("Over");
try
{
quit->subscribeEvent(CEGUI::PushButton::EventClicked,CEGUI::Event::Subscriber(&Game::quit,this));
}
catch (Ogre::Exception& e)
{
MessageBoxA(NULL, e.getFullDescription().c_str(),"An exception has occured!", MB_OK | MB_ICONERROR | MB_TASKMODAL);
}
}
这段代码读取了界面,并将原先layout文件中的Quit按钮的Text改为Over,还绑定了点击时执行的方法为quit。
运行后效果
大概记下流程,继续玩