Rotate rectangle

[trajano]

I'm trying to do a rotation of a rectangle on an axis but I can't seem to get it working correctly. I had to do xoffset and yoffset to get things sort of aligning.

Code: Select all

image saybox namebox:
    Composite(
        (1080,375),
        (0,0), Solid("#ff7777")
    )
    # transform_anchor True
    # rotate_pad False
    # xcenter 0.5
    # ycenter 0.5
    align(0.5, 0.5)
    # I actually want it a little off center and shifted up in the end
    alignaround(0.5, 0.5)
    # easein 0.15 rotate 7.5
    easein 12.15 rotate 360

The result I want is can be done with this code (I changed the images to solids)

Code: Select all

image saybox extra:
    Composite(
        (1080,375),
        (0,0), Solid("#77ffff")
    )
        # (0,0), AlphaMask(Solid("#77ffff"),"portrait-mode-ui/ui/say-alphamask.png"),
        # (0,0), "portrait-mode-ui/ui/say-dropshadow.png"
    xcenter 0.6
    ycenter 0.5
    rotate_pad False
    easein 0.2 rotate 10 yoffset -150 xoffset -20

image saybox namebox:
    Composite(
        (1080,375),
        (0,0), Solid("#ff7777")
    )
        # (0,0), AlphaMask(Solid("#ff7777"),"portrait-mode-ui/ui/say-alphamask.png"),
        # (0,0), "portrait-mode-ui/ui/say-dropshadow.png",
        # (50,50), Text("Testing Name", color="#fff", size=50)
    # xpos 0.5 xanchor 0.5
    # ypos 0.5 yanchor 0.6
    # transform_anchor True
    # xanchor  0.5
    # yanchor  0.5
    # transform_anchor True
    rotate_pad False
    easein 0.15 rotate 7.5 yoffset -120 xoffset -20

image saybox foo:
    Composite(
        (1080, 400),
        (0,0), "saybox extra",
        # (-30, -int(375*0.6)), "saybox namebox",
        (0, 0), "saybox namebox",
        (0,0), Solid("#ccffcc", xysize=(1080, 375))
    )
    # Composite(
    #     (1080, 400),
    #     (0,0), "saybox extra",
    #     # (-30, -int(375*0.6)), "saybox namebox",
    #     (0, 0), "saybox namebox",
    #     (0,0), AlphaMask(Solid("#ccffcc"),"portrait-mode-ui/ui/say-alphamask.png"),
    #     (0,0), "portrait-mode-ui/ui/say-dropshadow.png"
    # )

This is the result I am sort of after.

[Imperf3kt]

In the first code, use anchors.
https://www.renpy.org/doc/html/atl.html ... rty-anchor

[trajano]

Yup I tried those as well.

Code: Select all

xanchor 0.5 and yanchor 0.5

[Imperf3kt]

0.5 is halfway, if you want it offset, try something more like 0.8

[trajano]

Yah that's what I would want, but I'm not getting the results i am expecting at least based on my understanding of the documentation.

Code: Select all

    rotate_pad False
    xanchor 0.5
    yanchor 0.5
    rotate 10
    # This one worked
    # easein 0.15 rotate 10 yoffset -140 xoffset -20

In this image, the red box is the one used for the rotation It appears to be rotating on the bottom left (but not exactly bottom left) rather than the center. That's because rotate_pad is false.



With rotate_pad true the box gets shifted because the pad makes the size of the image larger and things sorta go out of whack at that point.



With rotate_pad true and rotate 0 things already get shifted.

[trooper6]

This works for me:

Code: Select all

image red = Solid("#f00", xysize=(300,100))
image green = Solid("#0f0", xysize=(300,100))
image blue = Solid("#00f", xysize=(300,100))

transform generic_rotate(degs = 0):
    rotate_pad False
    anchor (1.0, 1.0)
    pos (0.5, 0.5)
    rotate 0
    linear 2.0 rotate degs

label start:
    show blue at generic_rotate(10)
    show green at generic_rotate(5)
    show red at generic_rotate(0)

    "Test"

[trajano]

@Trooper thanks for the code. I see it working more or less as expected with your code, but when I apply it to mine it does not work. My suspicion is because it is contained in another displayable. I pushed my code up to https://github.com/trajano/renpy-portrait-mode-ui specifically https://github.com/trajano/renpy-portra ... #L145-L149 is the part I want to update so I can get rid of the offsets.

[trajano]

Anyway I think I found out how to do this, I'll push the changes in a bit but basically I made rotate_pad True and then apply the offset based on math

Code: Select all

        w = pmui.scale_f(1080)
        h = pmui.scale_f(375)
        z = sqrt(w*w + h*h)
        xoffset = absolute(-((z - w) /2.0 ))
        yoffset = absolute(-((z - h) /2.0 ))

However, doing this makes things only rotate on the center (which is still good for me because it is predictable. I just add a yoffset to fix the final position.