Hidden Quickmenu for a cleaner GUI

[ileikturtles]

Worked on this today, thought I'd share it (also my first tutorial ever?)

It's basically a container for all those pesky little quick menu buttons, so that everything looks sleek and tidy! Take a gander at the images below for an example of the screen and hover states. (Or you can see it "in action" here!)

Steps:
1. Create a NEW SCREEN for the quickmenu buttons to go in (mine's called pausemenu even though it doesn't have a pause function...)
2. Create GUI ICONS and imagebuttons (or textbuttons if you must) and place these in the "quick_menu" screen

Optional:
- Create TOOLTIP style
_______________________________________________________________________________________________________________

STEP 1
Find the QUICK MENU section of your screens.rpy. Here we find the quick_menu screen with it's nifty little text buttons. The untouched code looks like this:

Code: Select all

##############################################################################
# Quick Menu
#
# A screen that's included by the default say screen, and adds quick access to
# several useful functions.
screen quick_menu():

    # Add an in-game quick menu.
    hbox:
        style_group "quick"

        xalign 1.0
        yalign 1.0

        textbutton _("Back") action Rollback()
        textbutton _("Save") action ShowMenu('save')
        textbutton _("Q.Save") action QuickSave()
        textbutton _("Q.Load") action QuickLoad()
        textbutton _("Skip") action Skip()
        textbutton _("F.Skip") action Skip(fast=True, confirm=True)
        textbutton _("Auto") action Preference("auto-forward", "toggle")
        textbutton _("Prefs") action ShowMenu('preferences')
        textbutton _("Quit") action ShowMenu('main_menu')

init -2:
    style quick_button:
        is default
        background None
        xpadding 5

    style quick_button_text:
        is default
        size 12
        idle_color "#8888"
        hover_color "#ffffff"
        selected_idle_color "#cc08"
        selected_hover_color "#cc0"
        insensitive_color "#4448"

First we're going to save this code for later. We need to create a new screen (or rename the old one) for our "Show Quickmenu" to Call when it's clicked. Here's my code:

Code: Select all

screen pausemenu():        #---------- don't forget to create/rename it!
    default tt = Tooltip("")        #---------- add this if you want to add captions to your hover states

    # Add an in-game quick menu.
    hbox:
        style_group "quick"
        
        xpos 200
        ypos 30

        #textbutton _("Back") action Rollback()        #---------- don't really want this option in my game
        textbutton _("Quick Save") action QuickSave()
        textbutton _("Quick Load") action QuickLoad()
        textbutton _("Save") action ShowMenu('save')
        textbutton _("Load") action ShowMenu('load')        #---------- added this
        textbutton _("Skip") action Skip()
        #textbutton _("F.Skip") action Skip(fast=True, confirm=True)        #---------- don't really want this option in my game
        #textbutton _("Auto") action Preference("auto-forward", "toggle")        #---------- don't really want this option in my game
        textbutton _("Settings") action ShowMenu('preferences')
        textbutton _("Main Menu") action MainMenu()        #---------- didn't like accessing this through prefs menu so i added it here
        textbutton _("X") action Hide("pausemenu") hovered tt.Action(" Hide Menu")        #---------- to hide the quickbuttons
        
        text tt.value style "tooltipcaption":        #---------- this block is also only necessary for hover captions
            font "Market_Deco_0.ttf"
            size 20
            yalign 1.0

init -2:
    style quick_button:
        #is default        #---------- commented this
        background None
        xpadding 18

    style quick_button_text:
        #is default        #---------- commented this
        font "Market_Deco_0.ttf"
        size 20
        idle_color "#666"
        hover_color "#fff"
        selected_idle_color "#cc08"
        selected_hover_color "#cc0"
        insensitive_color "#4448"

Ok awesome. Now we need imagebuttons so that we can access the quick buttons (and other stuff to, but I haven't programmed them in yet!)

STEP 2
Adding imagebuttons is really simple!

Code: Select all

screen quick_menu():         #---------- this line is super important, needs to match the "use quick_menu" line found in screens.rpy
    default tt = Tooltip("")         #---------- hover captions

    imagebutton auto "ASSETS/UI/Pause %s.png" xpos 1810 ypos 20 focus_mask None action Show("pausemenu") hovered tt.Action("Show Quick Menu")
    imagebutton auto "ASSETS/UI/Journal %s.png" xpos 1720 ypos 16 focus_mask None action Show("pausemenu") hovered tt.Action("Open Journal")
    imagebutton auto "ASSETS/UI/Navigation %s.png" xpos 1650 ypos 16 focus_mask None action Show("pausemenu") hovered tt.Action("Quick Navigation")
 
    text tt.value style "tooltipcaption":         #---------- hover captions
        font "Market_Deco_0.ttf"
        size 20
        xalign 0.82
        yalign 0.03

Quick imagebutton breakdown:
imagebutton auto "ASSETS/UI/Navigation %s.png" xpos 1650 ypos 16 focus_mask None action Show("pausemenu") hovered tt.Action("Quick Navigation")
- Call your assets (ex) "Navigation idle" and "Navigation hover" so that renpy can find them
- Image button position on screen
- Whether you want the clicking to be pixel-perfect (which I don't suggest for small, single colour buttons like mine)
- What the button does (mine all call the 'pausemenu' for now, I dont have journal or navigation coded yet!)
- Caption for your hover state, lets people know what the button does

BONUS ROUND: Code for making tooltips.
Tooltips pop up when you hover over something. This is good for letting the player know what a button does, or adding a sassy comment, like in our game. You'll have to paste the code as-is, because I cobbled it together a while ago out of bits of code I found and I'm not sure what the individual components do. (On the other hand, if you know a way to clear it up, let me know!)

You need this in your init block at the beginning of script.rpy (maybe it'll work anywhere else, no idea!)

Code: Select all

init python:
    style.tooltipcaption = Style(style.default)
    style.tooltipcaption.font = "cour.ttf"
    style.tooltipcaption.kerning = 5
    style.tooltipcaption.xalign = 0.5
    style.tooltipcaption.yalign = 0.9

Then, each time you want to use it in a screen, you need to add

Code: Select all

screen proCabinSelect:
    default tt = Tooltip("")          # ---------- THIS LINE

    imagemap:
        ground "ASSETS/PROLOGUE/Cabin Car/Cabin Idle.png"
        hover "ASSETS/PROLOGUE/Cabin Car/Cabin Hovers.png"
        
        # ... bla bla all them hotspots...
        hotspot (318, 85, 226, 233) hovered tt.Action("> CLIMB OUT WINDOW") action Jump("proCabin")

        text tt.value style "tooltipcaption":          # ---------- MAYBE THIS BLOCK?
            text_align 0.5
            xalign 0.5

And you can see 'hovered tt.Action("> CLIMB OUT WINDOW")' right in the middle, which is where you add the text you want captioned.

That's basically it! If you find that your new GUI buttons are vanishing when calling certain screen, add "use quick_menu" to fix that.
Let me know how it works out for you!

ALSO: If you're a coding genius, I'd like to change the button that unhides the quickmenu buttons to a toggle, and remove the need for having a button to hide them again (ie. the "X" button in my example), but I haven't found anything about toggling imagebuttons :c UPDATE: Thanks to SundownKid, you can find the code to do just that right underneath!

[SundownKid]

If you want to toggle it you could probably do something like:

Code: Select all

init:
    $ pause_menu_open = False


screen quick_menu():         #---------- this line is super important, needs to match the "use quick_menu" line found in screens.rpy
    default tt = Tooltip("")         #---------- hover captions

    if pause_menu_open:
        imagebutton auto "ASSETS/UI/Pause %s.png" xpos 1810 ypos 20 focus_mask None action [Hide("pausemenu"), SetVariable("pause_menu_open", False)] hovered tt.Action("Hide Quick Menu")
    else:
        imagebutton auto "ASSETS/UI/Pause %s.png" xpos 1810 ypos 20 focus_mask None action [Show("pausemenu"), SetVariable("pause_menu_open", True)] hovered tt.Action("Show Quick Menu")
    imagebutton auto "ASSETS/UI/Journal %s.png" xpos 1720 ypos 16 focus_mask None action Show("pausemenu") hovered tt.Action("Open Journal")
    imagebutton auto "ASSETS/UI/Navigation %s.png" xpos 1650 ypos 16 focus_mask None action Show("pausemenu") hovered tt.Action("Quick Navigation")
 
    text tt.value style "tooltipcaption":         #---------- hover captions
        font "Market_Deco_0.ttf"
        size 20
        xalign 0.82
        yalign 0.03

Then you SHOULD be able to get rid of the X button. Tell me if that works.

[ileikturtles]

If you want to toggle it you could probably do something like:

Code: Select all

init:
    $ pause_menu_open = False


screen quick_menu():         #---------- this line is super important, needs to match the "use quick_menu" line found in screens.rpy
    default tt = Tooltip("")         #---------- hover captions

    if pause_menu_open:
        imagebutton auto "ASSETS/UI/Pause %s.png" xpos 1810 ypos 20 focus_mask None action [Hide("pausemenu"), SetVariable("pause_menu_open", False)] hovered tt.Action("Hide Quick Menu")
    else:
        imagebutton auto "ASSETS/UI/Pause %s.png" xpos 1810 ypos 20 focus_mask None action [Show("pausemenu"), SetVariable("pause_menu_open", True)] hovered tt.Action("Show Quick Menu")
    imagebutton auto "ASSETS/UI/Journal %s.png" xpos 1720 ypos 16 focus_mask None action Show("pausemenu") hovered tt.Action("Open Journal")
    imagebutton auto "ASSETS/UI/Navigation %s.png" xpos 1650 ypos 16 focus_mask None action Show("pausemenu") hovered tt.Action("Quick Navigation")
 
    text tt.value style "tooltipcaption":         #---------- hover captions
        font "Market_Deco_0.ttf"
        size 20
        xalign 0.82
        yalign 0.03

Then you SHOULD be able to get rid of the X button. Tell me if that works.

Ah you're great it worked like a charm I had tried something like that but I didn't know how to use the SetVariable, so you can imagine the mess I made.

One tiny issue was that I wanted the diamond button to toggle the textbutton bar, not the two other GUI icons. But that was easy to fix, just made sure they were present in both the If/Else conditions. I also made a new set of diamond icons, inverting the idle and hover states, to better represent the toggling action (ie. it looks like the button is "on" or "off"), but that's cosmetic since everything is clearly labelled. Posting the edits for posterity:

Code: Select all

screen quick_menu():
    default tt = Tooltip("")
    
    if pause_menu_open:
        imagebutton auto "ASSETS/UI/Pause2 %s.png" xpos 1810 ypos 20 focus_mask None action [Hide("pausemenu"), SetVariable("pause_menu_open", False)] hovered tt.Action("Toggle Quick Menu")
        imagebutton auto "ASSETS/UI/Journal %s.png" xpos 1720 ypos 16 focus_mask None action Show("pausemenu") hovered tt.Action("Open Journal")
        imagebutton auto "ASSETS/UI/Navigation %s.png" xpos 1650 ypos 16 focus_mask None action Show("pausemenu") hovered tt.Action("Quick Navigation")
    else:
        imagebutton auto "ASSETS/UI/Pause %s.png" xpos 1810 ypos 20 focus_mask None action [Show("pausemenu"), SetVariable("pause_menu_open", True)] hovered tt.Action("Toggle Quick Menu")
        imagebutton auto "ASSETS/UI/Journal %s.png" xpos 1720 ypos 16 focus_mask None action Show("pausemenu") hovered tt.Action("Open Journal")
        imagebutton auto "ASSETS/UI/Navigation %s.png" xpos 1650 ypos 16 focus_mask None action Show("pausemenu") hovered tt.Action("Quick Navigation")
 
    text tt.value style "tooltipcaption":         #---------- hover captions
        font "Market_Deco_0.ttf"
        size 20
        xalign 0.82
        yalign 0.03

Thanks again!

[Jibus]

I used this tutorial to make a hidden menu. Thank you for sharing !

It's working fine for me. But I would like to pause the game when the hidden menu is visible. In order to continue the game, the user will have to close the hidden menu first.

How can I achieve this ?

[matitora]

With modal you can block everything under a screen. And with xfill and yfill you can expand the screen other the whole window.

My idea: A screen, which blocks everthing and other it the menu.

Hope this helps, I'm myself new to ren'py.

Short example:

Code: Select all

screen blockframe():
    modal True
    frame:
        xfill True
        yfill True
        vbox:
            textbutton "Close" action Hide("blockframe") # later the button is of course in the menu and not here

label start:
    "Some text."    

    show screen blockframe
    # open here the menu so it's in the layer over the screen blockframe
    window hide
    pause

    "More text."