Life-/Mana-bar

[Finn]

Hey!
I'm working on a RPG now want to implement a graphical life-/mana-bar.
This is what the Interface looks like: http://image-upload.de/image/UnSVI3/ae07c5f534.png

I want the 2 bars to be filled red(life)/blue(mana) by the amount of % life/mana. For example the bar should be filled half if life is 50%.
Don't know how to do so.
I thought of just putting a red/blue square behind each bar and set it's position lower, if life/mana gets lower. But you would see the 2 squares...

Any other suggestions?
greets,
Finn

[Xorlium]

It doesn't have to be a square, it can be a line that has some width.

Code: [Select]


sf:Shape mana = sf::Shape::Line(start, end, width, color, outline, blah, blah);

where start and end are two sf::Vector2f that say where you start and end the line you are drawing.

Check the documentation, there are a few other options.

[Finn]

This isn't the problem...the Problem is, that I would need a transforming shape, to fit in my bar.
Or some other solution.

[Spodi]

Just have a sprite for the full bar. Then, to just show a piece of it, use a smaller part of the sprite. That is, set the source rectangle (Sprite.SetSubRect()) to a smaller piece.

[Finn]

Have you seen the shape of my bars? I don't think this will work :/

[Ari]

Should the HP/Mana flow out of the bar point by point? Or could you do it in steps?
I never done this bevor, but maybe you use images with different filling level (e.g. 100, 75, 50, 25 percent or in 1/10 steps) and changing the image/sprite. Yes it's not very accurate and maybe you have to change you damage/castingsystem to adjust it with the hp/manapoints.

Just a lousy idea from a beginner :roll:

[Finn]

I just changed the lifebar image. So that a simple shape fits perfectly and I can change the position of the lifebarfilling sprite for each percent of life. The old shape is way to complicated for me Thanks for all the help anyway

[Xorlium]

No, just change the start and end of the line shape...

[Mindiell]

Spodi got the right answer, a filled bar would have made it.
When changing the SubRect of the Sprite, it would have modify only its vertical size.

[BeSaladin]

It's not that complicated this is a way u can use it's simple !

Here is the way how to procede !
1 :

2 :

3 :

[Recruit0]

If SFML had a flood fill function, all you'd have to do is draw a horizontal line (correctly) then flood fill inside that.

[Elarnon]

Maybe you can have 4 images, one of each bar when empty and one of each bar when full (or simply of the bar's content when full).
Then, you simply have to display first the empty one, and then a sub rect of the full one, depending on how full the bar really is.
I think this is what Spodi and Mindiell meant, by the way.
So, it would be something like that (notice that there are still parts of the background on the images just because I'm lazy, there should be transparency instead) :

[Spodi]

I think this is what Spodi and Mindiell meant, by the way.

Yep!

If you're still having a hard time grasping it, stop thinking of it as "filling" the bar. Instead, think of them as two totally separate images being stacked on top of one another... since that is what you're doing. Its just like drawing any other part of the game.

[Finn]

Jep I thought of this,too. But the problem is that the background needs a transparent hole. This is what i don't have. The Background will be the map. The red here is the map:
http://image-upload.de/image/mUm2aP/f7f07818d8.png

[Spodi]

Jep I thought of this,too. But the problem is that the background needs a transparent hole. This is what i don't have. The Background will be the map. The red here is the map:
http://image-upload.de/image/mUm2aP/f7f07818d8.png

Just have the transparency set in your sprite.