Multi-colored gauges?
 

Ok...I've seen a few mods that have multicolor gauges for player health or group health, but I'm a little confused on how they work. I have downloaded one and looked at the code to figure out the following. (Please let me know if this is right or I'm way off base!)

I know how EQ deals with the Alpha channel of the graphics. What I am assuming is that you make (lets say 3) health bars in one of the graphics files. Each of these health bars are the same width and height. Now...what I think is done is for health bar #1, only the first 1/3 of the bar is added to the Alpha channel. #2 had the middle 1/3 added to the Alpha channel and #3 had the last 1/3 added to the channel. (This is a guess on my part - I'm at work and can't try any of this)

Now... in the code will be 3 gauges (per person) all in the exact same place on the window (same location and size). Each of these guages will have the same EQ type, but when you are declaring what animations to use to draw them, you use the 3 different gauges that you have drawn. Also, each gauge uses a different fill color.

Is this anywhere close to right? If not, could someone possible explain this to me? Thanks in advance.

I like that idea i have never seen that before. what you ahve said so far makes since but would one just over lap the other... or maybe using a targa editor you could make the rest of the bar transparent

just my 2 copper

Another way to pull this off in one tga file and one call to a gauge. But to do this you would have to understand the way that colors interact with each other. The way that the gauges work is that you define a background (if you want one) and you define a fill background (genereally gray). Now if you wanted to you could make the Fill background multi colored so that as the color pattern you define as the tint with in the xml would be different colors depending on which part of the fill background was being used at the time. Example:

R=red, Y=Yellow, G=Green

RRRRYYYYGGGG

Not to make this bar come out this way you would have to make the Fill background the colors that when mixed with what ever tint you are using comes out to be these colors. I am not all that great with colors but I sure could do the old trial and error method to get the colors I wanted. I know that in practise this would work because I have used colored Fill backgrounds and seen the effect they have on the gauge in game. If anyone is confused about what I am saying here then just let me know and I will see if I can explain it a little better with some graphics and show you what I am talking about.

But this way you only have to use one gauge call to get your multi colored gauge.

Ok I just went and tested this. Here is what I did. And I will attach a tga file with my fill pattern as well.

I created a fill pattern with the colors I wanted the bar to be. Then I defined the tint for the gauge to be:

R=255
G=255
B=255

This way the fill pattern comes out to be white. So that when the gauge is displayed on the screen it comes up when full being the colors that I made the fill pattern. Here is the tga file I used and I will show you the code that I used to fill it in the player window.


Here is the code from the player window. I renamed the fill pattern to use the pattern from this new file instead of the original fill pattern.

<FillTint>
<R>255</R>
<G>255</G>
<B>255</B>
</FillTint>
<DrawLinesFill>false</DrawLinesFill>
<EQType>1</EQType>
<GaugeDrawTemplate>
<Background>A_GaugeBackground</Background>
<Fill>Test_GaugeFill</Fill>
<Lines>A_GaugeLines</Lines>
<EndCapLeft>A_GaugeEndCapLeft</EndCapLeft>
<EndCapRight>A_GaugeEndCapRight</EndCapRight>

</GaugeDrawTemplate>

As you can see I used the same standard pieces for the rest of the gauge and just changed the fill pattern.

Here is the fill pattern. I am not attaching a Screen shot because in this case the screen shot came out to look just like a regular gauge only with the colors from this fill pattern.



Of course I am not much of an artist so this is not a great job but there is no reason why someone else here that is an artist couldn't make something really great.

Ok so I lied. I decided that I should have a screen shot of how it looked so that people would see that is really does work. So here it is:

Just wanted to say that I did test my original thoughts and they did work, but I REALLY like what you did Chron. That would make the coding much cleaner. Very nice job and what's so great about it is that I understand what you did!!! :p Thanks for the feedback.

Just to let you know...yes, you have to make the different parts transparent for this to work.

ex. (the x's are where you would draw in the tga file and -'s are what should be transparent)


bar1 - xxxx-------
bar2 - ----xxxx---
bar3 - --------xxx

But remember...Chron's method is much cleaner and easier :D

Why thanx Forry.

I know this is prolly really really simple but I dont see why this would work. What is Test_GaugeFill and A_GaugeLines? I know I sound like a newb to this stuff, prolly cause I started about a week ago, but one of the best ways to learn is asking questions.

I've been using this for a while now in a mixed drakah UI. I basicaly made a call to another gauge set and changed the grraphic used for the set.....

<!-- Custom Gauge Parts -->

<Ui2DAnimation item = "B_GaugeBackground">
<Cycle>true</Cycle>
<Frames>
<Texture>window_pieces06.tga</Texture>
<Location>
<X>110</X>
<Y>10</Y>
</Location>
<Size>
<CX>109</CX>
<CY>9</CY>
</Size>
<Hotspot>
<X>0</X>
<Y>0</Y>
</Hotspot>
<Duration>1000</Duration>
</Frames>
</Ui2DAnimation>
<Ui2DAnimation item = "B_GaugeFill">
<Cycle>true</Cycle>
<Frames>
<Texture>window_pieces06.tga</Texture>
<Location>
<X>110</X>
<Y>20</Y>
</Location>
<Size>
<CX>109</CX>
<CY>9</CY>
</Size>
<Hotspot>
<X>0</X>
<Y>0</Y>
</Hotspot>
<Duration>1000</Duration>
</Frames>
</Ui2DAnimation>
<Ui2DAnimation item = "B_GaugeLines">
<Cycle>true</Cycle>
<Frames>
<Texture>window_pieces06.tga</Texture>
<Location>
<X>110</X>
<Y>30</Y>
</Location>
<Size>
<CX>109</CX>
<CY>9</CY>
</Size>
<Hotspot>
<X>0</X>
<Y>0</Y>
</Hotspot>
<Duration>1000</Duration>
</Frames>
</Ui2DAnimation>
<Ui2DAnimation item = "B_GaugeLinesFill">
<Cycle>true</Cycle>
<Frames>
<Texture>window_pieces06.tga</Texture>
<Location>
<X>110</X>
<Y>40</Y>
</Location>
<Size>
<CX>109</CX>
<CY>9</CY>
</Size>
<Hotspot>
<X>0</X>
<Y>0</Y>
</Hotspot>
<Duration>1000</Duration>
</Frames>
</Ui2DAnimation>
<Ui2DAnimation item = "B_GaugeEndCapLeft">
<Cycle>true</Cycle>
<Frames>
<Texture>window_pieces06.tga</Texture>
<Location>
<X>216</X>
<Y>20</Y>
</Location>
<Size>
<CX>4</CX>
<CY>8</CY>
</Size>
<Hotspot>
<X>0</X>
<Y>0</Y>
</Hotspot>
<Duration>1000</Duration>
</Frames>
</Ui2DAnimation>
<Ui2DAnimation item = "B_GaugeEndCapRight">
<Cycle>true</Cycle>
<Frames>
<Texture>window_pieces06.tga</Texture>
<Location>
<X>216</X>
<Y>20</Y>
</Location>
<Size>
<CX>4</CX>
<CY>8</CY>
</Size>
<Hotspot>
<X>0</X>
<Y>0</Y>
</Hotspot>
<Duration>1000</Duration>
</Frames>
</Ui2DAnimation>


sorry I cant attach a pic of the gauge itself but it works great!

Hey Hijiun, Sorry the guy that was originally asking about this knew a little about the animations and stuff so I did not detail the entire process.

Basically the Test_GaugeFill was a Ui2DAnimation item that I had created that used the graphics file that I had created to define the fill pattern for the gauge. When you look at the graphics file I sent with the message you see all the different parts laidout that are used to make a single gauge. So what I did was created a separate file with the colored gauge parts and I then defined the new fill pattern in the window file that I was using with a Ui2DAnimation item similar to what Koradin has posted here. But I only defined just the one section because all the other parts were still the same as the original gauge design so didnt need to be redefined. That way I just created a definition for Test_GaugeFill and used it for the fill pattern in the code for the gauge to be displayed, which is the code that I pasted here.

The other parts of the gauge that all start with A_GaugeXXXXX are the standard part that are used to create a gauge in a window.

As for the first part of the question. The reason this works is because I have used a color fill pattern for the gauge that when displayed with a white color designation comes out to be the colors that I used for the fill pattern that I have defined as Test_GaugeFill. Actually it comes out to be a little bit brighter than I made the fill pattern because I use pure white for the color designation. But I suspect that if you brought the color designation down a little like to R=180 G=180 B=180 that it would come out to be much closer to the color that is in the TGA file that is used for the Test_GaugeFill definition.

If this still does not make sense let me know and I will redo this test and paste up all the parts for the fill pattern to work. The only reason I did not paste them up here before is because I did not save the definitions after I did the test and so would have to recreate them to paste them here.

thanks it does make sence =) will have to try on my own thanks

Ok I saw what you guys did and thought I'd try something of my own. I used 6 gauges to make a color changing pet gauge that starts green, turns yellow, then red.

RRRYYYGGGG

Red for 30 percent, yellow for 30, and green for 40.

BUT, it all changes color at once. The gauge starts green, turns yellow at 60 percent, and red at 30 percent. I'll post screenshots in a sec. Gotta get my pet beat up.

What is SPECIAL about my gauge is I didn't make any new graphics, I just used the default gauge to do it all. Note that the screenshots I will post were made with a vert skin, so although they look special, they are all from windows_pieces01.tga. I will post the XML file after the screenshots.

Enok

I attached the file to the last post, and here's a screenshot.



Enok

so i could use this in an existing pet window just by adding the correct code? reason i ask is because i use a horizontal pet display that i love, but I really want the use of the color health meter.

Thanks

Upload your window here. My XML for the gauge is complicated enough that I don't want you ripping your hair out trying to convert it. Theorhetically you could just add the code, but... if you don't wanna try I'm willing to do it.

Enok

Wow Haliken, How long did it take you to work all that out. I went looking through your code and that is a lot and I mean a lot of work in there. You have some rather unique ways of doing things. I am very impressed. If you don't mind I am going to borrow your code to see how it works with other gauge typs I have around. Should be interesting.

I just have to say it again, WOW.

I made it in literally 10 minutes. I did a LOT of work with gauges making a vertical casting gauge and color coding in the group window. So 5 gauges is nothing compared to a few dozen or even a hundred (needed for a vertical gauge).

Enok

P.S. - Attaching some truly complex stuff. Take a look at it Chronwaas if you think this was neat. =D

P.P.S. - For anyone who cares. All my mods drop into most mix'n'match setups.

Thanks for the help!

Ok Wildaar, try this. I have no way of testing since I don't have the graphics file that goes with whatever UI you're using. If the gauge is off by a few pixels (especially left and right, I sorta had to guess at the X location) let me know.

Enok

ya it was way off, they bleed together and stuff. heres the graphics file if that helps

OK, try this one. It worked for me.

Enok

nice work! makes seeing pet health 10x easier

Very nice work both of you.
Now i am a new user of your pet bar, with color changes.
Now i can see Jobeker much better.
Thanks alot for your work.

Releasing a better version (just better coding) with Enoks UI v6, watch for it!

Enok

My god Enok. I was considering making all of the HP gauges in my PDA multi colored till I read the code you implemented.. I can only Imagine the total code needed to make the Target, Player, Player Pet and all 5 group members gauges in a 2 color format.

Can you give me a brief explanation of why 6 gauge calls are needed for a 3 color gauge and what purpose having each gauge call in an invisible tabbed box serves?

If I were to add Multi Color to my PDA would I have to have a seperate set of tabs per gauge and would the fact that my group window already resides in a tab be affected by such a mod? Can a tabbed page reside in another tabbed page?

Do the gauges need to be on a seperate tab page to overlap? Also I see some really huge negative gauge offsets, why so far?

How does the game know which tab to call forward when its time to display the appropriate gauge?

I can appreciate the amount of XML knowledge that you must have to code that. But I have to believe there must be a simpler way to achieve the look you got with much less coding. Might just be wishful thinking on my part though ;)~

I would like to know too. Use colored gems in some of my mods and they aren't near as complicated.

Kuv

No they don't - well I don't use them anyway and mine work fine. So I am REALLY curious why all the code. ;)

Kuv

The new code that Haliken is refering to is a great improvement over the code he has here. I have gotten a sneak peek at the code and the tabbed pages are no longer needed and there are only 4 calls for a 3 color gauge. The code is a great deal more compact than it was when this code was first put up here.

I think everyone will be duely impressed (as I was) when they see the new code.

This was some great work Haliken.

I'm also trying to implement the multi-colored gauge to my Target Window.

I am using the Vert 2.5 Neptune UI with a few other bits meshed in as some of the windows I didn't like so I is a mix'n'match ui.

The target window is stretchable to make it easier to position the bar and change the length.

Would like a multi colored bar so I can see the name of my target easier as all my hp gauges are green to blend in with the ui.

sorry, I’m not on my machine atm so can't really illustrate what I'm talking about so hope that makes some sense.

I did make a tga file with the gauge already there which I will post when I get home, just need someone's help in getting that gauge into the ui if possible please.

Thanks if anyone could help