Monday 4 September 2017

Ren'py fade text in and out

As promised here is the Screens version of the fade in out text! I'll leave the below stuff using the (old!) ui.add on this blog post (below the "--- old post below ---") as it goes into a bit more detail with the custom transform!

So, the way I went about this is to create a new rpy file for my custom screen, I called it custom.rpy, but give it any name you'd like!

This is the entire contents of that file:

screen info_fade:

    text "Look. I'm fading about." at fade_inout_2s


Then in the script.rpy I have:

transform fade_inout_2s:
        xalign 0.5
        yalign 0.5
        alpha 0.08
        easeout_back 2 alpha 0.9
        pause 0
        ease 2 alpha 0.0

label start:

    scene bg room
    "Ok, here we go."
    show screen info_fade
    pause 6
    "That was nice."
    pause
    return

The main bits there being the transform which I declared at the very top of the script.rpy file and the show screen info_fade statement.

I used show screen rather than call screen because I think calling a screen then expects some kind of user interaction, which isn't what I wanted for this effect. I've not used this in a game, so depending on what you are trying to achieve you might need to make some changes, feel free to drop me a line on twitter if you are struggling with anything - I'll help if I can! - @sleepyagents

Here is a gif:



btw I use ScreenToGif to make gifs if anyone is interested - http://www.screentogif.com/ - thanks screentogif people!

And a big thanks to xela and Zetsubou for the lemmasoft thread where I found the basis of this stuff! (link below)

--- (old post below) ---

Here is one way you can fade in and out some text in Ren'Py!

I thought I would be able to do this without looking at the lemmasoft forum, but I failed in that :'D

here is the guide I found from xela https://lemmasoft.renai.us/forums/viewtopic.php?p=336645#p336645
(thanks xela!)

I just changed it a bit as I didn't need the text to move.

You might be thinking that this would be a lot easier with an image - and you'd be correct! but that wouldn't be as accessible, though you could add some text to describe the image, I think this way is better for filesize and flexibility (variables!) anyway.

Right at the top of the script.rpy file I have:

init python:
    def fade_inout_text(text, *args, **kwargs):
        ui.add(At(Text(text, *args, **kwargs), fade_inout_2s))
         
transform fade_inout_2s:
        xalign 0.5
        yalign 0.5
        alpha 0.08
        easeout_back 2 alpha 0.9
        pause 0
        ease 2 alpha 0.0


I don't know much about the def and ui.add bits, so I'll explain a bit about the transform instead!

The xalign and yalign make sure that the text is centered, the alpha 0.08 means that the text is just visible before the animation starts (0 would be invisible), easeout_back 2 alpha 0.9 uses the easing ( see https://www.renpy.org/doc/html/atl.html#warpers for the list of available warpers/easings ) called easeout_back which has a certain effect (see gif below!) which takes 2 seconds to change to 90% visibility (alpha 0.9), of course you could use 1.0 instead for 100% visibility.
Then I added a pause of 0 seconds... followed by ease 2 alpha 0.0 which takes 2 seconds to 'ease' the text to 0% visibility / transparent.
Play around with the numbers and the warpers / easings to get the effect you want!

And then when some text needs to fade in and out during the game you can add this:

    $ fade_inout_text("this is the text that fades in and out", color="#111111", size=30)
    pause 6


You can see I added a 6 second pause after the statement to give it time to do it's thing. You could use a normal pause without an amount of time defined to let the player click to continue.

If you want to display a variable you can replace the string, e.g.

    $ fade_inout_text(my_variable, color="#111111", size=30)

I hope this has been helpful!


I just realised the code to do this with screens is in the forum thread I linked! Which is what I originally intended to do! I'll update this post soon with the code for screens which will be a little nicer haha.

No comments:

Post a Comment