Cut image

[Brausoft]

Hello,
We want to do a puzzle videogame and we need to draw the pieces. We have the original image and we need to cut the pieces. The lines of the pieces shouldn?t be rectilinear but curved (not the usual classic form of the jigsaw puzzle pieces). Please could anybody help us to do this? Thank you very much.

[brynn]

Welcome Brausoft!

Oooohhh, that's too bad, because there is an Inkscape extension for drawing jigsaw puzzles, and they are like the traditional kind of pieces (afaik).  Speaking of the pieces though, can you give us any more guidance about how the pieces should be shaped?  "Not like traditional jigsaw pieces", and curved rather than angular, still covers a lot of ground!

I'm not clear.  Are you asking if someone would be interested in doing the work for you?  Or are you asking how to do it?

Off-Topic: show

Depending on how that jigsaw extension is made, it might not be very hard to program new shapes.  I think I'll try to contact the author, and ask if different pieces can be used.  I would love to make an abstract, really hard jigsaw puzzle!

Do you already know how to make the game?  What kind of file (or objects) do you need to input?

Depending on how that app works, I suppose you might need to either draw the cutting paths by hand, using Pen/Bezier tool, or use Clipping.  (Help menu > Inkscape manual > Clipping)  I've actually done this before, (testing out a new Inkscape extension that produces animated HTML5 docs (below)).  I used clipping for that.  And then I had to save a bitmap copy for each clipped piece.

If you can tell us what you need, to send to the game making program, we can help you do it.

XIA  http://xia.dane.ac-versailles.fr/index_en.html.  This is a whole different extension than the jigsaw extension.

And this is the link for the jigsaw extension.  Oh, I see it's for laser cutting.  I'm not sure if you would be able to get what you need from that extension, without sending to a laser cutter.  Maybe though.....probably, I'd say.

[Brausoft]

Yes, I am asking how to do it
I know how to make the game
I need png images to input

I have  drawn the cutting paths by hand, using Pen/Bezier tool, and then the Clipping. But when I put the pieces together to form the complete image, the pieces do not fit together correctly, and there are 1 or 2 pixels in between where I drew the bezier lines.

I need something like this

https://lh6.ggpht.com/uQ9ova7Vy5oxh40XL9JkDjBjPXTbppCun6Z8OvLPYMT4itWrO9SNg1JoNW_ovi1XDi0=h900-rw

[brynn]

I'm unable to open that image.  It appears to have a WEBP extension, which I haven't heard of.

The gaps you're seeing may be due to anti-aliasing.  It's hard to say, without seeing the results.  But it sounds like you know what you're doing, so it's probably the a-a.  (The other possibility would be how you drew the paths, and the paths did not match.  However, if the paths match precisely, there could still be an apparent gap, due to a-a.)  There are a number of approaches to fixing that, outlined in one of the offical FAQs https://inkscape.org/en/learn/faq/#There%27s_a_seam,_or_artifact,_between_adjacent_objects_sharing_the_same_border,_or_between_patterns.

However, those are all for eliminating that gap on canvas.  When the gap is occuring in the game....that's a tough question.

You said you used clipping, but also that the game software needs PNGs for input.  Did you use Edit menu > Make a Bitmap Copy for each piece?  Or maybe File menu > Export PNG Image?

There is a way to turn off anti-aliasing, in Document Properties > Page tab, at the bottom.  I have not used it before, so I'm not sure if it would be the best solution.  But you could try it.  Or maybe someone else will have an idea?

Edit
Just came across another possible solution.  Although it may make the image too pixelated.  Filters menu > Pixel tools > Pixelize

[Lazur]

Anti-aliasing.

That's a tough one to solve here as you cannot use overlapping.
Or can you?
If the game uses anti-aliasing -judged by that image it does- you will need eventually a ~~1-px overlap.

When using clipping, the border of the area will be anti-aliased, resulting the edge pixels have alpha fading to 0 when exported to png.
Even if pieces next to eachother are cut 100% precisely (by the exact same segments, otherwise it won't be exact due to the B?zier curve's default sloppyness), both sides will have some transparency. Which pixels if you superimpose won't become opaque unless you change the compositing/blending mode accordingly. Theoretically it's that easy if all pixels have the same alpha values. But as they differ, the method would need to be used on each pixel one by one.
Still, would rather use a raster editor to mask each piece from the png, to make sure the alpha values can all be added up.


What else? With normal blending mode in game, slightly overlap, and take care of the piece's z-order.