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.