Changing cursor graphic over a hover on an imagemap hotspot

[kengkeng]

Hello everyone!

I would like to change my cursor to a magnifying glass graphic when it hovers over a certain hotspot on an image map. I am new to coding, so I figured this is the kind of approach I want to take. But, again, I am not sure at all and I was wondering if anyone can guide me a little?

I found a piece of code from this thread here and I modified it as such:

Code: Select all

define config.mouse = {
    "default" : [("gui/cursor_default.png", 0, 0)],
    "imagemap" : [("gui/magnify.png", 0, 0)]
    }

My questions are: How can I ensure that this code is using the correct screen? Not all of my screens have hot spots. How can I find the x-offset/y-offset numbers? when I grab the coordinates in the image selection picker, I get four coordinates but I don't know which is which.

Is there a better way to do this? Thanks!

PS.

I just finished reading this documentation about configuring cursors:
https://www.renpy.org/doc/html/config.h ... nfig.mouse

The problem is, it doesn't really explain the code in closer detail that would help me.

[midgethetree]

The button and bar style properties include a property called mouse which can be used to define what cursor is shown when they're hovered over, and hotspots are a kind of button so they can take advantage of this. So to have that cursor used on all hotspots, use:

Code: Select all

style hotspot:
    mouse "imagemap"

To have it only affect a specific imagemap or screen, use style prefixes. Using an example from the documentation for imagemaps modified to show this, this could look like so:

Code: Select all

screen preferences():

    tag menu
    use navigation

    imagemap:
        style_prefix "pref"

        auto "gui_set/gui_prefs_%s.png"

        hotspot (740, 232, 75, 73) action Preference("display", "fullscreen") alt _("Display Fullscreen")
        hotspot (832, 232, 75, 73) action Preference("display", "window") alt _("Display Window")
        hotspot (1074, 232, 75, 73) action Preference("transitions", "all") alt _("Transitions All")
        hotspot (1166, 232, 75, 73) action  Preference("transitions", "none") alt _("Transitions None")

        hotbar (736, 415, 161, 20) value Preference("music volume") alt _("Music Volume")
        hotbar (1070, 415, 161, 20) value Preference("sound volume") alt _("Sound Volume")
        hotbar (667, 535, 161, 20) value Preference("voice volume") alt _("Voice Volume")
        hotbar (1001, 535, 161, 20) value Preference("text speed") alt _("Text Speed")

style pref_hotspot:
    mouse "imagemap"

style pref_hotbar:
    mouse "imagemap"

You can also set this individually for different hotspots, like so:

Code: Select all

screen preferences():

    tag menu
    use navigation

    imagemap:
        auto "gui_set/gui_prefs_%s.png"

        hotspot (740, 232, 75, 73) action Preference("display", "fullscreen") alt _("Display Fullscreen") mouse "imagemap"
        hotspot (832, 232, 75, 73) action Preference("display", "window") alt _("Display Window") mouse "imagemap"
        hotspot (1074, 232, 75, 73) action Preference("transitions", "all") alt _("Transitions All") mouse "imagemap"
        hotspot (1166, 232, 75, 73) action  Preference("transitions", "none") alt _("Transitions None") mouse "imagemap"

        hotbar (736, 415, 161, 20) value Preference("music volume") alt _("Music Volume") mouse "imagemap"
        hotbar (1070, 415, 161, 20) value Preference("sound volume") alt _("Sound Volume") mouse "imagemap"
        hotbar (667, 535, 161, 20) value Preference("voice volume") alt _("Voice Volume") mouse "imagemap"
        hotbar (1001, 535, 161, 20) value Preference("text speed") alt _("Text Speed") mouse "imagemap"

[m_from_space]

Code: Select all

define config.mouse = {
    "default" : [("gui/cursor_default.png", 0, 0)],
    "imagemap" : [("gui/magnify.png", 0, 0)]
    }

My questions are: How can I ensure that this code is using the correct screen? Not all of my screens have hot spots. How can I find the x-offset/y-offset numbers? when I grab the coordinates in the image selection picker, I get four coordinates but I don't know which is which.

This statement defines different mouse cursors to use within your game.
"default" -> the default cursor to use
"imagemap" -> this is just a self-defined name, it does *not* refer to imagemaps, but you can now use this name in the "mouse" property of an object that takes button properties (like button, textbutton, imagebutton, hotspot), like @midgethetree already explained.

The two coordinates within the cursor just specify where the focus point of the mouse cursor is. ...0, 0 is the top left corner of the cursor image. So if the mouse cursor has a size of 24x24px and you want the focus point to be in the middle, you just write ...12, 12

The coordinates of the image selection picker are for defining hotspots more easily. So just pick an area (x, y, width, height) with the picker and use it like:

Code: Select all

hotspot (x, y, width, height) action NullAction() mouse "yourmouse"

Is there a better way to do this? Thanks!

For areas that need interaction it's the best way. But if you ever want to change your mouse cursor within your game on demand, you can just write

Code: Select all

$ default_mouse = "yourmouse"

Where "yourmouse" refers to a specific name you defined in config.mouse ('default', 'imagemap' in your case)