Ren'Py Ren'Py Text on Screen Positioning Question

[FranceToast]

I know you can show a block of text on the screen in Ren'Py (as opposed to the text in the dialogue boxes), and I know there are ways to position a block of text on the screen using coordinates.

But let's say I want to use a block of text to overlay a background graphic, like a Drivers License or Business Card, and I want the User Defined Name of the MC to show up as a line properly positioned over the graphic of the Drivers License or Business Card. Is this trivial to accomplish and I should not worry about it, or can/will varied screen resolutions/sizes/OSes of the user screw the alignment up and ruin my carefully made plans?

 

[Rich]

Yes, it's pretty straightforward to do this. The easiest way to do it is to create a Ren'py screen, and then show the screen at the appropriate time. (I say that because the screen language gives you very easy positioning control of text and graphics.)

Basically, you'd do something along these lines:

screen drivers_license():
    add "drivers_license_background"       # name of the background image
    text "[player_name]":                  # A text string with the contents of the "player_name" variable interpolated in
        anchor (0.0, 0.0)                  # we will specify the anchor point of the text as its upper-left corner
        pos(256, 512)                      # put the anchor point of the text at x=256, y=512 on the screen

Then, at the appropriate point, just show or hide the screen.

    show screen drivers_license
    ....
    hide screen drivers_license

If the driver's license background image doesn't occupy the full screen, you can position it via the exact same mechanism. Note the colon at the end of the "text" line - that tells Ren'py that there's indented stuff to follow, so if you want to position the background image, you have to add a colon to the end of that screen.

(You can also put the anchor / pos stuff on the same line as the "add" or "text", but I like doing it this way for clarity.)

"anchor" specifies the point in an image or text that will be used as its "origin".
"pos" specifies where, within the parent, the anchor should appear
When numbers are specified as decimals, then they are in terms of fractions of the whole (0.0 - 1.0). If they're specified as integers, then they're pixels.

It is also possible to do this without a screen. The trick is to turn your text into a Displayable (see here:

You must be registered to see the links

) so that you can then "show" it as if it was an image. Having done that, you can use all the normal Ren'py transforms to position it.

 

[FranceToast]

Yes, it's pretty straightforward to do this. The easiest way to do it is to create a Ren'py screen, and then show the screen at the appropriate time. (I say that because the screen language gives you very easy positioning control of text and graphics.)

Basically, you'd do something along these lines:

screen drivers_license():
    add "drivers_license_background"       # name of the background image
    text "[player_name]":                  # A text string with the contents of the "player_name" variable interpolated in
        anchor (0.0, 0.0)                  # we will specify the anchor point of the text as its upper-left corner
        pos(256, 512)                      # put the anchor point of the text at x=256, y=512 on the screen

Then, at the appropriate point, just show or hide the screen.

    show screen drivers_license
    ....
    hide screen drivers_license

If the driver's license background image doesn't occupy the full screen, you can position it via the exact same mechanism. Note the colon at the end of the "text" line - that tells Ren'py that there's indented stuff to follow, so if you want to position the background image, you have to add a colon to the end of that screen.

(You can also put the anchor / pos stuff on the same line as the "add" or "text", but I like doing it this way for clarity.)

"anchor" specifies the point in an image or text that will be used as its "origin".
"pos" specifies where, within the parent, the anchor should appear
When numbers are specified as decimals, then they are in terms of fractions of the whole (0.0 - 1.0). If they're specified as integers, then they're pixels.

It is also possible to do this without a screen. The trick is to turn your text into a Displayable (see here:

You must be registered to see the links

) so that you can then "show" it as if it was an image. Having done that, you can use all the normal Ren'py transforms to position it.

Thank you, Rich! The Displayable approach is pretty cool!

 

[Rich]

There's almost always more than one way to do something in Ren'py - which way is best depends on exactly what you're doing.

Happy that you were able to make it work.