[CODE] Jigsaw Puzzle Demo

A place for Ren'Py tutorials and reusable Ren'Py code.
Forum rules
Do not post questions here!

This forum is for example code you want to show other people. Ren'Py questions should be asked in the Ren'Py Questions and Announcements forum.
Post Reply
Message
Author
User avatar
SusanTheCat
Miko-Class Veteran
Posts: 952
Joined: Mon Dec 13, 2010 9:30 am
Location: New Brunswick, Canada
Contact:

[CODE] Jigsaw Puzzle Demo

#1 Post by SusanTheCat » Fri Jul 13, 2012 3:05 pm

This is a demo that uses Ren'py Cardgame to make a jigsaw puzzle. (http://www.renpy.org/wiki/renpy/Cardgame)

Screen Shots:

This is what the puzzle looks like when you are playing it:
Image

You can drag pieces to have them switch places:
Image

Or click on pieces to have them rotate.
Image

Theory

In Cardgame, you have stacks and cards. Cards are the things you can move around. Stacks are places where you can put cards.

Basically, I made a grid of 12 stacks (4x3) that each contain one card.

Practical

You get your image and slice it into squares. It is important that the pieces are square because you are going to be rotating them.

I used and 800x600 image and cut the pieces into 200x200 px squares using a combination of Gimp, Gimp plugin New Guides Every X Pixels: http://registry.gimp.org/node/13774, and Image>Transform>Guillotine (http://gimp4you.wordpress.com/2008/05/1 ... ce-images/)

The files are named "room-i-j.jpg" where i and j refer to the column and row of the image. (Yeah -- I just realized I got it backwards)

If you want to have a different number of pieces, you just need to play with this section of code:

Code: Select all

        def __init__(self):

            # Constants that let us easily change where the game is
            # located.
            LEFT=100 #half of the size of the piece
            TOP=100
            COL_SPACING = 200 #the size of the piece
            ROW_SPACING = 200
            self.COL_NUM = 4
            self.ROW_NUM = 3


Possible Improvements
- make the code more generic so you can have different puzzles in the same game
- add sound effects

This code is delivered as is. I will answer questions about it, but I will not write your game for you. :)

Susan
Attachments
Puzzle Demo-all.zip
(17.92 MiB) Downloaded 1282 times
" It's not at all important to get it right the first time. It's vitally important to get it right the last time. "
— Andrew Hunt and David Thomas

User avatar
Sapphi
Eileen-Class Veteran
Posts: 1685
Joined: Fri Jun 05, 2009 3:31 am
Completed: Boku no Taisetsu na Yumeko
Projects: Twelve, PAW ★ PRINTS
Organization: Kitsch-soft
Location: Illinois, USA
Contact:

Re: [CODE] Jigsaw Puzzle Demo

#2 Post by Sapphi » Fri Jul 13, 2012 7:43 pm

Aw, this is neat! Thank you Susan! :)
"It is [the writer's] privilege to help man endure by lifting his heart,
by reminding him of the courage and honor and hope and pride
and compassion and pity and sacrifice which have been the glory of his past."
— William Faulkner
▬▬▬▬▬▬▬▬▬▬..+X+..▬▬▬▬▬▬▬▬▬▬
Image

User avatar
SusanTheCat
Miko-Class Veteran
Posts: 952
Joined: Mon Dec 13, 2010 9:30 am
Location: New Brunswick, Canada
Contact:

Re: [CODE] Jigsaw Puzzle Demo

#3 Post by SusanTheCat » Thu Apr 25, 2013 4:18 pm

Once again I am leveraging the excellent code of KimiYoriBaka's Drag and Drop Jigsaw Tutorial (http://lemmasoft.renai.us/forums/viewto ... =8&t=12504) and created my own version.
screenshot0001.png
It creates the puzzle pieces using Crop and AlphaMask (http://renpy.org/wiki/renpy/doc/referen ... .AlphaMask) I created 24 (6x4) puzzle pieces and use them as a template.

One thing I did differently is that the puzzle is one long interaction, which means you can't save midway through the puzzle. I haven't decided if I want it to be able to save.

Sorry about the annoying noise. :)

Susan
Attachments
jigsaw2.zip
Unzip in your Ren'py Files directory
(481.48 KiB) Downloaded 332 times
" It's not at all important to get it right the first time. It's vitally important to get it right the last time. "
— Andrew Hunt and David Thomas

User avatar
SilverxBlue
Miko-Class Veteran
Posts: 962
Joined: Sat Jan 01, 2011 1:22 pm
Completed: Caught in Between: A childhood prologue
Projects: MDLS, Alice Hunt(Temporarily on-hold), The Guardian's Spell and one other unannounced thing.
Location: Philippines
Contact:

Re: [CODE] Jigsaw Puzzle Demo

#4 Post by SilverxBlue » Thu Apr 25, 2013 10:43 pm

Oh, wow... This is awesome! I've been trying to implement something like this in one of my VNs for a long time now, but I've given up. And now that I've seen something like this, I can try again. Thanks for this! ^__^
Image Image
"A fool who doesn't think is more foolish than a fool who foolishly thinks." - Franziska Von Karma
Weeeeeee~
不愉快です !!!

User avatar
Hellboy
Regular
Posts: 85
Joined: Mon Dec 24, 2012 9:37 pm
Location: Heredia. Costa Rica.
Contact:

Re: [CODE] Jigsaw Puzzle Demo

#5 Post by Hellboy » Fri May 03, 2013 8:10 pm

This is very cool! Thanks! :shock:

Hope SusanTheCat doesn’t mind, but I created anti-aliased versions of the jigsaw pieces.
I also did a bevel effect layer to put over the jigsaw image so the pieces appear to have volume.
Of course, you’d better use a clean version for the win image. :D
Attachments
pieces.zip
Just replace the original "puzzle_pieces" folder with the one in this zip.
For the puzzle pattern, I think its decent enough to just place over your image, but you may want to try blending options to get different results.
(605.72 KiB) Downloaded 337 times
jig.jpg
Image
FREE and easy 3D customization, posing, and animation software with pre-made people and environments:
DAZ Studio Pro 4.9

User avatar
SusanTheCat
Miko-Class Veteran
Posts: 952
Joined: Mon Dec 13, 2010 9:30 am
Location: New Brunswick, Canada
Contact:

Re: [CODE] Jigsaw Puzzle Demo

#6 Post by SusanTheCat » Sun May 05, 2013 8:40 pm

Hellboy wrote:This is very cool! Thanks! :shock:

Hope SusanTheCat doesn’t mind, but I created anti-aliased versions of the jigsaw pieces.
I also did a bevel effect layer to put over the jigsaw image so the pieces appear to have volume.
Of course, you’d better use a clean version for the win image. :D
Those look freakin' awesome! Thank you.

*\o/*

Susan
" It's not at all important to get it right the first time. It's vitally important to get it right the last time. "
— Andrew Hunt and David Thomas

User avatar
FrozenApple66
Regular
Posts: 147
Joined: Fri Sep 20, 2013 1:41 am
Projects: Lunescara (Hiatus) The Cottage (NaNo16)
Organization: Pink Squirrel Games
Contact:

Re: [CODE] Jigsaw Puzzle Demo

#7 Post by FrozenApple66 » Fri Sep 27, 2013 8:38 pm

Do you mind explaining with a bit more detail how to get the code into renpy? Or to even see the code? I'm a bit confused still.

User avatar
Alex
Eileen-Class Veteran
Posts: 1822
Joined: Fri Dec 11, 2009 5:25 pm
Contact:

Re: [CODE] Jigsaw Puzzle Demo

#8 Post by Alex » Fri Oct 11, 2013 6:36 pm

Thanks a lot, Susan - your code examples are the great help to learn how things work in Ren'Py.
And if you don't mind, I added the ability to break the puzzle to any number (up to 10x10) of randomly shaped pieces - it uses just 3 stencil images to create all puzzle pieces.


Edit:
Some code improvement that will let you break the image to any number of pieces

Code: Select all

init python:
    
    def piece_dragged(drags, drop):
        
        if not drop:
            return
        
        
        p_x = drags[0].drag_name.split("-")[0]
        p_y = drags[0].drag_name.split("-")[1]
        t_x = drop.drag_name.split("-")[0]
        t_y = drop.drag_name.split("-")[1]
        
        a = []
        a.append(drop.drag_joined)
        a.append((drags[0], 3, 3))
        drop.drag_joined(a)
        
        if p_x == t_x and p_y == t_y:
            renpy.music.play("Pat.mp3", channel="sound")
            my_x = int(int(p_x)*active_area_size*x_scale_index)-int(grip_size*x_scale_index)+puzzle_field_offset
            my_y = int(int(p_y)*active_area_size*y_scale_index)-int(grip_size*y_scale_index)+puzzle_field_offset
            drags[0].snap(my_x,my_y, delay=0.1)
            drags[0].draggable = False
            placedlist[int(p_x),int(p_y)] = True

            for i in range(0, grid_width):
                for j in range(0, grid_height):
                    if placedlist[i,j] == False:
                        return
            return True
        return

        
screen jigsaw:
    
    key "rollback" action [[]]
    key "rollforward" action [[]]
    
    add im.Scale("_puzzle_field.png", img_width, img_height) pos(puzzle_field_offset, puzzle_field_offset)
    
    draggroup:

        for i in range(0, grid_width):
            for j in range(0, grid_height):
                $ name = "%s-%s"%(i,j)
                $ my_x = i*int(active_area_size*x_scale_index)+puzzle_field_offset
                $ my_y = j*int(active_area_size*y_scale_index)+puzzle_field_offset
                drag:
                    drag_name name
                    child im.Scale("_blank_space.png", int(active_area_size*x_scale_index), int(active_area_size*y_scale_index) )
                    draggable False
                    xpos my_x ypos my_y
            
            
        for i in range(0, grid_width):
            for j in range(0, grid_height):
                $ name = "%s-%s-piece"%(i,j)
                drag:
                    drag_name name
                    child imagelist[i,j]
                    #droppable False
                    dragged piece_dragged
                    xpos piecelist[i,j][0] ypos piecelist[i,j][1]
Attachments
Puzzles.rar
(12.03 MiB) Downloaded 239 times
Last edited by Alex on Wed Nov 27, 2013 3:36 pm, edited 1 time in total.

User avatar
xela
Lemma-Class Veteran
Posts: 2467
Joined: Sun Sep 18, 2011 10:13 am
Contact:

Re: [CODE] Jigsaw Puzzle Demo

#9 Post by xela » Sat Oct 12, 2013 12:13 pm

Alex wrote:Thanks a lot, Susan - your code examples are the great help to learn how things work in Ren'Py.
And if you don't mind, I added the ability to break the puzzle to any number (up to 10x10) of randomly shaped pieces - it uses just 3 stencil images to create all puzzle pieces.
Awesome, thanks for this!
Like what we're doing? Support us at:
Image

Post Reply

Who is online

Users browsing this forum: No registered users