Jigsaw puzzle - Piece creation

Phaser 3
1

Hello, I would like to create a generic Jigsaw puzzle where I simply have to change the image to create new levels.

Here’s my thinking process to create pieces:

I would have a base texture which is simply the puzzle image.

Then, I would create two variables : rows and columns.

Then, I would do two forLoops( rows and columns) to create pieces.

Then, I would create a mask on the texture for each piece.

The mask would be the image of a square and should be used as the base mask for all pieces.

Then, according to its index, or the previous pieces generated, I would also add one or multiple circle images as a mask.

The circle mask(s) should be on the edge of the square (left, top, right, down). The circle mask should be revealing the piece outside or hiding it inside.

Is that a good way to achieve that?

Also, I tried using a geometry shape mask but it was a bit difficult to play with and to have nice pieces.

Is there a better way to do it? Thanks

2

Here is a 3rd party plugin to cut texture (normal texture or dynamic texture) to frames , then create image game objects from these frames :

1 Like
3

Thanks! The plugin is really cool! However I don’t see a way to have special piece shape (only base shape such as rectangle). Also, I would like to do it from scratch ^^.

4

Applying mask on each piece might take lots of performance, in mobile device.
(Assume that the amount of piece is more then 100 )

2 Likes
5

I create a method to generate jigsaw piece frames.

Concept :

  • Create a dynamic texture for jigsaw piece frames
  • Create a Rendertexture for render a piece
  • Uses this rendertexture to stamp base texture
  • Draw piece mask on Graphics, apply this graphics as mask of rendertexture
  • Draw rendertexture (with mask) to dynamic texture
RenderTexture + (Graphics mask)  --> DynamicTexture
6

Custom shape of piece is possible, too.

7

Maybe this is dead already but the plugin seems to have an error when trying to slice an almost squared image Any ideas on that? When I’m using an almost squared image I get this:

image
image1920×1040 136 KB

But if I resize it, the image gets fixed:

image
image1920×1040 153 KB

Any ideas? Thanks

8

I can fix it later, would you please provide that test pattern image for reproducing this case?

BTW, you can dm me or send message at official phaser discord server, or my plugin supporting discord server, to get help more quickly.

9

Ok, thank you so much. I wrote a message on the official phaser discord server. On the plugins text channel sending also te image.