[Solved] Change main menu background after completing a route

[yasuzama]

Good day, I'm current trying to make a visual novel/dating game where when you first start the game, there is a main menu background with only the silhouettes of the dateable characters. Upon completing a route, the game will take the player back to the main menu and they will see that whichever character route they finish, the silhouette now have that characters image. I'm sorry, I know this question often gets ask a lot and I have tried looking up multiple forums on Lemma Soft and r/renpy on how to get this done. I tried multiple codes that works but not to the full extend that I want.


My problem with the current code that I have is that upon completing Character A's (Guy on left), his picture unlocks fine in the main menu, but the big problem I have after is unlocking the other character's picture after completing character B (Girl on right) and other characters route. When I completed character B route and it takes me back to the main menu, I either have just her character picture but Character A's picture is gone or just character A's picture but Character B's picture never shows up despite completing her route.
This is the current code that I have.
'script.rpy'

Code: Select all

init python:
    if not persistent.shal_route:
        persistent.shal_route = False
    if not persistent.jynn_route:
        persistent.jynn_route = False
    if not persistent.alex_route:
        persistent.alex_route = False
    if not persistent.everyone_ending:
        persistent.everyone_ending = False

# The game starts here.

label start:

    scene bg room

    s "Hello, let's try testing."

    s "Who do you love?"
    menu:
        "Shal":
            jump shal_route
        "Jynn":
            jump jynn_route
        "Alex":
            jump alex_route

label shal_route:
    $ persistent.shal_route = True

label jynn_route:
    $ persistent.jynn_route = True

label alex_route:
    $ persistent.alex_route = True

    # This ends the game.

    $ renpy.full_restart()

'screens.rpy'

Code: Select all

screen main_menu():
    tag menu
    # This ensures that any other menu screen is replaced.

    imagemap:
        ground '/gui/menuimage/main_menu.png'

        hotspot (522, 251, 722, 300) action Start()
        hotspot (522, 315, 722, 363) action ShowMenu('load')
        hotspot (522, 378, 722, 426) action ShowMenu('preferences')
        hotspot (522, 443, 722, 492) action Help()
        hotspot (522, 506, 722, 554) action Quit(confirm=False)

    # The background of the main menu.
        if (persistent.shal_route == True):
            add "gui/menuimage/main_menu_shal.png"
        elif (persistent.jynn_route == True):
            add "gui/menuimage/main_menu_jynn.png"
        elif (persistent.alex_route == True):
            add "gui/menuimage/main_menu_alex.png"
        else:
                use main_menu_no_end

screen main_menu_no_end():
    tag menu
    imagemap:
        ground '/gui/menuimage/main_menu.png'

        hotspot (522, 251, 722, 300) action Start()
        hotspot (522, 315, 722, 363) action ShowMenu('load')
        hotspot (522, 378, 722, 426) action ShowMenu('preferences')
        hotspot (522, 443, 722, 492) action Help()
        hotspot (522, 506, 722, 554) action Quit(confirm=False)

If anyone can help me with this issue, I would really be greatful.

[Imperf3kt]

Your issue is in this section of code.

Code: Select all

# The background of the main menu.
        if (persistent.shal_route == True):
            add "gui/menuimage/main_menu_shal.png"
        elif (persistent.jynn_route == True):
            add "gui/menuimage/main_menu_jynn.png"
        elif (persistent.alex_route == True):
            add "gui/menuimage/main_menu_alex.png"
        else:
                use main_menu_no_end

All of these options result in a one-or-the-other background being used.

You could either add additional checks (use and) and add both images on screen at once (assuming properly cropped and positioned), or simply removing the 'el' from each elif you have will work in this case as well.

All of this assumes you have a base main menu background, and the extra images you are adding are transparent to overlay above that base image and won't hide the other images.

[yasuzama]

Your issue is in this section of code.

Code: Select all

# The background of the main menu.
        if (persistent.shal_route == True):
            add "gui/menuimage/main_menu_shal.png"
        elif (persistent.jynn_route == True):
            add "gui/menuimage/main_menu_jynn.png"
        elif (persistent.alex_route == True):
            add "gui/menuimage/main_menu_alex.png"
        else:
                use main_menu_no_end

All of these options result in a one-or-the-other background being used.

You could either add additional checks (use and) and add both images on screen at once (assuming properly cropped and positioned), or simply removing the 'el' from each elif you have will work in this case as well.

All of this assumes you have a base main menu background, and the extra images you are adding are transparent to overlay above that base image and won't hide the other images.

I tried removing the el from elif as you said:

Code: Select all

    # The background of the main menu.
        if (persistent.shal_route == True):
            add "gui/menuimage/main_menu_shal.png"
        if (persistent.jynn_route == True):
            add "gui/menuimage/main_menu_jynn.png"
        if (persistent.alex_route == True):
            add "gui/menuimage/main_menu_alex.png"
        else:
            use main_menu_no_end

Upon completing Shal's route, the main menu background gave me Alex's image instead. The same result goes for completing Jynn's route. I have a main background image as a base and each of the character's images are transparent and positioned correctly. How do you suggest I add additional checks?

[Imperf3kt]

The parenthesis aren't necessary and should probably be removed too.
I can take a better look later.


To add additional checks, you'd simply write both variables on one line, with an "and" between them.

Code: Select all

if persistent.shal_route and persistent.alex_route:
    add "gui/menuimage/main_menu_shal.png"
    add "gui/menuimage/main_menu_alex.png"

This would only show if both persistent.alex_route and persistent.shal_route are True and will show both images together.
If only one variable evaluates to True, this will be ignored as if the whole thing was False

[zmook]

I don't know if this has anything to do with your problem, but why does the `else: use main_menu_no_end` clause even exist? It looks like it just duplicates the code you already have above.

Depending on what your images actually contain, if alex_route is false that might result in drawing a new main_menu.png background image over top of your route-completion images.

[yasuzama]

The parenthesis aren't necessary and should probably be removed too.
I can take a better look later.


To add additional checks, you'd simply write both variables on one line, with an "and" between them.

Code: Select all

if persistent.shal_route and persistent.alex_route:
    add "gui/menuimage/main_menu_shal.png"
    add "gui/menuimage/main_menu_alex.png"

This would only show if both persistent.alex_route and persistent.shal_route are True and will show both images together.
If only one variable evaluates to True, this will be ignored as if the whole thing was False

Code: Select all

imagemap:
        ground '/gui/menuimage/main_menu.png'

        hotspot (522, 251, 722, 300) action Start()
        hotspot (522, 315, 722, 363) action ShowMenu('load')
        hotspot (522, 378, 722, 426) action ShowMenu('preferences')
        hotspot (522, 443, 722, 492) action Help()
        hotspot (522, 506, 722, 554) action Quit(confirm=False)

    # The background of the main menu.
        if persistent.shal_route == True:
            add "gui/menuimage/main_menu_shal.png"
        elif persistent.jynn_route == True:
            add "gui/menuimage/main_menu_jynn.png"
        elif persistent.alex_route == True:
            add "gui/menuimage/main_menu_alex.png"
        elif persistent.shal_route == True and persistent.jynn_route == True:
            add "gui/menuimage/main_menu_shal.png"
            add "gui/menuimage/main_menu_jynn.png"
        elif persistent.shal_route == True and persistent.alex_route == True:
            add "gui/menuimage/main_menu_shal.png"
            add "gui/menuimage/main_menu_alex.png"
        elif persistent.jynn_route == True and persistent.alex_route == True:
            add "gui/menuimage/main_menu_jynn.png"
            add "gui/menuimage/main_menu_alex.png"
        elif persistent.shal_route == True and persistent.jynn_route == True and persistent.alex_route == True:
            add "gui/menuimage/main_menu_shal.png"
            add "gui/menuimage/main_menu_jynn.png"
            add "gui/menuimage/main_menu_alex.png"

I tried what you suggested and changed my code to this. It still doesn't work because when I do Shal's route, his picture is the only one that shows up and stays like that. Even after doing Jynn's and Alex's route, Shal's picture is the only one you see. Like the code above, I removed the el and just tried if for all and it gave me the previous result of having only Alex's picture show up. Whether I did Shal's or Jynn, Alex's picture shows up after finishing either of their route.

[yasuzama]

I don't know if this has anything to do with your problem, but why does the `else: use main_menu_no_end` clause even exist? It looks like it just duplicates the code you already have above.

Depending on what your images actually contain, if alex_route is false that might result in drawing a new main_menu.png background image over top of your route-completion images.

Thank you for pointing that out! I was testing out different codes I found so I think I just forgot to remove that part from my code. What you said made sense since I already have a base background, but I don't think that portion was the problem since after removing it, I still get the same result.

[zmook]

Code: Select all

        if persistent.shal_route == True:
            add "gui/menuimage/main_menu_shal.png"
        elif persistent.jynn_route == True:
            add "gui/menuimage/main_menu_jynn.png"
        elif persistent.alex_route == True:
            add "gui/menuimage/main_menu_alex.png"
        elif persistent.shal_route == True and persistent.jynn_route == True:
            add "gui/menuimage/main_menu_shal.png"
            add "gui/menuimage/main_menu_jynn.png"
        elif persistent.shal_route == True and persistent.alex_route == True:
            add "gui/menuimage/main_menu_shal.png"
            add "gui/menuimage/main_menu_alex.png"
        elif persistent.jynn_route == True and persistent.alex_route == True:
            add "gui/menuimage/main_menu_jynn.png"
            add "gui/menuimage/main_menu_alex.png"
        elif persistent.shal_route == True and persistent.jynn_route == True and persistent.alex_route == True:
            add "gui/menuimage/main_menu_shal.png"
            add "gui/menuimage/main_menu_jynn.png"
            add "gui/menuimage/main_menu_alex.png"

I tried what you suggested and changed my code to this. It still doesn't work because when I do Shal's route, his picture is the only one that shows up and stays like that.

Well, yeah. With that code, if shal_route is True, then the first condition is selected and you only get main_menu_shal.png added. If you're going to do the tests like this then the most specific ones have to be tested first.

That said, if those adds are all you're doing, then this really should be equivalent:

Code: Select all

        if persistent.shal_route == True:
            add "gui/menuimage/main_menu_shal.png"
        if persistent.jynn_route == True:
            add "gui/menuimage/main_menu_jynn.png"
        if persistent.alex_route == True:
            add "gui/menuimage/main_menu_alex.png"

(assuming that all three of those are full-screen size so you don't need to specify a position, and that they are mostly transparent so they don't obscure each other. Have you double-checked to make sure your image files actually contain what they're supposed to?)

[yasuzama]

Code: Select all

        if persistent.shal_route == True:
            add "gui/menuimage/main_menu_shal.png"
        elif persistent.jynn_route == True:
            add "gui/menuimage/main_menu_jynn.png"
        elif persistent.alex_route == True:
            add "gui/menuimage/main_menu_alex.png"
        elif persistent.shal_route == True and persistent.jynn_route == True:
            add "gui/menuimage/main_menu_shal.png"
            add "gui/menuimage/main_menu_jynn.png"
        elif persistent.shal_route == True and persistent.alex_route == True:
            add "gui/menuimage/main_menu_shal.png"
            add "gui/menuimage/main_menu_alex.png"
        elif persistent.jynn_route == True and persistent.alex_route == True:
            add "gui/menuimage/main_menu_jynn.png"
            add "gui/menuimage/main_menu_alex.png"
        elif persistent.shal_route == True and persistent.jynn_route == True and persistent.alex_route == True:
            add "gui/menuimage/main_menu_shal.png"
            add "gui/menuimage/main_menu_jynn.png"
            add "gui/menuimage/main_menu_alex.png"

I tried what you suggested and changed my code to this. It still doesn't work because when I do Shal's route, his picture is the only one that shows up and stays like that.

Well, yeah. With that code, if shal_route is True, then the first condition is selected and you only get main_menu_shal.png added. If you're going to do the tests like this then the most specific ones have to be tested first.

That said, if those adds are all you're doing, then this really should be equivalent:

Code: Select all

        if persistent.shal_route == True:
            add "gui/menuimage/main_menu_shal.png"
        if persistent.jynn_route == True:
            add "gui/menuimage/main_menu_jynn.png"
        if persistent.alex_route == True:
            add "gui/menuimage/main_menu_alex.png"

(assuming that all three of those are full-screen size so you don't need to specify a position, and that they are mostly transparent so they don't obscure each other. Have you double-checked to make sure your image files actually contain what they're supposed to?)

I tried as you have suggested and all I get is Alex's picture at the end regardless whether I finish Shal's or Jynn's route first. Each of the picture I have is in the right position. All are transparent and don't overlap each other. The pictures are all named and recalled correctly through the code.

[zmook]

I am not sure where your problem is. I have just tested this, and it works perfectly:

Code: Select all

screen main_menu():

    ## This ensures that any other menu screen is replaced.
    tag menu

    style_prefix "main_menu"

#     add gui.main_menu_background

    imagemap:
        ground gui.main_menu_background

        hotspot (522, 251, 722, 300) action Start()
        hotspot (522, 315, 722, 363) action ShowMenu('load')
        hotspot (522, 378, 722, 426) action ShowMenu('preferences')
        hotspot (522, 443, 722, 492) action Help()
        hotspot (522, 506, 722, 554) action Quit(confirm=False)

        if (persistent.shal_route):
            add '001.jpg' xalign 0.0
        if (persistent.jynn_route):
            add '002.jpg' xalign 0.5
        if (persistent.alex_route):
            add '003.jpg' xalign 1.0
        # to verify these variables actually have the values they're supposed to
        textbutton "shal=%r / jynn=%r / alex=%r" % (persistent.shal_route, persistent.jynn_route, persistent.alex_route):
            align 0.5,0.5
            text_color "#fd0"

I can jump into the console and update values of `persistent.___route` and the images appear and disappear immediately.

What version of Ren'py are you working with?

[yasuzama]

I am not sure where your problem is. I have just tested this, and it works perfectly:

Code: Select all

screen main_menu():

    ## This ensures that any other menu screen is replaced.
    tag menu

    style_prefix "main_menu"

#     add gui.main_menu_background

    imagemap:
        ground gui.main_menu_background

        hotspot (522, 251, 722, 300) action Start()
        hotspot (522, 315, 722, 363) action ShowMenu('load')
        hotspot (522, 378, 722, 426) action ShowMenu('preferences')
        hotspot (522, 443, 722, 492) action Help()
        hotspot (522, 506, 722, 554) action Quit(confirm=False)

        if (persistent.shal_route):
            add '001.jpg' xalign 0.0
        if (persistent.jynn_route):
            add '002.jpg' xalign 0.5
        if (persistent.alex_route):
            add '003.jpg' xalign 1.0
        # to verify these variables actually have the values they're supposed to
        textbutton "shal=%r / jynn=%r / alex=%r" % (persistent.shal_route, persistent.jynn_route, persistent.alex_route):
            align 0.5,0.5
            text_color "#fd0"

I can jump into the console and update values of `persistent.___route` and the images appear and disappear immediately.

What version of Ren'py are you working with?

I'm currently using Renpy 7.1.3.1092. Could the problem be from the script rather than the screen file? This is what I currently have for the script.

Code: Select all

define s = Character("Sage")

init python:
    if not persistent.shal_route:
        persistent.shal_route = False
    if not persistent.jynn_route:
        persistent.jynn_route = False
    if not persistent.alex_route:
        persistent.alex_route = False

# The game starts here.
label start:

    scene bg room

    s "Let's try testing."
    s "Choose a route."
    menu:
        "Shal":
            jump shal_route
        "Jynn":
            jump jynn_route
        "Alex":
            jump alex_route

label shal_route:
    $ persistent.shal_route = True

label jynn_route:
    $ persistent.jynn_route = True

label alex_route:
    $ persistent.alex_route = True

    # This ends the game.
    $ renpy.full_restart()

[enaielei]

A python statement ($) runs the next line of code after being executed.
In your case, after it reaches the $ persistent.shal_route = True, the next label (jynn_route) gets executed, and so on.
So basically, if you reach the shal_route, the other routes will get triggered as well.
A workaround is to halt the script from moving forward after the python statement. Therefore, adding a return or jump will work.

Code: Select all

label shal_route:
    $ persistent.shal_route = True
    return # will probably return to the main menu or from a recent label if you called this label instead.
    
label jynn_route:
    $ persistent.jynn_route = True
    jump continuation # transfers the continuation of the script to another label   

label alex_route:
    $ persistent.alex_route = True

    # This ends the game.
    $ renpy.full_restart()

label continuation:
  "Some continuation..."

[yasuzama]

A python statement ($) runs the next line of code after being executed.
In your case, after it reaches the $ persistent.shal_route = True, the next label (jynn_route) gets executed, and so on.
So basically, if you reach the shal_route, the other routes will get triggered as well.
A workaround is to halt the script from moving forward after the python statement. Therefore, adding a return or jump will work.

Code: Select all

label shal_route:
    $ persistent.shal_route = True
    return # will probably return to the main menu or from a recent label if you called this label instead.
    
label jynn_route:
    $ persistent.jynn_route = True
    jump continuation # transfers the continuation of the script to another label   

label alex_route:
    $ persistent.alex_route = True

    # This ends the game.
    $ renpy.full_restart()

label continuation:
  "Some continuation..."

Thank you, Imperf3kt, and zmook for helping me on this! The fix/suggestion works perfectly! I'm so sorry for the trouble and the simple mistake in the script and screens file. I can't believe all this could've been fix had I added a return and changed the elif to just if.