Working with Ren’Py:

• Part 1: Downloading and Configuring
• Part 2: Editing and Creating Characters
• Part 3: Scenes and Showing Images
• Part 4: Menus, Labels, and Jumps
• Part 5: Variables and Conditional Statements
• Part 6: Transitions
• Part 7: Building Distributions

Advanced Ren’Py:

• Part 1: Screen Language
• Part 2: Position Style Properties
• Part 3: Animation and Transformation Language
• Part 4: Text and Button
• Part 5: Bar and VBar
• Part 6: Textbutton and Imagebutton
• Part 7: Input, Key, and Mousearea

Customizing Ren’Py:

• Part 1: Editing options.rpy
• Part 2: Editing gui.rpy
• Part 3: Style Inspector and Overriding Styles
• Part 4: Special Screen Names and Overriding Screens
• Part 5: Replacing Default GUI Images

Ren’Py + Python:

• Part 1: Setting and Using Flags
• Part 2: Python Blocks
• Part 3: User-Defined Displayables
• Part 4: User-Defined Statements
• Part 5: Custom Text Tags

Ren’Py is a engine for creating visual novels. It comes with a suite of tools for taking code and transforming it into programs that can be run on Windows, Mac, Linux, and even, with a little more work, mobile platforms like Android and iOS.

Beyond the showing of text and images, Ren’Py can also be extended through introducing new user interface elements, changing its defaults images, and combining Python with its own code to create even more interactive projects.

---

 

Screen Language

Ren’Py has its own internal way of displaying different user interface elements. It calls this the “screen language“. It is through this language that many things like the say and menu screens work.

Using the screen language, developers can create additional user interface elements and reactions through using screens.

The code for a new screen need not be complex. It can be as simple as defining something as a screen and using one of a number of different displayable (things which can be displayed) within it.

For example, defining hello_world to be a screen and using the text “Hello, world.” will display the text in the upper, left-hand corner. Once defined in the file “custom_screens.rpy” in the same project, it can be show through including the keywords show screen in the “script.rpy” file.

In the above image, it is included on lines 16 – 18 and thus shown with other elements within an example, default project.

 

To help with common arrangements using screens, Ren’Py has two frequently-used special keywords: hbox and vbox.

 

hbox

To help with arranging elements, the screen language in Ren’Py has hbox, a horizontally-defined box. When elements are put in this box, the elements run horizontally.

Through using hbox, any new element is added and extends the box to the right.

 

vbox

To help with arranging elements, the screen language in Ren’Py has vbox, a vertically-defined box. When elements are put in this box, the elements run vertically.

Through using vbox, any new element is added and extends the box down.

 

To help with holding multiple user interface elements, the screen language of Ren’Py has a container called a fixed. Unlike either hbox or vbox, it can use both to define more complex visual arrangements.

fixed

A fixed is a container for using multiple arrangement and other user-interface elements at the same time.

Like hbox and vbox, it can contain multiple displayables.

 

To help with creating a single window for containing a single child (grouping or element), the screen language in Ren’Py has a frame.

 

frame

Much like a fixed, a frame can contain other displayable elements. However, while fixed can contain multiple, frame is designed to hold a single element or grouping. (If more are used, a fixed is created.)

A frame also, like its name implies, has a default border, a framing.

Like a fixed, it is also used with other elements.

 

Beyond vbox and hbox, the screen language of Ren’Py also has the ability to create fixed layouts called a grid.

 

grid

Instead of using increasing complex sets of hbox and vbox, a grid can be used to simply layouts into rows and columns.

Defined with the number of rows and then columns, a grid can help with layout options.

 

For those collections which go beyond the edge of the screen or contain more elements that can be shown at one time, the screen language of Ren’Py has a viewport.

 

viewport

A viewport creates a container that can contain single element or grouping with the ability to add scrollbars.

Through adding many elements or enough that they cannot be shown at one time, a viewport allows for scrolling through them.

Note: In the above example, additional position style properties, xmaximum and ymaximum, are used to limit the size and force the appearance of greater scrollbar length. The properties draggable and scrollbars are also used, set to True and “vertical”.

 

For instances where a viewport is needed, but the layout should conform to a row-column layout, a combination of the two, vpgrid can be used.

 

vpgrid

Using both a grid and the ability to add scrollbars like in a viewport, a vpgrid uses both to arrange its element or groupings

Unlike grid, its properties must be explicitly defined as rows and columns.

Note:  In the above example, an additional style property, spacing, is used to defined the space between one element and the next in the group.

Finally, the screen language of Ren’Py has a more generic type of container called a window.

 

window

Other containers like frame are based on window.

Like frame, it can hold other elements.