Circular/Overlapping Imagemap Hotspots? [Solved]

Discuss how to use the Ren'Py engine to create visual novels and story-based games. New releases are announced in this section.
Forum rules
This is the right place for Ren'Py help. Please ask one question per thread, use a descriptive subject like 'NotFound error in option.rpy' , and include all the relevant information - especially any relevant code and traceback messages. Use the code tag to format scripts.
Post Reply
Message
Author
User avatar
yon
Regular
Posts: 174
Joined: Tue Sep 09, 2014 5:09 pm
Projects: YDSP
Soundcloud: tetra-yon
itch: v-ual
Location: United States
Contact:

Circular/Overlapping Imagemap Hotspots? [Solved]

#1 Post by yon »

I'm trying to work on an imagemap for my game, and this is what I have so far:

Image

This is just the ground image, but I have a hover one as well. What I'm wondering about is if it's possible to have circular and/or overlapping hotspots on an imagemap. As you can tell, I have two intersecting circles, since the locations are near each other. But I want only one to highlight when you hover over that specific location.

Is this doable, or should I just move one of the circles?
Last edited by yon on Fri Oct 24, 2014 4:32 pm, edited 1 time in total.

User avatar
meiri
Regular
Posts: 177
Joined: Wed Jun 25, 2014 6:21 pm
Projects: Tutor Tabitha, Movement
Organization: Blue Bottlecap Games
Location: East Coast, US
Contact:

Re: Circular/Overlapping Imagemap Hotspots?

#2 Post by meiri »

Circular is not possible, hotspots are only rectangular.
From my understanding when you overlap hotspots, neither of them activate when you click the overlapping area. But this could be differig from case to case.
What's in a loop? A loop iterated in any other way would output as sweet.
--
Have a look at my GxG kinetic novel, Movement, if you have the chance?

User avatar
yon
Regular
Posts: 174
Joined: Tue Sep 09, 2014 5:09 pm
Projects: YDSP
Soundcloud: tetra-yon
itch: v-ual
Location: United States
Contact:

Re: Circular/Overlapping Imagemap Hotspots?

#3 Post by yon »

Circular is not possible, hotspots are only rectangular.
That's what I thought, but it's good to get confirmation. So, you just draw a rectangle around the circular button then? That seems to be what makes the most sense.

User avatar
meiri
Regular
Posts: 177
Joined: Wed Jun 25, 2014 6:21 pm
Projects: Tutor Tabitha, Movement
Organization: Blue Bottlecap Games
Location: East Coast, US
Contact:

Re: Circular/Overlapping Imagemap Hotspots?

#4 Post by meiri »

yon wrote:
Circular is not possible, hotspots are only rectangular.
So, you just draw a rectangle around the circular button then?
Yes, you can. However, to make sure that the "corners" of the circles aren't responsive as well, make sure alpha is set to True within your imagemap statement. (It's the default setting, but I would enter it in just to be sure.) You can read about it here if you don't already know about alpha. :) (Scroll to where it says alpha.)
What's in a loop? A loop iterated in any other way would output as sweet.
--
Have a look at my GxG kinetic novel, Movement, if you have the chance?

User avatar
yon
Regular
Posts: 174
Joined: Tue Sep 09, 2014 5:09 pm
Projects: YDSP
Soundcloud: tetra-yon
itch: v-ual
Location: United States
Contact:

Re: Circular/Overlapping Imagemap Hotspots?

#5 Post by yon »

Okay, I moved the overlapping circle to another area so it's easier to deal with.

ground: http://i.imgur.com/UTmNBLF.png
hover: http://i.imgur.com/VTuo0OB.png

So, I noticed it says up to 6 images on an imagemap? Does that mean I can only have 6 buttons available? As you can see, I have 11 total spots, so that may make it difficult.

Also, do I have to manually define each hotspot, or can I somehow use a .psd file or something like that with layers to do it automatically?

(That's not off-topic, is it? I know there's supposed to just be one per thread.)

User avatar
chocojax
Miko-Class Veteran
Posts: 705
Joined: Sun Oct 25, 2009 11:27 am
Projects: Umbra, Familiarity, Maleficent Justice
Tumblr: chocojax
Location: California
Contact:

Re: Circular/Overlapping Imagemap Hotspots?

#6 Post by chocojax »

By 6 images, it means 6 different states (ground, insensitive, idle, hover, selected_idle, selected_hover).

For what meiri said, I would suggest making the hover .png ONLY the changed images (everything is transparent EXCEPT for the circles and the name boxes) so that it would only activate if you hover over the circle, as long as you make alpha set to True.

Also, yeah, I believe you do have to manually define each hotspot. You can do CRTL+D (or some something else, I forgot how to get to the dev's menu thing) so that you can easily find the coords for the hotspots. :D

User avatar
trooper6
Lemma-Class Veteran
Posts: 3712
Joined: Sat Jul 09, 2011 10:33 pm
Projects: A Close Shave
Location: Medford, MA
Contact:

Re: Circular/Overlapping Imagemap Hotspots?

#7 Post by trooper6 »

Would image buttons be easier for this?
A Close Shave:
*Last Thing Done (Aug 17): Finished coding emotions and camera for 4/10 main labels.
*Currently Doing: Coding of emotions and camera for the labels--On 5/10
*First Next thing to do: Code in all CG and special animation stuff
*Next Next thing to do: Set up film animation
*Other Thing to Do: Do SFX and Score (maybe think about eye blinks?)
Check out My Clock Cookbook Recipe: http://lemmasoft.renai.us/forums/viewto ... 51&t=21978

User avatar
yon
Regular
Posts: 174
Joined: Tue Sep 09, 2014 5:09 pm
Projects: YDSP
Soundcloud: tetra-yon
itch: v-ual
Location: United States
Contact:

Re: Circular/Overlapping Imagemap Hotspots?

#8 Post by yon »

Alright, I made these versions.

imagemap_ground:
Image

imagemap_hover:
Image

Would I have to make any other versions to get the other states (ground, insensitive, idle, hover, selected_idle, selected_hover)?

Also:
Would image buttons be easier for this?
I have no idea, so I'm just going to leave it up to you guys on that one. Thank you for all the help so far!

User avatar
meiri
Regular
Posts: 177
Joined: Wed Jun 25, 2014 6:21 pm
Projects: Tutor Tabitha, Movement
Organization: Blue Bottlecap Games
Location: East Coast, US
Contact:

Re: Circular/Overlapping Imagemap Hotspots?

#9 Post by meiri »

yon wrote:Alright, I made these versions.

imagemap_ground:
[image]

imagemap_hover:
[image]

Would I have to make any other versions to get the other states (ground, insensitive, idle, hover, selected_idle, selected_hover)?

Also:
Would image buttons be easier for this?
I have no idea, so I'm just going to leave it up to you guys on that one. Thank you for all the help so far!
Here, I am thinking that maybe your ground image should be the full map without the red circles (and the text at the bottom unless that text is functional.) You need an idle image, so idle would be the red circles, and then you have the same hover image.

You do not need an image for ALL the states. ground, I think serves as a background image. Insensitive is what your button looks like if it does nothing, is null, or is deactivated/disabled for the moment. Idle is when it is not hoverered over. Hover is when it IS hovered over. Selected_idle and selected_hover... Think of your preference screen. Lets say the "window" button is selected because your game is in windowed mode. Selected_idle is when you are not touching the window button. Selected_hover is when you are hovering over it.

I felt like maybe imagebuttons WOULD be easier, but that would require making a seperate fullscreen image of each circle, although the coding would be easier, in my opinion.
What's in a loop? A loop iterated in any other way would output as sweet.
--
Have a look at my GxG kinetic novel, Movement, if you have the chance?

User avatar
yon
Regular
Posts: 174
Joined: Tue Sep 09, 2014 5:09 pm
Projects: YDSP
Soundcloud: tetra-yon
itch: v-ual
Location: United States
Contact:

Re: Circular/Overlapping Imagemap Hotspots?

#10 Post by yon »

I see, that makes sense. I have a sai file with all the layers in place, so it's no problem to make a ground image with no circles.

I think I can figure out how to do the coding, what with the documentation and help from the forums if need be. So I'll stick with an imagemap for now.

Thank you for all your help!

Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot], Google [Bot]