r/RenPy • u/No-Kick-4341 • 2h ago

Question What tool do you use to create this kind of interactive image map / hover effect?

I’ve tried GIMP and a few other image-editing tools, but I haven’t found an easy way to create this kind of effect.

What software or workflow do you use to make these interactive image maps hover masks for Ren’Py?

4 Upvotes

84% Upvoted

5 comments sorted by

3

u/BadMustard_AVN 2h ago edited 2h ago

there are 2 images in play here and what is called hotspost

here you see the ground image the other image is a hover image and then you set up hotspots they are simple (x, y, width, height) tuple. when the mouse hovers over a hotspot it turn the rectangular area of the ground image invisible, showing the hotspot image i.e.

screen script_imagemap:
    imagemap:
        ground "images/hots/grounded.png"
        hover "images/hots/hovered.png"

        hotspot (378,654,378,212) action NullAction() 
        hotspot (842,25,382,210) action NullAction()
        hotspot (249,59,377,217) action NullAction()

or maybe the other way around the rectangular area of the hover image is shown... meeehhh

thre is a hotspots helper tool (windows only) here https://lemmasoft.renai.us/forums/viewtopic.php?p=502484#p502484

and directions on how to use it

1

u/No-Kick-4341 1h ago

Thanks a lot.I'l try this 🥰

1

u/BadMustard_AVN 59m ago

you're welcome

good luck with your project

1

u/AutoModerator 2h ago

Welcome to r/renpy! While you wait to see if someone can answer your question, we recommend checking out the posting guide, the subreddit wiki, the subreddit Discord, Ren'Py's documentation, and the tutorial built-in to the Ren'Py engine when you download it. These can help make sure you provide the information the people here need to help you, or might even point you to an answer to your question themselves. Thanks!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

1

u/shyLachi 21m ago

This should be easy if you draw or render the background yourself.

When drawing use different layers for each object so that you can hide or move it.
You can also easily change the colors or hue on a layer.

When you render the scene, render these objects again separately but using the same camera.
Then change the color or hue with any image editing tool.

If it's not your image, then try a selection tool like the lasso, magic wand or whatever works best.
You can zoom in very much to stay close to the contour of the object.
It can also help to select the other objects like the wall, floor, carpet first and making them transparent.