[Tutorial] Customizing Menus

A place for Ren'Py tutorials and reusable Ren'Py code.
Forum rules
Do not post questions here!

This forum is for example code you want to show other people. Ren'Py questions should be asked in the Ren'Py Questions and Announcements forum.
Message
Author
User avatar
Aleema
Lemma-Class Veteran
Posts: 2677
Joined: Fri May 23, 2008 2:11 pm
Organization: happyB
Tumblr: happybackwards
Contact:

Re: [Tutorial] Customizing Menus

#136 Post by Aleema »

asatiir wrote:Wonderful tutorial, though I have been facing a problem regarding the main menu buttons. The buttons are showing just fine, but there's a frame behind the buttons from the renpy template theme. Is there a way to remove it?
Yes. The code for the frame is "frame" with everything indented under it, so replace that with "hbox" (horizontal) or "vbox" (vertical) with no background.

User avatar
asatiir
Regular
Posts: 86
Joined: Tue Oct 01, 2013 6:04 pm
Completed: Within the Walls (Twine)
Projects: Roses Will Rise
Organization: Asatiir's Tales
Skype: asatiir
itch: asatiir
Location: Dubai, UAE
Contact:

Re: [Tutorial] Customizing Menus

#137 Post by asatiir »

Aleema wrote:
asatiir wrote:Wonderful tutorial, though I have been facing a problem regarding the main menu buttons. The buttons are showing just fine, but there's a frame behind the buttons from the renpy template theme. Is there a way to remove it?
Yes. The code for the frame is "frame" with everything indented under it, so replace that with "hbox" (horizontal) or "vbox" (vertical) with no background.

Code: Select all

 ## The main menu buttons.
    #frame:
    #    style_group "mm"
    #    xalign .50
    #    yalign .98

        has vbox
like this?
Image
Image

User avatar
Aleema
Lemma-Class Veteran
Posts: 2677
Joined: Fri May 23, 2008 2:11 pm
Organization: happyB
Tumblr: happybackwards
Contact:

Re: [Tutorial] Customizing Menus

#138 Post by Aleema »

No. You need to replace the word "frame", not comment it out. Delete "has vbox".

User avatar
asatiir
Regular
Posts: 86
Joined: Tue Oct 01, 2013 6:04 pm
Completed: Within the Walls (Twine)
Projects: Roses Will Rise
Organization: Asatiir's Tales
Skype: asatiir
itch: asatiir
Location: Dubai, UAE
Contact:

Re: [Tutorial] Customizing Menus

#139 Post by asatiir »

Ah ok, worked now, thanks!
Image
Image

User avatar
Soliloquy
Regular
Posts: 73
Joined: Tue Aug 25, 2015 3:42 pm
Location: Mt Holly, NJ
Contact:

Re: [Tutorial] Customizing Menus

#140 Post by Soliloquy »

With this fantastic tutorial, I managed to create my in-game menus. I styled the parent button and text styles and breathed a sigh of relief because I didn't have to think about textbuttons ever again.

And then, of course, I need a menu that looks different. And I, uh... can't seem to figure out how to overwrite the parent styles. *sweatdrop*

Code: Select all

screen pause_menu:
    tag menu


    frame:
        background Frame("menu/frame_pause.png",10,10)
        xmaximum 365
        ymaximum 365
        pos (0.5, 0.5)
        anchor (0.5, 0.5)


    vbox:  
        pos (0.5, 0.5)
        anchor (0.5, 0.5)
        textbutton _("Continue") style "pause_button" action Return() 
        textbutton _("Main Menu") style "pause_button" action MainMenu()
        textbutton _("Save Game") style "pause_button" action ShowMenu("save")
        textbutton _("Load Game") style "pause_button" action ShowMenu("load")
        textbutton _("Options") style "pause_button" action ShowMenu("preferences")
        textbutton _("Quit") style "pause_button" action Quit()
        textbutton _("Glossary") style "pause_button" action Show("caste_tooltip")
Above is the new screen that I created for said menu. That works fine. I DID manage to get the image for the buttons different than the parents (the "pause_button" style is just the image, height and width). But for the life of me, I can't get the text itself to change; not the font, not the color, nothing. I wasn't sure if this was the right place to ask, but at the same I figure that I'm probably not the only one who's going to run into this problem after thinking ourselves smart because we put Aleema's excellent advice into practice. ;)

User avatar
Aleema
Lemma-Class Veteran
Posts: 2677
Joined: Fri May 23, 2008 2:11 pm
Organization: happyB
Tumblr: happybackwards
Contact:

Re: [Tutorial] Customizing Menus

#141 Post by Aleema »

Text on buttons require their own style. They'll inherit from the button_text parent style. When you want to declare it on your buttons, do so like this:

Code: Select all

textbutton _("Continue") style "pause_button" text_style "pause_button_text" action Return()
Assuming you name your new text style pause_button_text.

User avatar
Soliloquy
Regular
Posts: 73
Joined: Tue Aug 25, 2015 3:42 pm
Location: Mt Holly, NJ
Contact:

Re: [Tutorial] Customizing Menus

#142 Post by Soliloquy »

Oh. My. Lord.

When I've tried to make a new text style, I've been forgetting the word "text." Siiiiiigh.

Thank you very much. ^^

User avatar
Soliloquy
Regular
Posts: 73
Joined: Tue Aug 25, 2015 3:42 pm
Location: Mt Holly, NJ
Contact:

Re: [Tutorial] Customizing Menus

#143 Post by Soliloquy »

This is more of a technical question, but since it's related to my previous one, I guess this is the best place as any. If it's not, I do apologize. :)

Why does 'style "pause_button"' have to be placed into each line, but 'text_style "pause_button_text"' styles all of that menu's buttons simply by writing it once? Is there any way to code this so that I don't have to repeat the image style for each individual button?

philat
Eileen-Class Veteran
Posts: 1900
Joined: Wed Dec 04, 2013 12:33 pm
Contact:

Re: [Tutorial] Customizing Menus

#144 Post by philat »

You can use style_group to avoid duplicating the style for buttons. An example is the main menu screen (in screens.rpy) where you can see style_group "mm" applied, with "mm_button" defined below.

Which is also related to the other part of your question, which is style inheritance -- pause_button_text applies to text in all buttons that are styled with pause_button. mm_button applies to all buttons that are in mm. etc. etc.

User avatar
Soliloquy
Regular
Posts: 73
Joined: Tue Aug 25, 2015 3:42 pm
Location: Mt Holly, NJ
Contact:

Re: [Tutorial] Customizing Menus

#145 Post by Soliloquy »

philat wrote:You can use style_group to avoid duplicating the style for buttons. An example is the main menu screen (in screens.rpy) where you can see style_group "mm" applied, with "mm_button" defined below.

Which is also related to the other part of your question, which is style inheritance -- pause_button_text applies to text in all buttons that are styled with pause_button. mm_button applies to all buttons that are in mm. etc. etc.
That makes a lot of sense. Thanks for answering!

lordwolfie
Newbie
Posts: 11
Joined: Mon Jun 13, 2016 9:37 am
Contact:

Re: [Tutorial] Customizing Menus

#146 Post by lordwolfie »

Hiya! I am struggling to get my main menu buttons to work properly. Basically I made two images one for when the button is not clicked and one for when I hover over the button. Everything is working properly however when I hover over the button the image that comes in ends up not quite in the same position. Was wondering what I was doing wrong or if there is an easier way to go about this?

screen main_menu:

tag menu

add "title"

# The main menu buttons.


imagebutton idle ("newgamei.png") hover "newgameg.png" xpos 850 ypos 350 focus_mask True action Start()
imagebutton idle ("continuei.png") hover "continueg.png" xpos 850 ypos 450 focus_mask True action ShowMenu("load")
imagebutton idle ("optionsi.png") hover "optionsg.png" xpos 830 ypos 550 focus_mask True action ShowMenu("preferences")
#imagebutton idle ("speci.png") hover "specg.png" xpos 850 ypos 650 focus_mask True action Help()
imagebutton idle ("exiti.png") hover "exitg.png" xpos 800 ypos 650 focus_mask True action Quit(confirm=False)

User avatar
Aleema
Lemma-Class Veteran
Posts: 2677
Joined: Fri May 23, 2008 2:11 pm
Organization: happyB
Tumblr: happybackwards
Contact:

Re: [Tutorial] Customizing Menus

#147 Post by Aleema »

Post an example of the images you're working with. It may be that they're not the same size.

lordwolfie
Newbie
Posts: 11
Joined: Mon Jun 13, 2016 9:37 am
Contact:

Re: [Tutorial] Customizing Menus

#148 Post by lordwolfie »

Aleema wrote:Post an example of the images you're working with. It may be that they're not the same size.
Ok uploaded my two continue buttons together on imgur this is the link hope its ok http://imgur.com/a/0aWvZ

User avatar
Aleema
Lemma-Class Veteran
Posts: 2677
Joined: Fri May 23, 2008 2:11 pm
Organization: happyB
Tumblr: happybackwards
Contact:

Re: [Tutorial] Customizing Menus

#149 Post by Aleema »

They are two different sizes. If you don't want the image button to resize every time the mouse hovers over it, you need to make both images the same size, even if there's some empty space around it.

lordwolfie
Newbie
Posts: 11
Joined: Mon Jun 13, 2016 9:37 am
Contact:

Re: [Tutorial] Customizing Menus

#150 Post by lordwolfie »

Aleema wrote:They are two different sizes. If you don't want the image button to resize every time the mouse hovers over it, you need to make both images the same size, even if there's some empty space around it.
Ok thank you ill give it a try. Thank you so much for all the helpful stuff you do here can't say it enough. Really so happy to see friendly people on here willing to teach! Will let ya know how it goes!

Post Reply

Who is online

Users browsing this forum: No registered users