View Single Post
Old 05-18-2007, 01:41 PM   #4
fenrian1
A Shissar Defiler
 
fenrian1's Avatar
 
Join Date: Jun 2005
Posts: 164
Interface Author - Click to view interfaces
Default

In order to change the back ground we need to use a static animation. This is really the easiest way to change the overall look of a UI piece rather than mucking arround with templates.

A border has 2 purposes, to visualy define the edge of something, and to give you something to grab with your mouse to drag or stretch. One only needs to modify the templates if you want to limit the number of UI pieces that the mod will affect. If you simply want to get rid of sony's ugly border graphics, then just modifying the tga files and leaving the code alone is the best way.

You can change the background and the entire look of the UI piece with out modifying the templates and have it be for only one window or all of them.

Starting out with a fresh group window find the code at the bottom


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>


and change it as so

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


I use the RoundedNoTitle template to avoid any hardcoding that may cause the ui to have an odd look even though the style says titlebar=false.

Next cut and paste a Textureinfo, UI2DAnimation and a StaticAnimation code from somewhere else to the top of the group window. I use the code from the target window since it is convieniant

Quote:
<?xml version="1.0" encoding="us-ascii"?>
<XML ID="EQInterfaceDefinitionLanguage">
<Schema xmlns="EverQuestData" xmlns:dt="EverQuestDataTypes" />

<TextureInfo item="TargetBox.tga">
<Size>
<CX>128</CX>
<CY>32</CY>
</Size>
</TextureInfo>
<Ui2DAnimation item="A_TargetBox">
<Cycle>false</Cycle>
<Frames>
<Texture>TargetBox.tga</Texture>
<Location>
<X>0</X>
<Y>0</Y>
</Location>
<Size>
<CX>116</CX>
<CY>30</CY>
</Size>
</Frames>
</Ui2DAnimation>
<StaticAnimation item="A_TargetBoxStaticAnim">
<ScreenID>A_TargetBoxStaticAnim</ScreenID>
<Animation>A_TargetBox</Animation>
</StaticAnimation>


I actualy have a file with all this, but I usualy still grab it from the target window anyway.
For our purposes here, the game will support formats other than tga including bitmap and possibly jpg, but I always use tga since it is far far smaller than bitmap. Also the game does not react well to images that are not in a 2x2x2 type format. I always stick with 256x256 just to avoid any troubles with scaling and break larger images up into small parts.

Modify the code like so
Quote:
<?xml version="1.0" encoding="us-ascii"?>
<XML ID="EQInterfaceDefinitionLanguage">
<Schema xmlns="EverQuestData" xmlns:dt="EverQuestDataTypes" />

<TextureInfo item="GroupBackground.tga">
<Size>
<CX>256</CX>
<CY>256</CY>
</Size>
</TextureInfo>
<Ui2DAnimation item="A_Groupbackground">
<Cycle>false</Cycle>
<Style_Transparent>false</Style_Transparent>
<Frames>
<Texture>GroupBackground.tga</Texture>
<Location>
<X>0</X>
<Y>0</Y>
</Location>
<Size>
<CX>147</CX>
<CY>204</CY>
</Size>
</Frames>
</Ui2DAnimation>
<StaticAnimation item="A_GroupbackgroundStaticAnim">
<ScreenID>A_GroupbackgroundStaticAnim</ScreenID>
<Animation>A_Groupbackground</Animation>
<Size>
<CX>147</CX>
<CY>204</CY>
</Size>
<Location>
<X>0</X>
<Y>0</Y>
</Location>

</StaticAnimation>


Code removed

<Screen item="GroupWindow">
<ScreenID />
<RelativePosition>false</RelativePosition>
<Location>
<X>516</X>
<Y>78</Y>
</Location>
<Size>
<CX>147</CX>
<CY>204</CY>
</Size>
Code removed
<Pieces>A_GroupbackgroundStaticAnim</Pieces>
</Screen>




make a custom image to your liking. Note the size of the UI2DAnimation and the GroupWindow are the same size for this particular piece since I want to change the overall look of the window. Also note that I have added several lines of code, that I bolded out.

I used a tga file that had a border drawn into it, so I dont need the one from the template. It yeilds the totaly shameless plug from our sponsors.


Notice that the buttons are all out of place, this is because the default size takes into account the ugly filigree.

All coments are welcome, I hope some folks find this helpful. Please if you have questions ask them here rather than in a PM so I can answer it for every one.
Attached Files
File Type: zip ShamlessGroup.zip (37.1 KB, 21 views)
fenrian1 is offline   Reply With Quote