Health Bar - Need advice on setting one up

Discussion about using Python with libRocket.

Health Bar - Need advice on setting one up

Postby rcdailey on Fri May 30, 2008 3:06 pm

Hi,

Right now I'm trying to make a health bar for a game of mine. This health bar is essentially 2 images. The first image is the background image, which only is visible as the health bar depletes. The second image is the health bar image itself (red). I'm trying to figure out right now what the best CSS setup is for this. Through Python, I would expect to be able to control the health bar by setting a value from 0% (empty health) to 100% (full health) (or something similar).

The thing is, the image for the health bar cannot be stretched/squashed, which means the s,t for the image decorator would more than likely need to be changed as the size of the health bar changes. If there are other ways of achieving this, I'm open for suggestions. I'm also willing to change the texture so it can be stretched, if necessary (but this limits the kinds of textures I can use for a health bar).

Thanks.
rcdailey
 
Posts: 113
Joined: Mon Feb 04, 2008 8:04 pm

Re: Health Bar - Need advice on setting one up

Postby rcdailey on Sat May 31, 2008 12:45 am

Well, I've come up with an idea on how to do this, but I have a few questions. First, take a look at the code below:
Code: Select all
<rml>
   <head>
      <link type="text/rcss" href="default.rcss"/>
      <style>
         body
         {
            width: 100%;
            height: 100%;
            font-family: Agatha;
            background-color: #398732;
         }
         
         .healthbar
         {
            sb-decorator: image;
            sb-image: healthbar_full.png;
            width: 200px;
            height: 25px;
            overflow: hidden;
         }
      </style>
   </head>
   <body>
      <div style="margin-left: 14px; width: 150px; height: 25px;">
         <div class="healthbar"/>
      </div>
   </body>
</rml>


Above, I'm wrapping my 'healthbar' inside of a <div>, which essentially does nothing more than control my clip region. When health is depleted, I simply reduce the width of the parent <div>, which chops off portions of the inner <div> image, giving the illusion that the health bar is getting smaller (but not becoming stretched, which is the goal- no stretching). In the example above, my parent <div>'s width is set to 150px, thus cutting off exactly 50 pixels of the healthbar_full.png image. The problem I'm having is that the health bar needs to be anchored to the right side of the parent <div>, since the health bar depletes from left to right. In other words, as I lose health, the left edge of the health bar moves, not the right side.

I tried 'align: right;' and 'text-align: right;' properties on my CSS for ".healthbar", however none of these seem to work. How can I anchor the healthbar_full.png image to the right edge of the parent <div>?
rcdailey
 
Posts: 113
Joined: Mon Feb 04, 2008 8:04 pm

Re: Health Bar - Need advice on setting one up

Postby robertc on Sun Jun 01, 2008 5:22 am

Hi there,

I actually did pretty much the exact same thing a few weeks ago. :) In this case I would add position: absolute; right: 0px; to div.healthbar. That'll anchor its right edge to its parent's edge. One catch though, absolute elements base their position on their closest ancestor with relative or absolute positioning. So you'll need to position: relative; the parent div as well.

You could also try float: right; on div.healthbar. Or putting text-align: right; on the parent div rather than div.healthbar.

Hope this helps!
robertc
Rocket Engineer
Rocket Engineer
 
Posts: 13
Joined: Tue Jan 15, 2008 11:29 pm

Re: Health Bar - Need advice on setting one up

Postby rcdailey on Sun Jun 01, 2008 2:14 pm

Thanks Peter.

I find it difficult to know when the right and bottom CSS attributes are actually used. I find that every time I use them they do nothing at all. How does libRocket determine to use left or right CSS properties (Same with top vs bottom)? The documentation doesn't seem to cover this either. In regards to text-align: right, I could never get this to work. What value must the position or display attributes have for text-align to work?

::EDIT::
I thought I'd share with you a fairly decent way I've found to support health bars:

Code: Select all
<rml>
   <head>
      <link type="text/rcss" href="default.rcss"/>
      <style>
         body
         {
            width: 100%;
            height: 100%;
            font-family: Agatha;
            background-color: #398732;
         }

         .frame
         {
            width:            350px;
            height:            100px;
            margin-left:      40px;
            margin-top:         20px;
            border-width:      1px;
            background-color:   #A73BA7;
            border-color:      #FF5EFF;
         }
         
         .bar-dim
         {
            width:   197px;
            height:   12px;
         }
         
         .bar-full
         {
            bar-decorator: image;
            bar-image-src: progress-middle-full.png;
         }
         
         .bar-empty
         {
            bar-decorator: image;
            bar-image-src: progress-middle-empty.png;
         }
      </style>
   </head>
   <body>
      <div class="frame">
         
         <div class="bar-empty bar-dim" style="margin-left: 145px; margin-top: 5px;">
            <div id="mybar" style="width: 50%; height: 100%; overflow-x: hidden;">
               <div class="bar-full bar-dim"/>
            </div>
         </div>
         
      </div>
   </body>
</rml>


Above, I have a background image for my health bar which never sizes, and the bar drawn on top of it which is in color and shows parts of the background bar as it depletes. The second nested <div> in my RML above is the background bar image. Note that bar-empty is optional here. If you do not wish to have a background image for your health bar, simply remove this class from this div. The third nested div is my clipping div. It serves no other purpose than for 2 things:

1) Provide clipping to the health bar
2) Provide a useful metric for changing the health bar size, 0% to 100%.

As you can see above, the 'width' element of the 3rd div controls the amount of health you have. In this case it is 50%, which means the bar is 50% visible (or depleted). In my python scripts, I simply GetElementById() on "mybar" and I get the element I can simply change the width of. Easy control over my health bar! The fourth and final <div> is my actual health bar image, and pretty much does nothing but sit there.

Again, all of this is left-aligned, which is unfortunate. If someone wouldn't mind changing the code above so it would work in a right-aligned way (health bar depletion would go from left to right, instead of right to left like it does now) I would appreciate it.

Thanks again.
rcdailey
 
Posts: 113
Joined: Mon Feb 04, 2008 8:04 pm

Re: Health Bar - Need advice on setting one up

Postby robertc on Tue Jun 03, 2008 3:17 am

I put together a couple of tests to right-align the health bar, using the absolute positioning and floating techniques. Both seemed to work fine. Here are the code samples:

Using absolute position:
Code: Select all
<rml>
   <head>
      <style>
          div
          {
             display: block;
          }
         
         body
         {
            width: 100%;
            height: 100%;
            font-family: Agatha;
            background-color: #398732;
         }

         .frame
         {
            width:            350px;
            height:            100px;
            margin-left:      40px;
            margin-top:         20px;
            border-width:      1px;
            background-color:   #A73BA7;
            border-color:      #FF5EFF;
         }
         
         .bar-dim
         {
            width:   197px;
            height:   12px;
         }
         
         .bar-full
         {
            bar-decorator: image;
            bar-image-src: progress-middle-full;
         }
         
         .bar-empty
         {
            bar-decorator: image;
            bar-image-src: progress-middle-empty;
         }
      </style>
   </head>
   <body>
      <div class="frame">
         
         <div class="bar-empty bar-dim" style="margin-left: 145px; margin-top: 5px; position: relative;">
            <div id="mybar" style="width: 50%; height: 100%; overflow-x: hidden; position: absolute; right: 0px;">
               <div class="bar-full bar-dim"/>
            </div>
         </div>
         
      </div>
   </body>
</rml>


Using right floats:
Code: Select all
<rml>
   <head>
      <style>
          div
          {
             display: block;
          }
         
         body
         {
            width: 100%;
            height: 100%;
            font-family: Agatha;
            background-color: #398732;
         }

         .frame
         {
            width:            350px;
            height:            100px;
            margin-left:      40px;
            margin-top:         20px;
            border-width:      1px;
            background-color:   #A73BA7;
            border-color:      #FF5EFF;
         }
         
         .bar-dim
         {
            width:   197px;
            height:   12px;
         }
         
         .bar-full
         {
            bar-decorator: image;
            bar-image-src: progress-middle-full;
         }
         
         .bar-empty
         {
            bar-decorator: image;
            bar-image-src: progress-middle-empty;
         }
      </style>
   </head>
   <body>
      <div class="frame">
         
         <div class="bar-empty bar-dim" style="margin-left: 145px; margin-top: 5px;">
            <div id="mybar" style="width: 50%; height: 100%; overflow-x: hidden; float: right;">
               <div class="bar-full bar-dim"/>
            </div>
         </div>
         
      </div>
   </body>
</rml>


Let me know how you get on!
robertc
Rocket Engineer
Rocket Engineer
 
Posts: 13
Joined: Tue Jan 15, 2008 11:29 pm

Re: Health Bar - Need advice on setting one up

Postby rcdailey on Tue Jun 03, 2008 12:53 pm

Does the right edge of the image anchor to the right edge of the containing block? I would expect the left edge of the image to be overflowed, otherwise the bar will not clip correctly when I deplete it from left to right. I'll run some tests to see myself in the meantime.
rcdailey
 
Posts: 113
Joined: Mon Feb 04, 2008 8:04 pm


Return to libRocket and Python


cron