[SOLVED] How to make Irisin/out transitions have different shapes?

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.
Message
Author
User avatar
Cherubunny
Regular
Posts: 26
Joined: Sat Feb 24, 2018 6:52 am
Tumblr: cherubunny
Deviantart: cherubunny
Contact:

[SOLVED] How to make Irisin/out transitions have different shapes?

#1 Post by Cherubunny »

hello!!! im new to the lemma soft forums, and a bit of a newbie in general! please go easy on me !

i was wondering how i could use the irisin/out transition to make it a custom shape? for example, im trying to figure out how to make it in the shape of a heart. i've tried searching around for advice on this, but i haven't found anything! thank you in advance <3
Last edited by Cherubunny on Sun Feb 25, 2018 10:53 am, edited 1 time in total.

User avatar
Remix
Eileen-Class Veteran
Posts: 1628
Joined: Tue May 30, 2017 6:10 am
Completed: None... yet (as I'm still looking for an artist)
Projects: An un-named anime based trainer game
Contact:

Re: How to make Irisin/out transitions have different shapes?

#2 Post by Remix »

The code comments in renpy.display.transition.py seem to imply that...

Code: Select all

define heart_irisout = ImageDissolve("images/heart.png", 1.0)
define heart_irisin = ImageDissolve("images/heart.png", 1.0, reverse=True)
... should work, where "images/heart.png" would be either an alpha or red channel mask image.
Frameworks & Scriptlets:

User avatar
Cherubunny
Regular
Posts: 26
Joined: Sat Feb 24, 2018 6:52 am
Tumblr: cherubunny
Deviantart: cherubunny
Contact:

Re: How to make Irisin/out transitions have different shapes?

#3 Post by Cherubunny »

i actually did something nearly exact to that before u replied, so i changed it but i still get this as an error?

Code: Select all

While running game code:
  File "game/options.rpy", line 210, in <module>
    config.enter_transition = heart_irisin
NameError: name 'heart_irisin' is not defined

-- Full Traceback ------------------------------------------------------------

Full traceback:
  File "lib/windows-i686/options.rpyc", line 10, in script
  File "C:\Users\Stein\Downloads\renpy-6.99.12.4-sdk\renpy\ast.py", line 814, in execute
    renpy.python.py_exec_bytecode(self.code.bytecode, self.hide, store=self.store)
  File "C:\Users\Stein\Downloads\renpy-6.99.12.4-sdk\renpy\python.py", line 1719, in py_exec_bytecode
    exec bytecode in globals, locals
  File "game/options.rpy", line 210, in <module>
    config.enter_transition = heart_irisin
NameError: name 'heart_irisin' is not defined
is there somewhere else im supposed to define it? i defined it in script.rpy, but the transition for it is in use in options.rpy ... do i need to redefine it there?

User avatar
Remix
Eileen-Class Veteran
Posts: 1628
Joined: Tue May 30, 2017 6:10 am
Completed: None... yet (as I'm still looking for an artist)
Projects: An un-named anime based trainer game
Contact:

Re: How to make Irisin/out transitions have different shapes?

#4 Post by Remix »

It should be fine no matter where you define anything (as Ren'py basically lumps all .rpy files together as one big file during init) as long as the definition is not inside a label or python block...
Where/How are the defines done at the moment?
Frameworks & Scriptlets:

User avatar
Cherubunny
Regular
Posts: 26
Joined: Sat Feb 24, 2018 6:52 am
Tumblr: cherubunny
Deviantart: cherubunny
Contact:

Re: How to make Irisin/out transitions have different shapes?

#5 Post by Cherubunny »

it's at the very top of script.rpy

Code: Select all

# You can place the script of your game in this file.

# Declare images below this line, using the image statement.
# eg. image eileen happy = "eileen_happy.png"

define heart_irisout = ImageDissolve("images/heart.png", 1.0)
define heart_irisin = ImageDissolve("images/heart.png", 1.0, reverse=True)

User avatar
Remix
Eileen-Class Veteran
Posts: 1628
Joined: Tue May 30, 2017 6:10 am
Completed: None... yet (as I'm still looking for an artist)
Projects: An un-named anime based trainer game
Contact:

Re: How to make Irisin/out transitions have different shapes?

#6 Post by Remix »

It 'maybe' does config stuff before defines/defaults... So...
Either:

Code: Select all

    config.enter_transition = ImageDissolve("images/heart.png", 1.0, reverse=True)
or move the config.enter_transition bit to inside a:

Code: Select all

init 1 python:
    config.enter_transition = heart_irisin
Should hopefully let it set the transition after the define.
Frameworks & Scriptlets:

User avatar
Cherubunny
Regular
Posts: 26
Joined: Sat Feb 24, 2018 6:52 am
Tumblr: cherubunny
Deviantart: cherubunny
Contact:

Re: How to make Irisin/out transitions have different shapes?

#7 Post by Cherubunny »

hmmm... well, it did work, ...... sorta
it no longer brings up an error message, but the transition doesn't appear? the screen pauses for a second as if it's going to show up, but then it moves to the next screen with no transition?

if it helps, this is my image?
https://cdn.discordapp.com/attachments/ ... /heart.png

EDIT: realized the image needed to be white on a transparent background; it is now, but it still doesn't transition like the regular irisin/out; it instead displays the heart crop of the next screen with no movement
EDIT EDIT: fixed the image link to show what my image currently is. the dimensions fit the exact dimensions of my game.

also im a very visual person so here's a GIF of how it appears (note: on further inspection, it does slightly zoom in and fade but not at ALL in the way i want it to)
https://cdn.discordapp.com/attachments/ ... /insta.gif

User avatar
Remix
Eileen-Class Veteran
Posts: 1628
Joined: Tue May 30, 2017 6:10 am
Completed: None... yet (as I'm still looking for an artist)
Projects: An un-named anime based trainer game
Contact:

Re: How to make Irisin/out transitions have different shapes?

#8 Post by Remix »

I've never actually used irisin and irisout before, so I have no idea what they are meant to do.
Maybe just try a test project and first get a transition working between two static images just shown in a label, then maybe try an animated image, then try it on a menu screen with an 'at' finally try using the config setting.
Frameworks & Scriptlets:

User avatar
Cherubunny
Regular
Posts: 26
Joined: Sat Feb 24, 2018 6:52 am
Tumblr: cherubunny
Deviantart: cherubunny
Contact:

Re: How to make Irisin/out transitions have different shapes?

#9 Post by Cherubunny »

man, this really is confusing me. i did the first thing u suggested and while the with code works and it shows up, it still shows up dysfunctional like the previous gif

Code: Select all

# Declare characters used by this game.
define e = Character('Eileen', color="#c8ffc8")

define heart_irisout = ImageDissolve("images/heart.png", 1.0)
define heart_irisin = ImageDissolve("images/heart.png", 1.0, reverse=True)

# The game starts here.
label start:

    scene bg washington
    show eileen vhappy
    with heart_irisout
    e "You've created a new Ren'Py game."

    e "Once you add a story, pictures, and music, you can release it to the world!"

    return
aaaand the gif of what it looks like: https://cdn.discordapp.com/attachments/ ... /insta.gif
+ here's a bonus gif of what the regular irisout looks like since u said you've never used it!: https://cdn.discordapp.com/attachments/ ... /insta.gif

User avatar
Remix
Eileen-Class Veteran
Posts: 1628
Joined: Tue May 30, 2017 6:10 am
Completed: None... yet (as I'm still looking for an artist)
Projects: An un-named anime based trainer game
Contact:

Re: How to make Irisin/out transitions have different shapes?

#10 Post by Remix »

Ah I see... and I just read the irisout uses a rectangle within a CropMove transition...
We'd want to use a Zoom function on the heart to get the same effect (which may or may not work as the 'control' within ImageDissolve is generally a transition and not a transform)
I will have a tinker trying to get it working anyway...
Frameworks & Scriptlets:

User avatar
Cherubunny
Regular
Posts: 26
Joined: Sat Feb 24, 2018 6:52 am
Tumblr: cherubunny
Deviantart: cherubunny
Contact:

Re: How to make Irisin/out transitions have different shapes?

#11 Post by Cherubunny »

thank u!! i will as well!! keep me posted if you find out anything and i'll do the same :>

User avatar
Alex
Lemma-Class Veteran
Posts: 3090
Joined: Fri Dec 11, 2009 5:25 pm
Contact:

Re: How to make Irisin/out transitions have different shapes?

#12 Post by Alex »


User avatar
Cherubunny
Regular
Posts: 26
Joined: Sat Feb 24, 2018 6:52 am
Tumblr: cherubunny
Deviantart: cherubunny
Contact:

Re: How to make Irisin/out transitions have different shapes?

#13 Post by Cherubunny »

that helped greatly, actually! to show, here's the current transition https://cdn.discordapp.com/attachments/ ... /insta.gif

i think the only thing now is manipulating the image to feather out and start small enough so that it may show the way i desire? for visual reference, here is the image with the gradient like you suggested https://cdn.discordapp.com/attachments/ ... /heart.png

User avatar
Alex
Lemma-Class Veteran
Posts: 3090
Joined: Fri Dec 11, 2009 5:25 pm
Contact:

Re: How to make Irisin/out transitions have different shapes?

#14 Post by Alex »

Try to make more gradient inside the heart-shape and outside of it (to the borders of image).

User avatar
Remix
Eileen-Class Veteran
Posts: 1628
Joined: Tue May 30, 2017 6:10 am
Completed: None... yet (as I'm still looking for an artist)
Projects: An un-named anime based trainer game
Contact:

Re: How to make Irisin/out transitions have different shapes?

#15 Post by Remix »

There might well be a better way of doing this... anyway:

Code: Select all

init python:
    
    def heart_zoom(st, at):
        return Transform("images/heart.png", anchor=(0.5,0.5), pos=(0.5,0.5), zoom=at*2), 0

define heart_irisout = AlphaDissolve( DynamicDisplayable(heart_zoom), 1.0 )
image bg 0 = Image("images/bg 0.png")
image bg 1 = Image("images/bg 1.png")

label start:    

    scene bg 0
    "Pause"
    show bg 1
    with heart_irisout
Note: I used " zoom=at*2 " so the heart zooms from nothing to double size (to expand over edges)

You could even add extra in the Transform ( e.g. , rotate=at*60, alpha=at etc ) if wanted.
Hope it gets you toward what you want... after tweaking the positions etc

Note: I swapped to using AlphaDissolve (using a part transparent image)... You might want to swap back to ImageDissolve (with same params)
Frameworks & Scriptlets:

Post Reply

Who is online

Users browsing this forum: No registered users