[Ren'Py] Need help with imagemaps- "Alpha True" not working as intended.

[Vanderer]

So, for the navigation inside the buildings of my game i decided to use imagemaps.

Everything work as intended with the test i have done, the parts that i want to be highlighted are so, except one thing: the Alpha property. The whole hotspot can be clicked, even tough the aeras wich are tranparent in the hover picture flicker...

My code:

screen mcbedroom():

    imagemap:

        idle "mcroommap_idle.png"
        hover "mcroommap_hover.png"
        alpha True
        
        hotspot (481, 220, 185, 259) action Jump ("hallwaylabel")
        hotspot (1298, 372, 101, 73) action Jump ("computerlabel")
        hotspot (628, 516, 1283, 562) action Jump ("mcbedlabel")

It should work....i searched for an hour but the only guy who had the same problem did not find a solution...
I also attached the whole project in case you need to see it for yourself. The problematic aera is on the right side of the bed.

Thank you in advance.

 

[KiaAzad]

Imagemages are a pretty old concept in renpy, may I suggest ditching it for the far better imagebuttons or simple buttons with images in them?

 

[Vanderer]

Well, i use buttons with images for my world map. But imagemaps would make the production, and updting, of the differents aeras of the house a lot faster. 2 images, 5 minutes in Gimp and i am done...

If i understand right, for the use i have of them (make doors and furniture clickable) i will have to do a separate image for each clickable object.

Sure, in the end it's not that much work but the imagemap solution is so simple....and do exactly what i want if i could get that damn alpha property to work as intended.

 

[Vanderer]

Ho yeah, and if i am correct you can only have rectangular shape with image button and use focus mask. I suppose i could make the background of these buttons tranparent, and use focus mask, but it's annoying.

 

[KiaAzad]

well, when I started with renpy, I compared the two methods and imagemaps seemed like the inferior method, that's why I never touched them and I never encountered a situation that imagemaps came on top even with more than 50 clickable objects on the screen

 

[Vanderer]

Actually your post make me reevaluate my method. And you are right, of course.

If i am not wrong, it will be far more easy to make characters being there or not depending on a varirable. Or characters having differents outfits.
With imagemaps i have to make a whole new block every time.
With imagebutton i just have to add a button with the character on a transparent background and make her there with a conditional statement. It's seems far more flexible for long term.

So yeah imagebutton seems better for everyting except perhaps for locations were the content will never change.


So yeah, i tried to do the same with imagebutton and it works and i am gonna use that. Thank you for the advice man.

 

[mickydoo]

I use imagemaps still, they have their uses, I have to ask though why the alpha though? I have never used it.

 

[Vanderer]

The alpha was so the only the highlighted aera was clickable. The aera you i wanted to hotspot was not a rectangle.

It work like focus_mask for imagebuttons, by making the transparent aeras of an image not part of the hotspot.

 

[Winterfire]

Are you sure alpha is a bool?
It may be different in imagemaps but in my projects alpha (at least in images) has always been a float.

Perhaps you could try Alpha 1? (So "True")
Likewise 0.5 Semitransparent and 0 invisible.

 

[anne O'nymous]

    imagemap:

        idle "mcroommap_idle.png"
        hover "mcroommap_hover.png"
        alpha True

Hmm, I'm not sure that you understood the

You must be registered to see the links

statement correctly. But to be fair, it's far to be clearly explained and I'm not sure that myself understood it correctly ; I don't really need to use it, and my tries were too long ago for me to be sure of what I remember of them.

The idle and hover properties are mutually exclusive. It mean that when Ren'py will display "mcroommap_hover.png" inside the area of a hot spot, it will not display "mcroommap_idle.png" in the said area. Therefore, your two images include the whole background, which lead to the impossibility to use the alpha property :

If true, the default, a hotspot only gains focus when the mouse is in an area of the hover image that is opaque.

For me, it mean that both the idle, hover, selected_idle and selected_hover properties need to use an image that have a full transparent background, except for the parts that will act as buttons. While the image given as ground property will be used as background and always displayed.

Therefore, the alpha property can't works the way you use imagemap, and you should have had something like this :

    imagemap:
        # The whole image
        ground "mcroommap_background.png"
        # Only the part that are hot spot, everything else is transparent
        idle "mcroommap_idle.png"
        # Only the part that are hot spot, everything else is transparent
        hover "mcroommap_hover.png"

This said, like said by KiaAzad , using

You must be registered to see the links

is way better. It need a little more works at first, because you need to position it at the right place. But after this it's more flexible and it offer you more possibilities.

 

[KiaAzad]

I have a tip that might make your life easier dealing with imagebuttons:
if you press control+t in photoshop and set the origin point to the top right, it gives you an accurate x and y position that you can use in renpy to place your imagebuttons.


I know that's still lots of work to copy every layers xypos into renpy scripts if you have upwards of hundreds of objects to place but hey, that's where us freelances come into play, I've been doing these boring stuff for people for a long time.

 

[Vanderer]

Are you sure alpha is a bool?

Yep, 100% sure. beside alpha is default and the code act the same without it.

For me, it mean that both the idle, hover, selected_idle and selected_hover properties need to use an image that have a full transparent background, except for the parts that will act as buttons. While the image given as ground property will be used as background and always displayed.

For me, i understood "the aera of the hover images that is opaque." as basically: That makes the mouse recognise the transparency in the hover image and ignore everything that is transparent, even on the hotspot .

Code i saw on lemmasoft tended to agree with that.

Beside, i tested it with

ground

in place of idle with the same result.

Again, from my understanding, you can get away without ground image if your button are part of the background. But i did try the way you did it too, to no avail.
I truly believe it was not the problem: When inside the hotspot, but in a transparent aera of the hover image, the button acted weirdly.

Anyway, i don't intend to use imagemaps anymore so the point is moot....but if you are interested you can look at the attachment.

I have a tip that might make your life easier dealing with imagebuttons:
if you press control+t in photoshop and set the origin point to the top right, it gives you an accurate x and y position that you can use in renpy to place your imagebuttons.

I use Gimp...and use renpy "image location picker" to do that.
But i use whole screens like if they were layers so xpos and ypos are 0. Except for the characters.
It take more space true, but i don't have that many interactive objects.
It is bad a bad way to do that?

 

[anne O'nymous]

Code i saw on lemmasoft tended to agree with that.

It's possible. Like I said, my last use was long ago and I don't remember it really well.

But i use whole screens like if they were layers so xpos and ypos are 0. Except for the characters.
It take more space true, but i don't have that many interactive objects.
It is bad a bad way to do that?

By default an imagebutton is clickable on all its surface, whatever the transparency.
I often use things like imagebutton idle Solid( "#00000000" ) action NullAction() when I need to block a click and can't edit the original screen.

Therefore, if you have two clickable on the same screen, one will be unusable, unless you put focus_mask at True to limit the button to what is not transparent.

 

[Vanderer]

I did use focus_mask in the code of the screen i already finished. I intend to use conditional statements to make appear/disappear character depending on their schedule. Looking back, it's a far better solution than imagemaps.

No need to rewrite a whole map everytime i add something, just the character/item with a transparent background rather than having to redo a new picture for every combo possible. Probably better in term of size too.

 

[KiaAzad]

I use Gimp...and use renpy "image location picker" to do that.

never worked with Gimp but should have something that shows you the position of each layer somewhere.
and I never noticed renpy has a location picker, I wrote my own location picker to cover that long ago, it's available on my GItHub if you want a slightly more convenient tool for that:

You must be registered to see the links

 

[Vanderer]

Thank you for your dev tools, i am gonna try them for sure. It seems like there are some very useful thingd in them. Very nice of you.

If you want to try it the location picker of renpy is avaiable in the developper menu (shift-d).