Page 1 of 1
How to center main menu text-buttons and also remove sidebar
Posted: Sun Oct 23, 2016 5:16 pm
by 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.
Re: How to center main menu text-buttons and also remove sid
Posted: Sun Oct 23, 2016 5:36 pm
by Ocelot
Can you please show the code for corresponding screens?
Re: How to center main menu text-buttons and also remove sid
Posted: Sun Oct 23, 2016 5:45 pm
by 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.
Re: How to center main menu text-buttons and also remove sid
Posted: Sun Oct 23, 2016 5:52 pm
by MaxYablockin
In screen navigation xpos 0.5
In style main_menu_frame delete background
And add xalign 0.5 in style navigation_button_text
Re: How to center main menu text-buttons and also remove sid
Posted: Sun Oct 23, 2016 5:59 pm
by 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.
Re: How to center main menu text-buttons and also remove sid
Posted: Sun Oct 23, 2016 6:08 pm
by ConerNSFW
double post
Re: How to center main menu text-buttons and also remove sid
Posted: Sun Oct 23, 2016 6:11 pm
by 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.
Re: How to center main menu text-buttons and also remove sid
Posted: Sun Oct 23, 2016 6:16 pm
by 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
Re: How to center main menu text-buttons and also remove sid
Posted: Sun Oct 23, 2016 6:27 pm
by 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.
Re: How to center main menu text-buttons and also remove sid
Posted: Sun Oct 23, 2016 6:41 pm
by 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
Re: How to center main menu text-buttons and also remove sid
Posted: Sun Oct 23, 2016 6:47 pm
by 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.
Re: How to center main menu text-buttons and also remove sid
Posted: Sun Oct 23, 2016 6:54 pm
by Ocelot
Those are literally only changes I did. Here is the link to project:
https://dl.dropboxusercontent.com/u/110 ... 20Text.zip
Re: How to center main menu text-buttons and also remove sid
Posted: Sun Oct 23, 2016 6:55 pm
by 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.
Re: How to center main menu text-buttons and also remove sid
Posted: Sun Oct 23, 2016 7:04 pm
by 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.