Progress Bars

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
Post Reply
xDVexan
Prole
Posts: 6
Joined: Sun Jan 27, 2019 1:33 am

Progress Bars

Post by xDVexan »

I am quite new to LOVE and Lua in general and I was wondering if making a progress bar is possible. If it is, can I see how it would be done? Its supposed to be for like a health bar.
Lucio, Head Developer
Haecia
Official Haecia Website
User avatar
zorg
Party member
Posts: 3468
Joined: Thu Dec 13, 2012 2:55 pm
Location: Absurdistan, Hungary
Contact:

Re: Progress Bars

Post by zorg »

Hi and welcome to the forums!

Anything is possible!* (*mostly...)

First, let me just try to make you think, since you might not realize it but you may be smarter than how much credit you may give yourself;
what is actually a progress bar?

Well, it has a specific size (and shape, but let's forget that for now and stick to a simple rectangle), one or maybe two colors for filled/unfilled portions, usually if horizontal, it fills to the right and empties to the left, and it may also show with text the current and total/maximum amount of whatever it is that you're representing with that specific graphic.

Now, the values that are getting represented like this are usually numbers. lua (the version löve uses) has one number type, so that's not a question that one should use that. have two variables, one for current and one for maximum value, and assign values to those variables.

On the logic side, if your character heals, you add to the current value, and cut off the excess at the end, if the current value went over the maximum (lua has a nice function for this, math.min)); if your character gets damaged, it's the opposite process, you subtract and limit to 0 if it goes under (with math.max).

On the drawing side, in love.draw, which is a callback function, that is, you need to define and code it and löve calls it by itself each frame, a simple method would be to draw a rectangle outline the size you want, then draw another on-top that's filled, but let its width be a percentage based on the following: math.floor(rectangle_width * (current_value / max_value))

The above will show you instantly the changes; if you want smoother animations, then there are more things you can do, use love.update to gradually change the currently visualized value until it reaches the target value, you could animate the filled bar via many methods as well... but the basics aren't that hard.


The wiki contains information about the callbacks and the methods löve provides; people also suggest to read the PiL or programming in lua book available online, or the lua reference manual; a caveat though: Löve uses LuaJIT by default, which is lua 5.1 plus some 5.2 and 5.3 stuff added in; not everything is correct that is written in the lua manuals for löve because of this.

Also, i will assume, since you didn't write this, that programming in general isn't new to you, just lua and löve; hence why for now i won't provide you any code; look at the references, look at the wiki, and if you have concrete roadblocks, ask them... or wait until someone dumps their ready solution for you; that also happens :3
Me and my stuff :3True Neutral Aspirant. Why, yes, i do indeed enjoy sarcastically correcting others when they make the most blatant of spelling mistakes. No bullying or trolling the innocent tho.
xDVexan
Prole
Posts: 6
Joined: Sun Jan 27, 2019 1:33 am

Re: Progress Bars

Post by xDVexan »

Haha, okay well thanks for the great answer! I'll try what you said. :). Yeah, I'm not new to programming, just new to Lua.
Lucio, Head Developer
Haecia
Official Haecia Website
Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot], Google [Bot] and 14 guests