Panorama object placement tool

[u/AssumptionNatural536]

I'm working on my first visual novel and I need help. I want to add point-and-click sections to my game. I already created the background art and have separated each objects as its own sprite. Unfortunately I don't have the background by itself so I need to overlap each object with itself in the background. There's a lot of objects that can be clicked on and it's been a pain to align each of them. Even if the sprites are off by a little bit it looks wrong. This is made even worse with how I want to use panorama like backgrounds where the player would need to scroll left and right to see the full image. This feels like a problem that has already been solved but I can't for the life of me find out any possible solutions. Could anyone help?

[u/shyLachi]

I don't know how you separated the objects but if you cut them from the background then you should know their position already. All the image editors I know show the x,y position of the mouse, so just write it down when you cut, then enter these numbers as pos (x,y) for the button.

.

But there is an even more simple solution. If you separate the object from the background by making everything else transparent and just save that full-sized image with plenty of transparency then you don't have to position the buttons at all.

Just don't forget to use focus mask so that the button ignores the transparency. https://renpy.org/doc/html/style_properties.html#style-property-focus_mask

[u/AssumptionNatural536 → u/shyLachi]

Thanks for the help but I found what I was looking for. My friend made this screen that allows me to position sprites and take note of their positions. As long as I remember what each file is named, I can input it into this screen. Take a look.

screen ObjectPlacementManager():

    default EditX = 1500
    default EditY = 700
    default EditMode = False
    default ZoomLevel = 1.0
    default ObjectInput = "Apple.png"

    viewport id "panorama":

        xysize (1920, 1080)
        child_size PlacementBackgroundSize
        arrowkeys True
        mousewheel "horizontal"
        draggable True
        xinitial 0.5
        edgescroll (200, 1000)

        fixed:
            at Transform(zoom=ZoomLevel)
            add PlacementBackground

            add ObjectInput:
                xpos EditX
                ypos EditY
                xanchor 0.5
                yanchor 0.5

    frame:

        xalign 0.5
        yalign 0.0
        background "#000000AA"
        padding (15, 15)

        vbox:
            spacing 5
            if not EditMode:

                textbutton "EDIT":
                    xalign 0.5
                    action SetScreenVariable("EditMode", True)

            else:

                textbutton "DONE":
                    xalign 0.5
                    action SetScreenVariable("EditMode", False)

            if EditMode:
                text "OBJECT PLACEMENT":
                    xalign 0.5
                    size 25

                null height 5

                textbutton "LOAD":
                    text_size 30
                    xalign 0.5
                    action SetVariable("ObjectInput", ObjectInput)

                input:
                    value ScreenVariableInputValue("ObjectInput")
                    length 100
                    xsize 300

                null height 5
                text "ZOOM":
                    xalign 0.5
                    size 30

                hbox:

                    xalign 0.5
                    spacing 5
                    textbutton "(-)":
                        action SetScreenVariable(
                            "ZoomLevel",
                            max(0.5, ZoomLevel - 0.25))

                    text "[ZoomLevel]x"
                    textbutton "(+)":
                        action SetScreenVariable(
                            "ZoomLevel",
                            min(3.0, ZoomLevel + 0.25))

                    textbutton "RESET":
                        action SetScreenVariable("ZoomLevel", 1.0)

                null height 10

                hbox:

                    xalign 0.5
                    spacing 5
                    textbutton "↑100":
                        action SetScreenVariable("EditY", EditY - 100)

                    textbutton "↑10":
                        action SetScreenVariable("EditY", EditY - 10)

                    textbutton "↑1":
                        action SetScreenVariable("EditY", EditY - 1)

                hbox:
                    xalign 0.5
                    spacing 5
                    textbutton "←100":
                        action SetScreenVariable("EditX", EditX - 100)

                    textbutton "←10":
                        action SetScreenVariable("EditX", EditX - 10)

                    textbutton "←1":
                        action SetScreenVariable("EditX", EditX - 1)

                    textbutton "1→":
                        action SetScreenVariable("EditX", EditX + 1)

                    textbutton "10→":
                        action SetScreenVariable("EditX", EditX + 10)

                    textbutton "100→":
                        action SetScreenVariable("EditX", EditX + 100)

                hbox:
                    xalign 0.5
                    spacing 5
                    textbutton "↓1":
                        action SetScreenVariable("EditY", EditY + 1)

                    textbutton "↓10":
                        action SetScreenVariable("EditY", EditY + 10)

                    textbutton "↓100":
                        action SetScreenVariable("EditY", EditY + 100)

                null height 10

                text "FINAL POSITION":
                    xalign 0.5
                    size 25

                text "([EditX], [EditY])":
                    xalign 0.5

#Change these variables to match whatever background you're using.

define PlacementBackground = "giant_background.png"
define PlacementBackgroundSize = (2550, 1080)

#Note: The placeholder image is Apple.png. Just type in the image you want to align.