Help with Custom Main Menu: “Press to Start” Screen, Music, and Animation Logic (Ren'Py 8.3.7)

[Zoe_girl]

Hello! I need help implementing the main menu in my Ren'Py visual novel

I tried to create the menu myself but ran into several problems. I’m using Ren’Py version 8.3.7. The screen code is partially adapted from this post: viewtopic.php?t=46121 — the author made a "press to start" screen, and I based my idea on that. Huge thanks to the author for the inspiration!

Here is what I currently have in my press_to_start code:

Code: Select all

image black = "#000"
image white = "#ffffff"
image logo = "gui/logo/logo.png"

transform transform_logo:
    on show:
        alpha 0 xalign 0.5 yalign 0.5
        linear 2.0 alpha 1
    on hide:
        linear 2.0 alpha 0

transform transform_white:
    on show:
        alpha 0
        linear 2.0 alpha 1
    on hide:
        linear 2.0 alpha 0

transform fade_in:
    alpha 0
    linear 1.5 alpha 1

label splashscreen:
    scene black
    $ renpy.pause(1) # removed hard=True

    show white at transform_white
    $ renpy.pause(2) # removed hard=True

    show logo at transform_logo
    $ renpy.pause(6) # removed hard=True

    hide logo
    $ renpy.pause(2) # removed hard=True

    hide white
    $ renpy.pause(3) # removed hard=True

    return

Here is what happens on the main_menu screen:

Code: Select all

image logo = "gui/logo/logo.png"

transform logo_fade:
    alpha 0.0
    linear 1.0 alpha 1.0

screen main_menu():

    ## This tag ensures that any other screen with the same tag will replace this one.
    tag menu

    add gui.main_menu_background

    ## This empty frame dims the main menu.
    frame:
        style "main_menu_frame"

    ## The 'use' operator includes another screen here. The actual menu content is on the navigation screen.
    use navigation

    if gui.show_name:

        vbox:
            style "main_menu_vbox"

            add "logo" at logo_fade xpos 150 ypos -450 xanchor 0.5 yanchor 0.5 zoom 1.4

            text "[config.name!t]":
                style "main_menu_title"

            text "[config.version]":
                style "main_menu_version"


style main_menu_frame is empty
style main_menu_vbox is vbox
style main_menu_text is gui_text
style main_menu_title is main_menu_text
style main_menu_version is main_menu_text

style main_menu_frame:
    xsize 420
    yfill True

    background "gui/overlay/main_menu.png"

style main_menu_vbox:
    xalign 1.0
    xoffset -30
    xmaximum 1200
    yalign 1.0
    yoffset -30

style main_menu_text:
    properties gui.text_properties("main_menu", accent=True)

style main_menu_title:
    properties gui.text_properties("title")

style main_menu_version:
    properties gui.text_properties("version")

Problems I faced:

-I want the main menu music (Moon-BGM.ogg) to start automatically after pressing the "press to start" button, and I want a small animation on the main_menu screen that gradually layers images to create a full artwork. This animation and music should play only once when the game starts. When the player enters save/load/settings or other menus, the music and animation should NOT repeat. The whole sequence should repeat only after the story ends or the player reaches the ending.

-The press_to_start screen remains visible on top of the main_menu, causing the music to restart on each click, which I don’t want. I want the press_to_start screen to disappear after clicking so the full main menu with animation and music can show without interfering.

What I want to solve:

-After pressing the screen on press_to_start, the main menu music should start automatically and the animation should play once.

-The press_to_start screen should hide after pressing so it doesn’t interfere with the main menu.

-Music should NOT restart on clicks or when going to other menus or loading saves.

-After the story ends or an ending is reached, the user should see the press_to_start screen with music and animation again.

-I want the player to be transferred to the main menu after pressing "start."

Here is an example of how I imagine the main screen: https://files.catbox.moe/4pn1k2.png

I tried different solutions, but they broke one after another, so I got really lost in coding. Please help me. If something is impossible, I can skip it, but I really want to implement the main screen like this because I really liked how some visual novels did it.

One of the things I tried:

In the gui folder, I have this line:

Code: Select all

define gui.main_menu_background = "gui/main_menu.png"

I created this in the script:

Code: Select all

image_background_menu:
    contains:
        "layers4.png"
        pause 1.0
        "layers3.png" with dissolve
        pause 1.0
        "layers1.png" with dissolve
        pause 1.0
        "layers.png" with dissolve
        pause 1.0

        repeat

Then I replaced it in gui.rpy with:

Code: Select all

define gui.main_menu_background = "background_menu"

But this attempt was futile.

/ Sorry in advance if some words are mistranslated, I am using a translator. /

[giorgi1111]

Code: Select all

# The script of the game goes in this file.

# Declare characters used by this game. The color argument colorizes the
# name of the character.

define e = Character("Eileen")
default firstlaunch = False

# The game starts here.

label start:

    # Show a background. This uses a placeholder by default, but you can
    # add a file (named either "bg room.png" or "bg room.jpg") to the
    # images directory to show it.

    scene bg room

    # This shows a character sprite. A placeholder is used, but you can
    # replace it by adding a file named "eileen happy.png" to the images
    # directory.

    show eileen happy

    # These display lines of dialogue.

    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!"

    # This ends the game.

    return
image black = "#000"
image white = "#ffffff"
image logo = "gui/logo/logo.png"

transform transform_logo:
    on show:
        alpha 0 xalign 0.5 yalign 0.5
        linear 2.0 alpha 1
    on hide:
        linear 2.0 alpha 0

transform transform_white:
    on show:
        alpha 0
        linear 2.0 alpha 1
    on hide:
        linear 2.0 alpha 0

transform fade_in:
    alpha 0
    linear 1.5 alpha 1
transform intro:
    contains:
        "gui/logo/logo.png"
        pos (1200, 850)
        alpha 0.0
        linear 1.5 alpha 1.0
        repeat
    contains:
        pause 0.5
        "images/Untitled.png"
        pos (780, 340)
        alpha 0.0
        linear 0.5 alpha 1.0 pos (1200, 50)
    contains:
        pause 1.0
        "images/Untitled1.png"
        pos (165, 345)
        alpha 0.0
        linear 0.5 alpha 1.0 pos (120, 50)
    contains:
        pause 1.5
        "images/Untitled2.png"
        pos (1120, 320)
        alpha 0.0
        linear 0.5 alpha 1.0 pos (120, 850)
    contains:
        pause 2.0
        "images/Untitled3.png"
        pos (470, 350)
        alpha 0.0
        linear 0.5 alpha 1.0 pos (1000, 550)
    
screen presstostart():
    text "Press to start" xalign 0.5 yalign 0.5
    button:
        xfill True
        yfill True
        if firstlaunch:
            action Hide("presstostart"), Show("main_menu")
        else:
            action Hide("presstostart"), Show("main_menu"), SetVariable("firstlaunch", True), Play("sound", "whistle.ogg", loop=1)
label splashscreen:
    scene black
    $ renpy.pause(1) # removed hard=True

    show white at transform_white
    $ renpy.pause(2) # removed hard=True

    show logo at transform_logo
    $ renpy.pause(6) # removed hard=True

    hide logo
    $ renpy.pause(2) # removed hard=True

    hide white
    $ renpy.pause(3) # removed hard=True
    call screen presstostart

    return

image logo = "gui/logo/logo.png"

transform logo_fade:
    alpha 0.0
    linear 1.0 alpha 1.0
    repeat

screen main_menu():

    ## This tag ensures that any other screen with the same tag will replace this one.
    tag menu

    add gui.main_menu_background

    ## This empty frame dims the main menu.
    frame:
        style "main_menu_frame"

    ## The 'use' operator includes another screen here. The actual menu content is on the navigation screen.
    use navigation

    if gui.show_name:

        vbox:
            style "main_menu_vbox"

            #add "logo" at logo_fade xalign 0.8 yalign 0.8 zoom 1.4
 
            at intro

            text "[config.name!t]":
                style "main_menu_title"

            text "[config.version]":
                style "main_menu_version"


style main_menu_frame is empty
style main_menu_vbox is vbox
style main_menu_text is gui_text
style main_menu_title is main_menu_text
style main_menu_version is main_menu_text

style main_menu_frame:
    xsize 420
    yfill True

    background "gui/overlay/main_menu.png"

style main_menu_vbox:
    xalign 1.0
    xoffset -30
    xmaximum 1200
    yalign 1.0
    yoffset -30

style main_menu_text:
    properties gui.text_properties("main_menu", accent=True)

style main_menu_title:
    properties gui.text_properties("title")

style main_menu_version:
    properties gui.text_properties("version")

put this in new project script.rpy and then tell me what you need to change
i added here variable firstlaunch = false and when click presstostart it changs true ,if you want to play again animation and sound youmust variable firstlaunch to false, transform plays animation and stops , logo animation continues

[Zoe_girl]

Hello! Thank you very much for your help. I created a new test project to consider your proposal, and here is what I noticed.
1- I inserted my elements into the games to more clearly examine the position where the layers fly away. However, I noticed that they appear out of order. I wanted the picture itself to appear simply as a gradual appearance effect, which is superimposed on each other in layers and then, like a puzzle, fits together into a single art, it is not necessary that it flies out from some end, etc., just the appearance in layers.
How did it work for you: https://ibb.co/C3NwgV1T
how it should have worked out according to the picture: https://ibb.co/spYPVsZJ

2- According to your recommendations, I made

Code: Select all

firstlaunch =True

and

Code: Select all

action Hide("presstostart"), Show("main_menu"), SetVariable("firstlaunch", False), Play("sound", "whistle.ogg", loop=1)

changed to False. In your original version, when True=False was the other way around, the "whistle.ogg" sound was constantly repeating, and it seemed like it didn't start over when you clicked the screen. However, I noticed that now the sound "whistle.ogg" (I specifically found the sound and inserted it to check according to your testing recommendations) does not play at all because I swapped True=False
I would like the music that I wanted to insert into the main menu (Moon.ogg) to just play quietly after clicking Press to start
And a slightly different problem:

3-I know that this is a trial test, but I wanted to check how the screen appears after the game ends, but the "start game" button disappeared.

(translation for you:
History
save
load
Settings
Main menu
About the game
help
exit)

The problem that was solved:
Now I can clearly see on the screen that the press to start launcher has disappeared and now it is just the main menu screen.

[giorgi1111]

Ye i made this just for test .
1. You must change transform intro as you need. Change order and positions. As i understand you need reverse of this .group charecterts in middle.so exchange place there first and second positions.and then correct positions itself.i have no your sprites. I used some figures for test
2. About sound i thought it must play continously.if you want to play once and then again start on click.
Try. leave in presstostart screen as it to start on jump main menu but remove loop=1 and add in main menu screen key "mouseup_1" action Play("sound", "moon.ogg") i ll test later with pc
3.i copied your codes and straight used in script.rpy
(For test) so there was two styles for main menu and something changed.you can remove main menu styles fron script .i ll chack this too with pc
4. Do you want that sound only in main menu or in whole game?
5.i add firstlaunch there for test. And show hiw used it. If you want it for main menu animation. You must add it in main menu screen .
Now it is vbox at intro
Try vbox: if not firstlaunch: at intro. I ll test this too
And
when firstlaunched and variable firslauch changed
If you want to see main menu animation again after you end game.you must change firstlaunch variable at the end somewhere $ firstlaunch = False

[giorgi1111]

script.rpy
i removed from script .rpy main menu, fault was not from here (not showing start), it was fault show("main_menu"), so i using return() in presstostart action,

changed objects posiotion s they are making grope now, but for your sprites you must change and correct positions

remove sound loop so it plays once and if you click mouse left button it plays once and if you continue click it plays again

just test add label endd, when it jumps to main menu it restarts firstlaunch variable as it s not persistent , but you can add anywhere $ firstlaunch = False to forcely change if you need

Code: Select all

# The script of the game goes in this file.

# Declare characters used by this game. The color argument colorizes the
# name of the character.

define e = Character("Eileen")
default firstlaunch = False

# The game starts here.

label start:

    # Show a background. This uses a placeholder by default, but you can
    # add a file (named either "bg room.png" or "bg room.jpg") to the
    # images directory to show it.

    scene bg room

    # This shows a character sprite. A placeholder is used, but you can
    # replace it by adding a file named "eileen happy.png" to the images
    # directory.

    show eileen happy
    show screen soundonclick
    # These display lines of dialogue.

    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!"

    # This ends the game.
    jump endd
    return
image black = "#000"
image white = "#ffffff"
image logo = "gui/logo/logo.png"

transform transform_logo:
    on show:
        alpha 0 xalign 0.5 yalign 0.5
        linear 2.0 alpha 1
    on hide:
        linear 2.0 alpha 0

transform transform_white:
    on show:
        alpha 0
        linear 2.0 alpha 1
    on hide:
        linear 2.0 alpha 0

transform fade_in:
    alpha 0
    linear 1.5 alpha 1
transform intro:
    contains:
        "gui/logo/logo.png"
        pos (1200, 850)
        alpha 0.0
        linear 1.5 alpha 1.0
        repeat
    contains:
        pause 0.5
        "images/Untitled.png"
        pos (1200, 50)
        alpha 0.0
        linear 0.5 alpha 1.0 pos (780, 340)
    contains:
        pause 1.0
        "images/Untitled1.png"
        pos (120, 50)
        alpha 0.0
        linear 0.5 alpha 1.0 pos (165, 345)
    contains:
        pause 1.5
        "images/Untitled2.png"
        pos (120, 850)
        alpha 0.0
        linear 0.5 alpha 1.0 pos (1120, 320)
    contains:
        pause 2.0
        "images/Untitled3.png"
        pos (1000, 550)
        alpha 0.0
        linear 0.5 alpha 1.0 pos (470, 350)
    
screen presstostart():
    text "Press to start" xalign 0.5 yalign 0.5
    button:
        xfill True
        yfill True
        if firstlaunch:
            action Hide("presstostart"), Show("main_menu")
        else:
            action Hide("presstostart"),  SetVariable("firstlaunch", True), Return(), Play("sound", "whistle.ogg")
label splashscreen:
    scene black
    $ renpy.pause(1) # removed hard=True

    show white at transform_white
    $ renpy.pause(2) # removed hard=True

    show logo at transform_logo
    $ renpy.pause(6) # removed hard=True

    hide logo
    $ renpy.pause(2) # removed hard=True

    hide white
    $ renpy.pause(3) # removed hard=True
    call screen presstostart

    return

image logo = "gui/logo/logo.png"

transform logo_fade:
    alpha 0.0
    linear 1.0 alpha 1.0
    repeat

label endd:
    e "dsdgshgs"
    e "sddgsdg"
    e "this is end"
    return

in screens.rpy i changed main menu screen

Code: Select all

screen main_menu():
    key "mouseup_1" action Play("sound", "whistle.ogg")
    
    ## This ensures that any other menu screen is replaced.
    tag menu

    add gui.main_menu_background

    ## This empty frame darkens the main menu.
    frame:
        style "main_menu_frame"

    ## The use statement includes another screen inside this one. The actual
    ## contents of the main menu are in the navigation screen.
    use navigation

    if gui.show_name:
        # here not disappers
        if firstlaunch:
            add "gui/logo/logo.png":
                at intro
        vbox:
            # if use here on click animation objects will disappper on click in main menu
            #if firstlaunch:
                #at intro
            style "main_menu_vbox"

            text "[config.name!t]":
                style "main_menu_title"

            text "[config.version]":
                style "main_menu_version"

if you want any time you click in game play sound:
add this screen

Code: Select all

screen soundonclick():
    key "mouseup_1" capture False action Play("sound", "whistle.ogg")

and use show screen soundonclick in start label

[Zoe_girl]

Hello, I'm sorry to delay the message, the work does not spare anyone, I'll write out the details for you tomorrow!
Thank you very much for your help and waiting.

[Zoe_girl]

Hello, I tested your version and, following your suggestions, I tried to more or less understand what should and shouldn’t be done.

1. I want the music Moon.ogg to start after clicking on Press to Start and play in a loop, meaning it should NOT restart with every mouse click. My issue was that whenever I clicked anywhere on the screen, the music would restart — but I don’t want that. I want the music to play continuously as long as we are inside the main menu, including the save/load screens of the main menu. (Not the in-game menu! In-game I will have different background music for the story.)

2. I tried to insert $ persistent.firstlaunch = False at the end of label endd, so that the main menu animation would play again after finishing the game. Unfortunately, I ended up with a blank default screen instead of the animated menu.
Here’s a screenshot after finishing the game: https://imgbox.com/TrOltO9O
And here’s how I inserted your code:

Code: Select all

label endd:
    e "dsdgshgs"
    e "sddgsdg"
    e "this is end"
    return
$ persistent.firstlaunch = False

3. I adjusted the image positions I wanted to achieve in the animation screen, and here’s the result:

Code: Select all

transform intro:
    contains:
        "gui/menu/Layer5.png"       
        linear 0.5 alpha 1.0 pos (0, 0)
    contains:
        pause 1.0
        "gui/menu/Layer4.png"        
        alpha 0.0
        linear 0.5 alpha 1.0 pos (0, 0)
    contains:
        pause 1.5
        "gui/menu/Layer3.png"        
        alpha 0.0
        linear 0.5 alpha 1.0 pos (0, 0)
    contains:
        pause 2.0
        "gui/menu/Layer1.png"
        alpha 0.0
        linear 0.5 alpha 1.0 pos (0, 0)
    contains:
        pause 2.0
        "gui/menu/Layer.png"
        alpha 0.0
        linear 0.5 alpha 1.0 pos (0, 0)
    contains:
        "gui/logo/logo.png"
        alpha 0.0
        linear 1.5 alpha 1.0
        repeat

I wanted the images to fade in gradually, not appear from corners or with movement — just a smooth fade-in. But now I have a different problem: these images stay on top of the menu, and I can’t see the buttons like “Start,” “Load,” etc.
Here’s a screenshot: https://imgbox.com/UcQwocf5
Please help with this

4. I tried changing the line:

Code: Select all

action Hide("presstostart"), SetVariable("firstlaunch", True), Return(), Play("sound", "whistle.ogg")

to use Moon.ogg instead, but the music didn’t play. I also tried replacing "sound" with "music", but that didn’t work either. I don’t understand how to properly make the music start playing after clicking "Press to Start" and have it loop continuously, without being affected by mouse clicks.

5. I’d like the logo not to blink. I tried removing repeat, but that caused an error. I also tried using return or leaving it empty at the end — still got errors. How can I properly stop the logo from looping?

I will patiently wait for your response — my apologies for the delay!

I did my best to respond to all the points where I noticed issues or things that didn’t quite match what I wanted to do in my visual novel. But if I missed anything, please let me know and I’ll gladly reply!

[giorgi1111]

see this one

Code: Select all

# The script of the game goes in this file.

# Declare characters used by this game. The color argument colorizes the
# name of the character.

define e = Character("Eileen")
default persistent.firstlaunch = False

# The game starts here.
screen soundonclick():
    key "mouseup_1" capture False action Play("sound", "whistle.ogg")
label start:

    # Show a background. This uses a placeholder by default, but you can
    # add a file (named either "bg room.png" or "bg room.jpg") to the
    # images directory to show it.

    scene bg room

    # This shows a character sprite. A placeholder is used, but you can
    # replace it by adding a file named "eileen happy.png" to the images
    # directory.

    show eileen happy
    #show screen soundonclick
    
    # These display lines of dialogue.

    e "You've created a new Ren'Py game."
    e "[persistent.firstlaunch]"
    e "Once you add a story, pictures, and music, you can release it to the world!"

    # This ends the game.
    jump endd
    return
image black = "#000"
image white = "#ffffff"
image logo = "gui/logo/logo.png"

transform transform_logo:
    on show:
        alpha 0 xalign 0.5 yalign 0.5
        linear 2.0 alpha 1
    on hide:
        linear 2.0 alpha 0

transform transform_white:
    on show:
        alpha 0
        linear 2.0 alpha 1
    on hide:
        linear 2.0 alpha 0

transform fade_in:
    alpha 0
    linear 1.5 alpha 1
transform intro:
    contains:
        "gui/logo/logo.png"
        pos (1200, 850)
        alpha 0.0
        linear 1.5 alpha 1.0
        #repeat
    contains:
        pause 0.5
        "images/Untitled.png"
        pos (400, 200)
        alpha 0.0
        linear 2.5 alpha 1.0 
    contains:
        pause 1.0
        "images/Untitled1.png"
        pos (400, 200)
        alpha 0.0
        linear 2.5 alpha 1.0 
    contains:
        pause 1.5
        "images/Untitled2.png"
        pos (400, 200)
        alpha 0.0
        linear 2.5 alpha 1.0 
    contains:
        pause 2.0
        "images/Untitled3.png"
        pos (400, 200)
        alpha 0.0
        linear 2.5 alpha 1.0 
    
screen presstostart():
    text "Press to start" xalign 0.5 yalign 0.5
    button:
        xfill True
        yfill True
        if persistent.firstlaunch == True:
            action Hide("presstostart"), Return() 
        else:
            action Hide("presstostart"),  SetVariable("persistent.firstlaunch", True), Return()
            
label splashscreen:
    scene black
    $ renpy.pause(1) # removed hard=True

    show white at transform_white
    $ renpy.pause(2) # removed hard=True

    show logo at transform_logo
    $ renpy.pause(6) # removed hard=True

    hide logo
    $ renpy.pause(2) # removed hard=True

    hide white
    $ renpy.pause(3) # removed hard=True
    call screen presstostart

    return

image logo = "gui/logo/logo.png"

transform logo_fade:
    pos (1200, 850)
    alpha 0.0
    linear 2.5 alpha 1.0
    

label endd:
    e "dsdgshgs"
    e "sddgsdg"
    e "this is end"
    $ persistent.firstlaunch = False # if set True main menu ll have animation else only logo
    return

i removed sound play on mouse click
i tryed with mp3 and music chaneel it plays and looping, i move music play in main menu screen save screen load screen , so anytime you go in any menu music begins playing.
you must add :
change name and location of music
on "show" action Play("music", "mxare.mp3", loop=1)
on "hide" action Stop("music")

other code leave as it is

Code: Select all

screen main_menu():
    on "show" action Play("music", "mxare.mp3", loop=1)
    on "hide" action Stop("music")

same for save and load

Code: Select all

screen save():
    on "show" action Play("music", "mxare.mp3", loop=1)
    on "hide" action Stop("music")
    tag menu

    use file_slots(_("Save"))


screen load():
    on "show" action Play("music", "mxare.mp3", loop=1)
    on "hide" action Stop("music")
    tag menu

    use file_slots(_("Load"))

about animation: give it first position pos (400, 300) and it just fadeing and will be far from menu, (0,0) means up left corner so your images are over menu
this is included script.rpy code ,not need copy, try and correct as you need, just remove repeat and logo ends animating

Code: Select all

transform intro:
    contains:
        "gui/logo/logo.png"
        pos (1200, 850)
        alpha 0.0
        linear 1.5 alpha 1.0
        #repeat
    contains:
        pause 0.5
        "images/Untitled.png"
        pos (400, 200)
        alpha 0.0
        linear 2.5 alpha 1.0 
    contains:
        pause 1.0
        "images/Untitled1.png"
        pos (400, 200)
        alpha 0.0
        linear 2.5 alpha 1.0 
    contains:
        pause 1.5
        "images/Untitled2.png"
        pos (400, 200)
        alpha 0.0
        linear 2.5 alpha 1.0 
    contains:
        pause 2.0
        "images/Untitled3.png"
        pos (400, 200)
        alpha 0.0
        linear 2.5 alpha 1.0 

$ persistent.firstlaunch = False # if set True main menu ll have animation else only logo