TDS Making-of #1: Ren'py shake and blur

Hi all! FaBLe here, TDS’ French translator and second programmer.

We chose to write the TDS Making-Of series as an attempt to explain how the game’s “special effects”, and other tidbits were made, and perhaps give a hand to other Renpy programmers out there who may want to achieve similar special effects in their own games.

Gabmag and I are still pretty new at this, and you may find better codes somewhere else. Still, we’d be happy if this was useful to you, even a little.

In the demo, Raen experiences a sudden shock when his eyes meet the Divine Speaker’s, followed by various physical pains that make his vision blurry and unstable. This carries over to the next image, where he gets lost in an empty alley and eventually passes out from the pain.

The shock changed to heat, and the heat changed to burning. Before I knew it, I crumpled to the ground gasping for air, but it felt like my lungs were on fire. Every breath burnt my insides even more. (…) I could feel the world around me getting darker, blurrier. I fell to the ground in a fetal position, sobbing.

In order to convey Raen’s confusion and fading consciousness, two special effects were implemented: a blur effect, and then the wobble effect.

Let’s start with the blur. This one was surprisingly easy to create.

For the Divine Speaker’s CG to go back and forth between ‘clear’ and ‘blurred’, all we had to do, really, was to take the original CG, make a blurred version of it (with Photoshop or Renpy’s im.Blur feature), and then fade the two images back and forth in a loop.

Update : Renpy seems to have trouble rendering programmatically-made blur, so I’d recommend having a blurry .png or .jpg image instead.

See the code below:

image speaker_eyes_blur:
    "speaker_eyes" with dissolve
    pause 1
    "speaker_eyes_blurred" with dissolve
    pause 1 
    repeat

First we define the special effect, let’s say “speaker_eyes_blur”, which we will be able to call anytime in the game script. Then we show the normal CG in a “fade-in” fashion that takes 0.5 second to appear. The pause makes Renpy wait 1 second before switching to the blurred CG. The effect repeats until a new image or background is displayed.

We can then call “speaker_eyes_blur” in the script:

show speaker_eyes_blur with dissolve

I find the result quite satisfying to look at. You can already see the effects of the Divine Speaker staring into your soul and making you question all your life choices. Note that at that point, the image isn’t shaking yet.

Now, onto the wobble/shake effect:

Honestly, there is no easy way to explain exactly how it works. We used Kyouyuukunn’s 3D camera library, a powerful set of tools that can simulate depth and add a 3D effect within the Renpy engine. Then we basically just did our best to copy/paste the right code snippets we found in this lemmasoft thread. The Lemmasoft forums is an information goldmine and has been a great help in figuring out how to make the best of Renpy and our current skills. A similar effect can be found in the otome game “The Pirate Mermaid”, as showcased in this video.

In the script, we call the “wiggle” function that Kyouyuukunn shared in the forums like this:

scene black with Fade(.5,1,.5)

$ all_moves(x_express=Wiggle(freq=.5, amp=50), y_express=Wiggle(freq=.6, amp=20), z_express=Wiggle(freq=.4, amp=3))

show bg alleyblur onlayer background with w21:
    xpos 0.5 ypos 1.0 xanchor 0.5 yanchor 1.0 zoom 1.4

The $ all_moves line make the whole screen except the textbox and Raen’s side image shake with the frequency and amplitude we set with ‘freq’ and ‘amp’. The xpos, ypos etc… and zoom make the background zoomed in a bit, so the image doesn’t move out of frame.

Edit: If you don’t want to use the 3D camera, you could substitute it with Renpy’s linear feature. Note that this example doesn’t exactly look like the all_move effect shown above, but it works very well still.

scene bg_alley blurred with vpunch:
    subpixel True
    xpos 0.5 ypos 1.0 xanchor 0.5 yanchor 1.0 zoom 1.02
    alignaround (.5, .5)
    linear 10.0 yalign 1.0 clockwise circles 1
    repeat

By combining the blur and the wobble effect at the same time, the scene becomes much more dramatic than if it were only a group of still images.

Please be warned, however, that the difficulty here doesn’t stem from having the right set of code, but also implementing and taking into account how the 3D camera will alter the rest of your code and use of layers.

Things can go wrong very fast, just like Raen’s 18th birthday. (:

And that closes this first Making-Of! Hope you learnt a thing or two and see you next update! <3

TDS Making-of #1: Ren’py shake and blur