Add a Custom Graphic to that Health, MP, XP bar!

[Zawk]

Now, some of you have probably been wondering how to create a more custom GUI design and what I'm going to explain here is to show you how you can change your Health Bar into a custom Bar or tank or whatever you wish to use on that Health Bar. Do note, this is Health bar only but everything applies the same for the MP and XP bar! (Name ids for their form is at end of this post)

Also, I'm not using pictures because if you can't follow this in full detail (you will not get lost, if you know what 1+1 is)… You should look into learning VB6 ebooks which is posted in the forums...

**Tools Required:**
Brain
VB6
Two health graphics of same size and separate color, preferably red for full HP bar and dark Red for empty HP bar

**Open up**
_Eclipse.vbp_

**Double Click**
_frmMirage_(under Forms)

**Click once on your Health Bar**
Under properties to the right it should say under (Name): **lblHP**, _it will be a transparent rectangle if you use default source._
Resize it to the same size and shape as the graphic you are wanting to use for your Health Graphic.
now Please place the **lblHP** box in the precise spot you are wanting your Health Graphic to be located at.

**Click on the Red Health Bar again**(where lblHP once was)
You will select a rectangle that isnt transparent by the (Name): **shpHP**
Press the Del(or maybe its Delete for you) key on your keyboard.

**To the left in the toolbar of VB6 Program itself**
Click on **PictureBox**
Create the **PictureBox** on your _frmMirage_, again, in the precise spot you placed **lblHP**
Without clicking off of the newly created **PictureBox** we are going to name it **shpHP** under the properties (Name)
After doing this with the newly created **PictureBox** now named **shpHP**, in its properties scroll down in the window and select "Picture" the picture you wish to use for your Health bar. (again make sure its the same size as your "lblHP" and directly over top of it)
After doing this you will go up to Appearance and where it says "1-3D" you will choose "0-Flat"
There you go you now have your new Health bar Graphic!

**But wait when you try it, it's not showing a back drop of it's emptyness!**
You will want to name another **PictureBox** in the precise spot you placed **shpHP**, you can call it "sHPtank" (for Shadow HP Tank)
Again you will want to select another "Picture" (Dark red one i mentioned above under tools required)
Also make sure the Appearance is set to "0-Flat" and not "1-3D" under the properties box to the right.
What you do now is right click on the newly created **PictureBox**, now called **sHPtank**
Select, "send to back".

save, compile. Voila! Fully functional Graphic for your Health bar!
This also works for XP,MP bar too, the only thing that changes is that it isn't shpHP.

for Mana Bar its: shpMP
for XP bar its: shpTNL

p.s: if you are doing a bubble, it will load its health horizontal instead of vertical, I'll try to find out how to make it show vertical later when I have time and post here, unless someone beats me to it. :)

[Alster]

Good use some pictures but a great tutorial overall.

OT: Loving the avatar, caption and sig.

[dao]

this would go in source tutorials lol. nice tho

[bert911292]

Ok, I am a serious newb. What exactly is vb6?

[Admiral Refuge]

@bert911292:

> Ok, I am a serious newb. What exactly is vb6?

VB6 stands for Visual Basic 6, it's what you use to edit the source code to Eclipse.

You can download the source code from the main website (freemmorpgmaker.com), but the only legal way to get VB6, is to buy it second hand.

[Jed]

hmm, how would i get rid of those grey lines around the picture? it makes it look really ugly when your health decreases or is just at full…

[dao]

what grey lines? show a pic.

[Jed]

[](http://img31.imageshack.us/i/screenshot0r.png/)

and still trying to figure out how to make my health decline vertically…

[mrmiguu]

Why does everyone think adding features like this takes rocket surgery? It's very simple. To answer your question, Ezmek: Place the entire shpHP into a **new** Picture box. Make the Picture box's dimensions a fixed number (i.e. 64x64), then when the incoming packets for HP and MP adjustments arrive, just edit it to make the new Picture box you just created, come downward, adjusting the _.Top_ of it but at the same have the _.Height_ decrease at the same rate.

[Jed]

It doesn't make any sense…

Q1: Which of my questions are you answering?  Getting rid of they grey boxes, making the HP decline vertically?  Or both?

Please, if you're going to not make this seem like rocket science, at least explain it step by step.  (Not trying to make you mad, if you consider it to be in any way offensive, I can't help you there.)

[mrmiguu]

If you read my question, you would know that I was explaining on how to make the HP decline vertically. Your 'line issue', not sure if you made those or they are VB6 competencies. You might have BorderStyle=1 or it might be you added those via Paint.

[Jed]

ok, i got my HP to decline vertically, its just that it declines upwards and not down.

[goku1993]

depends on what you changed to make it vertical but if it declines upwards and you want it the other way just do the opposite of what you did to change em?

[Jed]

then that would make it decline horizontally again…

[mrmiguu]

Don't worry. I am implementing this into Project Vertigo and making some fixes/updates to it. I will show you guys the system when I am finished.

[Jed]

what i did to make the HP decline vertically but it still declines upward, i modified the player HP and MP packet from Width to Height:

    ' ::::::::::::::::::::::
    ' :: Player hp packet ::
    ' ::::::::::::::::::::::
    If LCase$(casestring) = "playerhp" Then
        Player(MyIndex).MaxHp = Val(parse(1))
        Call SetPlayerHP(MyIndex, Val(parse(2)))
        If GetPlayerMaxHP(MyIndex) > 0 Then
            ' frmMirage.shpHP.FillColor = RGB(208, 11, 0)
            frmMirage.shpHP.Height = ((GetPlayerHP(MyIndex)) / (GetPlayerMaxHP(MyIndex))) * 150
            frmMirage.lblHP.Caption = GetPlayerHP(MyIndex) & " / " & GetPlayerMaxHP(MyIndex)
        End If
        Exit Sub
    End If

and the player MP packet:

    ' ::::::::::::::::::::::
    ' :: Player mp packet ::
    ' ::::::::::::::::::::::
    If casestring = "playermp" Then
        Player(MyIndex).MaxMP = Val(parse(1))
        Call SetPlayerMP(MyIndex, Val(parse(2)))
        If GetPlayerMaxMP(MyIndex) > 0 Then
            ' frmMirage.shpMP.FillColor = RGB(208, 11, 0)
            frmMirage.shpMP.Height = ((GetPlayerMP(MyIndex)) / (GetPlayerMaxMP(MyIndex))) * 150
            frmMirage.lblMP.Caption = GetPlayerMP(MyIndex) & " / " & GetPlayerMaxMP(MyIndex)
        End If
        Exit Sub
    End If

what else do i need to do to make it decline from up to down and not down to up?

[mrmiguu]

Done, here is a link to a new tut I made (source editing only)
[http://www.touchofdeathforums.com/smf/index.php/topic,48314.0.html](http://www.touchofdeathforums.com/smf/index.php/topic,48314.0.html)