forry

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.

__________________

Hijiun

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

__________________
"I am my own excuse"
Hijiun TwisterOfNature
Apprentice UI Maker

Chronwaas

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.

__________________
ChronWaas: 33 Bard, Saryrn
Chronania: 44 Necromancer, Saryrn

Chronwaas

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.

Attached Images

testgauge.jpg (2.4 KB, 728 views)

Chronwaas

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:

Attached Images

testgaugess.jpg (1.3 KB, 719 views)

forry

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!!! Thanks for the feedback.

forry

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

Chronwaas

Why thanx Forry.

Hijiun

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.

Koradin

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!

Chronwaas

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.

Hijiun

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

Haliken

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

Attached Files

enok_petcolor.zip (2.9 KB, 163 views)

Haliken

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



Enok

Attached Images

enok_petcolor.jpg (6.1 KB, 772 views)