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

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

 

image.thumb.png.190747ffafc465c41bf390e101c2079b.png

 

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

 

image.thumb.png.cfbf873bbdb95d13747401b608287ac4.png

Share this post


Link to post
Share on other sites

@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 by ivan.popelyshev

Share this post


Link to post
Share on other sites

@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,p2xp2yp3x,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

 

image.thumb.png.3373c9146f3f6857ee9cb4f8add18413.png

Share this post


Link to post
Share on other sites

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 by ivan.popelyshev

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...

  • Recently Browsing   0 members

    No registered users viewing this page.