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

[Kinmoku]

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]

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.

[Kinmoku]

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.

[Per K Grok]

---
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

[Kinmoku]

---
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

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

[Kinmoku]

It looks great!



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.

[Remix]

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

[Kinmoku]

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

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

[trooper6]

I imagine you could also use a dict transition, keyed to just the screen layer rather than ATL, no?

[Per K Grok]

I just used the wipe effect for a medical examine ray.
Worked very nicely (I think).
I had probably not got the idea to do this effect without this thread.