Help for Drawing game

Hello everyone,

Do you know how to make a game where you have to “draw”. That is to say, make drawings with your mouse or finger like this:
https://awwapp.com/?fbclid=IwAR3tPFs0CSFokzERgvrKKzaRHbHxnY9XQXTJUG6XyI3WVN5kxJM2oWo7Ij8

I just want a brush function and a delete function

Thank you in advance the community

I finally have a problem of counting, the dots are not close enough to form a line… Do you know how to do it ?

My initial thoughts are that you’d want to draw a line from the previous mouse/touch point to the current one. It wouldn’t be very smooth, but it’s a start.

Once that is working, you can extend it to draw a Bezier curve using the last 3 or 4 touch points.

[Edit]
I just checked your link. This appears to be what the app is doing. If you quickly swirl the mouse around on the screen, you’ll see there are straight lines making up the doodle. As soon as you release the mouse button, it smoothens it out.

You could use the shape painter object. But, I don’t know how easy it would be to use it as a drawing tool.
But, it is pretty easy to make lines and shapes with it.
Link to the wiki: Shape painter object [GDevelop wiki]

Hello,

Thank you for your two very complete answers. I will try this morning to connect the previous point and the mouse as suggested by MrMen. :smile:

Midhil, I have already downloaded this plugin but it doesn’t allow you to make a real freehand drawing. :sweat_smile:

I’ll keep you informed about the progress of the project, thanks again for your help because I was stuck… :smiley:

@Ano49800, you will need the shape painter to draw in GDevelop (it has the functionality to draw a bezier curve too :slight_smile: )

Oh yeah right, I just used them :grin:

I’ve done this but it doesn’t work :sweat_smile:

Yeah, because you’re creating NewObject right under your mouse pointer, and then drawing from that to the mouse pointer. Which is where NewObject is.

Instead, you’ll need to :

  1. Create scene variables to keep track of the previous mouse position.
  2. Draw from previous mouse position (from the scene variables) to the current mouse position.
  3. Set the previous mouse position to the current mouse position (at the end of all the events).
  4. In the Drawing Shape object, uncheck the box “Clear the rendered image between each frame.”

Also, to use the bezier functionality later on, you’ll need to keep track of all the points generated while the mouse button is down. You then have to traverse this list and use the points to apply the bezier curve function.

That last bit is a lot trickier, and if you get stuck I’d suggest posting a new thread for help.

1 Like

Thank you for this answer once again very detailed

I’m going to try this right now :grin:

[EDIT]

Here is the solution:

If you show a screenshot in English, It might be useful for others :grin:

I use Aww Whiteboard if I am showing something live because I think its easy to use and has good drawing tools.
I write and draw anything with xp-pen ( https://www.xp-pen.com ) graphics tablet , The drawing tablet works great for digital writing with whiteboard apps .

Nice!

Have you found a way to do the delete function?