XML/UI Help

Discussion in 'The Veterans' Lounge' started by Montague, Jun 24, 2017.

  1. Montague New Member

    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!
  2. Lighteningrod Augur

    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.
  3. Scorrpio Augur

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