Animating the text box/ say screen to wipe left/ right

Discuss how to use the Ren'Py engine to create visual novels and story-based games. New releases are announced in this section.
Forum rules
This is the right place for Ren'Py help. Please ask one question per thread, use a descriptive subject like 'NotFound error in option.rpy' , and include all the relevant information - especially any relevant code and traceback messages. Use the code tag to format scripts.
Post Reply
Message
Author
User avatar
Kinmoku
Veteran
Posts: 339
Joined: Mon Aug 11, 2014 9:39 am
Completed: One Night Stand
Projects: Love IRL, Memories
Tumblr: gamesbykinmoku
itch: kinmoku
Location: Germany
Contact:

Animating the text box/ say screen to wipe left/ right

#1 Post by Kinmoku » Wed Jul 11, 2018 12:34 pm

Hi all,

I'm struggling to figure out how to animate the say screen so that each time the text box appears it wipes on (left to right) and when it disappears it wipes off (left to right). My GUI looks like a paint stroke, to give you an idea of the effect I'm trying to achieve!

Here's all I have so far...

Code: Select all

transform say_window_animation:
    on show:
        # 
    on hide:
    	# reset needed
    	
transform text_fade_in:
    alpha 0
    linear 0.5 alpha 1
and in screens.rpy...

Code: Select all

screen say(who, what):
    style_prefix "say"

    window at say_window_animation:
        id "window"

        if who is not None:

            window:
                id "namebox"
                style "namebox"
                text who id "who"

        text what id "what" at text_fade_in

Any ideas? I don't know how to use ATL for left/ right wipe effects.

philat
Eileen-Class Veteran
Posts: 1326
Joined: Wed Dec 04, 2013 12:33 pm
Contact:

Re: Animating the text box/ say screen to wipe left/ right

#2 Post by philat » Mon Jul 16, 2018 1:42 am

I'm not sure what you mean by wipe. Would slide in/out suffice? That's as simple as

Code: Select all

xoffset -1980 # assuming this is your horizontal resolution
linear 0.5 xoffset 0
and vice versa for the opposite. That said, the real headache is figuring out when the effect triggers -- i.e., because the screen is refreshed every line of dialogue, having the effect apply only when the textbox first comes up or is last hidden (as opposed toe very line) is tricky. That is, assuming this issue hasn't been solved in a recent update -- I haven't been paying as close attention to 7.0.

User avatar
Kinmoku
Veteran
Posts: 339
Joined: Mon Aug 11, 2014 9:39 am
Completed: One Night Stand
Projects: Love IRL, Memories
Tumblr: gamesbykinmoku
itch: kinmoku
Location: Germany
Contact:

Re: Animating the text box/ say screen to wipe left/ right

#3 Post by Kinmoku » Mon Jul 16, 2018 5:36 am

philat wrote:
Mon Jul 16, 2018 1:42 am
I'm not sure what you mean by wipe. Would slide in/out suffice? That's as simple as

Code: Select all

xoffset -1980 # assuming this is your horizontal resolution
linear 0.5 xoffset 0
and vice versa for the opposite. That said, the real headache is figuring out when the effect triggers -- i.e., because the screen is refreshed every line of dialogue, having the effect apply only when the textbox first comes up or is last hidden (as opposed toe very line) is tricky. That is, assuming this issue hasn't been solved in a recent update -- I haven't been paying as close attention to 7.0.
Thanks for your reply.

I don't mean a slide, unfortunately. I'm after a wipe so it looks like the UI is being painted on. A wipe is when the image/ text box stays still but appears from the left (or the right). Think of Star Wars' terrible scene transitions, haha! https://i.stack.imgur.com/JIPdT.gif

I know I could create this effect with imagedissolve + a gradient image, but I don't think that works with ATL, does it?

I'd like it to show up every time a different character talks. The reason being that each character's text box will be in a different location.

User avatar
Per K Grok
Regular
Posts: 58
Joined: Fri May 18, 2018 1:02 am
Completed: the Ghost Pilot
Projects: Sea of Lost Ships
Deviantart: pekj
itch: per-k-grok
Location: Sverige
Contact:

Re: Animating the text box/ say screen to wipe left/ right

#4 Post by Per K Grok » Mon Jul 16, 2018 7:21 am

Kinmoku wrote:
Mon Jul 16, 2018 5:36 am

---
I'm after a wipe so it looks like the UI is being painted on. A wipe is when the image/ text box stays still but appears from the left (or the right). Think of Star Wars' terrible scene transitions,

---
You could make something using crop I think

a quick test

Code: Select all


    show cYaz s1:
        xpos 300
        ypos 200
        crop (0,0, 20, 300)
    pause 0.1
    show cYaz s1:
        crop (0,0, 40, 300)
    pause 0.1
    show cYaz s1:
        crop (0,0, 60, 300)
    pause 0.1
    show cYaz s1:
        crop (0,0, 80, 300)
    pause 0.1
    show cYaz s1:
        crop None

result

Image

User avatar
Kinmoku
Veteran
Posts: 339
Joined: Mon Aug 11, 2014 9:39 am
Completed: One Night Stand
Projects: Love IRL, Memories
Tumblr: gamesbykinmoku
itch: kinmoku
Location: Germany
Contact:

Re: Animating the text box/ say screen to wipe left/ right

#5 Post by Kinmoku » Mon Jul 16, 2018 9:12 am

Per K Grok wrote:
Mon Jul 16, 2018 7:21 am
Kinmoku wrote:
Mon Jul 16, 2018 5:36 am

---
I'm after a wipe so it looks like the UI is being painted on. A wipe is when the image/ text box stays still but appears from the left (or the right). Think of Star Wars' terrible scene transitions,

---
You could make something using crop I think

a quick test

Code: Select all


    show cYaz s1:
        xpos 300
        ypos 200
        crop (0,0, 20, 300)
    pause 0.1
    show cYaz s1:
        crop (0,0, 40, 300)
    pause 0.1
    show cYaz s1:
        crop (0,0, 60, 300)
    pause 0.1
    show cYaz s1:
        crop (0,0, 80, 300)
    pause 0.1
    show cYaz s1:
        crop None

result

Image
Oh nice! :D I'll try this out this afternoon and see how it looks.

User avatar
Kinmoku
Veteran
Posts: 339
Joined: Mon Aug 11, 2014 9:39 am
Completed: One Night Stand
Projects: Love IRL, Memories
Tumblr: gamesbykinmoku
itch: kinmoku
Location: Germany
Contact:

Re: Animating the text box/ say screen to wipe left/ right

#6 Post by Kinmoku » Mon Jul 16, 2018 10:31 am

It looks great!

Image

This is all the code I used, in case anyone is interested:

Code: Select all

screen say(who, what):
    style_prefix "say"

    window at say_window_animation:
        id "window"

        if who is not None:

            window:
                id "namebox"
                style "namebox"
                text who id "who"

        text what id "what" at text_fade_in

Code: Select all

transform say_window_animation:
    #function say_window_transform
    crop (0,0, 50, 300)
    alpha 0
    pause 0.02
    crop (0,0, 100, 300)
    alpha 0.1
    pause 0.02
    crop (0,0, 150, 300)
    alpha 0.2
    pause 0.02
    crop (0,0, 200, 300)
    alpha 0.3
    pause 0.02
    crop (0,0, 250, 300)
    alpha 0.4
    pause 0.02
    crop (0,0, 300, 300)
    alpha 0.5
    pause 0.02
    crop (0,0, 350, 300)
    alpha 0.6
    pause 0.02
    crop (0,0, 400, 300)
    alpha 0.7
    pause 0.02
    crop (0,0, 450, 300)
    alpha 0.8
    pause 0.02
    crop (0,0, 500, 300)
    alpha 0.9
    pause 0.02
    crop (0,0, 550, 300)
    alpha 1
    pause 0.02
    crop (0,0, 600, 300)
    pause 0.02
    crop (0,0, 650, 300)
    pause 0.02
    crop (0,0, 700, 300)
    pause 0.02
    crop (0,0, 750, 300)
    pause 0.02
    crop None

transform text_fade_in:
    alpha 0
    linear 1 alpha 1
I added an alpha at the beginning of the crop to soften it a little.

I'd love to know how to stop this effect from repeating when the dialogue is on a pause (eg: k "Oh.\n{w=1}My mum says...") or even when the same character is talking/ the same window is being used.

User avatar
Remix
Miko-Class Veteran
Posts: 833
Joined: Tue May 30, 2017 6:10 am
Completed: None... yet (as I cannot draw very well)
Projects: An un-named 3d anime based trainer game
Contact:

Re: Animating the text box/ say screen to wipe left/ right

#7 Post by Remix » Mon Jul 16, 2018 11:44 am

You could reduce you code by using a warper btw

Code: Select all

transform say_window_animation:
        crop_relative True
        crop (0.0, 0.0, 0.0, 1.0)
        alpha 0.2
        linear 0.5 alpha 1.0 crop(0.0, 0.0, 1.0, 1.0)
Might look a little smoother too if you get it behaving correctly

User avatar
Kinmoku
Veteran
Posts: 339
Joined: Mon Aug 11, 2014 9:39 am
Completed: One Night Stand
Projects: Love IRL, Memories
Tumblr: gamesbykinmoku
itch: kinmoku
Location: Germany
Contact:

Re: Animating the text box/ say screen to wipe left/ right

#8 Post by Kinmoku » Mon Jul 16, 2018 11:58 am

Remix wrote:
Mon Jul 16, 2018 11:44 am
You could reduce you code by using a warper btw

Code: Select all

transform say_window_animation:
        crop_relative True
        crop (0.0, 0.0, 0.0, 1.0)
        alpha 0.2
        linear 0.5 alpha 1.0 crop(0.0, 0.0, 1.0, 1.0)
Might look a little smoother too if you get it behaving correctly
Of course! Thanks :D

Edit: Just tried it and it's SO smooth! I love it.

User avatar
trooper6
Lemma-Class Veteran
Posts: 3262
Joined: Sat Jul 09, 2011 10:33 pm
Projects: A Close Shave
Location: Medford, MA
Contact:

Re: Animating the text box/ say screen to wipe left/ right

#9 Post by trooper6 » Mon Jul 16, 2018 2:38 pm

I imagine you could also use a dict transition, keyed to just the screen layer rather than ATL, no?
A Close Shave:
*Last Thing Done (Jul 10): Converted LiveComposite Sprites to LayeredImages
*Currently Doing: Trying to work out the transition thing for two character using the same sprite and try to figure out how to redo my multi-barber thing...i.e. see if there is a way to re_do my character callbacks
*First Next thing to do: Rebuild the project with the new RenPy (i.e. with gui.rpy present.), this will mean making some gui art now that I don't have access to the old theme.
*Next thing to do: Code in all the sprite emotion and camera movement for Close Shave Sprite Sections
*Other Thing to Do: Code in all CG and special animation stuff
Check out My Clock Cookbook Recipe: http://lemmasoft.renai.us/forums/viewto ... 51&t=21978

Post Reply

Who is online

Users browsing this forum: No registered users