[CODE] Jigsaw Puzzle Demo
Posted: 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:
You can drag pieces to have them switch places:
Or click on pieces to have them rotate.
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:
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
Screen Shots:
This is what the puzzle looks like when you are playing it:
You can drag pieces to have them switch places:
Or click on pieces to have them rotate.
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- 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
