[RM2K3] GUI BAR

I made different images for each small change in the bar.
So if you can have 30HP, that means 30 images.
It might be a lot of work, but hey, it works.

As far as I know it isn't possible to adjust the length of the picture without possibly the use of some obscure patch.
What you can though, is to "hide" the bars behind another picture and then move the bar to the correct position.

Let's say the whole menu you have there is a picture, except for some transparent holes, where the bar is supposed to be. Add in bars, with lower picture priority than the menu, and only show as much of it as needed, let the rest be covered by the menu.
You might want to add another layer below there again, so that background below the bar "hole" still fits with the rest.

Yeah, if it's at the edge of the screen, use it as the cover for the bar. It's what I did with this:

You're all being silly. You're not thinking NES!!

What you do is just have images from zero to eight. No, actually, I mean zero pixels to 8 pixels. What you get is a square that slowly fills up. It doesn't even have to be a bar, you can play lots of old NES games to see variations of this pattern.

Anyways, it's pretty much identical to drawing a number with pictures, only instead of numbers you have pieces of eight. Now here's the pseudocode:

1. if the input number is greater than 8, show a full picture and move over 8 pixels
2. if not, this is the end. what we do is then draw a picture matching the last number. if it's 8, a full picture. 0, nothing. in between, we select one of the in-between pictures. There should really only be about nine.

It's actually twice as easy as drawing a regular number! You can have any bar or display type doing this. You want link hearts? You want circles that fill up? Whatever it is, the game designers of olde have already done on the NES.


If you want to conserve pictures, you're going to have to use more subimages. This will not be as tedious as you think. Go ahead and try it out. Doubling the subimages to be 16 pixels wide instead of 8 only takes twice as much code (and images) and reduces the required pictures by half. This is better than a number where you group two digits together and multiply the work by 100 and a little more (for blank spaces).

@wolfcoder

I am not sure I follow what you are saying exactly either, but basically you are splitting the work into multiple identical parts right? So if total hp bar is meant to display up to 200 health and we want it accurate to 10 hp... we would need a picture that represents 10 hp and then if we had 200 hp we would just need to display the picture 20 times one after the other?

Or if we want to be more accurate we have a picture to represent 1, 2, 3, 4, etc... and then tack that on to the end of our multiple images to make up the remainder... You used 8 pixels but it could be whatever. Am I understanding the concept correctly?

So if total hp bar is meant to display up to 200 health and we want it accurate to 10 hp... we would need a picture that represents 10 hp and then if we had 200 hp we would just need to display the picture 20 times one after the other?

Incorrect. You want a bar accurate to a single pixel you can place anywhere? You could use 20 picture slots, each slot using 11 picture files to do this (but I think 10 picture slots with 21 picture files a slot would be better if you're conserving slots).

Or if we want to be more accurate we have a picture to represent 1, 2, 3, 4, etc... and then tack that on to the end of our multiple images to make up the remainder... You used 8 pixels but it could be whatever. Am I understanding the concept correctly?

This is correct. This is almost identical to how the health bars worked in Megaman only RPG Maker 2003 doesn't flicker if there's many pictures sharing the same scanlines.

But, that's pretty silly considering you need more pictures and when you've got a bar that shows every part of 100. It makes more sense to use the one picture and move it. Less juggling of seperate bits and what not.

But you have to jam the bar at the edge of the screen, it can only be a bar-shaped object (it can't be hearts, circles, dials, or anything else), and it would not work for the problem posted as the first screenshot since the bars are in the middle of the screen. It doesn't make any more or less sense than this way.

Don't forget, first you can use the first N-1 picture slots to show full segments up until it won't fit and you need to show the remainder.

Then just use the last picture slot as the remainder no matter how long or short the bar is currently. This way, your code looks like

x = start_x; y = start_y;val = bar_val
if val > 8 show picture 1 at x,y using full picture image;x += 8;val -= 8;
if val > 8 show picture 2 at x,y using full picture image;x += 8;val -= 8;
if val > 8 show picture 3 at x,y using full picture image;x += 8;val -= 8;
if val > 8 show picture 4 at x,y using full picture image;x += 8;val -= 8;
...
if val == 7 show picture 8 at x,y using 7 picture image;
if val == 6 show picture 8 at x,y using 6 picture image;
if val == 5 show picture 8 at x,y using 5 picture image;
...

instead of it being a crazy copy paste page where every entry does the

if val == 7 show picture N at x,y using 7 picture image;
if val == 6 show picture N at x,y using 6 picture image;
if val == 5 show picture N at x,y using 5 picture image;
...

for all slots.