View Single Post
Old 05-18-2007, 11:27 AM   #2
fenrian1
A Shissar Defiler
 
fenrian1's Avatar
 
Join Date: Jun 2005
Posts: 164
Interface Author - Click to view interfaces
Default

I will start with the group window since it has lots of elements(notice also that the buttons have their own template code in this UI piece)I will also heavily edit the pasted code to simplify reading and bold out the pertinate code. I will focus on the title bar since it only has 3 pieces to it making it simpler for me to work with.

Quote:
<Screen item="GroupWindow">
<ScreenID />
<Text>Group</Text>
<Style_VScroll>false</Style_VScroll>
<Style_HScroll>false</Style_HScroll>
<Style_Transparent>false</Style_Transparent>
<TooltipReference>This is the party window.</TooltipReference>
<Style_Titlebar>true</Style_Titlebar>
<Style_Closebox>false</Style_Closebox>
<Style_Minimizebox>false</Style_Minimizebox>
<Style_Border>true</Style_Border>
<Style_Sizable>false</Style_Sizable>
<DrawTemplate>WDT_Filigree</DrawTemplate>
</Screen>


The game is now told to look in the templates file

Quote:
<WindowDrawTemplate item="WDT_Filigree">
<Background>wnd_bg_light_rock.tga</Background>

Removed the scrollbar and tilebutton stuff since its not used in this window piece


<Border>
<Right>A_FiligreeFrameRight</Right>
<RightBottom>A_FiligreeFrameRightBottom</RightBottom>
<BottomRight>A_FiligreeFrameBottomRight</BottomRight>
<Bottom>A_FiligreeFrameBottom</Bottom>
<BottomLeft>A_FiligreeFrameBottomLeft</BottomLeft>
<LeftTop>A_FiligreeFrameLeftTop</LeftTop>
<Left>A_FiligreeFrameLeft</Left>
<LeftBottom>A_FiligreeFrameLeftBottom</LeftBottom>
<OverlapLeft>0</OverlapLeft>
<OverlapTop>0</OverlapTop>
<OverlapRight>0</OverlapRight>
<OverlapBottom>0</OverlapBottom>
<Top>A_FiligreeFrameTop</Top>
<TopLeft>A_FiligreeFrameTopLeft</TopLeft>
<TopRight>A_FiligreeFrameTopRight</TopRight>
<RightTop>A_FiligreeFrameRightTop</RightTop>
</Border>
<Titlebar>
<Right>A_FiligreeFrameTitleRight</Right>
<Left>A_FiligreeFrameTitleLeft</Left>
<Middle>A_FiligreeFrameTitleMiddle</Middle>
<OverlapLeft>0</OverlapLeft>
<OverlapTop>0</OverlapTop>
<OverlapRight>0</OverlapRight>
<OverlapBottom>0</OverlapBottom>
</Titlebar>
</WindowDrawTemplate>


Every thing you need to know about what this window is made out of is here. It uses the light rock background an bunch of filigree pieces and even allows us mod modify how they overlap each other to get a good clean fit. If we look in the animations file we can find out what and where the right side of the title bar comes from.

Quote:
<Ui2DAnimation item="A_FiligreeFrameTitleRight">
<Cycle>true</Cycle>
<Frames>
<Texture>window_pieces05.tga</Texture>
<Location>
<X>235</X>
<Y>161</Y>
</Location>
<Size>
<CX>12</CX>
<CY>21</CY>
</Size>

<Hotspot>
<X>0</X>
<Y>0</Y>
</Hotspot>
<Duration>1000</Duration>
</Frames>
</Ui2DAnimation>


This tells us to look in another part of the animations file for the texture

Quote:
<TextureInfo item="window_pieces05.tga">
<Size>
<CX>256</CX>
<CY>256</CY>
</Size>
</TextureInfo>


This defines the texture for the game by its name and then tells it what size it is.

The red text in the UI2DAnimation tells us that the right side of the title bar is 235 pixels to the right and 161 pixels down. The actual size of the right side of the title bar is 12x21 pixel, highlighted in red below. all measurements are from the upper left respectably.

Shown highlighted in red


This piece is hard coded to remain the size defined in the above code.

A fast look at the middle piece will show the part highlighted in yellow. This part is hardcoded to stretch to fill the space between the ends.

Now to modify...
fenrian1 is offline   Reply With Quote