I am far from a graphics expert myself. (I'm still using Photoshop 6... NOT CS6... actual 6.0 from Sept 2000).
While trying to figure out how I would do it, I found this website.
You must be registered to see the links
I've not checked it's usage restrictions or licencing. If asked, I'd argue out that I'm using their images here for non-commercial educational/training purposes - which I'd consider fair-use. Fingers crossed nobody ever notices. But if you use it, please use your own judgement and investigate more than I did.
But here's how I'd do two navigation map images with my limited skills...
- Create a map I'm happy with and save it.
- Draw a selection line around each of your "hotspots". (either a circle, square or a drawn shape around the edge of each icon).
- I'd add an outer glow to my selection.
- Then increase the contrast and brightness of my selected area by 30% for each.
- Rinse and repeat for each of the icons I want to be clickable.
- Save the new map under a slightly different name.
map1 is your idle image. map2 is your hover image. Though a better name would be map_idle.jpg and map_hover.jpg. Or .png or .webp or whatever format you are using.
Then use the "imagebutton" logic I described earlier.
My very quick and dirty map created using the icograms website ended up looking like this...
I could only bothered tweaking 1 house for the purposes of my explanation... it looks like this...
My selection was drawn around the shape shape of the house.
Again, this was just me doing "select house shape", then add glow and increase brightness and contrast of the house shape by 30%.
Obviously you could add names next to each house or have the names as being part of the "hover" image only. Or any number other of alternatives, depending on your map and how big each icon/house is.
As I understand it, RenPy would just look for the differences between the two images (the glow and the altered brightness/contrast) and use those to outline the area to be used as a button. You point the imagebutton at a single pixel within the two pictures and RenPy expands outwards from that point until it's figured out the boundaries of the differences. Which was why I chose to increase both the brightness and contrast for the house.
The code example in the other thread looks like this:
Code:
imagebutton auto "city_map_myhouse_%s.png" xpos 1230 ypos 222 focus_mask True action Call("myhome")
Where "%s" is filled in as both "idle" and "hover" by RenPy to give filenames for your two images. "xpos" and "ypos" define a point within your image to look for differences. And "myhome" is a RenPy label to either call or jump to. (I think I'd prefer to jump rather than call - but I guess it depends on how your game is structured).
So you end up with it looking a little like this when you mouse over it...
I haven't explained everything. But I hope I've shown that it's pretty easy as long as you can select specific parts of your image and know how to adjust stuff like contrast and brightness of that selected area. The outer glow could be considered overkill.
I'm sure you can find better map graphics than I did. Again, I just wanted to point out that you don't need to be an artist to create a map. Just "borrow" other people's images/tools.