Home Forum Downloads My Favorites Register FAQ Mark Forums Read

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

Reply
 
Thread Tools Display Modes
Old 07-31-2002, 10:17 PM   #1
psychogears
A Shissar Disciple
 
psychogears's Avatar
 
Join Date: Jul 2002
Server: Xev
Posts: 106
Send a message via ICQ to psychogears Send a message via AIM to psychogears Send a message via Yahoo to psychogears
Exclamation Tutorial: How to make your own custom graphics

How to make my own graphics for EQUI

Tools I need:
* text editor -OR- some application that you edit XML files with. I've heard XMLspy is a good program to use, but I can't afford it so I use notepad.
* graphics editor - You need a graphics editor that supports transparency and that can save to TARGA format.

1) Start a new picture.

Make a new file whose dimensions are a power of 2. Valid image dimensions are:
  • 128 x 128
  • 256 x 128
  • 256 x 256
  • 128 x 256
  • 512 x 1024
  • 2048 x 128
  • 2 x 2

Invalid image dimensions are:
  • 100 x 200
  • 500 x 1024
  • 128 x 129
  • 1 x 1


(EDIT: I used to have it say "multiple of 128", but I just realized that it was a power of 2. Thanks to Geddine for the correction.)

When making the new image, make sure you start with a blank canvas, and not white or black or some other color. You want your canvas to start transparent, so that your pretty circle will show up in EQ as a circle and not an ugly circle with a square background.

2) Draw.

*Note: you can have more than one picture per image_file.tga. I have two, see?



Take note of their upper-left coordinates for LOCATION, and the width and length for SIZE. I have those pointed out in my pretty image file.

When you save your file, you can save it as a 32-bit *.tga file and it will still work, EQ will just take away the colors if the user is playing at a lower color depth. Also, don't compress (don't save as *.rle)

3) Time to play with code.

If you didn't already, copy the files you wish to modify from the default folder into a directory in $everquest$\uifiles\, and save it under a name you will remember, like "myprettyui"

Go to your directory which you named "myprettyui" or whatever you called it, and open the file EQUI_Animations.xml. You see alot of scary code. Look closer, it's in 2 sections. The first section is where you tell EQUI that you made a pretty new picture and you want to use it in EverQuest. Find the following part of code:

Code:
01 <?xml version = "1.0"?> 02 <XML ID = "EQInterfaceDefinitionLanguage"> 03 <Schema xmlns = "EverQuestData" xmlns:dt = "EverQuestDataTypes"/> 04 <TextureInfo item = "CS_Buttons.bmp"> 05 <Size> 06 <CX>256</CX> 07 <CY>256</CY> 08 </Size> 09 </TextureInfo> 10 . 11 . 12 .


Somewhere between these TextureInfo declarations start a new TextureInfo item. Your file might look like this:
Code:
01 <?xml version = "1.0"?> 02 <XML ID = "EQInterfaceDefinitionLanguage"> 03 <Schema xmlns = "EverQuestData" xmlns:dt = "EverQuestDataTypes"/> 04 <TextureInfo item = "CS_Buttons.bmp"> 05 <Size> 06 <CX>256</CX> 07 <CY>256</CY> 08 </Size> 09 </TextureInfo> 10 <TextureInfo item = "sample.tga"> 11 <Size> 12 <CX>512</CX> 13 <CY>128</CY> 14 </Size> 15 </TextureInfo> 16 . 17 . 18 .


What this does is it tells EQUI "Hey! I have a pretty picture file I want to use and it's called 'sample.tga', please load it when you load my pretty ui in EQ ok? tks!"

Okay, that's part 1 of coding. Time for part 2

5) Play with code part 2

Scroll down the file to where you start to see alot of Ui2DAnimation tags. Same with TextureInfo, make a new tag in between Ui2DAnimation declarations. (Personally, I like to just copy the one nearby then fill in my own parameters)

So now you have your Ui2DAnimation declaration set up, let's fill in the values. You should have something that looks like this:

Code:
<Ui2DAnimation item = "A_VSBDownNormal"> <Cycle>true</Cycle> <Frames> <Texture>window_pieces01.tga</Texture> <Location> <X>10</X> <Y>112</Y> </Location> <Size> <CX>12</CX> <CY>22</CY> </Size> <Hotspot> <X>0</X> <Y>0</Y> </Hotspot> <Duration>1000</Duration> </Frames> </Ui2DAnimation>


You need to change the first line from where it says "A_VSBDownNormal" or whatever you copied to the interface piece you want to declare, like "MyPrettyRedCircle". Now you have:

Code:
<Ui2DAnimation item = "MyPrettyRedCircle"> <Cycle>true</Cycle> <Frames> <Texture>window_pieces01.tga</Texture> <Location> <X>10</X> <Y>112</Y> </Location> <Size> <CX>12</CX> <CY>22</CY> </Size> <Hotspot> <X>0</X> <Y>0</Y> </Hotspot> <Duration>1000</Duration> </Frames> </Ui2DAnimation>


Skip the next 2 lines. Where it says
Code:
<Texture>window_pieces01.tga</Texture>
, replace where it says "window_pieces01.tga" to "sample.tga" or whatever you named your file. Now you have:

Code:
<Ui2DAnimation item = "MyPrettyRedCircle"> <Cycle>true</Cycle> <Frames> <Texture>sample.tga</Texture> <Location> <X>10</X> <Y>112</Y> </Location> <Size> <CX>12</CX> <CY>22</CY> </Size> <Hotspot> <X>0</X> <Y>0</Y> </Hotspot> <Duration>1000</Duration> </Frames> </Ui2DAnimation>


Since we're declaring our pretty red circle here, we're gonna change the Location coordinates X and Y to the X and Y values in the picture, *NOT* where you want it to be on screen in the game. Let's change this to our location for our pretty red circle now, which is X = 50 and Y = 20. Now you have:

Code:
<Ui2DAnimation item = "MyPrettyRedCircle"> <Cycle>true</Cycle> <Frames> <Texture>sample.tga</Texture> <Location> <X>50</X> <Y>20</Y> </Location> <Size> <CX>12</CX> <CY>22</CY> </Size> <Hotspot> <X>0</X> <Y>0</Y> </Hotspot> <Duration>1000</Duration> </Frames> </Ui2DAnimation>


Next we fix the Size. Our pretty red circle is 70px high and 80px high. Set CX = 70 and CY = 80. Now we have:

Code:
<Ui2DAnimation item = "MyPrettyRedCircle"> <Cycle>true</Cycle> <Frames> <Texture>sample.tga</Texture> <Location> <X>50</X> <Y>20</Y> </Location> <Size> <CX>70</CX> <CY>80</CY> </Size> <Hotspot> <X>0</X> <Y>0</Y> </Hotspot> <Duration>1000</Duration> </Frames> </Ui2DAnimation>


For most graphics, this is where you stop. Leave the rest as it is, and you can use this picture in your windows, gauges, buttons, spell icons, etc., everything except the mouse cursor. If you're making a mouse cursor, you set the hotspot X and Y to whatever pixel it is inside the image that you want to set the point of the pointer to. I won't get into that, but you can experiment on your own.

Now your graphic is accessible by saying "MyPrettyRedCircle". But we have another pretty blue rectangle to put into the game, so we do this again:

Code:
<Ui2DAnimation item = "MyPrettyBlueRectangle"> <Cycle>true</Cycle> <Frames> <Texture>sample.tga</Texture> <Location> <X>250</X> <Y>20</Y> </Location> <Size> <CX>70</CX> <CY>40</CY> </Size> <Hotspot> <X>0</X> <Y>0</Y> </Hotspot> <Duration>1000</Duration> </Frames> </Ui2DAnimation>


(Here is the text of what you added might look like: click here to see

Now you have 2 Ui2DAnimation items that you added in, and 1 TextureInfo item which the Ui2DAnimation items draw their image from. Hooray for you! How do you use it?

Wherevever you put in information for a graphic picture, you can use the item name, in our example MyPrettyRedCircle or MyPrettyBlueRectangle would be what you put in the field. Wherever you see A_..., you can replace that with your new graphic alias name. Just remember to set the height and width of your in-game picture to be what you want it to be, and it doesn't have to be the same as your image size. You can make a 12 x 12 image, and use that in a 500 x 500 picture in-game.

The one thing to realize is that what you declare as graphics and what shows up in the game are almost completely different. That's another tutorial for another time... like tomorrow.

-TJ
__________________
Hazul, Plik, Xzhamacharathae, Seis, Lyca, Pogi, Camm...

of Xev

Last edited by Dolby : 09-20-2004 at 12:07 PM.
psychogears is offline   Reply With Quote
Old 08-01-2002, 02:33 AM   #2
Demorgoth
A Gray Wolf
 
Join Date: Jul 2002
Posts: 8
Default

OK, I've got my custom .tga image, 768x256, transparency on alpha channel is fine. The problem I've got is that the image isn't showing correctly.

I tell EQUI_Animations the the image is, say, 300x100 pixels, and what it seems to do is take a 400x100 piece and squash it into 300x100. I can't for the life of me see whay it's do that.

Anyone else had anything simlar to this, or is it my fault somewhere? I'll be starting from scratch with clean code tday, just to re-try.
Demorgoth is offline   Reply With Quote
Old 08-01-2002, 02:44 AM   #3
psychogears
A Shissar Disciple
 
psychogears's Avatar
 
Join Date: Jul 2002
Server: Xev
Posts: 106
Send a message via ICQ to psychogears Send a message via AIM to psychogears Send a message via Yahoo to psychogears
Default

That's strange, I've never had that happen. Can you post up the section of EQUI_Animations.xml that you edited, as well as the part in the .xml file where you view that image in-game? Maybe we can find what went wrong.

-TJ
psychogears is offline   Reply With Quote
Old 08-01-2002, 03:00 AM   #4
Geddine
A Wooly Rhino
 
Join Date: Jul 2002
Server: Morell-Thule
Posts: 77
Interface Author - Click to view interfaces
Default

The reason for the stretch is that 768 is not really a valid size for a file. File size dimensions need to be a power of 2 eg. 2, 4, 16, 32, 64, 128, 256, 512, 1024, 2048, 5096 etc

What is happening is EQ is stretching your image to a size it can use - namely 1024 wide. Now your image is 400 pixels wide. eg. 768/3*4 = 1024 so 300/3*4 = 400.


Hope this solves your problem.
__________________
Geddine
"Of all the things I've lost, I miss my mind the most"
Geddine is offline   Reply With Quote
Old 08-01-2002, 06:42 AM   #5
Nennayan
A Shissar Disciple
 
Nennayan's Avatar
 
Join Date: Jul 2002
Server: Brell Serilis
Posts: 147
Send a message via ICQ to Nennayan Send a message via AIM to Nennayan
Default

Thanks a lot for posting this Psychogears!

I've been slowly getting the hang of this, but now you've answered most, if not all of my questions. I think I'll be posting my new mod a lot sooner now, thanks to you!

[EDIT: Forgot to mention that file sizes below 128x128 will also work if they are a power of 2. Just look at Scrollbar_Gutter.tga]

And now for some gratuitous use of the dancing banana:


__________________
Nennayan is offline   Reply With Quote
Old 08-01-2002, 07:35 AM   #6
arantius
A Crystal Gargoyle
 
Join Date: Jul 2002
Posts: 97
Interface Author - Click to view interfaces
Default

A bit wordy for me, but hey someone might need that info. Still had the few key bits I needed. (Why would they ever restrict size like that... oh well. And hehe I missed the first definition in animations.)

Wouldn't have needed this if they didn't screw up the caching, but now, I have the blue line in the MIDDLE of my xp bar again! Cheer!

Thanks for layin it all out there !
__________________
You can find all my EQ UI work at:
http://www.tcnj.edu/~lieuall2/equi/
arantius is offline   Reply With Quote
Old 08-01-2002, 08:43 AM   #7
jeremyf
A Gray Wolf
 
Join Date: Jul 2002
Server: Bertoxx
Posts: 8
Default

Great tutorial. Thanks a lot

Jez
jeremyf is offline   Reply With Quote
Old 08-01-2002, 08:45 AM   #8
Demorgoth
A Gray Wolf
 
Join Date: Jul 2002
Posts: 8
Default

Thanks Gedd, that makes perfect sense. I didn't even know if numbers other than 256x256 would work, so took a flyer at a multiple of 256. Will try this when I get home, but am 99% sure it'll work.

Thanks

That's what I get for messing around in unknown territory hehe. Still, seem to be doing great guns for no programming background at all, not even html.
Demorgoth is offline   Reply With Quote
Old 08-01-2002, 01:46 PM   #9
psychogears
A Shissar Disciple
 
psychogears's Avatar
 
Join Date: Jul 2002
Server: Xev
Posts: 106
Send a message via ICQ to psychogears Send a message via AIM to psychogears Send a message via Yahoo to psychogears
Default

Quote:
Originally posted by arantius
(Why would they ever restrict size like that... oh well. And hehe I missed the first definition in animations.)


Well... I'm going to take a stab at this, not sure if I'm right...

Data in your computer is represented by bits, which are 0 and 1. numbers to 2 are 0 and 1, and can be represented by 1 bit. numbers to 4 are 0, 1, 2, 3, and are represented by 2 bits: 00, 01, 10, 11. Numbers to 8 are 0, 1, 2, 3, 4, 5, 6, 7, and are represented by 3 bits: 000, 001, 010, 011, 100, 101, 110, 111, and so on and so forth.

If an image size other than a power of 2 is used, then it looks like the EQUI engine will just automagically scale your image to the next power of 2... in the case above, 768 gets scaled to 1024. Why they chose to do this I don't really know, but this way you can use all of the bits required to reference points in the picture. It takes 9 bits to store numbers to 512, from 0 to 511, and to reference numbers 512 and above you *need* 10 bits. 512 in binary is 1000000000, whereas 511 is 0111111111, or 111111111. The number 768 in binary is 1100000000.

I suppose EQ wants pictures with sizes in multiples of 2, probably having something to do with the way it stores and references those image files in memory. If it doesn't have an image size that it likes, it will just scale it so it's compatible with whatever method they use to store the image files in mem. To reference points in the pic, it's 0 to (power of 2), and this way it uses all of the space allocated, I guess.

Sorry if that was convoluted, I have a very dim picture of the way the images are stored and referenced in memory.

-TJ
psychogears is offline   Reply With Quote
Old 08-01-2002, 02:42 PM   #10
buzweaver
A Shissar Disciple
 
Join Date: Jul 2002
Server: Bertoxxulous
Posts: 119
Send a message via AIM to buzweaver
Default

Nicely done Psycho, I'm looking forward to the next lesson.
__________________

Retired
BuzzFelinous (26 Bard)
BuzzVar(40 Shaman)
BuzzSilverThor (68 Storm Warder )
buzweaver is offline   Reply With Quote
Old 08-01-2002, 03:52 PM   #11
Demorgoth
A Gray Wolf
 
Join Date: Jul 2002
Posts: 8
Default

Yuppers, as suspected, Gedd nailed the problem for me. Increased the tga to 1024 x 256, and it worked like a charm. Windows are being beta-tested by my guild, but I'll post them in a week or so
Demorgoth is offline   Reply With Quote
Old 08-01-2002, 05:08 PM   #12
Statix
A Ghoul
 
Join Date: Jul 2002
Posts: 19
Interface Author - Click to view interfaces
Default

awesome someone made this tutorial before me haha yay! =), yea it sucked before i figured out the powers of 2 crap when i was making quartz because i had the UI already drawn out but eq was streching it all over.


Photoshop has this bug with saving alpha channels by the way, seems if you make an image and alpha chan at the same time and hit save it won't save the alpha.

You have to make the image , save, then close it.

Then you have to open the image again make the alpha channel, save, close.

Then check to make sure it saved /ghetto photoshop
Statix is offline   Reply With Quote
Old 08-01-2002, 05:55 PM   #13
Veirna
An Icepaw Kobold
 
Veirna's Avatar
 
Join Date: Jul 2002
Posts: 86
Interface Author - Click to view interfaces
Default

ehhh whats the alpha channel for ?
__________________
Veirna is offline   Reply With Quote
Old 08-01-2002, 06:18 PM   #14
psychogears
A Shissar Disciple
 
psychogears's Avatar
 
Join Date: Jul 2002
Server: Xev
Posts: 106
Send a message via ICQ to psychogears Send a message via AIM to psychogears Send a message via Yahoo to psychogears
Default

no idea. But I'd like to know too, maybe I can use it.

-TJ
psychogears is offline   Reply With Quote
Old 08-01-2002, 06:31 PM   #15
Veirna
An Icepaw Kobold
 
Veirna's Avatar
 
Join Date: Jul 2002
Posts: 86
Interface Author - Click to view interfaces
Default

ok got something i need elaborated on ...

EQUI_Templates.xml -- point of this file ?

i see <DrawTemplate> in a lot of the window.xml files.. and im guessing this is where we define the "background image" to use.. right ?

i mean you explained how to set your own images to be made, but didnt exactly explain how to incorporate them into the interface ..

am i on the right track ?
Veirna 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 11:32 PM.


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