Jump to content

Tiny gaps between jigsaw puzzle pieces


Recommended Posts

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

let mask = new PIXI.Graphics();
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;

Where tile is a clone of the whole image.

Link to comment
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".


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.

Link to comment
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.

Link to comment
Share on other sites

  • 1 month later...


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



Link to comment
Share on other sites

  • 2 weeks later...


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
Link to comment
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


Then i add that to the original image texture

        const bunny = new PIXI.Sprite(texture);
        bunny.mask = mask;



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



Link to comment
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
Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...