Pygame RPG - Status Bar

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.

Pygame Fonts

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)

Colors

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.

The 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 render() and 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.

Showcase

Here’s a quick 20 sec clip of our game, which includes the status bar we just created.

Possible Enhancements

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.

Next Section

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.

Pygame RPG – Stage Clear

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.