Page 1 of 1
help with imagebutton
Posted: Thu Apr 22, 2021 10:15 am
by Psion
So i trying to make an imagebutton for location mover. Player click on door and go inside in hallway. Button working fine, but whole screen became button, not just door. Hovered picture done in photoshop. I just deleted all except door and saved as png. Can you pls help? What am i doing wrong?
Code: Select all
screen test():
add "places/Porch_idle.png"
imagebutton:
idle "places/Porch_idle.png"
hover "places/Porch_hover.png
action SetVariable ("location", "hallway"), Return(None)
Re: help with imagebutton
Posted: Thu Apr 22, 2021 11:33 am
by Ocelot
Well, yes. Whole displayable you use to create imagebutton becomes clickable. Because you didn't pass any information on what areas should be clickable. Eou want to cut all your images to size of your imagebutton and position it correctly to make it work like you want.
Strictly speaking you can make same areas of your idle image transparent and use focus_mask True but I advise against it.
Re: help with imagebutton
Posted: Thu Apr 22, 2021 12:19 pm
by Psion
But i seen games that didnt cut and position images. I know that it should work somehow.
I tried focus_mask True it didnt work correctly... picture blink when i move mouse.
Re: help with imagebutton
Posted: Thu Apr 22, 2021 12:28 pm
by Ocelot
Psion wrote: ↑Thu Apr 22, 2021 12:19 pm
picture blink when i move mouse.
Well, yes. If you didn't change your source image that how it should be. First you move cursor over idle image. As you explicitely told that this whole area is your button, if reacts. Now it is hovered, so image changes. As you explicitely told that everything non-transparent is a button, and your cursor is over transparent part of the image, it consider cursor to not be on button anymore. So it changes to idle image. Back to step 1.
You have several possibilities.
1) Crop your images to correct size and position your button where you want.
2) Do not cut original images. Do it inside RenPy using image manipulators ( i.e. Crop() )
3) Do not cut original images. Instead, make idle image transparent in the same places you hover image is transparent and use
focus_mask True
4) Do not cut original images. Create a function which would detect if cursor is over desired area and use
focus_mask with it.
Re: help with imagebutton
Posted: Thu Apr 22, 2021 1:59 pm
by Psion
Hm, ok. But how is this working then?
Code: Select all
screen home_livingroom:
imagemap:
if time_of_day in ('MORNING', 'AFTERNOON'):
ground "scene_home_livingroom_day_g"
hover "scene_home_livingroom_h"
alpha False
scene_home_livingroom_day_g.webp could not attach here, so there is link:
https://mega.nz/file/QotHxQBJ#TbHkz8nMT ... yrc51PJ8Lo
Also. Why focus mask is bad? Look like it is easiest option. I used it, work great, tnx.
Re: help with imagebutton
Posted: Thu Apr 22, 2021 5:17 pm
by Ocelot
This is imagemap, not imagebutton. Works slightly differently, with its own set of quirks. There should be a bunch of hotspots after snippet you posted.
I had problems, if several buttons have images which overlaps, it could lead to problems with some buttons being "hidden" by others. focus_mask is made to allow for things like circular buttons, not as substitution for cropping your image.