Ren'Py help: Bars

I've gotten a couple question about how to make sanity/health bars in Ren'Py, so I'll go through the basics :D

The first thing to know is that making a variable bar is done with screen language. That means that you're creating a custom screen, and telling it to appear over your game most of the time.

[ I'll be referring to this image a couple times ]

So, for #1 in the image, we need to create a new screen. This can be done either in the screens.rpy file, or if you'd like to organize it differently, it also works just fine in the script.rpy file.

Name it something unique and easy to remember!

#2: The next item in my image is a vbox containing both our bar, and an image I add to the bottom for decoration. If you've coded in HTML before, a vbox works a lot like a div. I use it to contain all my items and then align them where I want them to appear on my game screen.

#3: Time to make the actual bar! Ren'Py has some good built in structure for making bars so it's pretty easy. 

One my first line, you can see I've given it an 'AnimatedValue'. What this means is that when the value changes in the game, the bar will animate to show the change, sliding to the new instead of just blipping right from 10 to 20 or whatever. 

Then I have to define what variable the bar actually responds to. I have a variable called 'health', but it could just as easily be 'sanity', 'thirst', 'number_of_bees'... whatever you want to make a variable and bar for!

Don't forget to define this variable on in your script.rpy file before this bar needs to appear too:

$ health = 100

That way the code will know what value to make the bar as soon as it appears.

On that first line as well, you can see I've given my bar a range of 100. This is because I want my 'health' variable to be a number from zero to 100.

xalign 0.0 yalign 0.0

I left these values as zero, because I don't need to move my bar. I've already placed my health bar inside of a vbox and aligned that on my game screen.

xmaximum 30

ymaximum 400

These styles define the width and height of my bar [ in pixels ].

left_bar, right_bar

Left bar and Right bar are styles unique to the 'bar' item, to place the images you want to use for your bar. You need to draw your bar completely empty for one image, then completely full for the other- the bar coding will do the rest!

thumb None

The thumb item can also be an image if you like, it's a little tick or arrow that would appear over the bar as the line between the empty and full parts. I didn't use one, but you may want to!

bar_vertical True

Adding this line to your bar will make the whole thing appear as an 'up and down' bar, like the ones you see in BTD.

#4: This isn't part of the bar, technically, but in BTD I added a little image to the bottom of my bars [ a little + for health and a little brain for sanity ]. By putting in a ConditionSwitch, I can have the image change to a little skull if health become less than or equal to zero.

--------------------------------

So, once you've got that all set up, you need to tell your new screen to appear in the script.

label start:

    scene background

    screen health_bar

    show character_randy

There's Randy and your health bar!

Now we can manipulate the health variable by adding [ += ], subtracting [ -= ], or simply reassigning a new number to it [ = ]

Let's take away some of Randy's health.

character_randy "Wow, those are some steep looking stairs."

character_randy "I better be careful on these stairs."

$ health -= 20

character_randy "SHIT I FELL DOWN THE STAIRS!"

Once the player clicks to the phrase starting with SHIT, they'll also see the health bar amount drop by 20!

And I think that's all there is to it! <3