cutting irregular pieces from image for puzzle game

[dunbarx]

If the maskData works pixel by pixel, that is the way to go. My method is a massive kluge.

Craig

[jacque]

I'm late coming into this because LC has blocked me from the forums and I need to use a VPN to get around it. Sometimes even that doesn't work. It has something to do with the recnt DoS attack. Anyway...I still get the daily digest so I know what's going on but it's tedious to respond.

I wonder if there's a different approach. Import individual puzzle pieces as PNGs with transparent areas around each piece as required. Ensure that each piece's out-jutting tabs hit the edges of the image rectangle exactly. Also make sure that the inside curves are exactly the same inset everywhere. Basically, you want an inside margin that is the same on every piece.

That inside margin will determine the overlap for each rectangular image. For example, if the inside curves are exactly 20 pixels from the outside edges, the overlap will be 20 pixels from the edges of all surrounding pieces. That should visually line them up correctly.

This is just a thought experiment, though. I didn't actually try it.

[jiml]

Here's a tool that will cut out puzzle pieces.

http://netrin.on-rev.com/misc/puzzlePie ... vecode.zip

Jim Lambert

[bn]

Hi Jim,

that is very cool. Thank you.
http://netrin.on-rev.com/misc/puzzlePie ... vecode.zip
Kind regards
Bernd

[rcmills]

i am fascinated, but the zip file won't download for me.

[rcmills]

OK, I finally got the cool app downloaded, and looked it over. It is clever, and very elegantly coded.

Unfortunately, the original puzzle pieces are images already pre-formed in the app. What I want to do is create the puzzle piece shapes randomly using coding. There seems to be no way to do that to images in LC. At least, none that I have found.

[richmond62]

This whole thing sticks in my nose:

https://online.visual-paradigm.com/phot ... fect-tool/

HOW is this done?

Downloading that webpage there are several .js files . . .

[richmond62]

On a tangent, but:
-

-
How extremely generous.

[bn]

... What I want to do is create the puzzle piece shapes randomly using coding. There seems to be no way to do that to images in LC. At least, none that I have found.

I played around with the problem of creating a mask for different shapes for the puzzle pieces and then apply that mask to an image to cut-out the actual puzzle piece image.

Please have a look at the two stacks I append.

ImageMasksForPuzzlePieces makes the image masks which you then apply in the second stack "CreateActualPuzzle Pieces_Demo" to an image to get the puzzle pieces.

Please feel free to ask about the techniques.

Kind regards
Bernd

[bn]

I played around with the problem of creating a mask for different shapes for the puzzle pieces and then apply that mask to an image to cut-out the actual puzzle piece image.

Please have a look at the two stacks I append.

ImageMasksForPuzzlePieces_2 makes the image masks which you then apply in the second stack "CreateActualPuzzle Pieces_2" to an image to get the puzzle pieces

I post the two stack which are an evolution of the two stack posted before.
Some improvement for the creation of maks images. They now have a custom property "uMarginFudge" which is very helpful to
1. place the mask image
2. to know what kind of mask piece it is. I.e. where are straight borders, where are connectors where are receptors.

I thought to post these because it would make the development a lot easier in case rcmills is still interested.

Kind regards
Bernd

[rcmills]

Thanks again, Bernd. I used the technique you included in your apps to create mask images which then can accept snapshots from the puzzle picture. Right now I am struggling with placement of the resulting pieces. Something I hope to get sorted soon:)

[richmond62]

Each piece you generate will need a 'shadow' to use as a drop target for drag-and-drop (see my example stack).

[bn]

I post here an example of making a Puzzle from an image.
This version uses the complete set of mask images (64) that make up the possible pieces.
This version assembles the layout of the mask images automatically and in random fashion over the image. Each time you run this the puzzle will be unique. I did this because rcmills wanted to do a puzzle with "1000" pieces....
The script to place the mask pieces is a bit convoluted and was a pain to write but works in my testing. Unfortunately some values are hard coded and rely on the dimensions of the provided mask master images.
Each puzzle piece has a script that lets you move the pieces using the mouse. It would probably be better to use a behavior instead of a script.
Each puzzle piece has a name of "PP" followed by x,y. X,Y are the coordinates of an imaginary grid where e.g. 2,5 would be second piece of row 5.

Please use this version to create a puzzle.

Kind regards
Bernd

[rcmills]

Thanks for all your help! It has been very valuable!

[rcmills]

OK, now I am trying to set up a method of saving a puzzle in progress, so that a player's progress isn't lost between closing and reopening the iOS app. I can save a lot of the data, but can't make the export image command do what I think it should. My code keeps giving the error

export: can't open file (or mask file)

(The folders in my documents folder on my disk matching the tFilePath are present.)

Code: Select all

   put the number of images of this card into nImages
   put specialFolderPath("documents") & "/app data/testing/tempImages" into tTempPath
   
   repeat with i = 1 to nImages  
      put the short name of image i into tImageFileName
      put tTempPath & "/" & the short name of image i & ".png" into tFilePath
      export image tImageFileName to file tFilePath as PNG
   end repeat

Can anyone tell me what I'm not doing right?