- Sep 26, 2018
- 3,040
- 3,120
imagemaps are out of date you want to use imagebutton instead
Python:
imagebutton:
xalign or xpos
yalign or ypos
idle "images/TempName.png"
hover "images/TempName2.png"
action Call("yoour_label")
- Jun 27, 2019
- 43
- 27
- Sep 26, 2018
- 3,040
- 3,120
You can do it with Hotspot feature.
i'll grab your images just for example if you don't mind.
Hotspot logic:
(x, y, width, height)
You can easily get X and Y from image location picker
Shift + D in your renpy project
select image location picker
search the image name in this case jabridnahmed2.png
Pose your mouse not in the center
something like red circle(with each area you want work like buttons):
click for copy X and Y
play with width and height values until area is fully visible.
replace action NullAction() with your code.
Code:
label start:
screen mapscreen:
imagemap:
ground "map_menu.png" ##BG Image
idle "jabridinahmed3.png" ##ABOVE Image
hover im.MatrixColor("jabridinahmed3.png", im.matrix.brightness(0.3)) ##HOVER IMAGE/CUSTOMS
hotspot (114, 885,400,200) action NullAction()
hotspot (618, 338,400,200) action NullAction()
hotspot (218, 424,400,200) action NullAction()
hotspot (416, 687,440,200) action NullAction()
hotspot (840, 716,400,200) action NullAction()
call screen mapscreen
return
- Jun 14, 2018
- 1,561
- 2,180
Forgot Hotspots and Imagemaps. Please. Or don't.
But you really need to check out Imagebuttons instead.
The simplest solution is to have a series of images overlaid on top of a background image. The "foreground" images are your buttons and use transparency to determine which part of the image is button and which parts aren't.
Maybe check out this thread:
https://f95zone.to/threads/help-with-imagemaps.50306/
The images are very different to what you have... but the solution and code would be almost identical.
Personally, I would use images like this:
(Background and (hover) button image)
To create an effect like...
Then just add separate images for Restaurant, City Square, Library and Mine - to each act as imagebuttons for those zones.
Edit: In reality, you would need a background image and TWO images for each zone/button. The example image I provided would be the "hover" image for the button. The "idle" image would be the same cut-out section of the map, without the additional coloring and "Lake" image over the top. My plan would be that all areas of the overall circle would be covered by at least one zone/button and the name labels would only be displayed as part of the hover image. I may play with this a little more later today.
To do what I have in mind would require 11 images. (1 background, 2 images for the "lake" imagebutton, 2 images for the "city square" imagebutton, etc, etc). Thankfully, 10 of those images would just be cut-out from the original background and so are easily created (as long as you understand how to create transparent .PNG images).
But you really need to check out Imagebuttons instead.
The simplest solution is to have a series of images overlaid on top of a background image. The "foreground" images are your buttons and use transparency to determine which part of the image is button and which parts aren't.
Maybe check out this thread:
https://f95zone.to/threads/help-with-imagemaps.50306/
The images are very different to what you have... but the solution and code would be almost identical.
Personally, I would use images like this:
(Background and (hover) button image)
To create an effect like...
Then just add separate images for Restaurant, City Square, Library and Mine - to each act as imagebuttons for those zones.
Edit: In reality, you would need a background image and TWO images for each zone/button. The example image I provided would be the "hover" image for the button. The "idle" image would be the same cut-out section of the map, without the additional coloring and "Lake" image over the top. My plan would be that all areas of the overall circle would be covered by at least one zone/button and the name labels would only be displayed as part of the hover image. I may play with this a little more later today.
To do what I have in mind would require 11 images. (1 background, 2 images for the "lake" imagebutton, 2 images for the "city square" imagebutton, etc, etc). Thankfully, 10 of those images would just be cut-out from the original background and so are easily created (as long as you understand how to create transparent .PNG images).
Last edited:
- Jun 27, 2019
- 43
- 27
- Jun 14, 2018
- 1,561
- 2,180
So a little time this weekend, I created this test example of the map...
(63.0 MB)
The link is to a playable RenPy game that could be considered a demo. It can be downloaded and played. The source code is viewable there.
My method was this...
Create a 1920x1080 image to use as the background image...
Then cut-out just the central areas of the map (to use eventually as imagebuttons)
Divide the map zones into separate images (to be used as the idle parts of the imagebuttons)
Create copies of the idle images... change the color to be more yellow... then add the titles for each zone (80% opacity).
Then write the test script to use these images (1 background + 5 idle button images + 5 hover images)
You must be registered to see the links
(63.0 MB)
The link is to a playable RenPy game that could be considered a demo. It can be downloaded and played. The source code is viewable there.
My method was this...
Create a 1920x1080 image to use as the background image...
Then cut-out just the central areas of the map (to use eventually as imagebuttons)
Divide the map zones into separate images (to be used as the idle parts of the imagebuttons)
Create copies of the idle images... change the color to be more yellow... then add the titles for each zone (80% opacity).
Then write the test script to use these images (1 background + 5 idle button images + 5 hover images)
You don't have permission to view the spoiler content.
Log in or register now.
Last edited:
- Jun 27, 2019
- 43
- 27
- Jun 14, 2018
- 1,561
- 2,180
No worries.
I just wanted to show the difference between what is possible between using "imagemap/hotspots" and using "imagebuttons".
For me, the only limitations are knowing how to divide an image into different layers in a graphics editor like GIMP/Photoshop/Paint.net.
And it only looked better because of the base map image you created. I've all the artistic talent of lump of concrete. I just had the advantage of having already used
imagebutton before. If it had only been my own creations, it'd have looked awful.
I use image maps on occasion. For example in my current game I want you to able to click on the kettle, I have a separate image rendered of just the kettle but a differnt colour, I use that as hover, its 10000000 times easier to line image maps up exactly on top of something, but its about the only time i use them.
- Jun 14, 2018
- 1,561
- 2,180
Which is pretty much why I cut out the button image from the background image using layers in Photoshop.
I make each button 1920x1080 too. Even though the actual clickable area might only be 50x25.
So yes, in the example "game" I wrote, that's 11x full sized 1920x1080 images overlaid upon each other to create the impression of a singular map (although only 6 will be shown on screen at any given time... 1 background + 5 buttons).
Because the majority of the image is all transparent "nothing", the image size isn't all that much bigger than if I'd resized it to 50x25 and positioned it using xpos,ypos (which I wouldn't do... because as you say... it's too awkward to bother). I don't need to do any manual positioning, because the origin for all the images is (0,0).
For example...
Taking the smallest example from this thread... the lake idle image... When cropped down to it's absolute minimum size, it is 359x257 pixels.
Cropped image : 359x257 24bit PNG image with transparency is 249KB
Same image : 1920x1080 24bit PNG image with transparency is 218KB
... and now I'm at a loss to explain why the 1920x1080 image file is 30KB SMALLER than than the 359x257. But there's my point... you don't need to resize the image and go through all the hassle of positioning it. Leave it as the same size as the background image it is cut from and let all that transparency take care of it's position relative to the background.
(it looks a little counterintuitive in the thumbnails... but the bigger thumbnail is the smaller image - due to all that unused transparent space around the full image).