How do I make a sketch game where the player will fill color only in the section where touch began?

https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExY2RiNjlhNTI2ZmM2ZTg5ZmJmNjYxYzY1YWEzNjI4NDZiNDRiNmIxMiZjdD1n/UJJ0wRtsxQNjXmkpjh/giphy.gif

I am trying to make a sketching game where the color will only be filled where the player touches first and keep on drawing in 'that specific area only (enclosed by black boundaries)' and then as soon as player touch end, the next portion of the image that it will touch will behave the same.

To make this Gif, i pasted it on a drawing canvas and flood filled it with (0,0,0,0) i.e. with 0 opacity. So that's just a hard-coded way of doing just one portion.

p.s. I am looking for maybe some kind of script that will work on 'ANY' image with specific black portions to fill.

Thank you dop2000 for your reply.

The solution provided appears to be highly dependent on specific images and the player's brush will fill everything that's opacity is set to 0 in one continuous skroke, therefore does not meet the requirements of the problem at hand.

It is my understanding that a more suitable approach may involve the use of a flood-fill algorithm, which I believe may provide a more appropriate solution to the problem.

Here is another demo with flood fill:

howtoconstructdemos.com/using-flood-fill-for-drawing-canvas-to-make-a-coloring-game

Maybe you can make a combination of two - flood fill an area with a distinctive color, copy it to another canvas, use it as a mask for drawing.

Here's one possible solution of the flood filling and masking.

dropbox.com/s/z7afhehma5py976/draw_within_lines.c3p

The flood fill basically just makes a hole that you then can draw into on the mask canvas. Didn't get it working with any full screen scaling though.

R0J0hound I don't know why, but your demo constantly crashes Chrome:

Aw, Snap!

Error code: STATUS_BREAKPOINT

Strange, I use Chrome and it doesn't crash for me. Wonder what is causing the crash.

R0J0hound I don't know why, but your demo constantly crashes Chrome:

Aw, Snap!

Error code: STATUS_BREAKPOINT

dop2000 This might be because R0J0hound is using r334 , i.e. beta version https://editor.construct.net/r334/.

Clear the cache and run this on beta version. The program will not crash.

Here's one possible solution of the flood filling and masking.

https://www.dropbox.com/s/z7afhehma5py976/draw_within_lines.c3p?dl=1

The flood fill basically just makes a hole that you then can draw into on the mask canvas. Didn't get it working with any full screen scaling though.

R0J0hound Thank you for providing the code. It was very helpful. I do have a little doubt, how do I make it work for viewport-fit = Auto and Full screen mode = Letterbox Scale.

Im not sure either. By default the resolution of the canvas will change when the view size changes, although there is a setting to make the canvas have a fixed resolution.

When I tested it it didn’t seem to work either way. Mainly the fill seemed to pass the lines due to things being blurred a bit from resizing, so the lines were no longer fully black.

My thought was to have the canvas use a fixed resolution and maybe at most have to adjust the mouse location, but trying it didn’t seem to work but I’m not sure.

Ok, fiddled with it more and got it to work. The link is updated

Found that fixed resolution canvas' scale the image when loading pixel data, so left it at automatic. Also changed the line detection to use a tolerance.

Found that pasting repeatedly blurs the lines so I combined the pixel data directly with some javascript.

The only issue now is that the delay from making the mask is noticeable.

Ok, fiddled with it more and got it to work. The link is updated

Found that fixed resolution canvas' scale the image when loading pixel data, so left it at automatic. Also changed the line detection to use a tolerance.

Found that pasting repeatedly blurs the lines so I combined the pixel data directly with some javascript.

The only issue now is that the delay from making the mask is noticeable.

Hi R0J0hound, The link doesn't seem to be updated for some reason.

Reuploaded again in case I didn't remember to do it.

Reuploaded again in case I didn't remember to do it.

Hi R0J0hound, for some reason, the .c3p file that you sent is not compatible with the full-screen scaling = letterbox Scale.

Is there any way around it where i can play this on full screen mode?

P.S. letterbox Integer Scale works but it leaves a lot of white space all around.

in case giphy command not works: giphy.com/gifs/construct3-forum-doubt-vnLEkAim9WBz5wcFvU