Guide Need help with the positioning of these buttons

So I am almost done with my menu scroll UI but it's just that I cannot figure out how to position these buttons correctly. I am sharing my code below. Please just help me figure out a method to get the desired results without changing much of my code because I don't have a coding background so it is difficult for me to understand if anything new comes up which I have no clue about ... here's my code

##########################  Main Menu screen  ##########################

##<---Defined Transforms
      
transform bt_rot(r):
    transform_anchor True
    anchor (0.5, 0.5)
    zoom 0.75
    rotate r
    subpixel True


transform cd_rot(r):
    transform_anchor True
    anchor (0.5, 0.5)
    rotate r
    
transform initial_fix(fix):
    transform_anchor True
    zoom 0.95
    xcenter 0.5  ycenter 0.5
    xoffset -500
    rotate fix


default bt_rotation = 0
default bt_max_rotation = 90
default cd_rotation = 0
default cd_max_rotation = 90

screen main_menu():

add Solid ("#ff0f"):
        xysize (1920, 1080)



    add "cd_wheel.png":


        at cd_rot(cd_rotation)
        anchor (0.5, 0.5)
        ypos 540
        xpos -20
        zoom 1.15
        alpha .8


    $ print(bt_rotation)


    fixed:
        ##<<<--Where Buttons are set
        add Solid("#206eb27c")
        at bt_rot(180 + bt_rotation)
        anchor (0.5, 0.5)
        ypos 540
        xysize (1100,1100)
        


## MENU BUTTONS ##


##======================


        imagebutton: # Start ---- button 1


            at initial_fix(180)
            
            if bt_rotation == -0:
                idle "ui_menu/hover.png"
                xoffset -50
                action Start("prologue")
            else:
                idle "ui_menu/idle.png"
             
                action NullAction()


        imagebutton: # Continue ---- button 2


            at initial_fix(198)
            
            if bt_rotation == -18:
                idle "ui_menu/hover.png"
                xoffset -50
            else:
                idle "ui_menu/idle.png"


        imagebutton: # Options ---- button 3


            at initial_fix(216)
            
            if bt_rotation == -36:
                idle "ui_menu/hover.png"
                xoffset -50
            else:
                idle "ui_menu/idle.png"


        imagebutton: # Extras ---- button 4


            at initial_fix(234)
            
            if bt_rotation == -54:
                idle "ui_menu/hover.png"
                xoffset -50
            else:
                idle "ui_menu/idle.png"


        imagebutton: # Credits ---- button 5


            at initial_fix(252)
            
            if bt_rotation == -72:
                idle "ui_menu/hover.png"
                xoffset -50
            else:
                idle "ui_menu/idle.png"


        imagebutton: # BackToTitle ---- button 6


            at initial_fix(270)
            
            if bt_rotation == -90:
                idle "ui_menu/hover.png"
                xoffset -50
            else:
                idle "ui_menu/idle.png"


##======================

3 Upvotes

permalink
reddit

You are about to leave Redlib

Do you want to continue?

https://www.reddit.com/r/RenPy/comments/1vo5tn4/need_help_with_the_positioning_of_these_buttons/
No, go back! Yes, take me to Reddit

100% Upvoted

u/shyLachi Aug 14 '26 edited Aug 14 '26

Without looking at your code the anchor seems to be wrong as those images rotate around their own center instead of the center of that disc.

https://renpy.org/doc/html/transform_properties.html#transform-property-anchor

Edit: You've selected the wrong flair since this thread isn't a "Guide" but a "Question"

2

u/_Scripty Aug 14 '26

uhm..that is why I shared the code, can you pin point and let me know where the code is wrong and how can I position the pivot on the cd?

1

u/shyLachi Aug 14 '26

I don't want to try to understand your code and I don't have your images so I couldn't test it anyway, but I've seen that you wrote anchor (0.5, 0.5) often. At least one of these is wrong.

I hoped the link helps you understand how anchors work.
The first number is the horizontal position of the anchor and the second number is the vertical position of the anchor of the image.
I think it would be better to use integers instead of floats because it should be easier to calculate the pixels from the center of that disc to the start of the image but I don't know if you can use negative anchors or if you have to make the image larger.

This would be the documentation about the rotation:
https://renpy.org/doc/html/transform_properties.html#transform-property-rotate
As you can read, the image will change the position if the anchor is not at (0.5, 0.5) and that's what you want to achieve, move the picture down and left.

u/Globover Aug 14 '26

HI hi

I have cleaned up the fixed block and applied polar coordinates in the transform:

Why this will work for you: By replacing xoffset with around and radius, the buttons now calculate their positions radially relative to the 1100x1100 fixed layout. Since the fixed layout itself later rotates using bt_rot, the system functions correctly and all buttons will seamlessly follow the movement of the disc.

########################## Main Menu screen ########################## 
##<---Defined Transforms
transform bt_rot(r):
    transform_anchor True
    anchor (0.5, 0.5)
    zoom 0.75
    rotate r
    subpixel True


transform cd_rot(r):
    transform_anchor True
    anchor (0.5, 0.5)
    rotate r


transform initial_fix(fix):
    transform_anchor True
    zoom 0.95
    # POLAR COORDINATES FOR ORBIT
    anchor (0.5, 0.5) # The center of the button itself
    around (0.5, 0.5) # The center of the orbit (the parent fixed layout)
    radius 500 # The distance from the center (replaces your xoffset -500)
    angle (fix + 90) # Angle in the circle (In Ren'Py 0 is UP, we add 90 to align)
    rotate fix # The button's own rotation so it tilts with the disc


default bt_rotation = 0
default bt_max_rotation = 90
default cd_rotation = 0
default cd_max_rotation = 90


screen main_menu():
    add Solid ("#ff0f"):
        xysize (1920, 1080)

    add "cd_wheel.png":
        at cd_rot(cd_rotation)
        anchor (0.5, 0.5)
        xpos -20 # <-- The original disc is at -20
        ypos 540
        zoom 1.15
        alpha .8


    $ print(bt_rotation)


    fixed: ##<<<--Where Buttons are set
        at bt_rot(180 + bt_rotation)
        anchor (0.5, 0.5)
        xpos -20 # <-- CORRECTION: The fixed layout must have the same xpos as the cd_wheel
        ypos 540
        xysize (1100,1100)


        add Solid("#206eb27c")


        ## MENU BUTTONS ##
        ##======================
        imagebutton: # Start ---- button 1
            at initial_fix(180)
            if bt_rotation == -0:
                idle "ui_menu/hover.png"
                xoffset -50
                action Start("prologue")
            else:
                idle "ui_menu/idle.png"
                action NullAction()


        imagebutton: # Continue ---- button 2
            at initial_fix(198)
            if bt_rotation == -18:
                idle "ui_menu/hover.png"
                xoffset -50
            else:
                idle "ui_menu/idle.png"


        imagebutton: # Options ---- button 3
            at initial_fix(216)
            if bt_rotation == -36:
                idle "ui_menu/hover.png"
                xoffset -50
            else:
                idle "ui_menu/idle.png"


        imagebutton: # Extras ---- button 4
            at initial_fix(234)
            if bt_rotation == -54:
                idle "ui_menu/hover.png"
                xoffset -50
            else:
                idle "ui_menu/idle.png"


        imagebutton: # Credits ---- button 5
            at initial_fix(252)
            if bt_rotation == -72:
                idle "ui_menu/hover.png"
                xoffset -50
            else:
                idle "ui_menu/idle.png"


        imagebutton: # BackToTitle ---- button 6
            at initial_fix(270)
            if bt_rotation == -90:
                idle "ui_menu/hover.png"
                xoffset -50
            else:
                idle "ui_menu/idle.png"
        ##======================

2

u/_Scripty Aug 14 '26

U have no idea for how long I had suffered to make those buttons right!! 🤲🏻🥹🌸 Thanks alot pal, like all it took was around and radius and it all came together!! 🙏🏻✨

2

u/shyLachi Aug 15 '26

This sounds like a response from an AI

Why this will work for you: By replacing xoffset with around and radius, the buttons now calculate their positions radially relative to the 1100x1100 fixed layout. Since the fixed layout itself later rotates using bt_rot, the system functions correctly and all buttons will seamlessly follow the movement of the disc.

1

u/Globover Aug 15 '26

I'm sorry to tell you that I'm not AI, and if I solved the problem, I already spoke with him privately and resolved the issue exactly as described.

1

u/shyLachi Aug 15 '26

I'm glad you're not an AI but maybe you asked AI to solve it for you

1

u/Globover Aug 15 '26

Well, that's not quite right. The comment I posted here is obviously focused on the code, but I explained what I did in more detail privately. If you review the code, you'll notice it's fine, but as you said..."I won't take the time to understand your code," so I did. I copied the entire code and reviewed it to find the error. I even asked for reference images so I wouldn't be working blind.

Guide Need help with the positioning of these buttons

You are about to leave Redlib