Tiny gaps between jigsaw puzzle pieces

[Pauline]

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.

[ivan.popelyshev]

> each piece is created with bezier curve mask

I know several ways to do that. Which one is yours?

[Pauline]

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.

[ivan.popelyshev]

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.

[ivan.popelyshev]

Welcome to the forums!

Чатики по html5 gamedev: https://t.me/gamedevforweb , https://t.me/web_gl

[ivan.popelyshev]

Option 3.

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

[Pauline]

 

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.

[ivan.popelyshev]

I cant reproduce it

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

[Pauline]

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:)

[Pauline]

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.

[Dilantha]

Hi,

Im also following the same tutorial and trying to make my first project using pixi. Please bare with me for my beginner questions.

After creating a mask with bezierCurve on four sides , i have split the original image into blocks and added the mask into those blocks. But as you can see below some parts of the mask is outside of the split image block

 

 

This will eventually cutoff the parts outside the image block and look like below. Can you please help me to solve this ? It will be a great help. Thanks

 

[ivan.popelyshev]

@Dilantha

Why did you split it? Now everything is harder  Its very hard to split or join geometries, calculate intersections and unions, pixi does not have boolean 2D shape library inside.

Basically, if you have two sprites you want to mask - put them into mask and mask the container. Alternatively, generate a texture from them (renderer.generateTexture) and use `Graphics.beginTextureFill` with that texture.

Yes, the problem can be solved on newbie level, but it will take effort. Sometimes people ask first question that is solvable only if you already know big parts of PixiJS sources, but that's not the case. You can do it, but its not a cake walk for newbie.

Edited November 20, 2019 by ivan.popelyshev

[Dilantha]

@ivan.popelyshev

Thanks a lot for your reply. I have removed splitting logic and placed the curves in different position of the original image and then applied the mask. Now it looks fine. Thanks again 

[Dilantha]

@ivan.popelyshev  How ever im facing a performance issue when trying to have large number of pieces of the puzzle. For example in below scenario 30 * 15 , the puzzle pieces moves very slowly.

I suspect its because im adding the image 30 * 15 times to the canvas . basically i create a mask for each piece using

mask.bezierCurveTo(p1x,p1y,p2x, p2y, p3x,p3y);

Then i add that to the original image texture

        const bunny = new PIXI.Sprite(texture);

        bunny.mask = mask;

        bunny.addChild(mask);

       app.stage.addChild(bunny);

 

 

I repeat this for every piece. Which i suspect can be the reason to the performance issue. Do you know a way of overcoming this ? Thank you

 

[ivan.popelyshev]

Try Graphics.beginTextureFill , maybe with matrix offset.

I mentioned it in this thread several times - it can be faster. However if you need really big amount, like yours, i think there are better ways, however i'm not sure that i can  explain them just in one sentence

Edited November 28, 2019 by ivan.popelyshev

[Dilantha]

@ivan.popelyshev Thanks for your reply. I will research more on this..