[xAndrewx]

function onCreated() {
  this.join("sys_gfxdraw");
}
//#CLIENTSIDE
function onCreated() {
  h = this;
  
  this.mainGui();
  this.updateHP();
  this.updateMP();
}
function mainGui() {
  this.gData = {c.wid("arca_hud-base.png"), c.hei("arca_hud-base.png")};
    // ^ public function [getimgwidth, getimgheight]
  if (client.hud_pos == null) {
    client.hud_pos = {c.center(this.gData[0])[0], screenheight};
    // ^ public function [gets position of the screen center]
  }  
  this.mainImg();
}

function mainImg() {
  this.dImg({200, "arca_hud-base.png", {client.hud_pos[0], (client.hud_pos[1] - 25)}, 4});
}

function onMouseDown(click) {
  if (temp.click != "left") {
    return false;
  }
  if (c.mx(client.hud_pos[0], client.hud_pos[0] + this.gData[0]) && c.my(client.hud_pos[1] - this.gData[1], client.hud_pos[1] + 25)) {
    //public function ^ [mousescreenx, mousescreeny]
    scheduleevent(0.05, "Move", "");
  }
}

function onMove() {
  if (mousebuttons > 0) {
    client.hud_pos = {(mousescreenx - (this.gData[0] / 2)), mousescreeny};

    this.mainImg();
    this.updateHP();
    this.updateMP();
    
    scheduleevent(0.05, "Move", "");
  }
}

public function updateHP() {
  this.dImg({201, "arca_hud-greenbar.png", {(client.hud_pos[0] + 1), (client.hud_pos[1] - 7)}, 5});
}

public function updateMP() {
  this.dImg({202, "arca_hud-bluebar.png", {(client.hud_pos[0] + 116), (client.hud_pos[1] - 7)}, 5});
}

Here's the class [sys_gfxdraw]

//#CLIENTSIDE
function dImg(img) {
  showimg(temp.img[0], temp.img[1], temp.img[2][0], temp.img[2][1]);
  changeimgvis(temp.img[0], temp.img[3]);
  changeimgmode(temp.img[0], 1);
}

Here's what it looks like on graal [You can move it around!]