How can I scale an image from its center?

[newbiemate]

How can I scale an image from the center?

Right now I have:

Code: Select all

transform scaleup():
    xpos 50
    ypos 50
    zoom 0.5
    linear 1.1 zoom 0.8 

screen showme():
    add "images/cloud.png" at scaleup()

However that code will scale the image from the top left corner. I would like to scale out from the center of the image, like an explosion effect.

I also tried adding truecenter to the transform, which has the desired effect of scaling from center, but then the image is locked to the middle of the viewport. Any positional fields (xpos,ypos,xanchor,yanchor,xalign,yalign) I give it won't move my image to the location I want it in (xpos 50, ypos 50).

How can I scale up from the center image position, and also have it at a certain x,y coordinate?

[Per K Grok]

How can I scale an image from the center?

Right now I have:

Code: Select all

transform scaleup():
    xpos 50
    ypos 50
    zoom 0.5
    linear 1.1 zoom 0.8 

screen showme():
    add "images/cloud.png" at scaleup()

However that code will scale the image from the top left corner. I would like to scale out from the center of the image, like an explosion effect.

I also tried adding truecenter to the transform, which has the desired effect of scaling from center, but then the image is locked to the middle of the viewport. Any positional fields (xpos,ypos,xanchor,yanchor,xalign,yalign) I give it won't move my image to the location I want it in (xpos 50, ypos 50).

How can I scale up from the center image position, and also have it at a certain x,y coordinate?

You can try this for a zoom from the middle

Code: Select all

   show cloud:
        xpos int(200-(37*0.5))
        ypos int(200-(75*0.5))
        zoom 0.5
        linear 1.1 xpos int(200-(37*0.8)) ypos int(200-(75*0.8)) zoom 0.8

The mid-point of the image is at 200, 200.
My image was 74x150,
37 and 75 is half of the width and height.
You need of course to adjust for the values of your image and the point you want to set the mid-point at.

Using the zoom value to adjust the xpos/ypos will keep the image's midpoint at the same position.

[newbiemate]

Can you help explain how you got 200x200? If your image is 75x150, and I want to put your image at x=50,y=50, how did you come up with the offset 200?

If my image is 400x600, and I want it at x=50,y=50, what would my offset be?

[Imperf3kt]

200x200 is the position the (top left corner of the) image is on the screen, not the image dimensions.
I'm not sure why you wouldn't use xalign 0.5 yalign 0.5 for this though

[strayerror]

Finishing the zoom at .8 rather than 1. complicates this somewhat, and the following implementation is extremely non-flexible. A better all round solution would be to (if possible) literally define pos (x, y) as the centre of the image (removing the need for the offsets), use anchor (.5, .5) and then add the zooms finishing at 1.0, since that would remove any need to know about the image size (from the transform) and avoid needing to duplicate the final zoom factor.

All that said, I believe what you're looking for can be achieved thus:

Code: Select all

transform scaleup:
    anchor (.5, .5)
    pos (50, 50)
    xoffset 400     * .8    / 2
    #       ^width    ^zoom   ^ halve to get centre
    yoffset 600     * .8    / 2
    #       ^height   ^zoom   ^ halve to get centre
    zoom .5
    linear 1.1 zoom .8
    #               ^zoom

[Per K Grok]

Can you help explain how you got 200x200? If your image is 75x150, and I want to put your image at x=50,y=50, how did you come up with the offset 200?

If my image is 400x600, and I want it at x=50,y=50, what would my offset be?

200x200 was just a random point I picked to test out the code on. I did not have enough information to calculate what would be the right numbers for you.

That point is the middle of the image, not the top left corner. The middle of the image is the only point of the image that will be fixed as the image scales up or down.
All of the corners will be moving.

When you say 50X50 I assume you are talking about the top left corner. If so that position will change throughout the scaling . So is it 50X50 at the start of the scaling or the end?

if it is at the start we get

50=x-(200*0.5)
50=y-(300*0.5)
x=150
y=200

if it is at the end it is

50=x-(200*0.
50=y-(300*0.
x=210
y=290

------

200X200 was a pretty good hunch, I would say.

[Donmai]

You can easily zoom an image from its center or from any of its corners, from the top or from the bottom of that image. Look here:
https://www.renpy.org/doc/html/transfor ... transforms
You just include any of those default position transforms in your own transform. To zoom an image from its center, no matter what position it is on the screen:

Code: Select all

transform pounding:
    truecenter
    zoom .8
    linear 1.0 zoom 1.0
    linear .5 zoom .8
    repeat

Code: Select all

show beating_heart at pounding, left

This will show a beating heart in the bottom left corner of the screen.