Page 1 of 5

cutting irregular pieces from image for puzzle game

Posted: Tue Jun 03, 2025 11:26 pm
by rcmills
I am trying to develop a puzzle app, just for my fun. I have created puzzle shapes in graphic containers, and worked out my GUI, but haven't yet found a way to cut the puzzle shapes out of an image to place in my graphic containers. I have searched the forum and the LC docs, but can't find a way to do this.

Anyone done this before?

Re: cutting irregular pieces from image for puzzle game

Posted: Wed Jun 04, 2025 4:08 am
by dunbarx
Whew.

The only thing I found that sort of worked was to place a rectangular grid over an image and take screen shots of each one by hand. This worked, but the result is only a bunch of rectangles, not jigsaw puzzle shapes or even polygon graphics.

Anyone have a method to do this, to cut up an image by hand into smaller controls?

Craig

Re: cutting irregular pieces from image for puzzle game

Posted: Wed Jun 04, 2025 8:55 am
by Klaus
Hi rcmills,

what Craig said, create a lot of little screenshots.
Then set the backgroundpattern of your graphics to these images. :D

Best

Klaus

Re: cutting irregular pieces from image for puzzle game

Posted: Wed Jun 04, 2025 2:13 pm
by dunbarx
OK.

So nobody has any idea how to draw, say, a polygon graphic over a portion of an image and then "take a photo" of the enclosed image? Set the "pattern" of the graphic to the "pattern" below it. It would be as if one could take a screen shot of the drawn shape instead of the resizable rectangle that the OS provides.

Craig

Re: cutting irregular pieces from image for puzzle game

Posted: Wed Jun 04, 2025 3:32 pm
by FourthWorld
One could conceivably place polygon objects over the image, and perform a loop in which all but one of the polys set their fill color to match the card color, then use the snapshot command to grab the resulting piece.

Tedious, though, to place those polys. Unless this is an exercise for learning, there are so many free packages that make jigsaw puzzles out of images I'd just use one of those.

Re: cutting irregular pieces from image for puzzle game

Posted: Wed Jun 04, 2025 4:51 pm
by dunbarx
Learning?

pseudoPseudo

Code: Select all

importImage
DrawPolygonGraphicsToTasteOverTheImage
nameThoseGraphics
DuplicateAllGraphicsAndSetAsideSomewhere
nameTheDuplicates
scanImageFromTopLeftToBotRightUnderScriptControl
getTheMouseColorAndTheGraphicTheCursorIsWithinWhileScanning
setThe"PixelColor"OfTheAppropriateDuplicateGraphic
All should work fine, if only there was a way to set the color of a specified pixel (the "pixelColor" above). This would be the "opposite" of the mouseColor, which one can read but not write. I don't think this is possible in LC, or is it?

Craig

Re: cutting irregular pieces from image for puzzle game

Posted: Wed Jun 04, 2025 7:41 pm
by richmond62
As a "spade and mattock" sort of person here is my cut . . .

1. Found an image I want to make my jigsaw from:
-
Sunflowers.jpg
-
2. Found a jigsaw template:
-
jigsaw.jpg
-
https://www.freepik.com/free-vector/whi ... Background

The ONLY 'shag' about this is that all the pieces in my jigsaw template are the same.

Made sure they were both the same size. 8)

Opened both in GIMP (Still using GIMP 2.10 as version 3 is still 'not') and layered the jigsaw above the sunflowers;
-
Screenshot 2025-06-04 at 21.44.35.jpg

Re: cutting irregular pieces from image for puzzle game

Posted: Wed Jun 04, 2025 7:49 pm
by richmond62
I counted the jigsaw pieces: 77 . . .

So, in theory what it needed is 77 layers.

However, Richmond being a slob, and NOT really wanting to make a jigsaw will use a "quick-N-dirty" cut-price version of this exercise.

This thing only has 9 puzzle pieces:
-
Screenshot 2025-06-04 at 21.57.57.jpg
-
I duplicated my jigsaw layer so I had 9 layers!
-
Then I "made hay" with the paint-pot tool on each layer:
-
Screenshot 2025-06-04 at 22.04.16.png
-
Lots of fooling around later I had 9 puzzle pieces:
-
b7.png
b7.png (38.05 KiB) Viewed 7298 times

Re: cutting irregular pieces from image for puzzle game

Posted: Wed Jun 04, 2025 8:24 pm
by richmond62
Then ALL I needed was 9 drop-targets (best thing as far as I am concerned is a graphic rectangle set to 2% opacity).

Re: cutting irregular pieces from image for puzzle game

Posted: Wed Jun 04, 2025 8:26 pm
by dunbarx
Richmond.

How did you get the nine puzzle pieces to each contain their particular portion of the sunflower image?

Craig

Re: cutting irregular pieces from image for puzzle game

Posted: Wed Jun 04, 2025 9:05 pm
by richmond62

Re: cutting irregular pieces from image for puzzle game

Posted: Wed Jun 04, 2025 9:07 pm
by richmond62
How did you get the nine puzzle pieces to each contain their particular portion of the sunflower image?
Look very closely at my GIMP screenshots. 8)

Re: cutting irregular pieces from image for puzzle game

Posted: Thu Jun 05, 2025 3:07 am
by rcmills
So, you basically Photoshopped 9 puzzle pieces?

Re: cutting irregular pieces from image for puzzle game

Posted: Thu Jun 05, 2025 6:21 am
by richmond62
Yes. Except I used GIMP as I prefer open source software.

Re: cutting irregular pieces from image for puzzle game

Posted: Thu Jun 05, 2025 12:40 pm
by richmond62
Automating irregular polygons in LiveCode should be possible, but the question is:

Is that justified given the time and effort to write what is probably fairly complex code?

As GIMP can allow you to do "the do" as I did without my having to reinvent the wheel I really could see no reason
to get up off my fat behind any more than I had to using GIMP.
I am trying to develop a puzzle app, just for my fun. I have created puzzle shapes in graphic containers, and worked out my GUI, but haven't yet found a way to cut the puzzle shapes out of an image to place in my graphic containers.
My puzzle shapes are PNG images: I can see no obvious reason why they need to be inside 'graphic containers'.