CEGUI自定义UI

CEGUI自定义UI使用有以下5个步骤：

1.找一张图片，里面是UI会读取的材质

2.用CEImagesetEditor生成一个imageset的xml文件，这个文件表述了在材质图片中控件各部分要读取的材质的区域划分

3.写一个looknfeel的xml文件

4.写一个scheme的xml文件

5.用CELayoutEditor生成一个layout的xml文件，这个文件是最终程序使用的界面布局

1.暂时找一张图片使用，PS不会玩

2.使用CEImagesetEditor生成imageset文件，生成后文件内容（此文件只使用了第二个按钮和鼠标指针）：

<?xml version="1.0" encoding="UTF-8"?>

<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>

</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" /> 用于设置普通状态下按钮上的文字颜色

②.这部分用于设置按钮各个部分的贴图，貌似还能设置得更细（加入上下边界），这个部分只设置了左右和背景（实际就是”中“）

4. 写一个scheme的xml文件，这个文件可以直接拷贝TaharezLook.scheme的内容并将其中文件名修改一下即可，如果是用不到的组件可以删掉，修改后内容如下：

<?xml version="1.0" ?>
<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拖就行了，拖完后内容：

<?xml version="1.0" encoding="UTF-8"?>

<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.主要代码：

bool Game::quit(const CEGUI::EventArgs &arg)
{
//关闭程序
}

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。

运行后效果

大概记下流程，继续玩

posted @ 2011-05-13 22:17 朋克阅读(1403) 评论(0) 编辑收藏举报

刷新页面返回顶部

CEGUI自定义UI

公告