[Solved] CEGUI 0.8.7 frame fading out

[Lestat_76]

Hi all and thx to the CEGUI team for a great UI library

My first test with CEGUI 0.8.7 was to get the FrameWindow Widget from the vanilla skin with cornered corners instead of rounded. So I change the imageset, adjusted the XML for the imageset and the looknfeel.

My problem which I can't get to solve is that the frame is fading out (see screenshot). What did I oversee that is causing the frame to fade out towards the corner?

[YaronCT]

Lestat_76: Can u plz write the parts of the xml files you've changed?

[Lestat_76]

Imageset:


Imageset XML:

Code: Select all

<Image height="10" name="FrameTopLeft" width="11" xPos="0" yPos="235" />
    <Image height="10" name="FrameTopRight" width="11" xPos="13" yPos="235" />
    <Image height="10" name="FrameBottomLeft" width="11" xPos="0" yPos="246" />
    <Image height="10" name="FrameBottomRight" width="11" xPos="13" yPos="246" />
    <Image height="1" name="FrameLeft" width="11" xPos="0" yPos="230" />
    <Image height="1" name="FrameRight" width="11" xPos="13" yPos="230" />
    <Image height="10" name="FrameTop" width="1" xPos="26" yPos="235" />
    <Image height="10" name="FrameBottom" width="1" xPos="26" yPos="246" />


LooknFeel XML:

Code: Select all

<WidgetLook name="Vanilla/FrameWindow">
        <PropertyLinkDefinition targetProperty="CaptionColour" widget="__auto_titlebar__" initialValue="FFFFFFFF" type="ColourRect" name="CaptionColour"/>
        <PropertyLinkDefinition targetProperty="Font" widget="__auto_titlebar__" type="Font" name="TitlebarFont"/>
        <Property name="NSSizingCursorImage" value="Vanilla-Images/MouseArrow"/>
        <Property name="EWSizingCursorImage" value="Vanilla-Images/MouseArrow"/>
        <Property name="NWSESizingCursorImage" value="Vanilla-Images/MouseArrow"/>
        <Property name="NESWSizingCursorImage" value="Vanilla-Images/MouseArrow"/>
        <Property name="RollUpEnabled" value="false"/>
        <Property name="MinSize" value="{{0.1,0},{0.1,0}}"/>
        <Property name="AutoRenderingSurface" value="true"/>
        <Property name="Size" value="{{0.3, 0}, {0.3, 0}}" />
        <NamedArea name="ClientWithTitleWithFrame">
            <Area>
                <Dim type="LeftEdge">
                    <AbsoluteDim value="11"/>
                </Dim>
                <Dim type="TopEdge">
                    <WidgetDim widget="__auto_titlebar__" dimension="BottomEdge"/>
                </Dim>
                <Dim type="RightEdge">
                    <UnifiedDim scale="1" type="RightEdge" offset="-11"/>
                </Dim>
                <Dim type="BottomEdge">
                    <UnifiedDim scale="1" type="BottomEdge" offset="-11"/>
                </Dim>
            </Area>
        </NamedArea>
        <NamedArea name="ClientWithTitleNoFrame">
            <Area>
                <Dim type="LeftEdge">
                    <AbsoluteDim value="0"/>
                </Dim>
                <Dim type="TopEdge">
                    <WidgetDim widget="__auto_titlebar__" dimension="BottomEdge"/>
                </Dim>
                <Dim type="RightEdge">
                    <UnifiedDim scale="1" type="RightEdge"/>
                </Dim>
                <Dim type="BottomEdge">
                    <UnifiedDim scale="1" type="BottomEdge"/>
                </Dim>
            </Area>
        </NamedArea>
        <NamedArea name="ClientNoTitleWithFrame">
            <Area>
                <Dim type="LeftEdge">
                    <AbsoluteDim value="11"/>
                </Dim>
                <Dim type="TopEdge">
                    <AbsoluteDim value="11"/>
                </Dim>
                <Dim type="RightEdge">
                    <UnifiedDim scale="1" type="RightEdge" offset="-11"/>
                </Dim>
                <Dim type="BottomEdge">
                    <UnifiedDim scale="1" type="BottomEdge" offset="-11"/>
                </Dim>
            </Area>
        </NamedArea>
        <NamedArea name="ClientNoTitleNoFrame">
            <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>
        </NamedArea>
        <Child nameSuffix="__auto_titlebar__" type="Vanilla/Titlebar">
            <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">
                    <FontDim padding="14" type="LineSpacing"/>
                </Dim>
            </Area>
            <Property name="AlwaysOnTop" value="false"/>
        </Child>
        <Child nameSuffix="__auto_closebutton__" type="Vanilla/Button">
            <Area>
                <Dim type="LeftEdge">
                    <AbsoluteDim value="-7"/>
                </Dim>
                <Dim type="TopEdge">
                    <AbsoluteDim value="7"/>
                </Dim>
                <Dim type="Width">
                    <AbsoluteDim value="7"/>
                </Dim>
                <Dim type="Height">
                    <AbsoluteDim value="7"/>
                </Dim>
            </Area>
            <HorzAlignment type="RightAligned"/>
            <Property name="NonClient" value="true"/>
            <Property name="AlwaysOnTop" value="true"/>
        </Child>
        <ImagerySection name="withtitle_frame">
            <FrameComponent>
                <Area>
                    <Dim type="LeftEdge">
                        <AbsoluteDim value="0" />
                    </Dim>
                    <Dim type="TopEdge">
                        <AbsoluteDim value="0"/>
                    </Dim>
                    <Dim type="RightEdge">
                        <UnifiedDim scale="1" type="RightEdge"/>
                    </Dim>
                    <Dim type="BottomEdge">
                        <UnifiedDim scale="1" type="BottomEdge"/>
                    </Dim>
                </Area>
                <Image component="TopLeftCorner" name="Vanilla-Images/FrameTopLeft"/>
                <Image component="TopRightCorner" name="Vanilla-Images/FrameTopRight"/>
                <Image component="BottomLeftCorner" name="Vanilla-Images/FrameBottomLeft"/>
                <Image component="BottomRightCorner" name="Vanilla-Images/FrameBottomRight"/>
                <Image component="LeftEdge" name="Vanilla-Images/FrameLeft"/>
                <Image component="TopEdge" name="Vanilla-Images/FrameTop"/>
                <Image component="RightEdge" name="Vanilla-Images/FrameRight"/>
                <Image component="BottomEdge" name="Vanilla-Images/FrameBottom"/>
                <Image component="Background" name="Vanilla-Images/GenericBrush"/>
                <!--<Colours topLeft="FF03242a" bottomLeft="FF03242a" topRight="FF03242a" bottomRight="FF03242a"/>-->
            </FrameComponent>
        </ImagerySection>
        <ImagerySection name="notitle_frame">
            <FrameComponent>
                <Area>
                    <Dim type="LeftEdge">
                        <AbsoluteDim value="0"/>
                    </Dim>
                    <Dim type="TopEdge">
                        <AbsoluteDim value="0"/>
                    </Dim>
                    <Dim type="RightEdge">
                        <UnifiedDim scale="1" type="RightEdge"/>
                    </Dim>
                    <Dim type="BottomEdge">
                        <UnifiedDim scale="1" type="BottomEdge"/>
                    </Dim>
                </Area>
                <Image component="TopLeftCorner" name="Vanilla-Images/FrameTopLeft"/>
                <Image component="TopRightCorner" name="Vanilla-Images/FrameTopRight"/>
                <Image component="BottomLeftCorner" name="Vanilla-Images/FrameBottomLeft"/>
                <Image component="BottomRightCorner" name="Vanilla-Images/FrameBottomRight"/>
                <Image component="LeftEdge" name="Vanilla-Images/FrameLeft"/>
                <Image component="TopEdge" name="Vanilla-Images/FrameTop"/>
                <Image component="RightEdge" name="Vanilla-Images/FrameRight"/>
                <Image component="BottomEdge" name="Vanilla-Images/FrameBottom"/>
                <Image component="Background" name="Vanilla-Images/GenericBrush"/>
                <!--<Colours topLeft="FF03242a" bottomLeft="FF03242a" topRight="FF03242a" bottomRight="FF03242a"/>-->
            </FrameComponent>
        </ImagerySection>
        <ImagerySection name="withtitle_noframe_client_area">
            <FrameComponent>
                <Area>
                    <Dim type="LeftEdge">
                        <AbsoluteDim value="0"/>
                    </Dim>
                    <Dim type="TopEdge">
                        <WidgetDim widget="__auto_titlebar__" dimension="BottomEdge"/>
                    </Dim>
                    <Dim type="RightEdge">
                        <UnifiedDim scale="1" type="RightEdge"/>
                    </Dim>
                    <Dim type="BottomEdge">
                        <UnifiedDim scale="1" type="BottomEdge"/>
                    </Dim>
                </Area>
                <Image component="TopLeftCorner" name="Vanilla-Images/FrameTopLeft"/>
                <Image component="TopRightCorner" name="Vanilla-Images/FrameTopRight"/>
                <Image component="BottomLeftCorner" name="Vanilla-Images/FrameBottomLeft"/>
                <Image component="BottomRightCorner" name="Vanilla-Images/FrameBottomRight"/>
                <Image component="LeftEdge" name="Vanilla-Images/FrameLeft"/>
                <Image component="TopEdge" name="Vanilla-Images/FrameTop"/>
                <Image component="RightEdge" name="Vanilla-Images/FrameRight"/>
                <Image component="BottomEdge" name="Vanilla-Images/FrameBottom"/>
                <Image component="Background" name="Vanilla-Images/GenericBrush"/>
                <!--<Colours topLeft="FF333333" bottomLeft="FF333333" topRight="FF333333" bottomRight="FF333333"/>-->
            </FrameComponent>
        </ImagerySection>
        <ImagerySection name="notitle_noframe_client_area">
            <FrameComponent>
                <Area>
                    <Dim type="LeftEdge">
                        <AbsoluteDim value="0"/>
                    </Dim>
                    <Dim type="TopEdge">
                        <AbsoluteDim value="0"/>
                    </Dim>
                    <Dim type="RightEdge">
                        <UnifiedDim scale="1" type="RightEdge"/>
                    </Dim>
                    <Dim type="BottomEdge">
                        <UnifiedDim scale="1" type="BottomEdge"/>
                    </Dim>
                </Area>
                <Image component="TopLeftCorner" name="Vanilla-Images/FrameTopLeft"/>
                <Image component="TopRightCorner" name="Vanilla-Images/FrameTopRight"/>
                <Image component="BottomLeftCorner" name="Vanilla-Images/FrameBottomLeft"/>
                <Image component="BottomRightCorner" name="Vanilla-Images/FrameBottomRight"/>
                <Image component="LeftEdge" name="Vanilla-Images/FrameLeft"/>
                <Image component="TopEdge" name="Vanilla-Images/FrameTop"/>
                <Image component="RightEdge" name="Vanilla-Images/FrameRight"/>
                <Image component="BottomEdge" name="Vanilla-Images/FrameBottom"/>
                <Image component="Background" name="Vanilla-Images/GenericBrush"/>
                <!--<Colours topLeft="FF333333" bottomLeft="FF333333" topRight="FF333333" bottomRight="FF333333"/>-->
            </FrameComponent>
        </ImagerySection>
        <StateImagery name="ActiveWithTitleWithFrame">
            <Layer>
                <Section section="withtitle_frame"/>
            </Layer>
        </StateImagery>
        <StateImagery name="InactiveWithTitleWithFrame">
            <Layer>
                <Section section="withtitle_frame"/>
            </Layer>
        </StateImagery>
        <StateImagery name="DisabledWithTitleWithFrame">
            <Layer>
                <Section section="withtitle_frame"/>
            </Layer>
        </StateImagery>
        <StateImagery name="ActiveWithTitleNoFrame">
            <Layer>
                <Section section="withtitle_noframe_client_area"/>
            </Layer>
        </StateImagery>
        <StateImagery name="InactiveWithTitleNoFrame">
            <Layer>
                <Section section="withtitle_noframe_client_area"/>
            </Layer>
        </StateImagery>
        <StateImagery name="DisabledWithTitleNoFrame">
            <Layer>
                <Section section="withtitle_noframe_client_area"/>
            </Layer>
        </StateImagery>
        <StateImagery name="ActiveNoTitleWithFrame">
            <Layer>
                <Section section="notitle_frame"/>
            </Layer>
        </StateImagery>
        <StateImagery name="InactiveNoTitleWithFrame">
            <Layer>
                <Section section="notitle_frame"/>
            </Layer>
        </StateImagery>
        <StateImagery name="DisabledNoTitleWithFrame">
            <Layer>
                <Section section="notitle_frame"/>
            </Layer>
        </StateImagery>
        <StateImagery name="ActiveNoTitleNoFrame">
            <Layer>
                <Section section="notitle_noframe_client_area"/>
            </Layer>
        </StateImagery>
        <StateImagery name="InactiveNoTitleNoFrame">
            <Layer>
                <Section section="notitle_noframe_client_area"/>
            </Layer>
        </StateImagery>
        <StateImagery name="DisabledNoTitleNoFrame">
            <Layer>
                <Section section="notitle_noframe_client_area"/>
            </Layer>
        </StateImagery>
    </WidgetLook>


If I change the width of top- and bottomframe in the imageset XML from 1 to 2 the frame moves to the middle section but I never get it to cover the whole edge.

Code: Select all

<Image height="10" name="FrameTop" width="2" xPos="26" yPos="235" />
    <Image height="10" name="FrameBottom" width="2" xPos="26" yPos="246" />

[Lestat_76]

I know the solution. The original frame left, top, right, bottom image are all 3 pixel width (bottom, top) or 3 pixel height (left, right) but only mention 1 pixel width or height in the XML and the position is the middle pixel.
So somehow the neighbouring pixel are taken into consideration for the frame, if they are transparent it fades out and if they share the same color it doesn't fade out.

I was missing this in the documentation.

[YaronCT]

Lestat76: I'm glad it has worked out

[Ident]

Indeed, you need a frame around each image of one pixel size specifying the "next" colour/alpha. This is because of the sampling on the GPU.