How to make a rounded side image

[Martii]

Hello everyone, I've been struggling on this matter for the whole day.

My side images are made with LayeredImageProxy (since my characters all use LayeredImages).
In the GUI of my game I have a round space meant for the side images.

What I want to do is to round the corners of my side image so it fits the round space without overflowing.
(What I'd love to do is to be able to only round specific corners like on the third image but that's surely impossible)

What it does // What I want


My side image is defined like this:

Code: Select all

image side al = LayeredImageProxy("al", Transform(crop=(0, 0, 500, 500), xoffset=-70, yoffset=25, zoom=0.75))

I already tried a few things like alphablend or some other functions that I don't remember.

I don't want to use a picture already rounded as it wouldn't reflect how my character is on screen (that's why I use the LayeredImageProxy).

[papillon]

The trickiest part of this is that you want to round off only PART of the image, while leaving the other half with an arbitrary shape. It can (probably) be done, but it'll be more work.

I'm going to give vague references here rather than actual code but I'm assuming you have at least some familiarity with the renpy references and can look things up (also I don't have time to test atm and I don't want to give bad code, but this is a general approach I would start with)

First, build your layered image base, you'll need a reference you can work with for the rest of the code.

Crop it into two halves, one being the top half with the hair and all that you want to be able to stick out of the frame, and the other being the half that you want to round off. Test drawing these separately so you're sure you know how cropping works and that you can correctly isolate just half of the picture.

Now that you have the image in two separate halves, use the AlphaMask feature and a half-circle of the correct size to apply to the bottom half of the image, rounding it off to fit.

Finally, create a Composite image where you stitch the two halves back together so you can draw them at the same time.

[philat]

Not sure why you'd need to separate the images, wouldn't having a mask like so simply work? (To be clear, I mean the masking so it doesn't appear outside the white textbox part -- the part where OP wants the lower part of the white textbox to be over the image while the upper part is under the image should be solved separately, probably simply by showing that white circle separately on top.)

Anyway, as papillon said, the function you want is alphamask.

[Per K Grok]

Hello everyone, I've been struggling on this matter for the whole day.

My side images are made with LayeredImageProxy (since my characters all use LayeredImages).
In the GUI of my game I have a round space meant for the side images.

What I want to do is to round the corners of my side image so it fits the round space without overflowing.
(What I'd love to do is to be able to only round specific corners like on the third image but that's surely impossible)

What it does // What I want


My side image is defined like this:

Code: Select all

image side al = LayeredImageProxy("al", Transform(crop=(0, 0, 500, 500), xoffset=-70, yoffset=25, zoom=0.75))

I already tried a few things like alphablend or some other functions that I don't remember.

I don't want to use a picture already rounded as it wouldn't reflect how my character is on screen (that's why I use the LayeredImageProxy).

Maybe I'm missing something here but wouldn't the easiest way be to be to put the rounding directly in the side image?

[Ocelot]

Use AlphaMask displayable. You will need to provide mask image, which will show, where to cut.

[Martii]

I mixed up the function name with alphablend when I wrote my post, I meant to say that I already tried AlphaMask.

Code: Select all

image side al = AlphaMask(LayeredImageProxy("al", Transform(crop=(0, 0, 500, 500), xoffset=-70, yoffset=25, zoom=0.75)), "gui/sideimage_mask.png")

From what you all tell me it seems to be the perfect solution but it gives an error straight away:

Code: Select all

I'm sorry, but an uncaught exception occurred.

While running game code:
  File "game/story/script.rpy", line 86, in script
    image side al = AlphaMask(LayeredImageProxy("al", Transform(crop=(0, 0, 500, 500), xoffset=-70, yoffset=25, zoom=0.75)), "gui/sideimage_mask.png")
  File "game/story/script.rpy", line 86, in script
    image side al = AlphaMask(LayeredImageProxy("al", Transform(crop=(0, 0, 500, 500), xoffset=-70, yoffset=25, zoom=0.75)), "gui/sideimage_mask.png")
  File "game/story/script.rpy", line 86, in <module>
    image side al = AlphaMask(LayeredImageProxy("al", Transform(crop=(0, 0, 500, 500), xoffset=-70, yoffset=25, zoom=0.75)), "gui/sideimage_mask.png")
AttributeError: 'LayeredImageProxy' object has no attribute '_duplicatable'

[Martii]

Well I found a workaround, I used AlphaMask in the Say() screen:

Code: Select all

add AlphaMask(SideImage(), "gui/sideimage_mask4.png")

Now that's just a pain to position the circle and the image the way I want but I should manage to do it.
Thanks for your help, I was ready to give up but that finally works!