[SOLVED] Animated inverse crop?

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: 447
Joined: Mon Aug 11, 2014 9:39 am
Completed: One Night Stand
Projects: Love IRL, Memories
Tumblr: gamesbykinmoku
itch: kinmoku
Location: Germany
Contact:

[SOLVED] Animated inverse crop?

#1 Post by Kinmoku » Tue Oct 08, 2019 4:58 am

Hi all,

I'm struggling with something really simple... I have buttons that appear on hover with a crop (from left to right), and I want them to disappear from left to right too. The effect I want looks like a swoosh or how a trail appears then disappears from a shooting star.

Problem is, I can't get my head around doing this. I've tried adding "-" to the crop numbers and adjusting them all kinds of ways, but I can't get it to behave how I want. The numbers are set up to show the cropped image, not the empty space they leave behind. I don't think there's an inverse crop, but maybe there's another way I can achieve this effect?

Here's my current code. On show works, but on hide doesn't no matter what numbers I try:

Code: Select all

transform choicehover:
    on show:
        crop_relative True
        alpha 0 crop (0,0, 0.0, 1.0)
        linear 0.15 crop (0,0, 0.3, 1.0)
        linear 0.25 alpha 1.0 crop(0,0, 1.0, 1.0 )
        
    on hide:
        crop_relative True
        alpha 1.0 crop (0,0, 1.0, 1.0)
        linear 0.25 crop (0,0, 0.6, 1.0)
        linear 0.15 alpha 0.0 crop(0,0, 0.0, 1.0 )
I hope this makes sense!
Last edited by Kinmoku on Tue Oct 15, 2019 3:10 am, edited 1 time in total.

User avatar
Enviel
Newbie
Posts: 11
Joined: Sat Apr 12, 2014 2:55 pm
Contact:

Re: Animated inverse crop?

#2 Post by Enviel » Tue Oct 08, 2019 6:47 pm

Code: Select all

crop (0,0, 0.3, 1.0)
Results in first 30% of the image showing. If you wanted to the inverse, that is, show the last 70%, you have to move the starting bounds. Following should do it

Code: Select all

crop (0.3,0, 1.0, 1.0)
Basically, show everything after 30% in xdirection.

This should result in desired effect, if I understood correctly:

Code: Select all

transform choicehover:
    on show:
        crop_relative True
        alpha 0 crop (0,0, 0.0, 1.0)
        linear 0.15 crop (0,0, 0.3, 1.0)
        linear 0.25 alpha 1.0 crop(0,0, 1.0, 1.0 )

    on hide:
        crop_relative True
        alpha 1.0 crop (0,0, 1.0, 1.0)
        linear 0.15 crop (0.3,0, 1.0, 1.0) xoffset 38 #this is 0.3 * image width
        linear 0.25 alpha 0.0 crop(1.0,0, 1.0, 1.0 ) xoffset 128 #image width
Cropping results in the image getting shorter, so when doing it in this direction you need to move the image at the same time. Otherwise it looks like the image is getting pushed to a void.

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

Re: Animated inverse crop?

#3 Post by Kinmoku » Fri Oct 11, 2019 12:39 pm

Hey, thanks for the quick reply! This isn't the effect I am after, sadly. It slides the image off the way it came on.

I've drawn a diagram below to better explain what I'm trying to do:
hoveronoff.jpg
I hope this is a little clearer.

User avatar
Enviel
Newbie
Posts: 11
Joined: Sat Apr 12, 2014 2:55 pm
Contact:

Re: Animated inverse crop?

#4 Post by Enviel » Fri Oct 11, 2019 6:01 pm

Based on that diagram, I think we are on the same page on what the effect should look like. Just to confirm, this is what that code results in on my end.
Image

Did you change xoffsets in hide to match your image's width? Image sliding to the left sound like what happens if there is no offset applied.

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

Re: Animated inverse crop?

#5 Post by Kinmoku » Mon Oct 14, 2019 10:06 am

Enviel wrote:
Fri Oct 11, 2019 6:01 pm
Based on that diagram, I think we are on the same page on what the effect should look like. Just to confirm, this is what that code results in on my end.
Image

Did you change xoffsets in hide to match your image's width? Image sliding to the left sound like what happens if there is no offset applied.
Ah, I forgot the offsets! But when I added them, they behaved weirdly, as though they were already offset.

Anyway, changing the code to this seemed to help:

Code: Select all

transform choicehover:
    on show:
        crop_relative True
        alpha 0 crop (0,0, 0.0, 1.0) xoffset 0
        linear 0.15 crop (0,0, 0.5, 1.0) xoffset 0
        linear 0.25 alpha 1.0 crop(0,0, 1.0, 1.0 ) xoffset 0
        
    on hide:
        crop_relative True
        alpha 1.0 crop (0,0, 1.0, 1.0) xoffset 0
        linear 0.25 crop (0.5, 0, 1.0, 1.0) xoffset 288
        linear 0.15 alpha 0.0 crop(1.0,0, 1.0, 1.0 ) xoffset 575
I also changed 0.3 to 0.5 just because it looks a little better :) Thanks for your help!

Post Reply

Who is online

Users browsing this forum: No registered users