I think once you understand how bars work, it should be easy. I'm stacking several bars to get my various colors, so that's part of the complication. Setting the value from 0 to 1 (0 to 100%) sets how much of the top is shown. The is true for all but the multi-image bar. That will divide up the number of images and show the closest the next highest one.
So, if you set a bar at 0.5. The bar moves halfway. For one tone, two tone and two image it goes from right to left/top to bottom. The single image goes from left to right/bottom to top as the number decreases. For multi image, the who image switches. You need at least 2 images and you have to set your increment to match the number of images. Bottom image in list is top image with highest percent and Top image is always 0. Any number of images in between are divided up. So, if you have 5 images (full bar, empty bar, increment 1, increment 2, increment 3) then your increments are at 0.25 (1.00,0.75,0.50,0.25,0 - 5 values).
To keep the example simple, lets just create a solid bar that is green and call it Health.
[H: maxHP = 100]
[H: currentHP = 50]
[H: bar.Health = currentHP / maxHP]
[H: unconscious = 0]
[H: dead = -10]
[H, if(currentHP <= dead): state.Dead = 1; state.Dead = 0]
[H, if(currentHP <= unconscious && ! state.Dead): state.Unconscious = 1; state.Unconscious = 0]
I put the Dead check before unconscious because I don't want people to know I'm sleeping when dead. So, it turns off the unconscious state when dead. To remove a bar use Wiki: setBarVisible()
You would need to create states for "Unconscious" and "Dead" that you want. Just a note about adding bars and states. Be sure to click the correct "Update" button and then "Okay" to make sure it's saved when done.
I also use single state names because I can then use them in variables like state.stateName, not state.state name (which would be wrong).