Sign in to follow this  
Pauline

Tiny gaps between jigsaw puzzle pieces

Recommended Posts

Hi! I have a jigsaw puzzle, each piece is created with bezier curve mask. When the puzzle is complete there are tiny gaps between the pieces. How to avoid that behavior? Antialias is set to true.

shot_191001_112847.png

Share this post


Link to post
Share on other sites

I have a getMask function which generates each piece mask like this:

let mask = new PIXI.Graphics();
mask.beginFill(0xFF3300);
mask.bezierCurveTo(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);

Where p1, p2, p3 are curve points. The third line repeats 4 times for each side of the piece. getMask returns a mask, then I implement it this way:

tile.mask = mask;
tile.addChild(mask);

Where tile is a clone of the whole image.

Share this post


Link to post
Share on other sites

so. no beginTextureFill, just a mask? ok. I think the problem is that curves on different pieces are actually different - there's no guarantee how curve will be separated to multiple points. That's why some AA samples aren't covered.

Option 1

Play with constants inside PIXI.GRAPHICS_CURVES, https://github.com/pixijs/pixi.js/blob/dev/packages/graphics/src/const.js

For example, lowPoly setting: https://www.pixiplayground.com/#/edit/3cAvPO~SyYqCie1_xym4C

Your target is to make curves the same in your pieces. If they match, there wont be uncovered samples in AA-ed pixels.

Option 2

Use a filter on it that will remove "parasite alpha".

https://www.pixiplayground.com/#/edit/jIM4IjmDFhS9q8fP_yunQ

Adjust the value according your case. 0.5, 0.6, 0.7, something like that. Warning: extra post-process effect might be slow on some devices.

Share this post


Link to post
Share on other sites

 

2 hours ago, ivan.popelyshev said:

Option 3.

Wait while I fix it in PixiJS , your case appeared very on time.

Thank you so much! I'll try ways 1 and 2 yet, maybe its enough to fix.

Share this post


Link to post
Share on other sites
12 hours ago, ivan.popelyshev said:

I have an idea, that beginTextureFill will work for you better than a mask. Can you try it please?

Nothing changed. Unless the code is a bit shorter now:)

Share this post


Link to post
Share on other sites

The problem was in the curvy coordinates: https://www.codeproject.com/Articles/395453/Html5-Jigsaw-Puzzle?msg=5669066#xx5669066xx

So, if your tiles or pieces or whatever you have are truly match to each other, the whole image looks perfectly solid and nice. Thanks to ivan.popelyshev for this solution!

However, I've found one more solution. I've just added an additional mask created with a 1px-wide border.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.