[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 »

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 2810 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 »

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 »

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 983 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 »

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: 86
Joined: Mon Dec 24, 2012 9:37 pm
Location: Heredia. Costa Rica.
Contact:

Re: [CODE] Jigsaw Puzzle Demo

#5 Post by Hellboy »

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 778 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 »

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 »

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
Lemma-Class Veteran
Posts: 3090
Joined: Fri Dec 11, 2009 5:25 pm
Contact:

Re: [CODE] Jigsaw Puzzle Demo

#8 Post by Alex »

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 of randomly shaped pieces - it uses just 3 stencil images to create all puzzle pieces.


Edit 2019:
Updated the attachment
Attachments
Puzzles.rar
(12.1 MiB) Downloaded 468 times
Last edited by Alex on Tue Jan 22, 2019 9:02 pm, edited 2 times in total.

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

Re: [CODE] Jigsaw Puzzle Demo

#9 Post by xela »

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

User avatar
SweetChiel
Miko-Class Veteran
Posts: 771
Joined: Wed Jul 02, 2014 8:53 am
Completed: Nusantara: Legend of the Winged Ones
Deviantart: SweetChiel
Skype: Cecilia Susanto
Location: Indonesia
Contact:

Re: [CODE] Jigsaw Puzzle Demo

#10 Post by SweetChiel »

Thanks a lot, Susan, Hellboy, and Alex! This is exactly what I need for an important part of my game! *cries
I thought there would be no way for Ren'Py to have this kind of drag & drop puzzle, but it managed to surprise me again!

hunterhewitt36
Newbie
Posts: 1
Joined: Wed Sep 19, 2018 6:41 am
Contact:

Re: [CODE] Jigsaw Puzzle Demo

#11 Post by hunterhewitt36 »

I'll work on a non-snapping version, probably need a bunch of IF statements to check the position of each piece and tie these to a timer to constantly check if the puzzle has been solved or maybe have the check routine called each time a piece is moved.

User avatar
Yukari
Regular
Posts: 123
Joined: Sun Feb 06, 2011 6:28 am
Completed: Aozora Meikyuu, Yozora Rhapsody, Imolicious, Yume Puzzle, Apprehend;Girlfriend
Projects: Games&Girls, Fuyuzora Rumble
Organization: Yume Creations
Tumblr: yumecreationsvn
Location: Germany
Contact:

Re: [CODE] Jigsaw Puzzle Demo

#12 Post by Yukari »

How can I count the time it took to solve the puzzle?
Image

Post Reply

Who is online

Users browsing this forum: Amazon [Bot]