Drag & Drop problem

[knightrised]

Hi everyone, I am a beginner with no coding experience.

I’m currently looking through this jigsaw puzzle script, created by Kimiyoribaka:

Code: Select all

init python:
    
    def piece_dragged(drags, drop):
        
        if not drop:
            store.piecelist[(int(drags[0].drag_name[0]) * 10 + int(drags[0].drag_name[1]))][0] = drags[0].x
            store.piecelist[(int(drags[0].drag_name[0]) * 10 + int(drags[0].drag_name[1]))][1] = drags[0].y
            return
            
        store.movedpiece = int(drags[0].drag_name[0]) * 10 + int(drags[0].drag_name[1])
        store.movedplace = [int(drop.drag_name[0]), int(drop.drag_name[1])]
        
        return True

screen jigsaw:
    
    draggroup:
        
        drag:
            drag_name "00"
            child "empty space.png"
            draggable False
            xpos coorlistx[0] ypos coorlisty[0]
            
        drag:
            drag_name "01"
            child "empty space.png"
            draggable False
            xpos coorlistx[0] ypos coorlisty[1]
            
        drag:
            drag_name "02"
            child "empty space.png"
            draggable False
            xpos coorlistx[0] ypos coorlisty[2]
            
        drag:
            drag_name "10"
            child "empty space.png"
            draggable False
            xpos coorlistx[1] ypos coorlisty[0]
            
        drag:
            drag_name "11"
            child "empty space.png"
            draggable False
            xpos coorlistx[1] ypos coorlisty[1]
            
        drag:
            drag_name "12"
            child "empty space.png"
            draggable False
            xpos coorlistx[1] ypos coorlisty[2]
            
        drag:
            drag_name "20"
            child "empty space.png"
            draggable False
            xpos coorlistx[2] ypos coorlisty[0]
            
        drag:
            drag_name "21"
            child "empty space.png"
            draggable False
            xpos coorlistx[2] ypos coorlisty[1]
            
        drag:
            drag_name "22"
            child "empty space.png"
            draggable False
            xpos coorlistx[2] ypos coorlisty[2]
            
        drag:
            drag_name "30"
            child "empty space.png"
            draggable False
            xpos coorlistx[3] ypos coorlisty[0]
            
        drag:
            drag_name "31"
            child "empty space.png"
            draggable False
            xpos coorlistx[3] ypos coorlisty[1]
        
        drag:
            drag_name "32"
            child "empty space.png"
            draggable False
            xpos coorlistx[3] ypos coorlisty[2]
            
        drag:
            drag_name "00 piece"
            child im.Crop("ShizukaClassroom_0001.jpg", 0,0, 120, 207 )
            droppable False
            dragged piece_dragged
            xpos piecelist[0][0] ypos piecelist[0][1]
            
        drag:
            drag_name "01 piece"
            child im.Crop("ShizukaClassroom_0001.jpg", 120,0, 120, 207)
            droppable False
            dragged piece_dragged
            xpos piecelist[1][0] ypos piecelist[1][1]
            
        drag:
            drag_name "02 piece"
            child im.Crop("ShizukaClassroom_0001.jpg", 240,0, 120, 207)
            droppable False
            dragged piece_dragged
            xpos piecelist[2][0] ypos piecelist[2][1]
            
        drag:
            drag_name "03 piece"
            child im.Crop("ShizukaClassroom_0001.jpg", 360,0, 120, 207)
            droppable False
            dragged piece_dragged
            xpos piecelist[3][0] ypos piecelist[3][1]
            
        drag:
            drag_name "04 piece"
            child im.Crop("ShizukaClassroom_0001.jpg", 0,207, 120, 207)
            droppable False
            dragged piece_dragged
            xpos piecelist[4][0] ypos piecelist[4][1]
            
        drag:
            drag_name "05 piece"
            child im.Crop("ShizukaClassroom_0001.jpg", 120,207, 120, 207)
            droppable False
            dragged piece_dragged
            xpos piecelist[5][0] ypos piecelist[5][1]
            
        drag:
            drag_name "06 piece"
            child im.Crop("ShizukaClassroom_0001.jpg", 240,207, 120, 207)
            droppable False
            dragged piece_dragged
            xpos piecelist[6][0] ypos piecelist[6][1]
            
        drag:
            drag_name "07 piece"
            child im.Crop("ShizukaClassroom_0001.jpg", 360,207, 120, 207)
            droppable False
            dragged piece_dragged
            xpos piecelist[7][0] ypos piecelist[7][1]
            
        drag:
            drag_name "08 piece"
            child im.Crop("ShizukaClassroom_0001.jpg", 0,414, 120, 207)
            droppable False
            dragged piece_dragged
            xpos piecelist[8][0] ypos piecelist[8][1]
            
        drag:
            drag_name "09 piece"
            child im.Crop("ShizukaClassroom_0001.jpg", 120,414, 120, 207)
            droppable False
            dragged piece_dragged
            xpos piecelist[9][0] ypos piecelist[9][1]
            
        drag:
            drag_name "10 piece"
            child im.Crop("ShizukaClassroom_0001.jpg", 240,414, 120, 207)
            droppable False
            dragged piece_dragged
            xpos piecelist[10][0] ypos piecelist[10][1]
            
        drag:
            drag_name "11 piece"
            child im.Crop("ShizukaClassroom_0001.jpg", 360,414, 120, 207)
            droppable False
            dragged piece_dragged
            xpos piecelist[11][0] ypos piecelist[11][1]


label puzzle:
    call screen jigsaw
    if ([coorlistx[movedplace[0]], coorlisty[movedplace[1]]] in piecelist):
        python:
            t1 = piecelist[movedpiece]
            t2 = piecelist.index([coorlistx[movedplace[0]], coorlisty[movedplace[1]]])
            piecelist[movedpiece] = [coorlistx[movedplace[0]],coorlisty[movedplace[1]]]
            piecelist[t2] = t1
    else:
        $ piecelist[movedpiece] = [coorlistx[movedplace[0]],coorlisty[movedplace[1]]]
    if piecelist == [[coorlistx[0],coorlisty[0]],
                        [coorlistx[1],coorlisty[0]],
                        [coorlistx[2],coorlisty[0]],
                        [coorlistx[3],coorlisty[0]],
                        [coorlistx[0],coorlisty[1]],
                        [coorlistx[1],coorlisty[1]],
                        [coorlistx[2],coorlisty[1]],
                        [coorlistx[3],coorlisty[1]],
                        [coorlistx[0],coorlisty[2]],
                        [coorlistx[1],coorlisty[2]],
                        [coorlistx[2],coorlisty[2]],
                        [coorlistx[3],coorlisty[2]]]:
        jump win
    jump puzzle

label start:
    scene black
    image whole = "ShizukaClassroom_0001.jpg"
    python:
        coorlistx = [10, 130, 250, 370]
        coorlisty = [10, 217, 424]
        piecelist = [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]]
        for i in range(12):
            x = renpy.random.randint(0, 59) + 621
            y = renpy.random.randint(0, 480)
            piecelist[i] = [x,y]
        movedpiece = 0
        movedplace = [0, 0]
    jump puzzle
    
label win:
    scene black
    show whole
    "you win"
    menu:
        "Play again?"
        
        "yes":
            jump start
            
        "no":
            return

This is how the game looks like from the beginning:
http://imgur.com/e9xObye

As you can see the jigsaw pieces are randomly placed in the black area.

I wonder how do I alter the code, if I want a piece of the puzzle to be placed in a box on the top right hand corner from the beginning, like this:
http://imgur.com/BiUkWcA

And if I drag the piece away from its original position, not matter where I drop it, if the piece is not touching or at the correct box, the piece will auto-return to its original position. How should I code for this function?

For example in these 2 pictures, when dropped, the piece will auto-return back to its original box.
http://imgur.com/peveBYB
http://imgur.com/e9xObye,EQqFM3J,peveBY ... ,1zYUF0r#3

Here, the piece will drop into the correct box.
http://imgur.com/e9xObye,EQqFM3J,peveBY ... ,1zYUF0r#4

Please assist me. Thank you

[chocojax]

So, if you look at one of the cropped pieces, you can see this:
(I left comments in the code to explain it a bit more.)

Code: Select all

        drag:
            drag_name "02 piece"
            child im.Crop("ShizukaClassroom_0001.jpg", 240,0, 120, 207)
            droppable False
            dragged piece_dragged
            xpos piecelist[2][0] ypos piecelist[2][1] ### This determines the piece's x-position and y-position.

And later on, you can see where piecelist[x][y] is being defined:

Code: Select all

    python:
        coorlistx = [10, 130, 250, 370]
        coorlisty = [10, 217, 424]
        piecelist = [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]]
        for i in range(12):
            x = renpy.random.randint(0, 59) + 621	### Right here (x)
            y = renpy.random.randint(0, 480)	### Right here (y)
            piecelist[i] = [x,y]

So if you want a piece to be in the top right hand corner, you could probably replace those two lines with:

Code: Select all

            x = renpy.random.randint(0, 59) + 621
            y = renpy.random.randint(0, 140) # Force it to be towards the upper half of the screen, 2 / (HEIGHT-OF-SCREEN)
                                             # So if your screen height is 480, do 480/2
                                             # If you want them all to be EXACTLY at Y position, just do y = NUMBER-HERE

I'm not really sure how to help you with the second part of your question though, sorry.

[knightrised]

Thanks Chocojax! For the second part of my question, what i meant was how to make the puzzle piece to return back to its original box if you drag and drop it at the wrong place?
Example:
http://imgur.com/WO5MD3h
http://imgur.com/0NHhMM0

[KimiYoriBaka]

The result of moving a piece is controlled by the piece_dragged function. If you want to have a piece move back to where it was when it's not touching a spot at all, this section will need to be changed.

Code: Select all

        if not drop:
            store.piecelist[(int(drags[0].drag_name[0]) * 10 + int(drags[0].drag_name[1]))][0] = drags[0].x
            store.piecelist[(int(drags[0].drag_name[0]) * 10 + int(drags[0].drag_name[1]))][1] = drags[0].y
            return

Since you said you're a beginner at coding, here's a quick explanation of what this code does. "if not drop" means if the drag and drop system sent it nothing for the argument that would hold which spot was dropped on. The two lines after that convert the name of the piece dragged into list coordinates and then store the position that the piece was just moved to.

If you want the function to behave the the same way both when the piece is dragged to nowhere and when it's dragged to the wrong spot, you'll need to add a comparison to the correct spot. If you're still using the same drag_name styles, then this can be done by comparing the first 2 characters (because those indicate which spot goes with which piece).

Code: Select all

if (not drop or not (drags[0].drag_name[0] == drop.drag_name[0] and drags[1].drag_name[1] == drop.drag_name[1]) ): 

Next, instead of storing the new positions, you'll want to instead make them return to the position that was previously stored. This is what the built-in snap() function is good for.

Code: Select all

drags[0].snap(store.piecelist[(int(drags[0].drag_name[0]) * 10 + int(drags[0].drag_name[1]))][0], store.piecelist[(int(drags[0].drag_name[0]) * 10 + int(drags[0].drag_name[1]))][1], 1)

Thus, the new piece_dragged function should look like this:

Code: Select all

    def piece_dragged(drags, drop):
        
        if (not drop or not (drags[0].drag_name[0] == drop.drag_name[0] and drags[1].drag_name[1] == drop.drag_name[1]) ):
            drags[0].snap(store.piecelist[(int(drags[0].drag_name[0]) * 10 + int(drags[0].drag_name[1]))][0], store.piecelist[(int(drags[0].drag_name[0]) * 10 + int(drags[0].drag_name[1]))][1], 1)
            return
            
        store.movedpiece = int(drags[0].drag_name[0]) * 10 + int(drags[0].drag_name[1])
        store.movedplace = [int(drop.drag_name[0]), int(drop.drag_name[1])]
        
        return True

If you don't want the player to be able to move a piece again after it's been put in the correct position you can also put this line right before the second return.

Code: Select all

drags[0].draggable = False

If you want the player to be able to remove the piece after it's been put in the correct position, so that it goes back to its original position, that's more complicated and would require a separate list to distinguish current and original positions.

disclaimer: I haven't worked in python or renpy in a while, and I haven't looked at this code in a much longer while. This advice may contains typos, errors, or silly mistakes.

[knightrised]

Thanks for your reply, Kimiyoribaka!