How to move 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.
Message
Author
Ace94
Regular
Posts: 113
Joined: Sat Apr 08, 2017 4:22 pm
Contact:

How to move menu buttons?

#1 Post by Ace94 »

Hi. I've looked about everywhere I could possibly look and haven't found a single guide on how to do this.... All the guides that I saw were on the previous update of Ren'py and I am making a game on the new one.

How can I move the game menu buttons? I want them to show horizontally like this:
http://78.media.tumblr.com/6328f1612fd4 ... 1_1280.png

Also how to remove or add an additional button? Like removing Credits for example. Thanks in advance!

User avatar
RicharDann
Veteran
Posts: 286
Joined: Thu Aug 31, 2017 11:47 am
Contact:

Re: How to move menu buttons?

#2 Post by RicharDann »

If you go to screens.rpy and scroll to the navigation screen, the menu buttons are organized inside a vbox, that's a vertical box, it displays its children vertically. Instead you can use an hbox (horizontal). As for adding or removing buttons, it's as simple as deleting them in the code and writing new ones. For example:

Code: Select all

screen navigation():

    hbox:
        style_prefix "navigation"

        xpos gui.navigation_xpos
        yalign 0.5

        spacing 30

        if main_menu:

            textbutton _("Start") action Start()
            
        else:
                       
            textbutton _("Save") action ShowMenu("save")
            
        textbutton _("Load") action ShowMenu("load")

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

        textbutton _("Quit") action Quit()

The documentation has a lot of useful information and examples, and is always up to date.

https://www.renpy.org/doc/html/screens.html
Last edited by RicharDann on Thu Oct 05, 2017 11:48 am, edited 1 time in total.
The most important step is always the next one.

Ace94
Regular
Posts: 113
Joined: Sat Apr 08, 2017 4:22 pm
Contact:

Re: How to move menu buttons?

#3 Post by Ace94 »

Thank you very much! I got it done immediately with your help! If I need more help on this should I create a new topic or just post in the same one?

User avatar
RicharDann
Veteran
Posts: 286
Joined: Thu Aug 31, 2017 11:47 am
Contact:

Re: How to move menu buttons?

#4 Post by RicharDann »

Glad I could help! :)

And yes, if what you need help with still relates to the topic title, or if the solution we give doesn't solve the problem, you can post it right here, if it's a different problem that requires additional explanation you may want to create a new topic with a different title.
The most important step is always the next one.

Ace94
Regular
Posts: 113
Joined: Sat Apr 08, 2017 4:22 pm
Contact:

Re: How to move menu buttons?

#5 Post by Ace94 »

Okay, I got one real fast: To allign it in the bottom center like the image shown in the first post, do I change something on this line of code?
"spacing gui.navigation_spacing"

edit: I already changed yalign to be 1.0 and that puts it in the bottom, but not the centre.

User avatar
RicharDann
Veteran
Posts: 286
Joined: Thu Aug 31, 2017 11:47 am
Contact:

Re: How to move menu buttons?

#6 Post by RicharDann »

EDIT: Oops, I misunderstood your question. To place it in the bottom center you need to change yalign to something like 0.7
The most important step is always the next one.

Ace94
Regular
Posts: 113
Joined: Sat Apr 08, 2017 4:22 pm
Contact:

Re: How to move menu buttons?

#7 Post by Ace94 »

Yeah I changed that, but it's aligned on the left side of the screen, doesn't look to be in the center.

edit: like this: https://i.gyazo.com/df559146f220cad3ff5 ... 3a2871.png

User avatar
RicharDann
Veteran
Posts: 286
Joined: Thu Aug 31, 2017 11:47 am
Contact:

Re: How to move menu buttons?

#8 Post by RicharDann »

Ah, of course, you also have to change xalign to 0.5
The most important step is always the next one.

Ace94
Regular
Posts: 113
Joined: Sat Apr 08, 2017 4:22 pm
Contact:

Re: How to move menu buttons?

#9 Post by Ace94 »

Oh I just figured it out lol! But the confusing part is that there was no xalign in the code, so I was searching for that. I wrote it myself and it worked like a charm. Thank you so much!

Ace94
Regular
Posts: 113
Joined: Sat Apr 08, 2017 4:22 pm
Contact:

Re: How to move menu buttons?

#10 Post by Ace94 »

Another question: Can I customize the navigation menu buttons to be an image and make another image with different color when hovering over a button or it has to be done with font and html colors?

edit: I guess with this?

screen gui_game_menu():
vbox xalign 1.0 yalign 1.0:
imagebutton auto "save_%s.png" action ShowMenu('save')
imagebutton auto "prefs_%s.png" action ShowMenu('preferences')
imagebutton auto "skip_%s.png" action Skip()
imagebutton auto "afm_%s.png" action Preference("auto-forward mode", "toggle")

User avatar
RicharDann
Veteran
Posts: 286
Joined: Thu Aug 31, 2017 11:47 am
Contact:

Re: How to move menu buttons?

#11 Post by RicharDann »

Ace94 wrote: Thu Oct 05, 2017 2:04 pm Another question: Can I customize the navigation menu buttons to be an image and make another image with different color when hovering over a button or it has to be done with font and html colors?

edit: I guess with this?

screen gui_game_menu():
vbox xalign 1.0 yalign 1.0:
imagebutton auto "save_%s.png" action ShowMenu('save')
imagebutton auto "prefs_%s.png" action ShowMenu('preferences')
imagebutton auto "skip_%s.png" action Skip()
imagebutton auto "afm_%s.png" action Preference("auto-forward mode", "toggle")
Yes, your guess is right :D You need to have all those images in your images folder, so for example for the save button you need at least two images called save_idle.png and save_hover.png, each you can customize however you want, just make sure both are the same size.
The most important step is always the next one.

Ace94
Regular
Posts: 113
Joined: Sat Apr 08, 2017 4:22 pm
Contact:

Re: How to move menu buttons?

#12 Post by Ace94 »

RicharDann wrote: Thu Oct 05, 2017 2:58 pm
Ace94 wrote: Thu Oct 05, 2017 2:04 pm Another question: Can I customize the navigation menu buttons to be an image and make another image with different color when hovering over a button or it has to be done with font and html colors?

edit: I guess with this?

screen gui_game_menu():
vbox xalign 1.0 yalign 1.0:
imagebutton auto "save_%s.png" action ShowMenu('save')
imagebutton auto "prefs_%s.png" action ShowMenu('preferences')
imagebutton auto "skip_%s.png" action Skip()
imagebutton auto "afm_%s.png" action Preference("auto-forward mode", "toggle")
Yes, your guess is right :D You need to have all those images in your images folder, so for example for the save button you need at least two images called save_idle.png and save_hover.png, each you can customize however you want, just make sure both are the same size.
I seem to be stuck at this for some reason.... can you tell me what I am doing wrong?

This is what code I use for the "LOAD" image as an imagebutton and when I launch the game with the code like this, it just disappears and there is no load anywhere.

screen navigation():

hbox:
style_prefix "navigation"

xpos gui.navigation_xpos
xalign -0.2
yalign 0.95

spacing gui.navigation_spacing

if main_menu:

textbutton _("Start") action Start()

else:

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

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

imagebutton idle "load_idle.png" action ShowMenu("load")
imagebutton hover "load_hover.png" action ShowMenu("load")

User avatar
Imperf3kt
Lemma-Class Veteran
Posts: 3785
Joined: Mon Dec 14, 2015 5:05 am
itch: Imperf3kt
Location: Your monitor
Contact:

Re: How to move menu buttons?

#13 Post by Imperf3kt »

You are trying to use two imagebuttons, delete one.

Code: Select all

imagebutton auto "load_%s.png" focus_mask True action ShowMenu("load")
## or
imagebutton idle "load_idle.png" hover "load_hover.png" focus_mask True action ShowMenu("load")
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

Current project: GGD Mentor

Twitter

Ace94
Regular
Posts: 113
Joined: Sat Apr 08, 2017 4:22 pm
Contact:

Re: How to move menu buttons?

#14 Post by Ace94 »

Imperf3kt wrote: Thu Oct 05, 2017 7:40 pm You are trying to use two imagebuttons, delete one.
Thank you for the reply! Your suggestion worked and the button appeared, however, after I add a Start imagebutton, I try to add another imagebutton, for example the Load one in the else statement and nothing appears other than the Start imagebutton when I launch the game itself. Not even the text buttons show after I change the Start one. Any idea what I am doing wrong?

User avatar
RicharDann
Veteran
Posts: 286
Joined: Thu Aug 31, 2017 11:47 am
Contact:

Re: How to move menu buttons?

#15 Post by RicharDann »

There might be a problem with identation, or the way you're placing the buttons, it's hard to know for sure without actually seeing the code. If you can post the entire screen code formatted using [code] [/code]tags, like this

Code: Select all


# Your code here

The most important step is always the next one.

Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot], jeffster, Kocker