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:



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

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.

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

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.

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:


:nana: :nana: :nana: :nana: :nana: :nana: :nana: :nana: :nana: :nana:

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 ! :)

Great tutorial. Thanks a lot

Jez

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 :D

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.

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. :D

-TJ

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

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

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 :)

ehhh whats the alpha channel for ?

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

-TJ

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 ?

lol only thing i can figure out is the alpha channel is similar to a transparency map for the combined color channels... the lighter the pixel the more solid it is.. the darker, the more transparent...

tried making a drawing on the background layer then switched to channels and added the alpha channel and did a gradient fill... switched back to the background layer and the image fades out gradually... pretty cool effect..

Ok a quick fix for the .tga problems some may be having with ps7.
This came from the Adobe user forums.


"PS 7 no longer has alpha channel support with Targa files. It has been replaced by a transparency channel, which is the correct method according to the targa file specification. However, 3rd party software will recognize the transparency channel as a 'virtual' alpha channel.

If your workflow requires you to have the alpha channel, you can replace Photoshop 7's Targa file format plug in with PS 6's Targa file format plug in, until a fix is released.

The file is Targa.8BI and is located in the Photoshop folder>Plug-Ins>File Formats.

It is rumoured that this behaviour will be changed to that of Version 6 in the next patch to Photoshop."

only bad thing about this is not many people have access to ps6 in order to fix this, if they had only just bought ps7.

Based on the screenshots that you've posted, it looks like whatever program you use is automatically making an alpha channel.

In Photoshop, I've been doing a lot of alterations to my alpha channels the hard way, just drawing in black and white. It's tedious but the end result looks better than what you get by just auto selecting the parts you want to be transparent then saving the selection as an alpha channel.

For instance, If you change the alpha channel in wnd_bg_light_rock.tga to fully transparent, you can have transparent windows just like in the old interface. One thing I tried was just having a symbol with everything else transparent, but found it hard to read the chat window.

I think it was a good idea for them to use alpha transparency, even if it was a pain to learn.

Graphic Editor?
 

I wanna play around and create my own UI but I currently do not have anyting that does tga format. Any suggestions where I can find a cheap/free graphic program?

Also, I am pretty ignorant on any compter stuff in the last ten years so excuse me if I ask dumb quests. I would rather learn to fish then have someone fish for me and I appreciate any help I can get.

If you go to hotfiles.com and do a search for TGA, you'll find a couple cheap/free graphic programs. I dunno how good they are though.

EDIT: Just wanted to add that you need a program which supports TGA alpha transparency, in other words an extra channel, similar to the RGB channels, which sets an opacity level for each pixel. TGA files without an alpha channel don't load in EQ properly. Thay appear totally transparent, in other words you can't see them.

How to place that graphic where you want it
 

Here's what I used to take what was taught that started this post and put it where ever I wanted it basically.

<StaticAnimation item= "UnityLogo">
<ScreenID>UnityLogo</ScreenID>
<Location>
<X>7</X>
<Y>50</Y>
</Location>
<Size>
<CX>128</CX>
<CY>32</CY>
</Size>
<Animation>UnityLogo</Animation>
</StaticAnimation>


And of course don't forget to add this line along with all the other pieces which are at the bottom of the window file.

<Pieces>UnityLogo</Pieces>


You must of course use your own location, size and item name...not UnityLogo :)

UI Character animation
 

I tried replacing the shaman animation with a static picture put when I was done it had totally eliminated the animation and the spot where it used to be now just shows the background....oops any suggestions

Title Bars and masking
 

I have been playing with trying to create a different look for the titlebars. Currently as you can see in my mod (under the "released" thread), I have been somewhat successful.

It seems however that you are married to the mask for the titlebar. I have tried alot of different ideas, from creating my own titlebar template to altering the existing template to look at differnet graphics files. My best success has the graphic I want but it is masked to the original rounded title bar style. i.e. it is cropped to the dimensions of the rounded title bar.

Anyone have any advise?

Avallach

Hey Bowler
 

You can't just replace that class animation with just anything, but if you did what this post in original about plus what I posted above to put a static pic anywhere you want you could put it over the animation and move the animation off the screen. There are several ways you can do it.

Another way is to just make another animation to replace it like I did. Each class has 1 to 3 graphic files that would need to be replaced if you wanted to do this....for instance a monk has:

monk01.tga
monk02.tga

Both would have to be replaced in order for it to work or else you'd have to know how to make it so one didn't show up. Which is a bit involved

Here's some links to what I did:

My graphic is simply a guild logo and this is what both my monk files look like since all my logo does is twinkle it's easy to adapt for just 1 file or if 3 are needed.

The Graphic I replaced my Class Animations with

It looks sort of like this gif animation but better since gifs only have 256 colors in it:

Guild Logo to replace my class animation

Here it is in my UI

Hope this helps!

Replace animation
 

I tried replacing the animation file with a TGA that had a different static picture... it seems to ignore it and go with the default. My static pic is 128 x 64 on a 256x256 transparency (sp). The shaman class has only one file and I replaced it with this but it still defaults the shaman animation. Do I have to do all of the first part of this post or am I correct in assuming I can do it in one step. Also should I tile the image to match the number of frames in the original animation?

Tile would work.....each one of those graphics have several frames in them....so if you are just making one frame and there were 8 then you have a problem cause the program is telling it to look for all 8 frames.

I took a look at the shammy tga file and it like the rest are 256 X256.....each frame is 64 wide, by 128 tall and there are 7 frames for the shaman. You can do 8 so you use up all the space on the 256 X 256 graphic if you want.....if it's only looking for 7 frames then it won't play the 8th. It will look static if you use the same graphic for each frame since there will be no changes.

The easiest way for you to change that class animation is the way you are doing it but do it like the original graphic is and it will work.

/shrug
 

Made 7 identical frames all 64x128 ... entered game did /loadskin.. then camped to desktop and came back. When I got back the spot where my character animation should be just showed the granite background with no box outline or anything. The class animation was just gone. I wonder if my graphic editor cant do TGA correctly for this.. Im using Adobe Photoshop Elements?

saving
 

How are you saving it.....32, or 24 or 16 bit. I believe when I saved mine I had to do it in 24 bit. Seems some stuff you can save in 32 bit and some you can't. Only thing I can think of is in 32bit the file size is too big. And if I remember right then when I saved in 32bit the picture wouldn't show either and this would happen in 16bit too.

I'd try saving each way and I bet that fixes your problem :)

Doh I posted this as new thread instead of reply...hehe

POW ....it worked .... saved it at 24bit and did just fine... thanks for your help

/salute

Transparency methinks....