Custom icon based Quick Menu [Using ImageButtons]

[Purukitto]

A simple guide to make custom quick menu using imagebuttons.
Our end result will look something like this:


First you need the icons (images) for your buttons, I have attached my menu button design for reference

qm_Menu.rar

(2.11 KiB) Downloaded 92 times

Just remember for best results you should have 5 variants of every icon (as in my menu example):

• idle
• hover
• insensitive
• selected_idle
• selected_hover

Make the icons for however many Quickmenu options you want.

Next, the code:
Go to `screens.rpy` and find the "screen quick_menu()" and comment out the text buttons.

Code: Select all

screen quick_menu():

    ## Ensure this appears on top of other screens.
    zorder 100

    if quick_menu:
    	hbox:            

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

Now we can make a nested Vbox>Hbox structure to arrange our imagebuttons to make rows and columns, in my example I have these 8 Icons (Back, Hide, Skip, Save, Load, History, Auto and Menu) that I want to arrange, so the resulting code would be:

Code: Select all

screen quick_menu():

    ## Ensure this appears on top of other screens.
    zorder 100

    ## You can hide the quick menu if you need to by making quick_menu = False
    if quick_menu:

	## Parent Vbox
        vbox:
     	    ## Aligning it to the bottom right, Change the align values to change the position of the quickmenu 
            xalign 1.0
            yalign 1.0
            yoffset -10
            
            style_prefix "quick"
            
            ## Vertical spacing between the icons
            spacing 10

            hbox:
                xalign 0.5
                spacing 10
                imagebutton auto "gui/qm_back_%s.png" action Rollback()
                imagebutton auto "gui/qm_hide_%s.png" action HideInterface()

            hbox:
                xalign 0.5
                spacing 10
                imagebutton auto "gui/qm_skip_%s.png" action Skip() alternate Skip(fast=True, confirm=True)
                imagebutton auto "gui/qm_qs_%s.png" action QuickSave()
                imagebutton auto "gui/qm_ql_%s.png" action QuickLoad()

            hbox:
                xalign 0.5
                spacing 10
                imagebutton auto "gui/qm_hist_%s.png" action ShowMenu('history')
                imagebutton auto "gui/qm_auto_%s.png" action Preference("auto-forward", "toggle")
                imagebutton auto "gui/qm_menu_%s.png" action ShowMenu('preferences')

            hbox:
                xalign 0.5
                text "  - QUICK MENU -  "

Play around with the buttons and you can achieve almost any layout you want to. I hope it helps!