This is tutorial number 15 in our Pygame RPG series.
In the last tutorial, we introduced two new “systems” to the game, Mana and Experience. Currently, the Mana and Experience will only keep accumulating in the background without any visual indicator; neither is there any actual use of the Mana and Experience that we collect. These are two problems that we plan to rectify in the next few tutorials.
In this Pygame RPG tutorial we’ll be working on a much needed “Status Bar” that displays essential information such as Player level, experience, mana, money, stage level etc.
In order to understand be able to follow this tutorial properly, I recommend you check out our Pygame Fonts article first. It goes into more depth and detail on how one can create and stylize Fonts in pygame. We’ll be giving a brief explanation here anyway though.
First we’re going to create several font styles which we’ll using later on. You just need to pass two arguments into
SysFont(), the name of the font and size you want it to be. You can find a list of available fonts in the Pygame Fonts tutorial we linked earlier.
# defining font styles headingfont = pygame.font.SysFont("Verdana", 40) regularfont = pygame.font.SysFont('Corbel',25) smallerfont = pygame.font.SysFont('Corbel',16)
We’ve created a total of three fonts in various sizes and font families, to be used in different parts of our game. (regular for normal text, heading for larger text, and smaller for small text like on the status bar)
Here we’re just created 3 tuples with RGB values and stored them into three variables. When we pass these tuples into the appropriate function, they will be recognized as colors.
# light shade of the button color_light = (170,170,170) color_dark = (100,100,100) color_white = (255,255,255)
Creating the Status Bar
Now onto the main part of the code where we’ll be working on the
StatusBar Class. The
init() has fairly basic code which deal with the positioning of the Status Bar on the Pygame window.
class StatusBar(pygame.sprite.Sprite): def __init__(self): super().__init__() self.surf = pygame.Surface((90, 66)) self.rect = self.surf.get_rect(center = (500, 10))
Next up is the update method.
The update function is divided into two halves. The first half is where we create the text using the
render() method on one of the font objects we created earlier. In this case we’ll be using
smallerfont since we want small text on the status bar.
render() function takes as parameters, a string to be displayed, a boolean for antialiasing, and a tuple containing three integer values (RGB). One interesting thing in particular that we added is the FPS counter which tracks the number of frames being executed per second. All you have to do is use the
get_fps() method on the FPS Clock object we created earlier and the current FPS is returned.
def update_draw(self): # Create the text to be displayed text1 = smallerfont.render("STAGE: " + str(handler.stage) , True , color_white) text2 = smallerfont.render("EXP: " + str(player.experiance) , True , color_white) text3 = smallerfont.render("MANA: " + str(player.mana) , True , color_white) text4 = smallerfont.render("FPS: " + str(int(FPS_CLOCK.get_fps())) , True , color_white) # Draw the text to the status bar displaysurface.blit(text1, (585, 7)) displaysurface.blit(text2, (585, 22)) displaysurface.blit(text3, (585, 37)) displaysurface.blit(text4, (585, 52))
The second half of the update function calls the
blit() function on each of the 4 texts that we’ve created and positions them at appropriate locations on the Status Bar.
Finally we’re going to call the
update() methods which will update the status bar and render it onto the screen respectively.
# Status bar update and render displaysurface.blit(status_bar.surf, (580, 5)) status_bar.update_draw()
DO NOT call the update function before the
blit() function. This is because the status bar must render first, and then the text will render on top of it. Doing it the other way around would hide the text completely.
Here’s a quick 20 sec clip of our game, which includes the status bar we just created.
Think of all the possible ways that this can upgraded. Using the same concept you can simply replace the surface with an image over which the text is rendered. Obviously the image will be something resembling the container for the status bar.
You can even replace the “Mana” and “Exp” labels with images instead. For example a blue floating ball for mana, and a green “x” for experience.
In the next section we’ll be building upon our StageDisplay class. Instead of just having it appear when moving to the next stage, we’ll make it also appear when we clear a stage.
This marks the end of the Pygame RPG – Status Bar Tutorial. Any suggestions or contributions for CodersLegacy are more than welcome. Questions regarding the article content can be asked in the comments section below.