Welcome, Guest. Please login or register. Did you miss your activation email?

Author Topic: Life-/Mana-bar  (Read 12256 times)

0 Members and 1 Guest are viewing this topic.

Finn

  • Jr. Member
  • **
  • Posts: 90
    • View Profile
Life-/Mana-bar
« on: August 21, 2010, 09:47:45 pm »
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

  • Jr. Member
  • **
  • Posts: 84
    • View Profile
Life-/Mana-bar
« Reply #1 on: August 21, 2010, 11:42:35 pm »
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

  • Jr. Member
  • **
  • Posts: 90
    • View Profile
Life-/Mana-bar
« Reply #2 on: August 22, 2010, 12:18:56 am »
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

  • Full Member
  • ***
  • Posts: 150
    • View Profile
    • http://www.netgore.com/
Life-/Mana-bar
« Reply #3 on: August 22, 2010, 02:52:12 am »
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

  • Jr. Member
  • **
  • Posts: 90
    • View Profile
Life-/Mana-bar
« Reply #4 on: August 22, 2010, 12:18:08 pm »
Have you seen the shape of my bars? I don't think this will work :/

Ari

  • Newbie
  • *
  • Posts: 3
    • View Profile
Life-/Mana-bar
« Reply #5 on: August 22, 2010, 01:11:39 pm »
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

  • Jr. Member
  • **
  • Posts: 90
    • View Profile
Life-/Mana-bar
« Reply #6 on: August 22, 2010, 01:19:09 pm »
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 :D Thanks for all the help anyway

Xorlium

  • Jr. Member
  • **
  • Posts: 84
    • View Profile
Life-/Mana-bar
« Reply #7 on: August 22, 2010, 06:42:24 pm »
No, just change the start and end of the line shape...

Mindiell

  • Hero Member
  • *****
  • Posts: 1261
    • ICQ Messenger - 41484135
    • View Profile
Life-/Mana-bar
« Reply #8 on: August 23, 2010, 08:52:46 am »
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.
Mindiell
----

BeSaladin

  • Newbie
  • *
  • Posts: 40
    • View Profile
Life-/Mana-bar
« Reply #9 on: August 24, 2010, 05:31:43 pm »
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 :
All i have is God's gift.
Tout ce que j'ai est un don de Dieu.

Recruit0

  • Jr. Member
  • **
  • Posts: 66
    • View Profile
Life-/Mana-bar
« Reply #10 on: August 24, 2010, 05:38:37 pm »
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

  • Newbie
  • *
  • Posts: 1
    • View Profile
Life-/Mana-bar
« Reply #11 on: August 29, 2010, 11:04:44 am »
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

  • Full Member
  • ***
  • Posts: 150
    • View Profile
    • http://www.netgore.com/
Life-/Mana-bar
« Reply #12 on: August 29, 2010, 08:41:52 pm »
Quote from: "Elarnon"

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

  • Jr. Member
  • **
  • Posts: 90
    • View Profile
Life-/Mana-bar
« Reply #13 on: August 29, 2010, 11:40:16 pm »
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

  • Full Member
  • ***
  • Posts: 150
    • View Profile
    • http://www.netgore.com/
Life-/Mana-bar
« Reply #14 on: August 30, 2010, 02:07:27 am »
Quote from: "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


Just have the transparency set in your sprite.

 

anything