misplaced focus_mask

[Misamor]

Hi,

In my game I created buttons to navigate from one place to an other (image1), which only appear when the mouse hovers over them (image2, see code). Problem is, the text I put in the overlay image is not always inside the area I want to be clickable, so I want to use focus masks (as displayables) to force the clickable area into what I want it to be.
The problem is : the focus masks always put themselves at the top left corner of the base image it's put on, which results in image 3. so I would like to know : how to move the displayable I use as a focus mask so it's where I want it to be ?

PS : I tried this : focus_mask Image("images/Overlay/FMs/ovl_nav_kitchen_to_evesroom_FM.png", xpos = 0, ypos = -100)
instead of this : focus_mask Image("images/Overlay/FMs/ovl_nav_kitchen_to_evesroom_FM.png", xpos = 0, ypos = 0)

[m_from_space]

Maybe your problem is that you reposition your button image via the Image() function. But I didn't test it. Your imagebutton has some strange code in it, since renpy automatically detects images. Why use xpos = 0 and ypos = 0?

What does your focus mask image actually look like?

I assume this should work:

Code: Select all

imagebutton:
    idle "empty"
    hover "ovl_nav_kitch_to_lvroom"
    focus_mask "ovl_nav_kitchen_to_evesroom_FM"
    ...

[Misamor]

If I'm honest, the whole Image("images/Overlay/FMs/ovl_nav_kitchen_to_evesroom_FM.png", xpos = 0, ypos = 0) is a copy/paste I took at the very beginning when i started using renpy, and I've been using images this way ever since. Besides, when my "idle" and "hover" are not the same size, it allows me to align them correctly. However my issue has nothing to do with the "idle" and "hover" images in this case, it has to do with the focus_mask displayable.
After trying to write my images the way you did, renpy is not able to find images.
Now to answer your question, my focus mask looks like the red shape I'm showing on image3 (which is the top one for some reason)

[PyTom]

I haven't had a chance to test this, but right now the focus_mask isn't positioned, so it's always in the top-left of the button. If you want something that can be positioned, wrap the image inside Fixed, and n put the image inside the fixed.

For example:

Code: Select all

focus_mask Fixed(Image("images/Overlay/FMs/ovl_nav_kitchen_to_evesroom_FM.png", yalign=1.0))

The fixed will have the size of the button.

[Imperf3kt]

Typically I just let the alpha determine the focus mask by adding a 99% transparent background to the image where you want to be clickable,

[m_from_space]

Uhm, shouldn't this all be way easier if you make the focus mask just the same size as the button image? As a creator I would create the button and then in the same image create a focus mask, hiding the button layer and save it as the focus mask. I don't know why people would make different sized focus masks. XD

[m_from_space]

After trying to write my images the way you did, renpy is not able to find images.

That doesn't seem right tbh. You sure your filenames match the strings (don't add .png or .jpg at the end)?

[Ocelot]

After trying to write my images the way you did, renpy is not able to find images.

That doesn't seem right tbh. You sure your filenames match the strings (don't add .png or .jpg at the end)?

That is exactly what expected: RenPy does not check subdirectories for images when only filename is provided.

[m_from_space]

After trying to write my images the way you did, renpy is not able to find images.

That doesn't seem right tbh. You sure your filenames match the strings (don't add .png or .jpg at the end)?

That is exactly what expected: RenPy does not check subdirectories for images when only filename is provided.

Not true Ocelot, Renpy is getting all images inside the images folder and its subdirectories. (My files are in subdirectories all the time.)

Code: Select all

The image directory is named "images", and is placed under the game directory. When a file with the .jpg or .png extension is placed underneath this directory, the extension is stripped, the rest of the filename is forced to lowercase, and the resulting filename is used as the image name if an image with that name has not been previously defined.

This process takes place in all directories underneath the image directory.

Source: https://www.renpy.org/doc/html/displaying_images.html

[Misamor98]

I haven't had a chance to test this, but right now the focus_mask isn't positioned, so it's always in the top-left of the button. If you want something that can be positioned, wrap the image inside Fixed, and n put the image inside the fixed.

For example:

Code: Select all

focus_mask Fixed(Image("images/Overlay/FMs/ovl_nav_kitchen_to_evesroom_FM.png", yalign=1.0))

The fixed will have the size of the button.

This worked perfectly, thank you very much!

[Misamor98]

Uhm, shouldn't this all be way easier if you make the focus mask just the same size as the button image? As a creator I would create the button and then in the same image create a focus mask, hiding the button layer and save it as the focus mask. I don't know why people would make different sized focus masks. XD

Funny you should say that, I personally don't see the point of adding a focus_mask if it's exactly the size of the base image, as the default focus size is already the size of the base image. The reason I'm adding a focus mask on my navigation buttons is that I have a clickable area AND an annotation (in the same image), the annotation making the image bigger I don't want the annotation area to be clickable.

[Misamor98]

Typically I just let the alpha determine the focus mask by adding a 99% transparent background to the image where you want to be clickable,

I considered doing that, but then the fully opaque text would be an area of focus too, and I don't want that. I want only the square part to be clickable.

[Ocelot]

Not true Ocelot, Renpy is getting all images inside the images folder and its subdirectories. (My files are in subdirectories all the time.)

Code: Select all

The image directory is named "images", and is placed under the game directory. When a file with the .jpg or .png extension is placed underneath this directory, the extension is stripped, the rest of the filename is forced to lowercase, and the resulting filename is used as the image name if an image with that name has not been previously defined.

This process takes place in all directories underneath the image directory.

Source: https://www.renpy.org/doc/html/displaying_images.html

This relates to autodefining images, not for filename-based access. Even so, autodefined image names never contain underscore (since it is considered separator by default). For example, RenPy will define "fms ovl nav kitchen to evesroom dm" image — "fms" as image tag and the rest are attributes.

[m_from_space]

Funny you should say that, I personally don't see the point of adding a focus_mask if it's exactly the size of the base image, as the default focus size is already the size of the base image. The reason I'm adding a focus mask on my navigation buttons is that I have a clickable area AND an annotation (in the same image), the annotation making the image bigger I don't want the annotation area to be clickable.

I kind of have the impression we talking about different things or you don't get the idea of focus masks or what I suggested.

A focus mask is useful for example, if you have a round button and don't want the whole rectangular button image to be clickable. You create a focus mask that's round and renpy will only make the opaque parts clickable on that button image. So far so easy.

So in your case you do it like this: Create your image (including the annotation). Save the image (let's say it's 200x50px). Then create the focus mask inside the image by painting a solid structure in a new layer. Hide the button image layer and only save the focus mask layer as a .png. So both the image and the focus mask are the same dimension and you don't have to worry about placing the focus mask, since it perfectly overlaps the original image. I hope I make sense. **edit: Example attached.

This relates to autodefining images, not for filename-based access. Even so, autodefined image names never contain underscore (since it is considered separator by default). For example, RenPy will define "fms ovl nav kitchen to evesroom dm" image — "fms" as image tag and the rest are attributes.

Yeah I wasn't talking about using image paths inside functions, but as part of normal renpy statements. That's what I suggested to OP inside the imagebutton statement. Auto-definded images can also have underscores. Try it out! But if it doesn't have an underscore, space separated words will become tags, yes. That's just what I love about renpy.