Change position of main menu buttons

Discuss how to use the Ren'Py engine to create visual novels and story-based games. New releases are announced in this section.
Forum rules
This is the right place for Ren'Py help. Please ask one question per thread, use a descriptive subject like 'NotFound error in option.rpy' , and include all the relevant information - especially any relevant code and traceback messages. Use the code tag to format scripts.
Post Reply
Message
Author
User avatar
Inori_i
Newbie
Posts: 1
Joined: Fri Jul 17, 2020 2:54 pm
Projects: Sea of Tomorrow
Contact:

Change position of main menu buttons

#1 Post by Inori_i » Sat Jul 18, 2020 7:19 am

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:
Image

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

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

User avatar
namastaii
Eileen-Class Veteran
Posts: 1348
Joined: Mon Feb 02, 2015 8:35 pm
Projects: Template Maker for Ren'Py, What Life
Github: lunalucid
Skype: Discord: lunalucid#1991
Soundcloud: LunaLucidMusic
itch: lunalucid
Location: USA
Contact:

Re: Change position of main menu buttons

#2 Post by namastaii » Sun Jul 19, 2020 1:24 am

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.

User avatar
Per K Grok
Miko-Class Veteran
Posts: 786
Joined: Fri May 18, 2018 1:02 am
Completed: the Ghost Pilot, Sea of Lost Ships, Bubbles and the Pterodactyls, Defenders of Adacan Part 1 & 2
Projects: the Phantom Flier
itch: per-k-grok
Location: Sverige
Contact:

Re: Change position of main menu buttons

#3 Post by Per K Grok » Sun Jul 19, 2020 1:56 am

Inori_i wrote:
Sat Jul 18, 2020 7:19 am
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:
Image

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

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)
                

Post Reply

Who is online

Users browsing this forum: No registered users