• 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>
    <!--StaticImage部分-->

    <WidgetLook name="WOWLook/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部分-->

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

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

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

    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。

    运行后效果

    大概记下流程,继续玩

  • 相关阅读:
    linux中awk的基础学习
    opencv460在win10+vs2017上的编译
    基于yolo进行目标检测的实验和研究
    对OpenCV中3种乘法操作的理解掌握
    深度学习三件套 Ubuntu 20.04 安装 NVIDIA 驱动 CUDA cuDNN全流程【比较好用,jsxyhelu修改】
    基于yolo进行目标检测的实验和研究
    sql server/如何根据条件查找重复的数据行集合
    SQL Server 数据库如何实现每日自动备份功能(包括自动删除)
    WebForm中的treeView的简单使用
    sql server 我们在做游标循环时,如何处理in里面多个id值的参数
  • 原文地址:https://www.cnblogs.com/punkrocker/p/2045782.html
Copyright © 2020-2023  润新知