Circular HUD Bar

[DustyPorViva]

Made this for fun. It was intended to be a health bar like Kingdom Hearts, but I got a bit stumped when it came to branching the bar off from the angle. Either way, I figured I'd fix this up and post it as a script for others to use or even better, learn.

Right now the bar itself extends per your health(it's based on player.hearts and player.fullhearts, if you're using custom, replace all instances of player.fullhearts with your custom maxHP, and player.hearts with your custom HP), so make sure you define the maximum amount of possible life(for example, 20 is set for mines since default hearts max out at 20).

PHP Code:

//#CLIENTSIDE
function onCreated() {
  this.HUDimage   = "dusty_guibartest1.png"; // Define the image of the bar;
  showstats(1024);        // Hide all but the player
  this.HUDx       = 50;   // Center 'X' position of the HUD
  this.HUDy       = 50;   // Center 'Y' position of the HUD
  this.radius     = 23;   // Distance the bar extends out to from center
  this.thickness  = 15;   // Thickness of bar in pixels
  this.margin     = 2;    // Thickness of outline in pixels
  this.startangle = pi/2; // Starting angle of bar
  this.direction  = 1;    // Direction the bar goes. -1 = left, 1 = right
  this.maxlife    = 20;   // Define the max amount of life possible

  onTimeout();
}

function onTimeout() {
  // RECORD CUSTOMIZATIONS INTO TEMPORARY VARIABLES
  // THIS IS SIMPLY FOR THE EASE OF SHORTER VARIABLE NAMES
  temp.sa = this.startangle;
  temp.ox = this.HUDx;
  temp.oy = this.HUDy;
  temp.r = this.radius;
  temp.t = this.thickness;
  temp.m = this.margin;

  // DISPLAY THE HEART IMAGE
  // THIS CAN BE CHANGED TO SOMETHING LIKE THE PLAYER'S HEAD
  with (findimg(1000)) {
    image = "state.png";
    x = ox - 20;
    y = oy - 22;
    partw = 40;
    parth = 44;
    layer = 6;
  }

  // ALTER THE 'FILL'. THIS IS A VARIABLE THAT COUNTS UP
  // OR DOWN TO THE PLAYER'S HEARTS, SO WE CAN USE IT AS
  // AN ALTERNATIVE, THUS ANIMATING THE BAR FILLING
  if (this.fill != player.hearts) this.fill += (this.fill < player.hearts) ? .5 : -.5;
  else this.fill = player.hearts;

  // IF NEW IMAGE COUNT IS LESS THAN THE OLD, HIDE EXCESSIVE IMAGES
  if (this.oldi > player.fullhearts*2) hideimgs(200,300+this.oldi);

  for (temp.i=0;i<player.fullhearts*2;i++) {
    temp.seg = pi/this.maxlife;
    temp.a = (sa + (i*seg)*this.direction);
    temp.padding = {(i == 0)*pi/40,(((i+1)/2) == player.fullhearts)*pi/40};
    with (findimg(200+i)) {
      polygon = {
        ox - cos(a - padding[0])*(r+t)      ,oy - sin(a - padding[0])*(r+t)      ,
        ox - cos(a + seg + padding[1])*(r+t),oy - sin(a + seg + padding[1])*(r+t),
        ox - cos(a + seg + padding[1])*r    ,oy - sin(a + seg + padding[1])*r    ,
        ox - cos(a - padding[0])*r          ,oy - sin(a - padding[0])*r          ,
      };
      red = blue = green = 0;
      alpha = 1;
      layer = 4;
    } 

    if (i < this.fill*2) {
      with (findimg(300+i)) {
        polygon = {
          ox - cos(a)*(r+t-m)      ,oy - sin(a)*(r+t-m)      ,
          ox - cos(a + seg)*(r+t-m),oy - sin(a + seg)*(r+t-m),
          ox - cos(a + seg)*(r+m)  ,oy - sin(a + seg)*(r+m)  ,
          ox - cos(a)*(r+m)        ,oy - sin(a)*(r+m)        ,
        };
        image = thiso.HUDimage;
        layer = 5;
      }
    } else hideimg(300+i);
  }
  this.oldi = i; // RECORD THIS IMAGE COUNT AS OLD

  // IF BAR IS FILLED, SET A LONGER TIMEOUT FOR EFFICIENCY, OTHERWISE
  // SET IT AS LOW AS POSSIBLE FOR SMOOTHER FILL ANIMATION
  setTimer(this.fill == player.hearts ? 0.25 : 0.05);
} 


If I figure out how, I may eventually also add the Kingdom Hearts version. Also, the image for the bar is attached. Make sure you download and save this appropriately.