How to move menu buttons?

[Ace94]

Code: Select all

screen navigation():

    hbox:
        style_prefix "navigation"

        xpos gui.navigation_xpos

        spacing gui.navigation_spacing

        if main_menu:

            imagebutton idle "start_idle.png" hover "start_hover.png" focus_mask True action ShowMenu("start")
           
        else:
            
            imagebutton idle "load_idle.png" hover "load_hover.png" focus_mask True action ShowMenu("load")
            
            textbutton _("History") action ShowMenu("history")

            textbutton _("Save") action ShowMenu("save")

            textbutton _("Preferences") action ShowMenu("preferences")
            
        if _in_replay:

            textbutton _("End Replay") action EndReplay(confirm=True)

        elif not main_menu:

            textbutton _("Main Menu") action MainMenu()

        textbutton _("About") action ShowMenu("about")
 
        if renpy.variant("pc"):

            ## Help isn't necessary or relevant to mobile devices.
            textbutton _("Help") action ShowMenu("help")
           
            ## The quit button is banned on iOS and unnecessary on Android.
            textbutton _("Quit") action Quit(confirm=not main_menu)

This is the entire code for the navigation screen. It seems when I start the game the text buttons for save,load,history etc. doesn't show up either. I probably did something horribly wrong and since I am so bad at programming I can't spot it

[RicharDann]

I think the problem is identation. Identation refers to how the code is aligned in the script file. If you're using editra, you can go to View Menu, click Editor and then check 'Identation Guides' so it can help you see what I mean.

You see, the if statement only runs the contents below when the main menu screen is showing, and when it's not, the else is then executed. So you need to put the load button and other buttons you want to show up when the game starts outside and below the if-else, so they are always present on the screen. In the else statement you would put things that don't belong in the main menu, like History and Save that are more relevant during the game flow (it wouldn't make sense to save or see text history if the game hasn't even started). So it should be:

Code: Select all

        if main_menu: #This checks if the main menu is showing
            #If we're in main menu, this will run
            imagebutton idle "start_idle.png" hover "start_hover.png" focus_mask True action ShowMenu("start")
           
        else:
            #If we are not in main menu, this will run
            textbutton _("History") action ShowMenu("history")

            textbutton _("Save") action ShowMenu("save")
        
        #This is outside the if, so it will always run.
        imagebutton idle "load_idle.png" hover "load_hover.png" focus_mask True action ShowMenu("load")
        
        textbutton _("Preferences") action ShowMenu("preferences")

[Ace94]

Your explanation totally makes sense, but I just tried it and it still showed only the Start button for some odd reason.

I triple checked if the files are the same size/name and in the right folder (images) and they are. So I am really clueless why this is happening.

[RicharDann]

That's odd, it works fine for me. Only other thing that may be interfering is the xpos property or the spacing, maybe the buttons are showing but off-screen, try removing those, or, just in case, use this code, I've tested it and there seems to be no problem in it:

Code: Select all

screen navigation():

    hbox:
        style_prefix "navigation"

        # xpos gui.navigation_xpos commented out this so it doesn't execute
        
        yalign .5

        spacing 100 # changed the spacing to 100 so the buttons are distanced but close

        if main_menu:

            imagebutton idle "start_idle.png" hover "start_hover.png" focus_mask True action ShowMenu("start")
           
        else:
            
            textbutton _("History") action ShowMenu("history")

            textbutton _("Save") action ShowMenu("save")

        imagebutton idle "load_idle.png" hover "load_hover.png" focus_mask True action ShowMenu("load")
            
        textbutton _("Preferences") action ShowMenu("preferences")
            
        if _in_replay:

            textbutton _("End Replay") action EndReplay(confirm=True)

        elif not main_menu:

            textbutton _("Main Menu") action MainMenu()

        textbutton _("About") action ShowMenu("about")
 
        if renpy.variant("pc"):

            ## Help isn't necessary or relevant to mobile devices.
            textbutton _("Help") action ShowMenu("help")
           
            ## The quit button is banned on iOS and unnecessary on Android.
            textbutton _("Quit") action Quit(confirm=not main_menu)

Here's how that looks when I run it (it looks ugly I know, it's just for testing):

screenshot0002.png

(7.69 KiB) Not downloaded yet

[Ace94]

It still doesn't show for me. Maybe the picture itself has some sort of problem with it that I don't see? Here are the Load and Start buttons and how the ingame menu looks and when I start the game there's no text buttons there either on the side (save,history,load etc.):

I also tried adding different button, like Quit, for example, it still didn't show.

[RicharDann]

Well now I'm totally confused. There might be a problem with the pictures (but then Ren'Py wouldn't probably show them in the first place). Why don't you try creating a new project and star over from there? Don't change anything except the textbuttons and place them exactly where they were by default, then run the game. If it shows correctly, then change the vbox to hbox, and test again, and so on go customizing the screen little by little. That way if something goes wrong you can always change back and try a different approach. If the problem persists even in a new project, then I don't really know what could it be.

[Black Cat 2412]

I see that you are working with imagebutton, have you checked this out? it helped me a lot: viewtopic.php?t=22565
I suggest that if you feel too confused, just start a new project and implementing the buttons again, slowly and surely one at a time.

[Ace94]

I just made a brand new project and only had the 4 images. I changed the font and made a brand new image called TEST to see if that was the problem and it still didn't appear, then I started a new game and I had my other vertical buttons (back, save, load, prefs, etc.) so I clicked on Save... and check where the button was:
It's also on all the other parts of the menu options (like history) but not on the main menu itself.

I see that you are working with imagebutton, have you checked this out? it helped me a lot: viewtopic.php?t=22565
I suggest that if you feel too confused, just start a new project and implementing the buttons again, slowly and surely one at a time.

Thanks! I will definitely check it out. I feel like I kind of got what is what with the imagebutton, but for some reason it doesn't appear on the main menu.


edit: At this point I feel really dumb. Why is this showing in the wrong screens?

For some unknown reason it seems that whenever I add an imagebutton after the else statement it groups it up with the other button in that same line (in this example the Preferences one... and all the other buttons seem to disappear). I started a brand new project and used only these 2 imagebuttons and absolutely nothing else and this still happens to me...

[Imperf3kt]

It looks like you have put these in the navigation, but only want them to show on the main menu.
I haven't got time to go over it, but personally, I'd remake the main menu screen and not use navigation on it.

Also, this may be of use to you. It's from the old wiki, but it's still highly relevant.
https://www.renpy.org/wiki/renpy/FAQ#Ho ... _blocks.3F

[Ace94]

I just wanted to update you guys on this. I actually started working by following Uncle Mugen's GUI guide and replaced it with my own buttons and xpos and ypos and so far it worked wonderful, without any problems. And I restarted my computer from last time I tried to do what you guys helped me do before but didn't work, and for some unknown reason the Start and Load now appear next to each other and work just fine.... I don't know what the problem was, but I guess after restarting my computer it fixed itself somehow? I don't know. Thank you all for trying to help me though. I will probably need more help in the future though so I will update if that happens!

[Ace94]

Ok. I need help again haha. I am on the save/load screen right now and I am struggling with something.

I want to make 3 columns with 2 rows and with 1-9 pages (I think I can do the pages easily), but for some reason it's not letting me make the full 2 rows. It only makes the columns. I am using the Uncle Mugen guide now and this is the code that I struggle with:

Code: Select all

screen file_picker:
    use navigation # We include the navigation/game menu screen
    # Buttons for selecting the save/load page:
    imagebutton auto "gui/filepage1_%s.png" xpos 46 ypos 104 focus_mask True action FilePage(1) hover_sound "sfx/click.wav"
    imagebutton auto "gui/filepage2_%s.png" xpos 46 ypos 228 focus_mask True action FilePage(2) hover_sound "sfx/click.wav"
    imagebutton auto "gui/filepage3_%s.png" xpos 46 ypos 353 focus_mask True action FilePage(3) hover_sound "sfx/click.wav"
    $ y=104 # ypos for the first save slot
    $ columns = 3
    $ rows = 2 #480x144
    for i in range(0, 2): # This repeats the block below 3 times (counts from 0 to 2), for the 3 save slots. We could also copy/paste the block below 3 times, but we are too lazy to do that.
        imagebutton auto "gui/fileslot_%s.png" xpos 195 ypos y focus_mask True action FileAction(i)
        use load_save_slot(number=i, x=10, y=y) # This calls the load_save_slot screen defined above. We pass variable i as the slot number and x, y coordinates.
        $ y+=400 # We increase the y variable so every next save slot is moved 124px lower.

Any help would be greatly appreciated... I am struggling with this for 2 days now. I attached an image to show you how I want it to look. I also want the navigation menu on the right side to show.

Edit: I attached another image to show how it currently looks with the code I attached:

[Ace94]

Please don't laugh too much. I managed to figure it out myself with a lot of headbanging and it was actually super simple.... I was just looking for guides everywhere and no one did it exactly the same way that I was looking for.

This is the end code that seem to be working flawlessly:

Code: Select all

screen file_picker:
    use navigation # We include the navigation/game menu screen
    # Buttons for selecting the save/load page:
    imagebutton auto "gui/filepage1_%s.png" xpos 46 ypos 899 focus_mask True action FilePage(1) hover_sound "sfx/click.wav"
    imagebutton auto "gui/filepage2_%s.png" xpos 199 ypos 899 focus_mask True action FilePage(2) hover_sound "sfx/click.wav"
    imagebutton auto "gui/filepage3_%s.png" xpos 355 ypos 899 focus_mask True action FilePage(3) hover_sound "sfx/click.wav"
    imagebutton auto "gui/fileslot_%s.png" xpos 10 ypos 114 focus_mask True action FileAction(1)
    use load_save_slot(number=1, x=10, y=114)
    imagebutton auto "gui/fileslot_%s.png" xpos 10 ypos 355 focus_mask True action FileAction(2)
    use load_save_slot(number=2, x=10, y=355)
    imagebutton auto "gui/fileslot_%s.png" xpos 10 ypos 614 focus_mask True action FileAction(3)
    use load_save_slot(number=3, x=10, y=614)