08年05月08日

Posted on 2008-05-08 16:30 RichardHe 阅读(1902) 评论(4)  编辑 收藏 引用
CEGUI有背景图片的BUTTON:
昨天听到刀哥问我对Looknfeel写东西有没有什么心德体会.说实话,我还真正的写过一个wideget.然后突然就有一个冲动想法.很多东西不写是不会熟悉的.我就参考刀哥的方法写了一个BUTTON
有两种方法可以实现,一为在Looknfeel文件中直接修改
<WidgetLook name="Vanilla/MyButton">
        
<PropertyDefinition name="NormalTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" />
        
<PropertyDefinition name="HoverTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" />
        
<PropertyDefinition name="PushedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" />
        
<PropertyDefinition name="DisabledTextColour" initialValue="FF888888" 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="TaharezLook" image="ButtonLeftNormal" />
                
<Image type="RightEdge" imageset="TaharezLook" image="ButtonRightNormal" />
                
<Image type="Background" imageset="TaharezLook" image="ButtonMiddleNormal" />
            
</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="TaharezLook" image="ButtonLeftHighlight" />
                
<Image type="RightEdge" imageset="TaharezLook" image="ButtonRightHighlight" />
                
<Image type="Background" imageset="TaharezLook" image="ButtonMiddleHighlight" />
            
</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="TaharezLook" image="ButtonLeftPushed" />
                
<Image type="RightEdge" imageset="TaharezLook" image="ButtonRightPushed" />
                
<Image type="Background" imageset="TaharezLook" image="ButtonMiddlePushed" />
            
</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>
        
<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="normal">
                    
<Colours topLeft="FF7F7F7F" topRight="FF7F7F7F" bottomLeft="FF7F7F7F" bottomRight="FF7F7F7F" />
                
</Section>
                
<Section section="label">
                    
<ColourProperty name="DisabledTextColour" />
                
</Section>
            
</Layer>
        
</StateImagery>
    
</WidgetLook>
<PropertyDefinition name="NormalImage" initialValue="" redrawOnWrite="true" />
<PropertyDefinition name="HoverImage" initialValue="" redrawOnWrite="true" />        <PropertyDefinition name="PushedImage" initialValue="" redrawOnWrite="true" />
定义三个属性,分别为NormalImage,HoverImage,PushImage;代表三个状态下的显示的图片
如果想在上面的初始化固定图片也是可以的initialValue="set:imagesetname image:对应里面的小图名字"
我的
initialValue="set:Vanilla-Images image:ShadowBrush"


另一个方法可以在程序中控制,这样的话,可以针对不同的BUTTON可以设置不同的背景图片.我的程序如下:

    WindowManager& winMgr = WindowManager::getSingleton();
    Window* button = winMgr.getWindow("root/MyButton");         //
"root/Richard"为你的你窗口layout文件中一个BUTTON

    button->setProperty("NormalImage","set:Vanilla-Images image:ShadowBrush");

   
1 <?xml version="1.0" encoding="UTF-8"?>
2 
3 <GUILayout >
4 <Window Type="Vanilla/Richard" Name="root/MyButton" >
5             <Property Name="Font" Value="DejaVuSans-10" />
6             <Property Name="Text" Value="MyButton" />
7             <Property Name="UnifiedMaxSize" Value="{{1,0},{1,0}}" />
8             <Property Name="UnifiedAreaRect" Value="{{0.225,0},{0.433333,0},{0.474998,0},{0.556667,0}}" />
9 </GUILayout>

  同时对应的主题文件.scheme添加一个MAP

1 <?xml version="1.0" ?>
2 <GUIScheme Name="VanillaSkin">
3     <Imageset Name="Vanilla-Images" Filename="Vanilla.imageset" />
4     <LookNFeel Filename="Vanilla.looknfeel" />
5     <WindowRendererSet Filename="CEGUIFalagardWRBase" />
6 <FalagardMapping WindowType="Vanilla/MyButton" TargetType="CEGUI/PushButton" Renderer="Falagard/Button" LookNFeel="Vanilla/MyButton" />
7 </GUIScheme>

以上东西我要十分感觉两位游戏界新朋友的指点
夏科艺(http://blog.csdn.net/powerkoria/)和 付坤(http://blog.csdn.net/kun1234567/)

Feedback

# re: 08年05月08日  回复  更多评论   

2008-05-08 18:15 by lonkil
CEGUI做界面,没有一个生成工具,不累死人呀。

# re: 08年05月08日  回复  更多评论   

2008-05-08 19:01 by RichardHe
@lonkil
looknfeel肯定是要自己写的了,不过可以参考CEGUI自带的.
像IMAGESET和LAYOUT都有工具的.

# re: 08年05月08日  回复  更多评论   

2008-05-10 00:31 by 放屁阿狗
在做wince项目时,ui frame都是自己实现的,cegui我刚刚开始接触,觉得其设计确实很有借鉴的作用,开始琢磨cegui

老兄是否做过cegui到wince的移植

# re: 08年05月08日  回复  更多评论   

2008-05-10 09:06 by RichardHe
@放屁阿狗
没有,目前也只是在WIN32上面跑下而已.
好像可以移到WINCE上面的..有那么个宏定义就可以来用哪个编译器来编译

只有注册用户登录后才能发表评论。
网站导航: 博客园   IT新闻   BlogJava   知识库   博问   管理


posts - 94, comments - 138, trackbacks - 0, articles - 94

Copyright © RichardHe