psychogears

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:



Somewhere between these TextureInfo declarations start a new TextureInfo item. Your file might look like this:


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:



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:



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



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:



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



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:



(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