Ren'Py Hover on main menu

[chickenscratchgames]

So I finally am trying to add a custom main menu to my game so I figured out how to do it


so that was my early version but then I wanted to do something fancy and have a spotlight highlight each option the spotlight image is 1920 by 1080 but I have no idea how to code it to work since this my first time. The image below is when the mouse is hovering over start.


my code is the issue I know but if anyone can tell me how to properly do it I would appreciate it. my code right now is,
imagebutton auto "gui/mm_start_%s.png" xpos 765 ypos 787 focus_mask True action Start()
which works for a hover and idle sharing the same dimensions but not when you want a spotlight because the dimensions are to different.

 

[rayminator]

you can do it something like this all you need is one image

You must be registered to see the links

imagebutton insensitive "gui/bar/left.png" idle "gui/bar/left.png" hover im.MatrixColor("gui/bar/left.png", im.matrix.tint(0.9, 0.9, 1.0)) xalign 0.5 action Show("navigation")

 

[79flavors]

My initial reaction is that you're not going to be able to do the "spotlight" thing. Especially if that spotlight overlays a large part of the screen.

You must be registered to see the links

includes something called

You must be registered to see the links

. In effect, it means that any part of the image that is transparent (opacity=0) can not be clicked, but any part of the image that is even barely visible can be clicked. It's how you can have circular buttons for example.

The problem is that before you move the mouse over it, it uses the idle image as the template for where can be clicked and where can't. But as you move the move over it and trigger hover, the hover image becomes the template for where is clickable or not. Since your hover image would include the spotlight itself, even if it's only 40% opacity, it will still become part of the clickable area. You might be able to get it to work effectively by having a very narrow spotlight, but likely - the spotlight will make large parts of the screen unclickable (which might be other buttons).

Because you can use transparency, focus_mask means your idle and hover images can be the full size of your screen (which makes positioning much easier).

I talked about all this in another thread: here.

BUT...

While searching to update my links, I found

You must be registered to see the links

.

Now I'm wondering if you could code the buttons as normal using transparency and focus_mask, but also have a rectangular mousearea around each button, where the action() causes the various pictures representing the spotlight to be toggled on/off. Perhaps by setting a variable and that variable is checked within the screen(): to show the overlaid spotlight images or not.

It might be possible. So my answer becomes... maybe.

 

[79flavors]

Okay. Got it.

Needed hovered and unhovered too. Didn't use mousearea as a result.

Spoiler: The code I tried...

You don't have permission to view the spoiler content. Log in or register now.

Try it yourself by downloading this:

You must be registered to see the links

 

[anne O'nymous]

Okay. Got it.

You got to far.

I haven't tested it, but your idea should be able to works with just

You must be registered to see the links

.
If it's set at True, it would effectively lead to the issue you pointed, but you can also set it by using a displayable. Therefore, you can use the idle image as mask for the hover one, and still only have the part that is effectively "the button" to be clickable.

Something like:

imagebutton:
    idle "myButton.jpg"
    hover "myButton_spotlight.jpg" # or Rayminator approach
    focus_mask "myButton.jpg"
    [...]

should permit to have the effect you described.

 

[chickenscratchgames]

Okay. Got it.

Needed hovered and unhovered too. Didn't use mousearea as a result.

Spoiler: The code I tried...

You don't have permission to view the spoiler content. Log in or register now.

Try it yourself by downloading this:

You must be registered to see the links

I tried to do it and it worked kind of, but not at the title screen, maybe you can help me figure out the issue? it just won't load the image

You must be registered to see the links

 

[79flavors]

The problem is that the spotlight is being shown, but behind the other images.

I did some messing with zorder and some other stuff. It basically gets messy.

As Anne pointed out, I'd gone a little too far with my solution and it could be simplified by letting the focus_mask be controlled exclusively by the idle image.... so I did that...

screen navigation():

    # -- snip ---

            imagebutton:
                focus_mask "gui/xx_start_idle.png"
                auto "gui/xx_start_%s.png"
                action Start()

Where I created two new images, both 1920x1080, where the idle image if just the button and the hover image is the button overlaid by the spotlight.




Since the hover image replaces the idle image while the mouse is hovered, they need to be the same size (or at least the same x/y positions)... and since the hover is almost full screen, might as well make both full screen (plus it's easier to position that way). You'd think a full sized image would be bigger than a cropped version of the same image... but only a tiny fraction.

I then swapped idle and hover for auto, since the filenames both contain "idle" and "hover" (RenPy replaces the "%s" with those names).

Because the hover image is now on the same layer as the idle image, it's shown without issue. Honestly, this is more about me not understanding zorder beyond the basic "bigger number on top of lower numbers" and not really following where zorder should be used properly.

Anyway, works and tested. Just needs you to recreate the idle and hover images for each of your menu options in a similar way to what I did with these two example images.

 

[anne O'nymous]

Honestly, this is more about me not understanding zorder beyond the basic "bigger number on top of lower numbers" and not really following where zorder should be used properly.

I think that it's more a question of display order.

Since you display the spotlights after the button, they'll intercept the events on the surface they cover (or covered by their mask).
It's a trick I sometimes use with my mods, I put a full transparent imagebutton that cover all the screen, and on top I put a drop menu or something like this.

        imagebutton:
            idle Solid( "#00000000" )
            xpos 0 ypos 0
            xsize config.screen_width
            ysize config.screen_height
            action NullAction()

And hop, it now looks like I opened a modal screen. Whatever is displayed before this imagebutton become insensitive.


Normally if you inverse the imagebutton and add, it should works fine. This way the buttons would be displayed on top of the spotlights, and will get the events.

screen whatever():

    [...]

    if spotlight1:
        add "buttons/spotlight1.png"

    if spotlight2:
        add "buttons/spotlight2.png"

    imagebutton:
        focus_mask True
        idle im.MatrixColor("buttons/button1.png", im.matrix.desaturate())
        hover "buttons/button1.png"
        hovered SetScreenVariable("spotlight1", True)
        unhovered SetScreenVariable("spotlight1", False)
        action NullAction()

    imagebutton:
        focus_mask True
        idle im.MatrixColor("buttons/button2.png", im.matrix.desaturate())
        hover "buttons/button2.png"
        hovered SetScreenVariable("spotlight2", True)
        unhovered SetScreenVariable("spotlight2", False)
        action NullAction()

 

[chickenscratchgames]

hey just wanted to say thank you guys very much! I learned a lot and finally got it working I went with what 79flavors suggested because it was easy for me to do, but also this helped me with future parts of the game. I really want to thank you guys again! Also thanks everyone for not making fun of the fact I left the buttons accesible on the save menu in the demo I gave you. I don't use the save menu often and didn't realize the image buttons would stay because of where they were in the code lol.