locked
WPF Jigsaw puzzle app RRS feed

  • Question

  • I want to create a jiggsaw application like the jigsaw planet website so far I have seen grid based puzzles with squares I need direction on the methods of loading an image and then breaking the image up into jigsaw pieces with odd shapes. The loading of an image should be easy but I haven't seen any examples of breaking an image into irregular shapes. If anyone has source code, examples, or methods or any ideas that would help I would be ecstatic as I am coming from a flash/web/php/asp.net/sql developer background and programming applications for the desktop is completely new territory for me.
    Thanks,
    Ba
    • Edited by Bryyyy Sunday, August 9, 2009 2:13 AM
    Saturday, August 8, 2009 10:35 PM

Answers

  • Hi bahearn,
    I think you should Crop the Image using the Clip property. With this you can form the puzzle you want with the different Geometries or shapes.

    Here is a small sample:

    <Image Width="200" Grid.Column="0" Grid.Row="5" Margin="5"
       Source="/yourimage.jpg">
      <Image.Clip>
        <EllipseGeometry Center="100,50" RadiusX="50" RadiusY="25" />
      </Image.Clip>
    </Image>

    Positioning correctly the image and repeating something similar to this for each piece of the puzzle should make it.

    Hope it helps.

    Regards,
    Federico Benitez
    • Marked as answer by Bryyyy Sunday, August 9, 2009 6:11 PM
    Sunday, August 9, 2009 2:47 AM

All replies

  • Think random is a key here...

    A simple puzzule would be top devide up the picture in squres... and than add some siurcles or ellipses on a poll... Think you need to search up geomitries shapes + wpf on google... think that is the simples way I can think of...
    Kenneth
    Sunday, August 9, 2009 1:16 AM
  • Thanks Ken I'll do some research on what your mentioned as it sounds like a viable way for me to do it I also was looking through msdn and might give the crop class a go. It doesn't necessarily have to be random if before hand i could set a defined shape for the puzzle pieces to be but the image could be loaded in and different each time would be what im trying to acheive then to increase difficulty I could make harder shapes myself or more.
    Thanks again,
    ba
    Sunday, August 9, 2009 2:13 AM
  • Hi bahearn,
    I think you should Crop the Image using the Clip property. With this you can form the puzzle you want with the different Geometries or shapes.

    Here is a small sample:

    <Image Width="200" Grid.Column="0" Grid.Row="5" Margin="5"
       Source="/yourimage.jpg">
      <Image.Clip>
        <EllipseGeometry Center="100,50" RadiusX="50" RadiusY="25" />
      </Image.Clip>
    </Image>

    Positioning correctly the image and repeating something similar to this for each piece of the puzzle should make it.

    Hope it helps.

    Regards,
    Federico Benitez
    • Marked as answer by Bryyyy Sunday, August 9, 2009 6:11 PM
    Sunday, August 9, 2009 2:47 AM
  • Federico,
    Hey I think I get what your saying tomorrow I'll give it a go but with this method do you think I will be able to have someone dynamically load any image in then crop it with my set patterns into pieces like piece 1 , 2 , 3 , 4 , 5, 6, 7, 8 so later I can have them drag / drop pieces and have code to determine if the pieces match up.

    (Edit)
    I just thought for a second what if I have multiples of the same Image and just crop the different positions to certain shapes i.e circles/squares and then tie the images together somehow to a piece number like crop the image to a square / circle and combine those into one object called piece 1. Does this sound feasible at all? Also I was wondering if with Clip I could put a black border or some sort of effect to the edges of the clipped so you can tell its a piece any ideas?


    Thanks,
    Ba
    • Edited by Bryyyy Sunday, August 9, 2009 6:32 AM
    Sunday, August 9, 2009 6:15 AM
  • Hi,
    I think the second option is the aproach is the one to go. Each Piece should have the image clipped in the correct position so that you display the part of theimage you want. Then to each piece you assign the piece that goes up, left, right and on the bottom and at the end of the puzzle you check foreach piece if the neighbour pieces are the ones that should be. Possibly you can improve the algorithm if everytime you set a neighbour piece you check if all the other right, bottom, top, left pieces are correct and you set IsValid property in the piece.

    What do you think?

    Regards,
    Federico Benitez
    Sunday, August 9, 2009 10:02 AM
  • Hey,
    The logic sounds like it would work I'll give it a go.
    Thanks,
    Ba
    Sunday, August 9, 2009 6:11 PM
  • Hi, Bryyy, sorry for the late answer, but I've made a puzzle application as you described. Take a look:

    http://www.codeproject.com/KB/WPF/Jigsaw.aspx

     

    cheers,

    marcelo

    • Proposed as answer by Barot Bhavik Wednesday, October 20, 2010 4:11 AM
    Tuesday, October 19, 2010 11:17 PM
  • Great work Marcelo

    Cheers!!

    Wednesday, October 20, 2010 4:11 AM