Slide in menu when hovered

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.
Post Reply
Message
Author
muazamkamal
Newbie
Posts: 2
Joined: Sat Jan 20, 2018 7:20 pm
Tumblr: muazamkamal
Deviantart: muazamkamal
Github: muazamkamal
Soundcloud: muazamkamal
Contact:

Slide in menu when hovered

#1 Post by muazamkamal » Sun Jan 21, 2018 4:29 am

Hello guys. I've spent countless hours trying to get it to work, went through different iterations of code, but I can't get it to work the way I want to.

I plan on making a hidden quick menu buttons (the one at the bottom of the screen). The idea is to change it to vertical (vbox) and hid it to the right of the screen, with a little bit the triangle showing (grey triangle).
hidden-02.png
When hovering on the triangle, it will(should) slide in with the menu.
show-02.png

First iteration; mousearea. Immediate problem. The hover area is dynamic and changes with the animation of the triangle/menu.

Second iteration; imagebutton with Animation and Transformation Language (ATL). Okay, it works fine with the triangle. But it doesn't include the menu (textbutton).

Third iteration and current; button (acting as a container). This is the furthest I could get before giving up and decided to ask for help. Slide animation work with the triangle, and the textbuttons follow with it. Sadly there are two major issues with this.
1. Quoted from here
If zero, two, or more children are supplied, they are implicitly added to a fixed, which is added to the button.
Although the animation works, it's fixed at xpos 0 ypos 0.

2. The hover is strictly the grey triangle. And since the textbutton is ontop of it, when the cursor goes ontop of the textbutton, it's considered as unhovered.


Here's the code (I've attached the quickmenu.png as well, if you need that)

Code: Select all

label start:
    scene black
    show screen qm
    "Hello"
    pause

screen qm:
    button:
        add "quickmenu"
        vbox:
            xalign 0.055 yalign 0.01
            style_prefix "quick"

            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')
        action NullAction()
        at slidein
        focus_mask True
        # xpadding 0 ypadding 0
        # xalign 1.0 yalign 1.0

image quickmenu:
    "../gui/quickmenu.png"

transform slidein:
    # on hover:
    #     ease 0.3 xalign 1.0
    # on idle:
    #     ease 0.3 xalign 1.1

    # Temporary transition
    on hover:
        ease 0.3 xpos -50
    on idle:
        ease 0.3 xpos 0
Any help is appreciated (and much needed). Thank you in advance!
Attachments
quickmenu.png
quickmenu.png (2.21 KiB) Viewed 285 times

User avatar
Farryn
Regular
Posts: 33
Joined: Wed May 10, 2017 10:15 pm
Projects: Diplomatic Relations
IRC Nick: Farryn
Tumblr: princessdealtry
Contact:

Re: Slide in menu when hovered

#2 Post by Farryn » Sun Jan 21, 2018 6:20 pm

Is this thread of any help? It toggles a menu in-and-out when a button is clicked:
viewtopic.php?p=128619

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

Re: Slide in menu when hovered

#3 Post by philat » Mon Jan 22, 2018 1:36 am

If I think about this more, there may be a better way, but for now, here's something that works, albeit with some unwieldy code. Massage numbers further as you see fit. You could also do it with an imagebutton and just position the vbox to overlap the imagebutton.

One thing: button is fullscreen unless given a size (put a background on the button of Solid("#fff6") (semitransparent white) and you'll see what I mean) so hover/unhover would be wonky without specifying a size. That's probably why the positioning was off for you.

Code: Select all

screen qm:
    default i = False
    button:
        xalign 1.15
        yalign .98
        xsize 199
        ysize 277

        add "quickmenu"
        focus_mask True

        action NullAction()
        hovered SetScreenVariable("i", True)
        unhovered SetScreenVariable("i", False)

        if i:
            at slidein
        else:
            at slideout

        vbox:
            xalign 0.5 yalign 0.5
            style_prefix "quick"

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

transform slidein:
    ease 0.3 xoffset -150
transform slideout:
    ease 0.3 xoffset 0

muazamkamal
Newbie
Posts: 2
Joined: Sat Jan 20, 2018 7:20 pm
Tumblr: muazamkamal
Deviantart: muazamkamal
Github: muazamkamal
Soundcloud: muazamkamal
Contact:

Re: Slide in menu when hovered

#4 Post by muazamkamal » Wed Jan 24, 2018 4:19 am

philat wrote:
Mon Jan 22, 2018 1:36 am
If I think about this more, there may be a better way, but for now, here's something that works, albeit with some unwieldy code. Massage numbers further as you see fit. You could also do it with an imagebutton and just position the vbox to overlap the imagebutton.

One thing: button is fullscreen unless given a size (put a background on the button of Solid("#fff6") (semitransparent white) and you'll see what I mean) so hover/unhover would be wonky without specifying a size. That's probably why the positioning was off for you.

Code: Select all

screen qm:
    default i = False
    button:
        xalign 1.15
        yalign .98
        xsize 199
        ysize 277

        add "quickmenu"
        focus_mask True

        action NullAction()
        hovered SetScreenVariable("i", True)
        unhovered SetScreenVariable("i", False)

        if i:
            at slidein
        else:
            at slideout

        vbox:
            xalign 0.5 yalign 0.5
            style_prefix "quick"

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

transform slidein:
    ease 0.3 xoffset -150
transform slideout:
    ease 0.3 xoffset 0
Alright, nice. I didn't occur to me to use variables. Thank you for the solution!

Quick question. Since the reason why the hover still works is that of all the individual "hovered SetScreenVariable("i", True)" for the textbutton. But if I were to use imagebutton (which would require it to have their own hover images), how do I keep the "triangle" on the screen even when hovering on the imagebutton?

And another small thing is, with the current code, sometimes the "triangle" stayed in the sliding in position. Not entirely sure why, but I manage to recreate the problem by hovering on it and moving the cursor to the far right (off screen) and loop back around (not over) the "triangle". Not quite sure how to fix that though.

Anyway, much thanks!

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

Re: Slide in menu when hovered

#5 Post by philat » Sun Jan 28, 2018 9:55 pm

muazamkamal wrote:
Wed Jan 24, 2018 4:19 am
But if I were to use imagebutton (which would require it to have their own hover images), how do I keep the "triangle" on the screen even when hovering on the imagebutton?
I don't understand the question. The hover image is not related to the hovered action.
muazamkamal wrote:
Wed Jan 24, 2018 4:19 am
And another small thing is, with the current code, sometimes the "triangle" stayed in the sliding in position. Not entirely sure why, but I manage to recreate the problem by hovering on it and moving the cursor to the far right (off screen) and loop back around (not over) the "triangle". Not quite sure how to fix that though.
I was unable to reproduce the problem on latest ren'py. Once I moved the mouse off-screen, unhovered kicked in.

Post Reply

Who is online

Users browsing this forum: IaMe