Creating custom transitions using mask image [Solved]

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
Strum
Veteran
Posts: 215
Joined: Mon Sep 28, 2009 10:38 am
Contact:

Creating custom transitions using mask image [Solved]

#1 Post by Strum » Sat Nov 12, 2011 7:50 am

Is it possible to create our own transitions using a mask image? Like a black and white mask image where the white portion of the mask shows the old scene and the black portion shows the new scene. To help visualize what I'm trying to achieve please take a look at the attached images. One is the image mask, and the other is the result of using the mask. Thanks in advance.

Oh, I should add that in this example, I wish to move the mask image from left to right so that the new scene will cover the old scene.
Attachments
OldNew.jpg
The result of using mask image
TransMask.jpg
Transition mask image.
TransMask.jpg (10.02 KiB) Viewed 2063 times
Last edited by Strum on Sun Nov 13, 2011 4:13 pm, edited 1 time in total.
Image

User avatar
Soraminako
Veteran
Posts: 277
Joined: Sun Sep 04, 2011 1:36 am
Projects: A thingie without a title. With messy code.
Contact:

Re: Creating custom transitions using mask image

#2 Post by Soraminako » Sun Nov 13, 2011 4:51 am

While it is possible to do something like that with the following code, the result is unfortunately nowhere near the gorgeous example you gave. :(

Code: Select all

    $ customdissolve01 = ImageDissolve(im.Tile("TransMask.jpg"), 2.0, 1)    
I'm hoping we can find a better way to do it. I also love transitions with image masks, so I'll try again when I have more time. It would be great if it could be done smoothly and beautifully like in your example image.
(I drew my avatar especially to express the scary feeling I get from the code as I type it... XD)

User avatar
Strum
Veteran
Posts: 215
Joined: Mon Sep 28, 2009 10:38 am
Contact:

Re: Creating custom transitions using mask image

#3 Post by Strum » Sun Nov 13, 2011 4:13 pm

That's a brilliant idea, to dissolve an image starting from the brightest area first. I never thought of doing things that way. After a bit of messing around with some numbers I finally achieved the custom transition I was looking for. Thanks for the help.
Image

User avatar
PyTom
Ren'Py Creator
Posts: 15893
Joined: Mon Feb 02, 2004 10:58 am
Completed: Moonlight Walks
Projects: Ren'Py
IRC Nick: renpytom
Github: renpytom
itch: renpytom
Location: Kings Park, NY
Contact:

Re: Creating custom transitions using mask image [Solved]

#4 Post by PyTom » Sun Nov 13, 2011 11:39 pm

Playing with the ramplen parameter to ImageDissolve will help smooth out the rough dissolves.
Supporting creators since 2004
(When was the last time you backed up your game?)
"Do good work." - Virgil Ivan "Gus" Grissom
"Silly and fun things are important." - Elon Musk
Software > Drama • https://www.patreon.com/renpytom

User avatar
Soraminako
Veteran
Posts: 277
Joined: Sun Sep 04, 2011 1:36 am
Projects: A thingie without a title. With messy code.
Contact:

Re: Creating custom transitions using mask image [Solved]

#5 Post by Soraminako » Sun Nov 13, 2011 11:58 pm

Uhm, if either of you could share the code to get such things smooth, I'd be so glad to have it too. ;___;

Like I said, I love such transitions, have been trying to do it for a while, and don't know how to do it quite right. :( So uhm, please share that knowledge so the rest of us forum dwellers can do it too? ^^;
(I drew my avatar especially to express the scary feeling I get from the code as I type it... XD)

User avatar
PyTom
Ren'Py Creator
Posts: 15893
Joined: Mon Feb 02, 2004 10:58 am
Completed: Moonlight Walks
Projects: Ren'Py
IRC Nick: renpytom
Github: renpytom
itch: renpytom
Location: Kings Park, NY
Contact:

Re: Creating custom transitions using mask image [Solved]

#6 Post by PyTom » Mon Nov 14, 2011 12:04 am

Instead of 1, make the last parameter (the ramplen parameter) a larger number. Valid values are the powers of 2 less than or equal to 256: 1, 2, 4, 8, 16, 32, 64, 128, and 256.

In the example above, it looks like the overlap might be a quarter of the screen. So try 64.
Supporting creators since 2004
(When was the last time you backed up your game?)
"Do good work." - Virgil Ivan "Gus" Grissom
"Silly and fun things are important." - Elon Musk
Software > Drama • https://www.patreon.com/renpytom

User avatar
Soraminako
Veteran
Posts: 277
Joined: Sun Sep 04, 2011 1:36 am
Projects: A thingie without a title. With messy code.
Contact:

Re: Creating custom transitions using mask image [Solved]

#7 Post by Soraminako » Mon Nov 14, 2011 2:52 am

Thank you so much! It works indeed perfectly now! :D
(I drew my avatar especially to express the scary feeling I get from the code as I type it... XD)

Post Reply

Who is online

Users browsing this forum: Bing [Bot], Google [Bot]