Making main menu images pop in

[ProPinkist]

How would I go about manipulating the individual assets of my main menu screen so that the character images and the title on it fade in, like in a lot of visual novels? I'm sorry, I know this is a really common question most likely, but I did a thorough search and could only really find situations that were more complex than what I'm looking for... I am a newbie to renpy though so ><

[laure44]

Not sure if I got it right, do you want to make the elements fade in individually? If so, here's one way of doing it:

Code: Select all

transform mm_dissolve(p):
    alpha 0
    p # p seconds pass before appearing
    linear 1 alpha 1

screen main_menu():
    add "image" at mm_dissolve(1)
    textbutton "textbutton" at mm_dissolve(2)
    # and so on ...

You can also make the dissolve directly without creating the transform beforehand.

Code: Select all

screen main_menu():
    textbutton "textbutton":
        at transform:
            alpha 0.0
            pause 1
            linear 1 alpha 1

[ProPinkist]

Code: Select all

transform mm_dissolve(p):
    alpha 0
    p # p seconds pass before appearing
    linear 1 alpha 1

screen main_menu():
    add "image" at mm_dissolve(1)
    textbutton "textbutton" at mm_dissolve(2)
    # and so on ...

You can also make the dissolve directly without creating the transform beforehand.

Code: Select all

screen main_menu():
    textbutton "textbutton":
        at transform:
            alpha 0.0
            pause 1
            linear 1 alpha 1

Hmmm.... would each "image" label there be a different image file to put on top of the menu screen (in the gui folder I assume?)? How would it know where to correctly place them on the base/background image?

[laure44]

Hmmm.... would each "image" label there be a different image file to put on top of the menu screen (in the gui folder I assume?)? How would it know where to correctly place them on the base/background image?

It technically does not matter where are your images as long as you write the correct path. If your image path is "gui/main_menu/myimage.png", then you'll just have to write

Code: Select all

add "gui/main_menu/myimage.png"

or, if your image was already defined, you can write its name instead of the path.

Code: Select all

image myimage = "gui/main_menu/myimage.png"
screen main_menu():
    add "myimage"

As for when it comes to positionning, there are plenty of position style properties in the documentation that you can use.
https://www.renpy.org/doc/html/style_pr ... properties

Put those properties next to the add statement, like so

Code: Select all

add "myimage" xalign 0.5

Just remember that all elements placed in a screen are drawn from first to last, so the first image will be behind everything else.