Chronwaas

Ok, Folks here is what I have been albe to decipher from the talks that Enok and I had to originally get this to work. This is going to be a long post so get some coffee or Coke and have a seat. Also not sure if this will all fit in a single post either so I may have to have multiple posts to get this all in.

First let me say the gauge that this is being used for this is of the following size in the UI itself:

<CX>123</CX>
<CY>50</CY>

That being said I will attempt to explain each part as I go along with the code to review for reference.

The first thing you will need to do is re-calculate your gauge size for the X part (horizontally). In this case, and this is my suggestion so as to make the math easier on yourselves, I used a multiplier of 100 so the size now becomes:

<CX>12300</CX>
<CY>50</CY>

The reason for this is so that later when we actually place the gauge in the UI it will more or less adjust with in the actually gauge size to make that color appear when we want it to.

The gause will actually be made up of three parts for the three colors I used. Red, Green and Yellow

>>>>>>
The following are the three gauge parts. I will explain each part as I go.

<Ui2DAnimation item = "SAL_LGaugeBackground_Enok_x100">
<Cycle>true</Cycle>
<Frames>
<Texture>window_pieces051.tga</Texture>
<Location>
<X>0</X>
<Y>0</Y>
</Location>
<Size>
<CX>12300</CX>
<CY>50</CY>
</Size>
<Hotspot>
<X>0</X>
<Y>0</Y>
</Hotspot>
<Duration>1000</Duration>
</Frames>
</Ui2DAnimation>

This is the section that defines the primary/Full Health color section of the Gauge. As you can see the gauge size is 100x larger than the gauge will actually be.

>>>>>>
Here is the second gauge section for the yellow/warning section of the gauge.

<Ui2DAnimation item = "SAL_LGaugeFill_Enok3">
<Cycle>true</Cycle>
<Frames>
<Texture>window_pieces051.tga</Texture>
<Location>
<X>-6150</X>
<Y>58</Y>
</Location>
<Size>
<CX>12300</CX>
<CY>50</CY>
</Size>
<Hotspot>
<X>0</X>
<Y>0</Y>
</Hotspot>
<Duration>1000</Duration>
</Frames>
</Ui2DAnimation>

This section defines the point at which the gauge changes to Yellow/warning color. As you can see the offset has been adjusted to -6150. The reason for this is so as to deal with the percentage I wanted to be at when the gauge changed color, in this case at 50% the gauge will change from Green to Yellow. You get this value by finding 50% of 12300 which is the Horizontal length of the Gauge. Then you offset to the negative so that it shows up as the gauge empties.

>>>>>>
Here is the Thrid section for the Gauge for the Red/Critical part of the Gauge.

<Ui2DAnimation item = "SAL_LGaugeFill_Enok1">
<Cycle>true</Cycle>
<Frames>
<Texture>window_pieces051.tga</Texture>
<Location>
<X>-4059</X>
<Y>58</Y>
</Location>
<Size>
<CX>12300</CX>
<CY>50</CY>
</Size>
<Hotspot>
<X>0</X>
<Y>0</Y>
</Hotspot>
<Duration>1000</Duration>
</Frames>
</Ui2DAnimation>

This section defines the point at which the gauge changes to Red/Critical color. As you can see the offset has been adjusted to -4059. The reason for this is so as to deal with the percentage I wanted to be at when the gauge changed color, in this case at 33% the gauge will change from Yellow to Red. You get this value by finding 33% of 12300 which is the Horizontal length of the Gauge. Then you offset to the negative so that it shows up as the gauge empties.

Ok that takes care of the Gauge Fill definition information. The next section I will explain presenting this info on the UI so that it works correctly.

I hope this has made at least some sense so far. If not it may make a little more sense when you add the next senction to the mix.