Introduction to Ren’Py Screens for Dummies (me)

The goal of this series is to provide a comprehensive tutorial on Ren’Py Screens.

I think the issue with the currently available material is that they leave out too much for a beginner without laying down a foundation in UI design, and/or it’s just a bunch of jank-hacky stuff that won’t teach you good habits.

The current outline for this series is as follows. This may change as the series goes on:

1. What is a Screen? (you are here)
2. Making a Screen. (coming next)****
3. Positioning. Containers.
4. Screen elements. Text. Images.
5. Actions. Buttons. Input.
6. Styles.
7. Logic. Variables. Python.
8. Ren’Py’s default UI and why it sucks.

What is a Screen?

Before we do any code, let’s make it clear what a Screen actually is. Screens is Ren’Py’s language for UI. You may have a vague idea of what UI is, and that’s good enough for now.

Images displayed using the show statement (e.g. show eileen happy), like your character sprites and backgrounds are NOT part of the UI, and are instead shown on the master layer, which is behind the screens layer. If you’ve ever used an art program with folders and layers, it’s the same concept.

NOTE:

• Your game images are shown in the master layer/folder.
• Your game UI is contained in the screens layer, which is in front of the master layer.

3D visualisation of the master and screens layer. In reality, they’re flush against each other, but for the purposes of this demonstration, I moved the screens layer forward so you can conceptualise the layers on top of each other.

The confirm-to-quit screen appearing on the screens layer. You can see the rectangle used to darken the game whenever this shows up.

What does a Screen do?

The UI, which stands for User Interface, is how the player (the User) interacts with your game (via the Interface). This includes information the game gives the player, either through sound, visuals or text, and all the input methods the player can use to change the game, including controls, buttons, sliders, microphone, keyboard, text input, etc.

For example, the say screen is how the player reads the dialogue of your game. This is information the game shows the player. In the other way, the quick menu screen is one way the player tells the game what to do, opening up other menus, or doing other actions such as rollback.

NOTE:

UI only has 2 purposes:

• Show the player information (text, visuals, sounds, etc.)
• The player tells the game what to do (controls, buttons, sliders, etc.)

Conclusion

That’s the end of Part 1! I wanted to have a quick overview of what Screens are in the first place, before doing any code because I feel like this is ignored completely.

To summarise:

• Screens is Ren’Py’s language for UI. This goes in front of your game sprites and backgrounds, on its own layer.
• UI is either showing information to the player or getting input from the player. This is how the game knows what the player wants, and how the player knows what’s going on in your game. It’s a two-way street.