Cut an image into jigsaw blocks

Phaser 3
1

Hi,
I’m trying to make a jigsaw puzzle from any given image.

Below is the shape of a jigsaw piece that I intend to cut.
shape

I’ve created the geometric shape for the above jigsaw image as below.

        const shape = scene.make.graphics();
        shape.fillStyle('0xffffff');

        shape.beginPath();

        if (this.left_side === 0) {
            shape.moveTo(tl.x, tl.y);
            shape.lineTo(bl.x, bl.y);
        } else if (this.left_side === -1) {
            shape.moveTo(tl.x, tl.y);
            shape.lineTo(tl.x, Math.floor(tl.y + height / 3));
            shape.lineTo(Math.floor(tl.x + width * 0.10), Math.floor(tl.y + height / 3));
            shape.lineTo(Math.floor(tl.x + width * 0.15), Math.floor(tl.y + height / 3 + height / 6));
            shape.lineTo(Math.floor(tl.x + width * 0.10), Math.floor(tl.y + height / 3 + 2 * height / 6));
            shape.lineTo(tl.x, Math.floor(tl.y + height / 3 + 2 * height / 6));
            shape.lineTo(bl.x, bl.y);
            shape.fill();
          .......

Then I made a geometric mask from that shape and assigned it to the image

const mask = shape.createGeometryMask();
sprite.setMask(mask); // sprite is the original image that I'm trying to cut jigsaw pieces from

Now I get a jigsaw piece like below.
cut-shape

Now when I’m trying to drag the jigsaw piece, the image inside the shape is getting dragged, but the jigsaw piece mask is static.

How can I glue the jigsaw piece to the image so both the image and the mask get dragged together.
Or is there a better way to do this?

Appreciate any help to resolve this issue.

2

i did something similar to this in radial fill script
what i did was additionally calling graphic.setPosition everytime the object move.

usually you glue object that you want to move together by adding it to a container.
but graphic object type doesn’t seems to follow container. so i override set position to add graphicSetPosition call everytime they try to move the container.

3

Thanks for your thoughts @as3mbus.
I’m thinking that using scene.textures.createCanvas to crop the path would be the best approach.
Have you used it before?

Thanks

4

no. but keep me updated if it works for you :slight_smile:

5

I made a puzzle game some time ago, and ended up using basic canvas elements, and cutting all the pieces in a loop: creating a canvas the size of the piece, drawImage based on its position, and then doing path context cuts (lines, quadratic curves, etc). Then it’s just a matter of setting the canvas to a texture and storing all the correct positioning values. I’d have to find the code though to see how it worked in detail. But to me, it was easier than using graphics and masks.

1 Like
6

Hi @prob,
After trying with masks, I ended up with your approach. I’m glad that you’ve also achieved the same.
But I’m struggling to create jigsaw pieces with curves. I’m currently making pieces in non curvy shapes.

cut-shape

It would be great if you could share the code so I can get an idea on how to make jigsaw puzzles with curves.

Thanks.

1 Like