[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
Sunlit-Dreamer
Veteran
Posts: 400
Joined: Thu Sep 22, 2011 12:41 am
Completed: NaNo2015 Bedtime, NaNo2016 The Doll and the Spider, NaNo2017 What's Your Name?, NaNo2018 Painting Your Skin, NaNo2019 Home's Embrace, NaNo2020 Molly
Projects: NaNo2021 Cracked Moonstone
Deviantart: Sunlit-Dreamer
itch: Sunlit-Dreamer
Location: Lala land~
Contact:

Re: [Tutorial] Customizing Menus

#121 Post by Sunlit-Dreamer »

Nova Alamak wrote:My screen preferences area mentioned in the tutorial for customizing menus via styles doesn't look anything like the one in the example.

Code: Select all

init -2:
    style pref_frame:
        xfill True
        xmargin 5
        top_margin 5

    style pref_vbox:
        xfill True

    style pref_button:
        size_group "pref"
        xalign 1.0

    style pref_slider:
        xmaximum 192
        xalign 1.0

    style soundtest_button:
        xalign 1.0
I've never edited it either. Is there a more up-to-date version of this tutorial? I'm trying not to do an imagemap for my options menu.
It's a pretty simple change.

Instead of the former way.

Code: Select all

    style.pref_button.background = Frame("menu/button_idle.png",10,10)
    style.pref_button.hover_background = Frame("menu/button_hover.png",10,10)
    style.pref_button.selected_background = Frame("menu/button_selected.png",10,10)
    style.pref_button.selected_hover_background = Frame("menu/button_hover.png",10,10)
    style.pref_button.yminimum = 40
You make these changes. No more periods or equal signs.

Code: Select all

    style pref_button:
        background Frame("menu/button_idle.png",10,10)
    style pref_button:
        hover_background Frame("menu/button_hover.png",10,10)
    style pref_button:
        selected_background Frame("menu/button_selected.png",10,10)
    style pref_button:
        selected_hover_background Frame("menu/button_hover.png",10,10)
    style pref_button:
        yminimum 40
It's not the exact code you want, but I just wanted to show an example on how easy the edit is.
ImageImageImageImage

User avatar
trooper6
Lemma-Class Veteran
Posts: 3712
Joined: Sat Jul 09, 2011 10:33 pm
Projects: A Close Shave
Location: Medford, MA
Contact:

Re: [Tutorial] Customizing Menus

#122 Post by trooper6 »

Sunlit-Dreamer wrote: It's a pretty simple change.

Instead of the former way.

Code: Select all

    style.pref_button.background = Frame("menu/button_idle.png",10,10)
    style.pref_button.hover_background = Frame("menu/button_hover.png",10,10)
    style.pref_button.selected_background = Frame("menu/button_selected.png",10,10)
    style.pref_button.selected_hover_background = Frame("menu/button_hover.png",10,10)
    style.pref_button.yminimum = 40
You make these changes. No more periods or equal signs.

Code: Select all

    style pref_button:
        background Frame("menu/button_idle.png",10,10)
    style pref_button:
        hover_background Frame("menu/button_hover.png",10,10)
    style pref_button:
        selected_background Frame("menu/button_selected.png",10,10)
    style pref_button:
        selected_hover_background Frame("menu/button_hover.png",10,10)
    style pref_button:
        yminimum 40
It's not the exact code you want, but I just wanted to show an example on how easy the edit is.
Even simpler would be:

Code: Select all

style pref_button:
        background Frame("menu/button_idle.png",10,10)
        hover_background Frame("menu/button_hover.png",10,10)
        selected_background Frame("menu/button_selected.png",10,10)
        selected_hover_background Frame("menu/button_hover.png",10,10)
        yminimum 40
A Close Shave:
*Last Thing Done (Aug 17): Finished coding emotions and camera for 4/10 main labels.
*Currently Doing: Coding of emotions and camera for the labels--On 5/10
*First Next thing to do: Code in all CG and special animation stuff
*Next Next thing to do: Set up film animation
*Other Thing to Do: Do SFX and Score (maybe think about eye blinks?)
Check out My Clock Cookbook Recipe: http://lemmasoft.renai.us/forums/viewto ... 51&t=21978

Final_Zero
Newbie
Posts: 1
Joined: Wed May 20, 2015 8:50 pm
Contact:

Re: [Tutorial] Customizing Menus

#123 Post by Final_Zero »

Hi I'm following you and have even checked the scripts of some other games. But when I do it it ends up with one button in the top left hand corner. It does not do anything. It doesn't even change appearance when you go over it with the mouse or keys Help!!!!!

wayward
Regular
Posts: 41
Joined: Tue Jun 30, 2015 9:53 pm
Contact:

Re: [Tutorial] Customizing Menus

#124 Post by wayward »

Thanks so much for this tutorial. Just changed my main menu. I havent changed the preferences or load screens yet, but when I click on them I get an error message saying that "Showmenu is not defined". I just started with all this, but is this happening because the load/preferences has nothing to work with since I'm using an imagemap for the main menu? Just a random guess.

User avatar
mobychan
Veteran
Posts: 275
Joined: Fri Apr 24, 2015 6:31 am
Projects: The Chosen - Sakura Pink & Gentian Blue
Organization: Foresoft
Location: Germany
Contact:

Re: [Tutorial] Customizing Menus

#125 Post by mobychan »

It's ShowMenu(with a capital S and M) not Showmenu ;)

wayward
Regular
Posts: 41
Joined: Tue Jun 30, 2015 9:53 pm
Contact:

Re: [Tutorial] Customizing Menus

#126 Post by wayward »

mobychan wrote:It's ShowMenu(with a capital S and M) not Showmenu ;)
What the!!! Thanks, man. So weird, that was the only M that was lowercase.

User avatar
WingofTech
Newbie
Posts: 2
Joined: Sun Aug 16, 2015 1:36 pm
Contact:

Re: [Tutorial] Customizing Menus

#127 Post by WingofTech »

Sunlit-Dreamer wrote:
Nova Alamak wrote:My screen preferences area mentioned in the tutorial for customizing menus via styles doesn't look anything like the one in the example.

Code: Select all

init -2:
    style pref_frame:
        xfill True
        xmargin 5
        top_margin 5

    style pref_vbox:
        xfill True

    style pref_button:
        size_group "pref"
        xalign 1.0

    style pref_slider:
        xmaximum 192
        xalign 1.0

    style soundtest_button:
        xalign 1.0
I've never edited it either. Is there a more up-to-date version of this tutorial? I'm trying not to do an imagemap for my options menu.
It's a pretty simple change.

Instead of the former way.

Code: Select all

    style.pref_button.background = Frame("menu/button_idle.png",10,10)
    style.pref_button.hover_background = Frame("menu/button_hover.png",10,10)
    style.pref_button.selected_background = Frame("menu/button_selected.png",10,10)
    style.pref_button.selected_hover_background = Frame("menu/button_hover.png",10,10)
    style.pref_button.yminimum = 40
You make these changes. No more periods or equal signs.

Code: Select all

    style pref_button:
        background Frame("menu/button_idle.png",10,10)
    style pref_button:
        hover_background Frame("menu/button_hover.png",10,10)
    style pref_button:
        selected_background Frame("menu/button_selected.png",10,10)
    style pref_button:
        selected_hover_background Frame("menu/button_hover.png",10,10)
    style pref_button:
        yminimum 40
It's not the exact code you want, but I just wanted to show an example on how easy the edit is.
I'm really glad you made the fix for this... Working in 2015 Ren'py is slightly different than 2011 for the tutorial... So thanks! ^_^'

User avatar
WingofTech
Newbie
Posts: 2
Joined: Sun Aug 16, 2015 1:36 pm
Contact:

Re: [Tutorial] Customizing Menus

#128 Post by WingofTech »

Also! To continue, since it seems that the current version of Ren'Py doesn't include the buttons' text style, you can add it in easily like so:

Code: Select all

style pref_button_text:
         color "#ffffff"
         size 14
         font "verdanab.ttf"
         outlines = [(2, "#3f603e", 0, 0)]
         hover_outlines = [(2, "#6a6b03", 0, 0)]
         selected_outlines = [(2, "#742567", 0, 0)]
         selected_hover_outlines = [(2, "#6a6b03", 0, 0)]
So there you have it! 8)

User avatar
bloodyhair
Regular
Posts: 61
Joined: Tue Aug 11, 2015 7:20 am
Deviantart: Takada-Wang
Contact:

Re: [Tutorial] Customizing Menus

#129 Post by bloodyhair »

What I did was find the "screen navigation" in my screens.rpy file, deleted the whole "frame:" block and replaced it with my imagemap. I made sure to define all the location of all the different states.
I didn't find screen navigation on my screen.rpy file. I wonder is that because I am using JEdit?

User avatar
mobychan
Veteran
Posts: 275
Joined: Fri Apr 24, 2015 6:31 am
Projects: The Chosen - Sakura Pink & Gentian Blue
Organization: Foresoft
Location: Germany
Contact:

Re: [Tutorial] Customizing Menus

#130 Post by mobychan »

It shouldn't be a problem with the text editor, it doesn't change the file itself
it should be in line 214(or just press CTRL+F and search for "screen navigation():", at least I think CTRL+F should work in JEdit as well XD)

User avatar
bloodyhair
Regular
Posts: 61
Joined: Tue Aug 11, 2015 7:20 am
Deviantart: Takada-Wang
Contact:

Re: [Tutorial] Customizing Menus

#131 Post by bloodyhair »

ah yeah. Found it. Tyvm <3

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

Re: [Tutorial] Customizing Menus

#132 Post by Soliloquy »

So, in my first attempt at redoing a menu, I copied this code:

Code: Select all

style pref_button:
        background Frame("menu/button_idle.png",10,10)
        hover_background Frame("menu/button_hover.png",10,10)
        selected_background Frame("menu/button_selected.png",10,10)
        selected_hover_background Frame("menu/button_hover.png",10,10)
        yminimum 40
and commented out everything but the first, last, and hover_background lines (the image in which was replaced with my own, since that was the one I was going to test). I also remembered to comment out the preexisting hover button code. In response, I get this error:

Parsing the script failed.
"File game/options.rpy" line 46: invalid syntax
style pref_button->:
(Side note: if anyone can tell me how to copy and paste my errors from now on, that would be awesome. ^^)

So now I have this as my main menu code:

Code: Select all

        style pref_button:
            #background Frame("images/.png",10,10)
            hover_background Frame("menu/button_hover.jpg", 10, 10)
            #selected_background Frame("menu/button_selected.png",10,10)
            #selected_hover_background Frame("menu/button_hover.png",10,10)
            yminimum 40

        ## The color of an idle widget face.
        widget = "#000000",

        ## The color of a moused-over widget face.
        #widget_hover = "#996E45",

        ## The color of the text in a selected widget. (For
        ## example, the current value of a preference.)
        widget_selected = "#ffffff",

        ## The color of a disabled widget face.
        disabled = "#614D3A",

        ## The color of a frame containing widgets.
        frame = "#926841",
Is the syntax error because the way to code has changed? Is it the mix of old and new? Should I have waited until I got all the images done and just wiped the preexisting menu altogether? I could probably keep experimenting, but for the sake of my sanity, I thought I would ask for help first. ^^

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

#133 Post by Aleema »

I don't know for sure, but you are probably placing your code in the wrong place. Place your new code on the very bottom of that RPY, where it says, "More customizations can go here."
Soliloquy wrote:I also remembered to comment out the preexisting hover button code.
Are you talking about theme.roundrect() section? You don't need to touch that outside of the BG images, because everything you do after that code will overwrite it. Commenting it out or deleting it may break your code if you don't know what you're doing.

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

Re: [Tutorial] Customizing Menus

#134 Post by Soliloquy »

Aleema wrote:I don't know for sure, but you are probably placing your code in the wrong place. Place your new code on the very bottom of that RPY, where it says, "More customizations can go here."
Pardon me whilst I facepalm lol. I just assumed that the new code went where the old should be. I moved it, and while it's not actually working yet, at least there's not an error anymore. Back to tinkering. ^^
Aleema wrote:Are you talking about theme.roundrect() section? You don't need to touch that outside of the BG images, because everything you do after that code will overwrite it. Commenting it out or deleting it may break your code if you don't know what you're doing.
Thankfully, no. I only commented out what I posted above. But thanks for the warning. I'll keep that in mind as I get further in. :)

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

#135 Post by asatiir »

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

Post Reply

Who is online

Users browsing this forum: No registered users