Divide image and reveal it piece by piece

How do I...?
1

How I can divide image to wanted sizes of squares and then reveal it piece by piece?

2

Hi there!

One option is to cut out the image in the number of desired parts and place each one on an object (sprite), placing them side by side. And use the “hide” and “show” options in the scene events according to the player’s interaction.

As you can see in the link below:
[Visibility of an object](gdevelop5:objects:base_object:events [GDevelop wiki])

Personally, I crop my images with GIMP and do the strokes in Inkscape. (You can use the software of your choice).

Tell us if you still have questions!

Att,
Gui Rodrigues.

2 Likes
3

Thanks guirodrigues!
I was testing to cut it into parts with Photoscape.
Just thougt, if there’s many little pieces, how it would be possibility make more automatically, and maybe lighter way than separate images?
Is there possibility maybe use somekind of mask(s), which moves and reveal image?

4

You’re welcome!

Oh yeah.

Can you give me a more accurate example of what you want / need to do?

For example: When “player” completes “puzzle”, show images from 1 to 10. (If possible, stipulate a total number of pieces).

Just so that I (and other members of this forum) can see the bigger picture and help you more accurately.

Att,
Gui Rodrigues.

1 Like
5

Thank you.
Well, condition could be like anything what player do and result from that one of the piece of image would reveal.
On different levels number of pieces on images would be different. like from 2 x 2 to 100 x 100 , or something like that.
Just wondering, what would be light and more automatic way to make that without build those images by hand on every levels?

6

Will these parts of the bigger picture have different behaviors and results such as animating/changing, destroying, etc.?

Or will it ONLY reveal itself (increase the lighting / field of view of the image)?

Because if you want more control and more possibilities in each part / piece of image, I would recommend separating them into different objects / sprites.

Att,
Gui Rodrigues

1 Like
7

For beginning, I thought to test just only revealing part by part. And when all parts has revealed, it start just new level.

8

You could probably get the canvas object and draw the images like this:
canvas.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
The parameters with ‘s’ are for specifying what part of the image you want to draw and the d’s are for where on the canvas you want to draw it.

You shoul be able to get the canvas with: “document.getElementById(GDCanvasName)”;

I don’t know of any other ways to cut an image in js. Or of a GDevelop specific solution.

1 Like
9

Why don’t you take a single black square and tile it on top of the image. Then when the player does something you select a random square and erase it, thus revealing a piece of the image…