Renpy Pirate Game Part 6 - Styles, Scoring, Inventory System

by IoFAdmin at

renpy | python | programming

Our Previous Trip On the High Seas...

In our last post, we learned all about Renpy variables, conditionals and screens. We'll build on those concepts in this post.

Programming Notice!

For brevity's sake, I'll only be showing code that has changed since last post instead of all of the code. (Your noticing the notice has been noticed.)

Sailing Ever Onward

We'll be exploring three concepts in this tutorial:

  • Styles
  • A Scoring System
  • An Inventory System

So What Are Renpy Styles?

Styles in Renpy allow us to change the appearance and layout of components in our game. If you've ever learned CSS for websites, it's similar in concept. While Renpy Styles can become quite complicated, we're keeping it pretty simple here. (See the Renpy documentation for more information on styles.)

Getting the High Score

To help the player and add a little extra fun, we're going to add scoring to our game. (By the way, how and what does a pirate score? A date? Some treasure? A bottle of rum?) When our player completes certain tasks in the game, he/she will receive points. To complete the current level, our player will have to complete all of the required tasks (and score all of the points).

An Inventory System... AKA Our Pirate Treasure

If you remember from our last post, our pirate hero found a house key when he investigate the potted plant in front of his house. We set a variable, hasHouseKey, to keep track of whether he collected the key or not. Since we're going to have many more items in the future, setting a variable for each one will get to be impractical. An inventory system will solve our problem. We'll be visualizing our inventory with a backpack.

X Marks the Spot... For Our Code

Keeping with the format of the previous posts, I'll show you the code and then explain it. We'll start with script.rpy from post #5. Like I mentioned earlier, we'll only be looking at code that has changed so your code will be longer than what's shown here.

default inventory = []

label start:
    scene bg insidehouse
    show pirate happy
    show screen hudScreen

    $ points = 0
    $ player_name = renpy.input("What is your name?", length=10)
    $ player_name = player_name.strip()
    if player_name == "":
        $ player_name = "Sheldon"

    p "No Miss Fluffybottom! Wait!"
    "Your cat, the adventurous (and naughty) Miss Fluffybottom runs out the front door of your house. That bad kitty's chasing a bird again! You should probably go after her right meow."

    menu:
        "Go after her.":
            jump house_outside
        "She'll be fine.":
            jump house_inside

    return

label flower_pot:
    scene bg outsidehouse
    show pirate happy

    if 'house_key' in inventory:
        p "Mom's favorite plant could use some watering but I'll LEAVE it alone right now."
    else:
        $ inventory.append('house_key')
        $ points += 10
        p "Hey what's that? Looks like a house key! Now I have the key to my front door."

    jump front_porch

label house_outside:
    scene bg outsidehouse
    show screen frontPorchScreen
    show pirate happy

    p "There she is down on the beach chasing the seagulls again. Crazy cat! I should probably bring her back in the house before she gets lost or drowns."
    "The door slams shut and you're locked out of the house!"

    menu:
        "Use my key." if 'house_key' in inventory:
            hide screen frontPorchScreen
            jump house_inside
        "Knock on the door." if 'house_key' not in inventory:
            jump door_knock
        "Go after Ms Fluffybottom.":
            hide screen frontPorchScreen
            jump beach_squid

label front_porch:
    scene bg outsidehouse
    show screen frontPorchScreen
    show pirate happy

    p "My front porch."

    menu:
        "Use my key." if 'house_key' in inventory:
            hide screen frontPorchScreen
            jump house_inside
        "Knock on the door." if 'house_key' not in inventory:
            hide screen frontPorchScreen
            jump door_knock
        "Go after Ms Fluffybottom.":
            hide screen frontPorchScreen
            jump beach_squid

Another One

Open up myscreens.rpy and replace everything with the code below.

screen frontPorchScreen():
    imagebutton:
        xalign 0.75
        yalign 1.0
        idle "flower"
        action Jump("flower_pot")

screen hudScreen():
    frame style style["hud_frame"]:
        hbox:
            if player_name == "":
                label "Player"
            else:
                label player_name

            label "   Points: "
            text "%d  " % points

            imagebutton:
                idle "backpack"
                action Show("inventoryScreen")

screen inventoryScreen():
    modal True
    frame style style["inventory_frame"]:
        imagebutton style style["close_btn"]:
            idle "close"
            action Hide("inventoryScreen")

        vbox:
            text "Inventory"
            grid 7 4:
                for i in range(28):
                    frame:
                        maximum(155,155)
                        if i < len(inventory):
                            background Image(inventory[i]+".png")
                            $ inv_item_name = inventory[i].replace('_', ' ')
                            text [inv_item_name] style style["inv_item"]
                        else:
                            background Image("placeholder.png")

Arrrgh! This Be The Last One

Create a new file in the same directory as script.rpy, name it mystyles.rpy, and paste all of the following code into it.

style inv_item is text:
    size 16
    bold True
    color Color((0, 255, 0, 255))
    pos (5,125)

style inventory_frame is frame:
    xpadding 10
    ypadding 10
    xalign 0.5
    yalign 0.5
    xsize 1152
    ysize 660
    background Color((193, 66, 66, 192))

style close_btn:
    xpos 1100
    ypos -4

style hud_frame is frame:
    xpadding 10
    ypadding 10
    xalign 0.5
    yalign 0.0

So What Was All of That?

We'll start with script.rpy mateys.

default inventory = []

We replaced define hasHouseKey = False with default inventory = [] which is required to work with our screen code below.

label start:
    scene bg insidehouse
    show pirate happy
    show screen hudScreen

    $ points = 0

Here we're showing a new screen hudScreen (which we'll create later) and we have a new variable points that we'll use in our scoring system.

label flower_pot:
    scene bg outsidehouse
    show pirate happy

    if 'house_key' in inventory:
        p "Mom's favorite plant could use some watering but I'll LEAVE it alone right now."
    else:
        $ inventory.append('house_key')
        $ points += 10
        p "Hey what's that? Looks like a house key! Now I have the key to my front door."

    jump front_porch

In our flower_pot label, we're checking to see if house_key exists in our inventory variable. If it does, make a bad pun, else append it to our inventory list variable and give our player 10 points.

label house_outside:
    scene bg outsidehouse
    show screen frontPorchScreen
    show pirate happy

    p "There she is down on the beach chasing the seagulls again. Crazy cat! I should probably bring her back in the house before she gets lost or drowns."
    "The door slams shut and you're locked out of the house!"

    menu:
        "Use my key." if 'house_key' in inventory:
            hide screen frontPorchScreen
            jump house_inside
        "Knock on the door." if 'house_key' not in inventory:
            jump door_knock
        "Go after Ms Fluffybottom.":
            hide screen frontPorchScreen
            jump beach_squid

Same thing here... see if house_key is in our inventory variable.

label front_porch:
    scene bg outsidehouse
    show screen frontPorchScreen
    show pirate happy

    p "My front porch."

    menu:
        "Use my key." if 'house_key' in inventory:
            hide screen frontPorchScreen
            jump house_inside
        "Knock on the door." if 'house_key' not in inventory:
            hide screen frontPorchScreen
            jump door_knock
        "Go after Ms Fluffybottom.":
            hide screen frontPorchScreen
            jump beach_squid

Third time's a charm.

screen hudScreen():
    frame style style["hud_frame"]:
        hbox:
            if player_name == "":
                label "Player"
            else:
                label player_name

            label "   Points: "
            text "%d  " % points

            imagebutton:
                idle "backpack"
                action Show("inventoryScreen")

In myscreens.rpy, we define a new screen hudScreen which will sit at the top of our game and display the player's name, current points, and an imagebutton of a backpack that will load our inventory screen. We're using a style here: frame style style["hud_frame"]. That tells Renpy that we have a style called hud_frame in our new mystyles.rpy file which we want to apply to our frame object. Inside our frame, we have a horizontal box (hbox) with a player label, a points label, a points text, and an imagebutton. The text "%d " % points code tells Renpy that we are wanting to display points as an integer.

screen inventoryScreen():
    modal True
    frame style style["inventory_frame"]:
        imagebutton style style["close_btn"]:
            idle "close"
            action Hide("inventoryScreen")

        vbox:
            text "Inventory"
            grid 7 4:
                for i in range(28):
                    frame:
                        maximum(155,155)
                        if i < len(inventory):
                            background Image(inventory[i]+".png")
                            $ inv_item_name = inventory[i].replace('_', ' ')
                            text [inv_item_name] style style["inv_item"]
                        else:
                            background Image("placeholder.png")

We define our screen as modal which means nothing below it can be interacted with. We have a frame using the inventory_frame style that contains an imagebutton and a vbox. The imagebutton closes the current screen when clicked. Inside the vbox we have a grid which has 7 columns and 4 rows. We loop over each cell in the grid and add a frame with a maximum width and height of 155 pixels. If the current index of i is less than the number of elements in the inventory variable, add a background Image and the name of the item. Else, display a placeholder image.

style inv_item is text:
    size 16
    bold True
    color Color((0, 255, 0, 255))
    pos (5,125)

Here we define our first style. We're creating styles in the mystyles.rpy file to keep the other files less cluttered. Renpy styles are pretty self-explanatory which makes them easy to understand. The inv_item part gives us a name that we can use the access the style in other files. The is text section tells Renpy that our style is modifying the default text style included with Renpy. All of the other parts do just what you'd expect: set the text size to 16 pixels, bold the text, set the text color to green, and display the text at 5 pixels to the left and 125 pixels down from the top left corner of the Renpy component that the style is applied to.

style inventory_frame is frame:
    xpadding 10
    ypadding 10
    xalign 0.5
    yalign 0.5
    xsize 1152
    ysize 660
    background Color((193, 66, 66, 192))

Define a style named inventory_frame that modifies the default Renpy frame styles. Give it 10 pixels padding on the all sides (both x and y), center it horizontally and vertically (xalign 0.5 -> horizontal, yalign 0.5 -> vertical), set the size as 1152 x 660 pixels, and set the background color to reddish with a partial opacity (a little bit transparent).

style close_btn:
    xpos 1100
    ypos -4

Another style... This time it doesn't modify any default style. Set the position as 1110 pixels to the left and 4 pixels above the top left corner of the container that the component is inside of.

style hud_frame is frame:
    xpadding 10
    ypadding 10
    xalign 0.5
    yalign 0.0

Last style... Modify the default frame style, set padding to 10 pixels in all directions, center horizontally, display at the top of the container.

Screenshots

Wrapping Up

If you followed along and didn't walk the plank, your Renpy game should look very similar to the images above. As always, if you have feedback please let me know your opinions in the comments below.

Git Repo Link

If you'd like to download the code and images in this post, get them here.

Support Me

If you find these tutorials useful (or enjoy my bad puns), please consider buying me a coffee. Thanks!

Comments