XML/UI Help

Montague · Jun 24, 2017

Hi guys. I'm trying to re-skin some of my UI windows to get rid of the flashy curly borders and such. I think I've got a good understanding of how everything works but I'm having some issues with the top right corner of my new WDF_Def block.

You can see the problem here:
[IMG]

Notice the small black part where the light blue border color isn't present. I can't figure out what is causing this; the light blue border should go all the way around the window.

The pertinent part of my WDT_Def template is:

Code:

<WindowDrawTemplate item="WDT_Def">
    <Background>wnd_bg_light_rock.tga</Background>
    <VSBTemplate>
        <UpButton>
            <Normal>A_VSBUpNormal</Normal>
            <Pressed>A_VSBUpPressed</Pressed>
            <Flyby>A_VSBUpFlyby</Flyby>
            <Disabled>A_VSBUpDisabled</Disabled>
            <PressedFlyby>A_VSBUpPressedFlyby</PressedFlyby>
        </UpButton>
        <DownButton>
            <Normal>A_VSBDownNormal</Normal>
            <Pressed>A_VSBDownPressed</Pressed>
            <Flyby>A_VSBDownFlyby</Flyby>
            <Disabled>A_VSBDownDisabled</Disabled>
            <PressedFlyby>A_VSBDownPressedFlyby</PressedFlyby>
        </DownButton>
        <Thumb>
            <Top>A_VSBThumbTop</Top>
            <Bottom>A_VSBThumbBottom</Bottom>
            <Middle>A_VSBThumbMiddle</Middle>
            <OverlapLeft>0</OverlapLeft>
            <OverlapTop>0</OverlapTop>
            <OverlapRight>0</OverlapRight>
            <OverlapBottom>0</OverlapBottom>
        </Thumb>
        <MiddleTextureInfo>scrollbar_gutter.tga</MiddleTextureInfo>
        <MiddleTint>
            <Alpha>255</Alpha>
            <R>128</R>
            <G>128</G>
            <B>128</B>
        </MiddleTint>
    </VSBTemplate>
    <HSBTemplate>
        <UpButton>
            <Normal>A_HSBLeftNormal</Normal>
            <Pressed>A_HSBLeftPressed</Pressed>
            <Flyby>A_HSBLeftFlyby</Flyby>
            <Disabled>A_HSBLeftDisabled</Disabled>
            <PressedFlyby>A_HSBLeftPressedFlyby</PressedFlyby>
        </UpButton>
        <DownButton>
            <Normal>A_HSBRightNormal</Normal>
            <Pressed>A_HSBRightPressed</Pressed>
            <Flyby>A_HSBRightFlyby</Flyby>
            <Disabled>A_HSBRightDisabled</Disabled>
            <PressedFlyby>A_HSBRightPressedFlyby</PressedFlyby>
        </DownButton>
        <Thumb>
            <Right>A_HSBThumbRight</Right>
            <Left>A_HSBThumbLeft</Left>
            <Middle>A_HSBThumbMiddle</Middle>
            <OverlapLeft>0</OverlapLeft>
            <OverlapTop>0</OverlapTop>
            <OverlapRight>0</OverlapRight>
            <OverlapBottom>0</OverlapBottom>
        </Thumb>
        <MiddleTextureInfo>scrollbar_Hgutter.tga</MiddleTextureInfo>
        <MiddleTint>
            <Alpha>255</Alpha>
            <R>128</R>
            <G>128</G>
            <B>128</B>
        </MiddleTint>
    </HSBTemplate>
    <CloseBox>
        <Normal>A_CloseBtnNormal</Normal>
        <Pressed>A_CloseBtnPressed</Pressed>
        <Flyby>A_CloseBtnFlyby</Flyby>
        <Disabled>A_CloseBtnDisabled</Disabled>
        <PressedFlyby>A_CloseBtnPressedFlyby</PressedFlyby>
    </CloseBox>
    <QMarkBox>
        <Normal>A_QMarkBtnNormal</Normal>
        <Pressed>A_QMarkBtnPressed</Pressed>
        <Flyby>A_QMarkBtnFlyby</Flyby>
        <Disabled>A_QMarkBtnDisabled</Disabled>
        <PressedFlyby>A_QMarkBtnPressedFlyby</PressedFlyby>
    </QMarkBox>
    <MinimizeBox>
        <Normal>A_MinimizeBtnNormal</Normal>
        <Pressed>A_MinimizeBtnPressed</Pressed>
        <Flyby>A_MinimizeBtnFlyby</Flyby>
        <Disabled>A_MinimizeBtnDisabled</Disabled>
        <PressedFlyby>A_MinimizeBtnPressedFlyby</PressedFlyby>
    </MinimizeBox>
    <MaximizeBox>
        <Normal>A_MaximizeBtnNormal</Normal>
        <Pressed>A_MaximizeBtnPressed</Pressed>
        <Flyby>A_MaximizeBtnFlyby</Flyby>
        <Disabled>A_MaximizeBtnDisabled</Disabled>
        <PressedFlyby>A_MaximizeBtnPressedFlyby</PressedFlyby>
    </MaximizeBox>
    <TileBox>
        <Normal>A_TileBtnNormal</Normal>
        <Pressed>A_TileBtnPressed</Pressed>
        <Flyby>A_TileBtnFlyby</Flyby>
        <Disabled>A_TileBtnDisabled</Disabled>
        <PressedFlyby>A_TileBtnPressedFlyby</PressedFlyby>
    </TileBox>
    <Border>
        <TopLeft>A_MontagueUIFrameTopLeft</TopLeft>
        <Top>A_MontagueUIFrameTop</Top>
        <TopRight>A_MontagueUIFrameTopRight</TopRight>
        <RightTop>A_MontagueUIFrameRight</RightTop>
        <Right>A_MontagueUIFrameRight</Right>
        <RightBottom>A_MontagueUIFrameRight</RightBottom>
        <BottomRight>A_MontagueUIFrameBottomRight</BottomRight>
        <Bottom>A_MontagueUIFrameBottom</Bottom>
        <BottomLeft>A_MontagueUIFrameBottomLeft</BottomLeft>
        <LeftTop>A_MontagueUIFrameLeft</LeftTop>
        <Left>A_MontagueUIFrameLeft</Left>
        <LeftBottom>A_MontagueUIFrameLeft</LeftBottom>
        <OverlapLeft>0</OverlapLeft>
        <OverlapTop>0</OverlapTop>
        <OverlapRight>0</OverlapRight>
        <OverlapBottom>0</OverlapBottom>
    </Border>
    <Titlebar>
        <Right>A_WindowTitleRight</Right>
        <Left>A_WindowTitleLeft</Left>
        <Middle>A_WindowTitleMiddle</Middle>
        <OverlapLeft>0</OverlapLeft>
        <OverlapTop>0</OverlapTop>
        <OverlapRight>0</OverlapRight>
        <OverlapBottom>0</OverlapBottom>
    </Titlebar>
</WindowDrawTemplate>

And the <Border> pieces are:

Code:

<TextureInfo item="MontagueUI_Window_Pieces.tga">
    <Size>
        <CX>250</CX>
        <CY>250</CY>
    </Size>
</TextureInfo>
 
<Ui2DAnimation item="A_MontagueUIFrameTopLeft">
    <Cycle>true</Cycle>
    <Frames>
        <Texture>MontagueUI_Window_Pieces.tga</Texture>
        <Location>
            <X>1</X>
            <Y>1</Y>
        </Location>
        <Size>
            <CX>1</CX>
            <CY>1</CY>
        </Size>
        <Hotspot>
            <X>0</X>
            <Y>0</Y>
        </Hotspot>
        <Duration>1000</Duration>
    </Frames>
</Ui2DAnimation>
 
<Ui2DAnimation item="A_MontagueUIFrameTop">
    <Cycle>true</Cycle>
    <Frames>
        <Texture>MontagueUI_Window_Pieces.tga</Texture>
        <Location>
            <X>1</X>
            <Y>1</Y>
        </Location>
        <Size>
            <CX>1</CX>
            <CY>1</CY>
        </Size>
        <Hotspot>
            <X>0</X>
            <Y>0</Y>
        </Hotspot>
        <Duration>1000</Duration>
    </Frames>
</Ui2DAnimation>
 
<Ui2DAnimation item="A_MontagueUIFrameTopRight">
    <Cycle>true</Cycle>
    <Frames>
        <Texture>MontagueUI_Window_Pieces.tga</Texture>
        <Location>
            <X>1</X>
            <Y>1</Y>
        </Location>
        <Size>
            <CX>1</CX>
            <CY>1</CY>
        </Size>
        <Hotspot>
            <X>0</X>
            <Y>0</Y>
        </Hotspot>
        <Duration>1000</Duration>
    </Frames>
</Ui2DAnimation>
 
<Ui2DAnimation item="A_MontagueUIFrameRight">
    <Cycle>true</Cycle>
    <Frames>
        <Texture>MontagueUI_Window_Pieces.tga</Texture>
        <Location>
            <X>1</X>
            <Y>1</Y>
        </Location>
        <Size>
            <CX>1</CX>
            <CY>1</CY>
        </Size>
        <Hotspot>
            <X>0</X>
            <Y>0</Y>
        </Hotspot>
        <Duration>1000</Duration>
    </Frames>
</Ui2DAnimation>
 
<Ui2DAnimation item="A_MontagueUIFrameBottomRight">
    <Cycle>true</Cycle>
    <Frames>
        <Texture>MontagueUI_Window_Pieces.tga</Texture>
        <Location>
            <X>1</X>
            <Y>1</Y>
        </Location>
        <Size>
            <CX>1</CX>
            <CY>1</CY>
        </Size>
        <Hotspot>
            <X>0</X>
            <Y>0</Y>
        </Hotspot>
        <Duration>1000</Duration>
    </Frames>
</Ui2DAnimation>
 
<Ui2DAnimation item="A_MontagueUIFrameBottom">
    <Cycle>true</Cycle>
    <Frames>
        <Texture>MontagueUI_Window_Pieces.tga</Texture>
        <Location>
            <X>1</X>
            <Y>1</Y>
        </Location>
        <Size>
            <CX>1</CX>
            <CY>1</CY>
        </Size>
        <Hotspot>
            <X>0</X>
            <Y>0</Y>
        </Hotspot>
        <Duration>1000</Duration>
    </Frames>
</Ui2DAnimation>
 
<Ui2DAnimation item="A_MontagueUIFrameBottomLeft">
    <Cycle>true</Cycle>
    <Frames>
        <Texture>MontagueUI_Window_Pieces.tga</Texture>
        <Location>
            <X>1</X>
            <Y>1</Y>
        </Location>
        <Size>
            <CX>1</CX>
            <CY>1</CY>
        </Size>
        <Hotspot>
            <X>0</X>
            <Y>0</Y>
        </Hotspot>
        <Duration>1000</Duration>
    </Frames>
</Ui2DAnimation>
 
<Ui2DAnimation item="A_MontagueUIFrameLeft">
    <Cycle>true</Cycle>
    <Frames>
        <Texture>MontagueUI_Window_Pieces.tga</Texture>
        <Location>
            <X>1</X>
            <Y>1</Y>
        </Location>
        <Size>
            <CX>1</CX>
            <CY>1</CY>
        </Size>
        <Hotspot>
            <X>0</X>
            <Y>0</Y>
        </Hotspot>
        <Duration>1000</Duration>
    </Frames>
</Ui2DAnimation>

The texture file is:

http://bleedo.net/MontagueUI_Window_Pieces.tga

Any tips on why this might be happening would be appreciated!

Lighteningrod · Jun 24, 2017

Code:
<WindowDrawTemplate item="WDT_Def">
...
    <Titlebar>
...
        <Right>A_WindowTitleRight</Right>
...
    </Titlebar>
</WindowDrawTemplate>
It's the right section of the WindowDrawTemplate Titlebar.

Double check the X,Y origin and dimensions in the Ui2DAnimation XML. If they are correct, the .tga itself may be messed up. Many of the default images are pixelated or otherwise don't stretch very well.

Scorrpio · Jun 25, 2017

To me, it looks like something might be off with the 'close' button. It is not visible here, but it usually goes into that spot...

Log in or Sign up

XML/UI Help

Montague New Member

Lighteningrod Augur

Scorrpio Augur

Log in or Sign up

XML/UI Help

Montague New Member

Lighteningrod Augur

Scorrpio Augur

Useful Searches