Home Forum Downloads My Favorites Register FAQ Mark Forums Read

Go Back   EQInterface Forums > Tutorials & Info. > XML Tutorials & Info.
User Name
Password

Reply
 
Thread Tools Display Modes
Old 05-18-2007, 10:53 AM   #1
fenrian1
A Shissar Defiler
 
fenrian1's Avatar
 
Join Date: Jun 2005
Posts: 164
Interface Author - Click to view interfaces
Default Managing custom animations and templates.

After writing a quick tutorial to answer someones question, I decided to write a proper tutorial on how to manage and create custom templates and animations. I suspect this post will get rather long and I ask that the board guru's please read and coment on any errors so I can update/fix as needed. I will start by saying, I am not a programmer and every thing I know I learned from trial and error and spending many many hours using the search feature. I will start with some discussion before I move to actual coding. I was raised by 2 professors, so if I begin to sound like I am lecturing, you can blame them =).

The EQ UI is unfortunately loaded with a ton of hardcoding, so certain things can not be altered with a custom template, the close and minimize buttons are a good example, they will always appear in the same spot, regardless of how you code them.

For the vast majority of mods, there is no reason to modify the animations code. If you want a custom border on a mod, the simplest thing to do is to change the WindowDrawTemplate to WDT_RoundedNoTitle, then modify the tga file. This of course will then affect every window that uses that template, which is not always desireable. The next simplest method is to set borders and titlebar to false, set transparent to true, then use a custom StaticAnimation that has the look you want. In order to do something like have a close or minimize button, but have no visible title bar, you will have to make a custom Template that has a clear title bar since the close button is hardcoded to the title bar.

I will start by defining some language;
EQUI.xml: the so called "xml" file, this tells the game what code files to use in the UI.
Screen item: the actual UI piece, or a window inside the UI piece.
Template: this tells the game what parts to use and how to put them together.
Animation: the actual image used by the template, its called a UI2DAnimation in the code.
Texture: the tga file that contains the animation image
.TGA: a image extension similar to .jpeg but allows for an alpha chanel

Every image seen on the screen requires 2 things, a texture and an animation. depending upon the item, it may also require further defining of the animation. Most animations will work as a UI2DAnimation, but certain images such as backgrounds require that the UI2DAnimation be refined as a StaticAnimation.

Every screen item requires a template to tell the game what parts it needs how to put them together, the template then tells the game what parts to use and the animation file then tell the game what texture to use and where on that texture the image is.

Many modders create a custom xml file and then include a modded EQUI.xml file that tells the game to include both all the normal stuff as well as thier custom xml file. I will not go into the details here of how to do this since their is already a tutorial on it. This is a good method of working since the UI will only break when the xml file is updated, and that pretty much only happens when a new UI piece is added, like the browser window on 5/16/07.

If you make a custom animations file, it will break every time the animations file is updated, which is fairly often. It will also make your mod incompatible with any other mod that uses a custom animations file.

There are several places to include modified templates,animations and textures. You can modify the default stuff, make a custom xml file, include it at the top of the UI piece you are modding, or include it at the top of the actions window code if you want it global. I prefer this last method since the actions window is never updated by sony and since its the first UI piece to be read, an custom code placed here will be global and very stable.

Now for the coding itself...
fenrian1 is offline   Reply With Quote
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...

Last edited by fenrian1 : 05-18-2007 at 01:53 PM.
fenrian1 is offline   Reply With Quote
Old 05-18-2007, 12:23 PM   #3
fenrian1
A Shissar Defiler
 
fenrian1's Avatar
 
Join Date: Jun 2005
Posts: 164
Interface Author - Click to view interfaces
Default

To modify the title I will need to start with a custom tga file, then create a custom texture,templates and animations file. Rather than modifying the animations and templates file, I will do all the coding in the groupwindow file I will quote parts here and include a zip of the mod itself.

the first thing I will do is to copy and paste the code from the animations and templates files I used in my last post to the top of the group window.


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


<TextureInfo item="window_pieces05.tga">
<Size>
<CX>256</CX>
<CY>256</CY>
</Size>
</TextureInfo>
<Ui2DAnimation item="A_FiligreeFrameTitleLeft">
<Cycle>true</Cycle>
code removed
</Ui2DAnimation>

<Ui2DAnimation item="A_FiligreeFrameTitleMiddle">
<Cycle>true</Cycle>
code removed
</Ui2DAnimation>

<Ui2DAnimation item="A_FiligreeFrameTitleRight">
<Cycle>true</Cycle>
code removed
</Ui2DAnimation>

<WindowDrawTemplate item="WDT_Filigree">
Code removed
<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>


The bolded and colored code is the code I need to change, the code that is the same color is the code that needs to be modifed to match and is changed as so

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


<TextureInfo item="GroupWindow.tga">
<Size>
<CX>256</CX>
<CY>256</CY>
</Size>
</TextureInfo>
<Ui2DAnimation item="A_GroupTitleLeft">
<Cycle>true</Cycle>
<Frames>
<Texture>GroupWindow.tga</Texture>
<Location>
<X>5</X>
<Y>10</Y>
</Location>
<Size>
<CX>14</CX>
<CY>21</CY>
</Size>
</Frames>
</Ui2DAnimation>
<Ui2DAnimation item="A_GroupTitleMiddle">
<Cycle>true</Cycle>
<Frames>
<Texture>GroupWindow.tga</Texture>
<Location>
<X>25</X>
<Y>10</Y>
</Location>
<Size>
<CX>6</CX>
<CY>21</CY>
</Size>
</Frames>
</Ui2DAnimation>
<Ui2DAnimation item="A_GroupTitleRight">
<Cycle>true</Cycle>
<Frames>
<Texture>GroupWindow.tga</Texture>
<Location>
<X>35</X>
<Y>10</Y>
</Location>
<Size>
<CX>12</CX>
<CY>21</CY>
</Size>
</Frames>
</Ui2DAnimation>

<WindowDrawTemplate item="WDT_Group">
<Background>wnd_bg_light_rock.tga</Background>
<Titlebar>
<Right>A_GroupTitleRight</Right>
<Left>A_GroupTitleLeft</Left>
<Middle>A_GroupTitleMiddle</Middle>
<OverlapLeft>0</OverlapLeft>
<OverlapTop>0</OverlapTop>
<OverlapRight>0</OverlapRight>
<OverlapBottom>0</OverlapBottom>
</Titlebar>
</WindowDrawTemplate>


Note that all only the code that I modified is shown here, the unmodified code that is not shown must be included in the UI piece and will be drawn from the defaults like normal. Note also that I changed the locations of the new pieces, but I left them the defaul size, Since the title bar has some hard coding built into it, you cant make them too far different from the default size.

The custom tga file I made looks like this


and it yields this ugly mod



Next StaticAnimations...
Attached Files
File Type: zip EQUI_GroupWithUglyTitle.zip (2.6 KB, 23 views)
fenrian1 is offline   Reply With Quote
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)

Last edited by fenrian1 : 05-18-2007 at 02:02 PM.
fenrian1 is offline   Reply With Quote
Reply



Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off


All times are GMT -5. The time now is 01:55 AM.


vBulletin Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
© MMOUI