As is common in Python, the mechanical process of displaying something on screen in Ren’py is at once easy to execute and deceptively complicated to execute correctly.
The Ren’py documentation does a fine job of defining the specifications of position properties, but intuitively understanding how to use those properties can still be hard because it doesn’t include much in the way of examples or elaboration, so here are some of those.
Your basic properties🔗
pos - tuple of
The position of the
anchor relative to the top-left corner of the containing area (usually the whole screen).
pos is a coordinate point in the form of
(position, position). This will look like
(0, 0) or
(600, 300) or
(0.5, 1.0) or even
The first coordinate is the x coordinate (horizontal) and the second is the y coordinate (vertical). You can set these individually with
ypos, which each take a single position.
Note that pos takes a
position rather than a “number”.
positions in Ren’py come in two forms, and have two different uses.
If a position is an integer (a number without a decimal point) it’s a number of pixels.
(100, 200) is 100 pixels from the left, 200 pixels from the top.
If a position is a
float (a number with a decimal point), it’s treated as a percentage.
1.0 is 100%,
0.0 is 0%,
0.5 is 50%. In
pos, this percentage is of the total screen, so
(0.5, 1.0) is 50% from the left, 100% from the top.
Note that 1.0 and 1 are treated differently! It’s critical that you understand this.
You can mix and match position types. Here’s
anchor - tuple of
The position of the
anchor relative to the displayable image itself.
anchor is a coordinate point in the form of
(position, position), like
yanchor manipulate the two numbers separately.
For this example, let’s say we have a simple rectangle with a
This is the default, with
anchor = (0, 0). The anchor (still the red dot) is at
pos = (0.5, 0.5), the displayable (the grey rectangle) is positioned with its anchor at the rectangle’s top-left
anchor = (0, 0)
anchor = (0.5, 1.0):
Now it’s completely centered, both relative to the screen and itself.
A nice baseline for a visual novel might be
pos = (0.5, 1.0), anchor = (0.5, 1.0), which positions the entire displayable at the bottom center:
yanchor = 1.0, the rectangle starts at the anchor and “goes up”, instead of “going down”.
offset - tuple of
The last real value!
offset is a simple one, it just nudges the displayable by the given number of pixels. And they’re just integers this time, no need to worry about percentages. Again,
yoffset manipulate the two components separately.
Here’s a nice little offset figure:
1 2 3
The shortcut ones🔗
Like I said, that was the last real position property! The rest are all shorthand for changing those three.
xcenter = xsets
xand xalign to
ycenter = ysets
yand yalign to
align = (x, y)sets both
You may have noticed an obvious pitfall here: there are a lot of different ways to display exactly the same image! Changing
anchor by a few pixels looks the same as changing
offset, but animates totally differently.
That’s why it’s critical to keep the way you animate things consistent, and think through animations carefully rather than just bashing your code with a hammer until it produces an image that looks good. If you don’t, you’ll find it very easy to write yourself into a corner where animations don’t work correctly and you can’t get
ease or other interpolations to do what you want, because you’ve accidently spread a single design decision across three sets of numbers.
Here are my design recommendations, I suppose:
- Keep a default align for characters of
xposas needed to move them around the screen.
- Have a default offset of
(0, 20)so there’s room for the character to move up a few pixels
- Just use
offsetfor animations (jumping up and down, sitting, general fx). You should always be able to clamp
offsetback to near-zero and still have the character in the right area.
- If your characters are standing, you probably don’t ever need to touch ypos or yanchor!