ui Gauge

ui Gauge

Gauge allows you to display a nice, animated bar that can be used to show progress or health. See demo for different examples.

It has ability to change colors depending on value of widget. To set the value of the gauge you use the uiSetValue=0-100 . It is percent based so you will have to calculate the 0-100. To read the current value you use uiValue, this is read only and you should NOT set uiValue directly (use uiSetValue instead).


uiValue=100 READ ONLY! percent based 0-100….so 50 is 50 percent, use uiSetValue to set!!!
uiBarColor=c_green The color of ‘full-bar’, like all green if health if greater than uiBarLevel.
uiBarColorBlend=c_lime The color used with uiBarColor for blending.
uiBarLevel=35 Percent based, 35 means that for 35-100% draw the uiBarColor, under 35% will draw uiBarColor2
uiBarColor2=c_yellow The color that is used when value of gauge is less than uiBarLevel.
uiBarColorBlend2=c_white The color used with uiBarColor2 for blending.
uiBarLevel2=10 Percent based, 10 means that for 10%-uiBarLevel% draw the uiBarColor2, under 10% will draw uiBarColor3
uiBarColor3=c_red The color that is used when value of gauge is less than uiBarLevel2.
uiBarColorBlend3=c_maroon The color used with uiBarColor3 for blending.
uiBarFlash=15 //0=no flash, else speed to flash flash on level3 (dying…) whether to flash when gauge is drawing BarColor3 (dying mode).
uiDrawSquare=false //rounded or rectangle, whether to draw a rounded or rectangle box for widget.
uiAniDraw=true //animate the movement….not jump to position, animate gauge movements between values, or jump/draw actual values instantly.
uiAniSpeed=1 //step added to value. speed of movements when uiAniDraw is true.
uiSetValue=-1 //set only! do not read this value, must use uiValue to read. To set the value of the gauge you use this. For example, my_gauge.uiSetValue=100, will set the gauge to 100%. To get the current value of the gauge you must use uiValue.

Graphics Option

New in v1.4 is the ability to use graphical gauge-bar and a background sprite for the gauge. See the example project on the main menu to see how easy it is to use.

To use a graphical gauge-bar you will need to supply a sprite that has 3 sub-images. 0=left bar, 1=middle bar, 2= right bar. See the spr_gauge in the sample project for an example. You should keep the color white/gray so that blending of colors will work still. You just set uiBarSprite=spr_gauge; to use it. Where it is placed is based on uiBackSprite below;

uiBackSprite uses a ‘trick’ to let the library know where to print the uiBarSprite image/scale. It uses the collision mask of usBackSprite to determine where in the sprite to display the gauge-bar. If you look at the sample project and see the spr_gaugeback sprite you will see a collision mask set(press “modify mask” button on edit sprite form). uiBarSprite can be anything you’d like, just set uiBarSprite=spr_yourSprite and make sure the collision mask is set to where you want to put the gauge-bar.

When using graphical backgrounds on your gauge you will most likely want to set uiDrawBackColor=false.

You may also like...