IMAGEMAPTOOLS

Context:
For my theme roulette 2 entry I needed multiple imagemaps and some "imagebuttons" (aka icons).

I wrote the attached python scripts for helping with creating those.

I'm publishing these scripts here in the hope that somebody might find them useful.

Installation:
You don't really need to "install" the scripts themselves. Just drop them where you need them ;)

To run them you first have to install python 2.7, along with imagemagick and python wand. Detailed instructions can be found here.

Content:

• mk_halo.py
• findstuff.py
• mk_icon.py

Usage mk_halo.py / findstuff.py:
Let's say you have a background picture like this:

and you want to use this for an imagemap in which the upper bookshelf and the picture on the wall are used as "hotspots".

You'd first have to cut out those hotspots using something like gimp or photoshop:


Using something like you'd get:


For using this in - for example - a renpy project you would need to tell your script where to look for the hotspots ... this is what "findstuff.py" is for:

You'll get:


Inside a renpy project you might use it like:


Result:
When the screen my_map is called it would display the original background image.
Whenever the player moves the mouse over either the picture or the bookshelf ren'py displays the hilighted version of the corresponding hotspot.
If the user clicks on either spot the result is passed to the calling script.

Usage: mk_icon.py
Ren'py's imagebuttons have several states: idle, hover, selected_idle, selected_hover (and insensitive)

For my project I used a bunch of 64x64 icons on a transparent background. The different states are visualized by using surrounding the original icon by a halo of a different color for each state (idle=no halo, hover=teal halo, selected_idle=yellow, selected_hover=white).

creates images for each of these as theicon_idle.png, theicon_hover.png, theicon_selected_idle.png and theicon_selected_hover.png (each 72x72 to allow room for the halo).