Tag Archives: whaleswaldo

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
     parallel:
         linear 0.5 alpha 1.0
     parallel:
         easein 0.5 xoffset 0
     pause 2.0
     parallel:
         linear 0.5 alpha 0.0
     parallel:
         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):
     fixed:
         at gui_fade_inout
         fixed:
             xpos 0.0
             xanchor 0.0
             ypos 0.5
             yanchor 0.5
             at gui_locdecor_background
             add "gui/place_background.png"
         frame:
             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.

One of the things I had to figure out for Whale’s Waldo was how to animate a plane flight from one location to another. With RenPy’s powerful ATL language, this is surprisingly easy, and you can even draw the actual line without having to make a new image each time!

First thing’s first: Let’s define the RenPy displayable that will represent the actual flight line. You can do this by creating a custom Displayable class:

init python:
     class FlightLine(renpy.Displayable):
         def __init__(self, startloc, stoploc, **kwargs):
             renpy.Displayable.init(self, **kwargs)
             self.startloc = startloc
             self.stoploc = stoploc
         def render(self, width, height, st, at):
             render = renpy.Render(1920,1080)
             canvas = render.canvas()
             canvas.line("#f00", self.startloc, self.stoploc, width=10)
             return render

Now that you have the class, you can reuse and define instances of it for each trip you need to make. So let’s define the images for our flight from, say, New York City in the US to Bodo in Norway.

First, we need images for our plane, and a background image that is a map. Then we find the pixel coordinates on the map where we want to start and end our flight. Let’s say it’s (89,720) to (1739,150).

image plane = "plane.png"
image map1 = "map1.jpg"
image flightoverlay1 = FlightLine((89,720),(1739,150))

Now, we have all the components we need. As part of your RenPy script, simply show the necessary components with appropriate ATL transforms.

scene ny_background with dissolve
"Ready for our flight?"
scene map1 with dissolve
show flightoverlay1:
    xpos 0 ypos 0
    crop (0,0,88,1080)
    linear 5.0 crop (0,0,1740,1080)
show plane:
    xpos 89 ypos 720 xanchor 0.5 yanchor 0.5
    linear 5.0 xpos 1739 ypos 150
$ renpy.pause(6.0)
scene bodo_background with dissolve
"Now we’re here in Bodo."

The interesting part here is the “linear” commands, which tell RenPy to animate, linearly, from the existing set of display criteria to the new set. We crop the display representing the flight path, starting with none of it and then showing all of it, and we move the plane from one location to another in a straight line.

And… voila!

This can easily be reused for other flights by defining new map and flghtoverlay images.

If you’re not a fan of red lines, you can easily change the line color within your defined Displayable, or even make the color one of the arguments to the class.

Also worth noting that the Canvas object is capable of drawing more complicated shapes as well, so if you have simple shapes and images, you might want to let RenPy draw them for you instead of making new images each time. Details can be found in the Canvas object’s documentation.