Codes: Location Transition Screen with ATL

Another thing I added for Whale’s Waldo is transition screens. Basically, whenever you first arrive in a new location, we show the name of the location with an image of the city before dumping you into narration/dialogue.

This was my first real introduction to ATL within screen language, and it’s actually straightforward to understand.

First, we define two transforms and a style for the text:

transform gui_locdecor_background:
alpha 0.0
pause 0.2
linear 0.5 alpha 1.0
pause 2.3
linear 0.5 alpha 0.0
transform gui_locdecor_bottom:
alpha 0.0
xalign 0.5 ypos 967
xoffset 200 yoffset -400
pause 0.4
linear 0.5 alpha 1.0
easein 0.5 xoffset 0
pause 2.0
linear 0.5 alpha 0.0
easein 0.5 yoffset 0
style gui_overlay_loc:
font gui.advname_font_face
size gui.advname_font_size * 0.8
color Color(color=gui.advname_font_color,alpha=0.75)
kerning gui.advname_font_kerning * 1.3 text_align 0.5
xalign 0.5
yoffset -15

The first of the transforms will be used for a background behind the text, so that the text shows up nicely against any background. This simply fades in the image over 0.5 seconds, shows it for 2.3 seconds, and then fades it out again over 0.5 seconds.

The second of the transforms is for the text, so it scrolls in from the right, shows for a few seconds, and then drops down the screen as it fades out. You can follow the AT directives pretty straightforwardly, except note that any parallel lines will execute together. So, in this case, we linearly move it left and fade it in over 0.5 seconds, pause 2 seconds, and the linearly move it down and fade it out over 0.5 seconds.

Next, we define the screen that will actually be showing the information:

screen location_info(locname):
at gui_fade_inout
xpos 0.0
xanchor 0.0
ypos 0.5
yanchor 0.5
at gui_locdecor_background
add "gui/place_background.png"
xsize 1200
at gui_locdecor_bottom
text locname:
style "gui_overlay_loc"
timer 3.5 action Hide("location_info")

Nothing too complicated here. place_background.png is just a semi-transparent strip that matches the rest of our GUI. Note, though, the at directives applied to each, which reference the transforms we’d defined above. Also note that the screen will hide itself 3.5 seconds after we first show it.

Finally, all we have to do is actually use the screen in the game:

scene bodo_background with dissolve
show screen location_info("Bodo, North Norway, Norway")
$ renpy.pause(3.5)
hide screen location_info
scene first_bodo_location with dissolve
"Here we are in Bodo."

The only interesting here is the explicit hide screen location_info. This is technically optional, but without it, the only way for to hide the location name is by waiting for the 3.5 second timer. This means that if the player manually clicks through the screen, or is using the skip functionality, the screen will bleed over into the dialogue, because screens are not automatically hidden on scene changes. Explicitly hiding it takes care of these cases.

And… that’s it! A super simple example, but I think it actually turned out looking quite nice.

Leave a comment

Your email address will not be published. Required fields are marked *