Change position of main menu buttons

[Inori_i]

I managed to change the main menu buttons from vertical to horizontal positioning. Can someone explain me how to change the line of the text so that it appears as a new line of buttons, and change the alignment, so that it shows as centre-aligned? This is my first time trying to code.


Currently, the position of my main menu buttons is like this:


My question is, how do I change the position of my buttons so that they look like this?


So far, this is what my code looks like:

Code: Select all

screen navigation():

    hbox:
        style_prefix "navigation"

        xpos 250
        yanchor 0.5
        ypos 570
        spacing 10

        if main_menu:
            textbutton _("Start") action Start()

        else:
            textbutton _("History") action ShowMenu("history")
            textbutton _("Save") action ShowMenu("save")

        textbutton _("Load") 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") or (renpy.variant("web") and not renpy.variant("mobile")):
            textbutton _("Help") action ShowMenu("help")

        if renpy.variant("pc"):
            textbutton _("Quit") action Quit(confirm=not main_menu)

style navigation_button is gui_button
style navigation_button_text is gui_button_text

style navigation_button:
    size_group "navigation"
    properties gui.button_properties("navigation_button")

style navigation_button_text:
    properties gui.button_text_properties("navigation_button")

[namastaii]

Put each group of buttons you want under their own hbox. use xalign 0.5 on both of them

Code: Select all

screen navigation():

    vbox:
        style_prefix "navigation"

        xalign 0.5

        yalign 0.8

        spacing gui.navigation_spacing
        hbox:
            xalign 0.5
            if main_menu:

                textbutton _("Start") action Start()

            else:

                textbutton _("History") action ShowMenu("history")

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

            textbutton _("Load") action ShowMenu("load")

            textbutton _("Preferences") action ShowMenu("preferences")
        hbox:
            xalign 0.5
            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") or (renpy.variant("web") and not renpy.variant("mobile")):

               
                textbutton _("Help") action ShowMenu("help")

            if renpy.variant("pc"):

             
                textbutton _("Quit") action Quit(confirm=not main_menu)

This isn't tested. But I imagine this should be fine.

[Per K Grok]

I managed to change the main menu buttons from vertical to horizontal positioning. Can someone explain me how to change the line of the text so that it appears as a new line of buttons, and change the alignment, so that it shows as centre-aligned? This is my first time trying to code.


Currently, the position of my main menu buttons is like this:


My question is, how do I change the position of my buttons so that they look like this?


So far, this is what my code looks like:

Code: Select all

screen navigation():

    hbox:
        style_prefix "navigation"

        xpos 250
        yanchor 0.5
        ypos 570
        spacing 10

        if main_menu:
            textbutton _("Start") action Start()

        else:
            textbutton _("History") action ShowMenu("history")
            textbutton _("Save") action ShowMenu("save")

        textbutton _("Load") 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") or (renpy.variant("web") and not renpy.variant("mobile")):
            textbutton _("Help") action ShowMenu("help")

        if renpy.variant("pc"):
            textbutton _("Quit") action Quit(confirm=not main_menu)

style navigation_button is gui_button
style navigation_button_text is gui_button_text

style navigation_button:
    size_group "navigation"
    properties gui.button_properties("navigation_button")

style navigation_button_text:
    properties gui.button_text_properties("navigation_button")

you could try this
############################## shows lines that are different from your code

Code: Select all

    
    vbox:      #####################################
        style_prefix "navigation"

        xalign 0.5 #####################
        yalign 0.95 ###################
        spacing 10 



        hbox:                 ###################################

            if main_menu:

                textbutton _("Start") action Start()

            else:

                textbutton _("History") action ShowMenu("history")

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

            textbutton _("Load") action ShowMenu("load")

            textbutton _("Preferences") action ShowMenu("preferences")


        hbox:    ###################################################
            xpos 40  ##########################################

            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)