Nooby Question about background interactibles

[SpookyGames]

Hi everyone so currently my game is structured like this:

Player enters room -> Inside room are interactable objects (a character, a door, a back button) -> Player can hover mouse over interactable objects which will highlight it -> Player can click on interactable object to open a menu (ex: talk to character, go to room2, back)

My current code is structured very simple:

screen Character1():
imagebutton:
x align 0.5
y align 0.476
idle "character.png"
hover "character_hover.png"
action "Jump" ("characterchoices")

My issue is placing the image in the background. So for example my background has a door and I want the door to be interactable. The way I've been doing it is cropping the door from the original image and then making that into its own image file. Then adding it as a screen + image button and messing with the x align & y align, reloading renpy, repeat until the door.png fits with the door in the original background (also usually have to change the resolution of the cropped door to make it fit as well). I wonder if there's an easier more time efficient way of doing this that I just don't know about.



I've also been looking into the codes of other games that have features that I would like to imitate. But there are some things in there that I don't know what it does. For example:
screen laundryfairy():
imagemap:
ground "images/laundryroomfairy.webp"
idle "images/laundryroomfairy_hs.png"
hover im.MatrixColor("images/laundryroomfairy_hs.png", im.matrix.brightness(.2))
hotspot (1161, 331, 335, 296) action Jump ("talk_fairies")

The above code does the same thing I want in my game however it looks like it does it in a different method. I am not sure what an imagemap, ground, and hotspot is but I'm guessing its what I'll want to use. I'm hoping someone could summarize/explain what these functions do

Theres also a side question thats irrelevant to the current topic. But the above mentioned code uses a webp file for the ground image and a png file for the idle image. Is there a reason for this? (also in the files of the game I'm able to find the webp image files but can't find a single png file. why is that?)

[BioMa]

Coincidently, this question is similar to what I just asked a couple of hours ago haha, so I hope someone answers either of us, but I do have some help to give regarding the code you found.
Much of it you can understand simply by reading through this link: https://www.renpy.org/doc/html/screens.html
There, it explains what an imagemap is, as well as many of the properties it takes.

[Ocelot]

For imagebutton it is better to use xpos/ypos instead and set xanchor and yanchor to 0. After that you will just to set xpos and ypos to the coordinates of upper-left pixel of imagebutton image (which you can check in editor you use to cut images).

Imagemap is an image, where certain areas are "active" and in some cases they are replaced with areas from other images. Ground is for background images, idle is drawn over ground for sensitive buttons which are not hovered and hover is for hovered buttons.

I do not know why different images use different formats, this could be answered by author (originally I suspected that webp does not support transparency, which might be important, depending on how idle image is used, but it appears that it does support it). You probably were only able find a webp file, because png file was put in rpa archive (game probably started development when RenPy did not support webp, so it wasn't classified as image file to be put into archive)