SFML community forums
Help => General => Topic started by: Finn 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
-
It doesn't have to be a square, it can be a line that has some width.
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.
-
This isn't the problem...the Problem is, that I would need a transforming shape, to fit in my bar.
Or some other solution.
-
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.
-
Have you seen the shape of my bars? I don't think this will work :/
-
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:
-
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
-
No, just change the start and end of the line shape...
-
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.
-
It's not that complicated this is a way u can use it's simple !
Here is the way how to procede !
1 :
(http://img831.imageshack.us/img831/5381/38262655.th.png) (http://img831.imageshack.us/img831/5381/38262655.png)
2 :
(http://img823.imageshack.us/img823/3989/19135626.th.png) (http://img823.imageshack.us/img823/3989/19135626.png)
3 :
(http://img829.imageshack.us/img829/4954/14229366.th.png) (http://img829.imageshack.us/img829/4954/14229366.png)
-
If SFML had a flood fill function, all you'd have to do is draw a horizontal line (correctly) then flood fill inside that.
-
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) :
(http://img696.imageshack.us/img696/6748/combine.th.png) (http://img696.imageshack.us/img696/6748/combine.png)
-
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.
-
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
-
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.
-
Ah k...after reading thorugh the posts a few times I now understood what you mean :) Sounds easy and good! I think I'll try it ;)
-
Hm. I have some problem with setting the right SubRect. I tried it as BeSaladin said. If I want to have full life it works. But if I reduce life by 1 the lifebar is gone and can't be seen anymore :-o
-
Can u show some code ^^ !
-
This is how I use it
void character::Dec_Life(int Damage,sf::Sprite& Lifebar)
{
m_life -= Damage;
Lifebar.SetSubRect(sf::IntRect(0,0,95, m_life / m_max_life * 190));
Lifebar.Move(0, (768 - 190 + ( 190 - (m_life / m_max_life * 190))));
}
m_life is an integer that represents the life. m_max_life is the maximum life you can have.
-
You don't use the Move function correctly. The 2 paramaters of the Move function are offsets.
Try using the SetY function instead, as written in BeSaladin pics.
-
Move function isn't like SetX and SetY functions becauce move function increase X and Y by the values u give in :!:
For example : If u use Move function of a sprite that have x= 800 and y= 500 as the following : sprite.move(800,900) then the new coordinates would be x = 1600 and y = 1700.
And u will not see it probably in the window ^^. :P
:arrow: I council u to avoid calculating in parameters as u did before try this ^^ :
int y = 768 - 190 + ( 190 - (m_life / m_max_life * 190));//
Lifebar.SetX ( y ); //this is better ^^
-
Even though it seems there's something wrong :-/ No matter how much the life should be reduced. No matter if life is 0 or 50 or something else it always sets the position to 768!(Screenresolution: 1024x768)
-
If both m_life and m_max_life are integers, m_life / m_max_life will always be equal to zero. You need to cast at least one operand to float, or write m_life * 190 / m_max_life.
-
Ah yes....I remember.. :D thx^^ works :)
-
But what we have now looks like this -> http://www.youtube.com/watch?v=h4BybgiF-0k
I think I have to do it the other way round. Now we cut off the bottom and set the sprite lower. But it has to cut off the top!
I messed around with different rects, but somehow I don't get it O_o
-
If u see this line of code ^^ then it's so logical . :)
Lifebar.SetSubRect(sf::IntRect(0,0,95, m_life / m_max_life * 190));
Try this :
Lifebar.SetSubRect(sf::IntRect( 190 - ( m_life / m_max_life * 190 ) ,0,95,190));
It should work ^^.
-
Actually....no :P
But I now finnaly figured out the right rect. :D Thank Rockstar Energydrink xD
Like this:
sf::IntRect NewRect(0,(190 - ( (float)m_life / m_max_life * 190 )),76,190);
-
hehe :D sry for the erroe didn't pay attention on :F .