How to center main menu text-buttons and also remove sidebar

[ConerNSFW]

I knew how to do this with the old gui, but the new one is really confusing me.

So this is how my main menu currently looks:



and this is how I would like it to look:



As you can see, I would like to centre the text buttons, which i tried to do with text align to no success.

I'd also like to get rid of the black bar on the left, which I haven't even attempted yet.

[Ocelot]

Can you please show the code for corresponding screens?

[ConerNSFW]

Code: Select all

screen navigation():

    vbox:
        style_prefix "navigation"

        xpos gui.navigation_xpos
        yalign 0.5

        spacing gui.navigation_spacing

        if main_menu:
            
            ypos 0.6
            xpos 0.5
            

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

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

It's just the default code, except I moved the main menu buttons to the middle.

[MaxYablockin]

In screen navigation xpos 0.5
In style main_menu_frame delete background
And add xalign 0.5 in style navigation_button_text

[Ocelot]

You have moved box containing buttons (almost) to the middle of the screen. You need to fix position of buttons inside that box.

One way is to add xalign 0.5 to each button definition.

Other way is to define your own style for main menu buttons:

Code: Select all

style main_menu_button is navigation_button:
    xalign 0.5

# inside screen:
vbox:
    if main_menu:
        style_prefix "main_menu"
    else:
        style_prefix "navigation"

This assumes that you want to keep default position of buttons in other menu screens.

[ConerNSFW]

double post

[ConerNSFW]

Thanks MaxYablockin that helped a lot.

2 problems, the first is that it moves the game navigation menu (as in the one when you're not in the main menu). To fix this I moved the xpos 0.5 from the navigation section to the "if main_menu:" section and it worked fine.

The second problem is something I need a little help with, for some reason the text isn't centred.



And changing the xpos makes it move larger amounts that would be expected, for example if I set it to xpos 0.4 then it just jumps really far to the left.

I think could do a half fix by working out the point closing to the centre with trial and error but I think that may cause some more problems down the line.

[Ocelot]

xpos sets position of current anchor. By default it is the left edge. You want center of vbox to be at the center of the screen. To do that, you need to set both position and anchor to 0.5. Luckily there is property which sets both at the same time.

Replace xpos 0.5 with xalign 0.5

[ConerNSFW]

Ok, so I changed xpos 0.5 to xalign 0.5 and it puts the test half off the screen on the left, it's as if it's stuck in frame that's on the left.

I also tried using a custom style and it wouldn't centre the text.

[Ocelot]

Ok, I made a project from scratch and here are results:

Code: Select all

# screen:
screen navigation():

    vbox:
        if not main_menu:
            style_prefix "navigation"
        else:
            style_prefix "mainmenu"
        
        if main_menu:
            xalign 0.5
        else:
            xpos gui.navigation_xpos

        yalign 0.5

        spacing gui.navigation_spacing
        # rest of screen is the same

# styles:
style mainmenu_button is navigation_button:
    xalign 0.5
    
style mainmenu_button_text is navigation_button_text:
    xalign 0.5

[ConerNSFW]

I copy and pasted your code exactly, and mine is still off.

If you don't mind could you upload the project file?

From your advice I've managed to get it pretty close but it's still just off for some reason.

[Ocelot]

Those are literally only changes I did. Here is the link to project:

https://dl.dropboxusercontent.com/u/110 ... 20Text.zip

[ConerNSFW]

Alright, I've got your code to work, I had another thing with the same name and it was overriding your code, now I'm just going to try and replicate it in my game.

[ConerNSFW]

Yay, it's done finally.

Thanks so much Ocelot and MaxYablockin, I've spent over an hour on this and I probably wouldn't have even got it done without you two.



It's centred perfectly. (The brown rectangles were to test since they're both the same size.)

Again thanks.