(Solved) How to make a combined cropmove and fade transform?

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
ShirraWhitefur
Newbie
Posts: 17
Joined: Sat Dec 27, 2014 3:00 am
Contact:

(Solved) How to make a combined cropmove and fade transform?

#1 Post by ShirraWhitefur »

What I'm trying to do, is set up things to handle various attack 'effects' in my battle system. What I want to do is have something similar to a fade-out happen, but combined with a crop. Kinda.

Think of it like this. A set of claw marks across the screen that rip across it from left to right. (Using one image, the full final result.) At the leading left edge, the image is fully solid / zero transparency as it appears. But behind it, it's translucent, fading away to zero as we go, looking like a gradient of transparency.

I'm thinking a similar effect without the crop could be used for a ghost who appears and disappears, fading out from feet up towards the head. Kinda like a moving crop line with a fade out transition effect..
.. God, my explanations are awkward. Here's to wishing I was an artist proper so I could make some examples. :)

In any case, my -wild guess- is that somehow we'd use compose transition, cropmove, and some other tricks, from the things mentioned on ' http://www.renpy.org/doc/html/transitions.html ' ... But I flat out just do -not- understand it. I have no ideas where to begin to make something like this.

Boiled down.. is such a thing (if I even got my idea across) feasible in a fairly simple way, or would it require hefty programming skills to implement? If it's the latter, I can definitely skip doing it, because it's not a 'Oh, I need this for my game badly'. It's just a want, and beyond my skill. :)

Anywho, thanks for the time. And lets hear it for being terribly pleased when one figures out how to make an enemy image 'wiggle' in time with a displayed sword icon rotating to hit it.
- Shirra
Last edited by ShirraWhitefur on Wed Jan 21, 2015 10:43 pm, edited 1 time in total.

User avatar
akemicchi
Veteran
Posts: 465
Joined: Mon Dec 31, 2007 11:22 pm
Projects: Magicians of Delphine, Panaderia: Ensaimada, SweetTooth!, XOXO Droplets
Deviantart: littlebabyshoes
Contact:

Re: How to make a combined cropmove and fade transform?

#2 Post by akemicchi »

Have you considered using ImageDissolve? White pixels dissolve first before black pixels. You can have gradients, or have it dissolve in steps as if applying crop lines, as long as you make the image accordingly.

User avatar
ShirraWhitefur
Newbie
Posts: 17
Joined: Sat Dec 27, 2014 3:00 am
Contact:

Re: How to make a combined cropmove and fade transform?

#3 Post by ShirraWhitefur »

akemicchi wrote:Have you considered using ImageDissolve? White pixels dissolve first before black pixels. You can have gradients, or have it dissolve in steps as if applying crop lines, as long as you make the image accordingly.
As my experience with transitions is... zero... Can't say it crossed my mind. ;)

Would it be bad of me to ask for a code-example using it, to display the attached file (GradientTest.png)?
I'm still solidly out of my depth on it.

That said, it has me thinking that I'd have to use my image as a gradient setup, and deal with it starting somewhat faded in colors, so it could melt away in the proper order.. I think.
I'm going to have to go and research how I can use the transitions within or alongside other transform setups. .. I think I've officially gone for over-complicating my original gameplans, heh!
- Shirra
Attachments
GradientTest.png
GradientTest.png (2.89 KiB) Viewed 2664 times

User avatar
akemicchi
Veteran
Posts: 465
Joined: Mon Dec 31, 2007 11:22 pm
Projects: Magicians of Delphine, Panaderia: Ensaimada, SweetTooth!, XOXO Droplets
Deviantart: littlebabyshoes
Contact:

Re: How to make a combined cropmove and fade transform?

#4 Post by akemicchi »

No problem!

Code: Select all

define gradient = ImageDissolve("GradientTest.PNG", 1.0) # Define the transition with the image and time. It will last 1 second.

label start:
    show claws with wipeleft
    with Pause(0.5)
    hide claws with gradient # Use it with 'with'
As it states in the documentation:
The control image should be the size of the scenes being dissolved.
You'll need to make your image the size of the screen.

I think you're over complicating what you think you'll need to do. I don't understand what exactly you want to happen with the claws (your description is unfortunately hard to follow ^^; ), but I don't think it's as complicated as you think it needs to be. With ImageDissolve, white pixels dissolve first, and black pixels dissolve last. Everything in-between will disappear depending on how 'white' and 'black' it is. You could make really crazy transitions with ImageDissolve-- stars or sparkles that bloom on the screen, staggered crops like blinds that dissolve at seemingly different rates-- without actually having to mix it with other transition classes...

But if the transitions really require multiple transitions, here's a thread of someone who asked for help with theirs here.
http://lemmasoft.renai.us/forums/viewto ... =8&t=26624

User avatar
ShirraWhitefur
Newbie
Posts: 17
Joined: Sat Dec 27, 2014 3:00 am
Contact:

Re: How to make a combined cropmove and fade transform?

#5 Post by ShirraWhitefur »

Thank you -so- very much. And yeah, I'm having a terrible time managing to explain exactly what I want..
It's why, instead of having my artist friend work on my UI or much of anything else, or my python programmer friend (who I -really- want to try to talk into sitting down with renpy sometimes), I typically just bang about on my own for 5-30 hours till I can at least make a reasonable mockup of what I want.

.. And then I spend about another 5-30 hours trying to make it -exactly- what I want, on my own, because I'm a stubborn bugger. ;)

The plus side is that now, I have been able to say to my two main writers.. "Look, I know I gave you a general template on what I'd like to see for stuff.. but if you've got ideas beyond it, chances are, I can make it work." ( At least.. when it comes to stuff that involves just text and number crunching, and not art. :D )

Thank you -very- very much for an example to play with.
- Shirra

User avatar
ShirraWhitefur
Newbie
Posts: 17
Joined: Sat Dec 27, 2014 3:00 am
Contact:

Re: How to make a combined cropmove and fade transform?

#6 Post by ShirraWhitefur »

akemicchi wrote:I don't understand what exactly you want to happen with the claws (your description is unfortunately hard to follow ^^;
With what you've handed me, I can get mooost of the effect together.

Code: Select all

    image claws = "triple_claws1.png"
    define gradient = ImageDissolve("triple_claws2.png", 1.0, 80)  #image, time, dissolve-rate

label Framework_Test_Claw_Attack:
    show claws with gradient
    hide claws with gradient
    return
Okay, so with the angled gradient in the image, I can actually toss wipeleft straight out. Don't need it. Though I'll likely replace the setup I use for the show to come in more solidly right off. This actually is almost exactly what I'm trying for, except for one little caveat. I want to make the hide dissolve begin before the show dissolve is finished. So that way, by the time it's hit 1/2 of the image on screen, the fade at the beginning of the image has begun. I tried playing with ComposeTransition, but I'm definitely not getting what I'm to do there, heh. My hope that I could somehow make use of parallel didn't pan out either. So I'm -really- close now, and I can see how one could use this for.. well, darn near anything. (And very well may replace the way I was going to do weapon swing 'swoosh' / 'trails')
It's just finding a way to get the hide running before the show is finished. :)

And I absolutely love how you can use this versus a separate image. First few tries I used the exact same image file, and kept wondering how I'd keep solid colors in my piece, heh.

- Shirra
Attachments
triple_claws2.png
triple_claws1.png

User avatar
akemicchi
Veteran
Posts: 465
Joined: Mon Dec 31, 2007 11:22 pm
Projects: Magicians of Delphine, Panaderia: Ensaimada, SweetTooth!, XOXO Droplets
Deviantart: littlebabyshoes
Contact:

Re: How to make a combined cropmove and fade transform?

#7 Post by akemicchi »

I'm still pretty new to ATL so maybe there's a better way to do this, but what about this?

Code: Select all

define gradient = ImageDissolve("triple_claws2.PNG", 1.0) # The transition.

image triple_claws:
    "triple_claws1.PNG" # The image.
    on show: # When 'show image' is used...
        alpha 1.0 # Start out fully opaque, but not really because of the ImageDissolve you'll apply at the same time.
        0.5 # Wait 0.5 seconds.
        linear 0.5 alpha 0.0 # Take 0.5 seconds to become transparent

label start:
    show triple_claws with gradient #Pair up the image with the earlier transition.
You wanted it to dissolve while the ImageDissolve is running, right? This'll make it so before the ImageDissolve completes its transition, it'll start dissolving. You'll also want to hide the image at some point since I don't think it actually hides the image. It just turns the transparency to 0%.

User avatar
ShirraWhitefur
Newbie
Posts: 17
Joined: Sat Dec 27, 2014 3:00 am
Contact:

Re: How to make a combined cropmove and fade transform?

#8 Post by ShirraWhitefur »

Mmm. That.. doesn't really work. Because it fades the whole image out, instead of using the image-dissolve to do it (and thusly following the path of it dissolving).
If there's a way where I can run two image dissolves on top of each other, one with a delay, that'd be the most ideal (even if it means making a reversed gradient for the second image, since they'd both likely be called under the same Show command somehow.)

In related thoughts, is there any way to call the transition -within- the image / show command, so as to make it eligible to use with parallel?
- Shirra

User avatar
akemicchi
Veteran
Posts: 465
Joined: Mon Dec 31, 2007 11:22 pm
Projects: Magicians of Delphine, Panaderia: Ensaimada, SweetTooth!, XOXO Droplets
Deviantart: littlebabyshoes
Contact:

Re: How to make a combined cropmove and fade transform?

#9 Post by akemicchi »

The problem with that is Ren'Py will finish whatever its doing before moving onto the next line. There IS the parallel statement for ATL which will let you execute multiple ATL blocks at the same time, but ImageDissolve only takes image files or image manipulators so you can't define an image with fancy ATL then just stick it into ImageDissolve.

You won't be able to show the claw marks, delay for a fraction of a second, and apply another transition while the previous transition is still occurring. At least, not to my knowledge. @_@ If anyone knows otherwise, please let me know.

Just so I understand you clearly, what you want happen is:
* Starting from the right and ending to the left, claw marks appear as if cutting through the screen.
* As the image appears from right to left, it also disappears from right to left.
Like this??
Like this??
I've got no idea how you'd try to do something like that. Why don't you animate it frame by frame?

User avatar
ShirraWhitefur
Newbie
Posts: 17
Joined: Sat Dec 27, 2014 3:00 am
Contact:

Re: How to make a combined cropmove and fade transform?

#10 Post by ShirraWhitefur »

That's pretty much the goal, yep!
And mostly as to why not animate? Because I like to think the less images I have to load, the better the game will do in the long run. As it is, I'll just use it as per the fifth post, a simple show and hide in order. It's -close enough-, and it looks neat.

I appreciate all the help and input. And yeah, it's worth knowing I can't do it 'just so' via the ATL system, rather than sitting and wondering. :)
In the meantime, I've merrily been getting text fade'n'move stuff together (yay, forum searches), rotating weapon icons, shield-block icons, and enemy 'damage taken' shake stuff in, together, and timed properly. So all in all, very productive, heh!

Time to tackle the next to-do in the program plan, whee!

- Shirra

Post Reply

Who is online

Users browsing this forum: Bing [Bot], kedta35, Semrush [Bot]