Translations

Know another language? Translate this tutorial!

Stats

2,791 visitors
10K page views

How to make a drawing canvas

Favourite 26 favourites
Tutorial written by DaemonOriginally published on 28th, September 2014 - 1 revision

In this tutorial I will be showing how to make a canvas that you can draw on using Construct 2. If you've ever tried to create a drawing surface, you most likely made it by spawning objects every tick at the mouse's position. Although it does work, it has two main problems: if you draw too fast, your drawing may look like this:

Because the game isn't ticking fast enough to spawn all the objects to cover the line. The other problem is, if you spawn too many objects down, the canvas might get overloaded and that leads to performance issues. This procedure is not going to work. If you have seen any drawing app, like Microsoft Paint, you may know how those programs work. They spawn in lines between the objects we have already spawned, and if the system does skip a section, it will be filled in with the line. But how do we do that? It's actually really simple. We use two temporary dots, and one line that will be spawned over and over again.


[I will reference the object as "line" and the drawing as "drawn line."] We teleport the first dot to the start of the drawn line. Then, (the mouse has moved since) we teleport the second dot to the mouse. We spawn the line at the first dot (the line's origin is at it's end). We then make the line facing the right way, and make it as long as it should be. Then, we move the first dot to the right position to continue. Then, we repeat that every tick, making sure that when we let go of the mouse, we start teleporting the first dot to it, so it is always in the right place when we start drawing a new line.

You can invert conditions by right-clicking and selecting Invert. I set the two dots to initially invisible in their properties. The finished drawing will look like this:

Thanks for reading!

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.

Comments

0
dhunHERO 2,217 rep

Thanks a bunch! :D

Thursday, November 24, 2016 at 1:38:38 PM
1
dhunHERO 2,217 rep

I still have really small gaps, so is that just me? (Before I had big gaps, but your tutorial fixed it! :D)

Thursday, November 24, 2016 at 1:44:07 PM
0
Nutmeg0703 360 rep

How do I add; "set width to distance" I can't seem to be able to locate that option?

Tuesday, November 29, 2016 at 5:24:59 PM
0
Nutmeg0703 360 rep

Actually, i figured it out! Thank you!

Tuesday, November 29, 2016 at 5:41:00 PM
0
Nutmeg0703 360 rep

I was wondering if anyone can help, on the initial touch or click, a straight line is made before I start dragging/drawing. Any ideas on what could be making this? Theres also a very small vertical line being made, so it's like it's trying to draw two lines at once. I have my event set up exactly like the tutorial.

Wednesday, November 30, 2016 at 6:08:20 PM
0
abdullahcs00 152 rep

Nutmeg0703
Did you solve your problem ??

Friday, February 10, 2017 at 6:54:34 PM
0
liann2 202 rep
I was wondering if anyone can help, on the initial touch or click, a straight line is made before I start dragging/drawing. Any ideas on what could be making this? Theres also a very small vertical line being made, so it's like it's trying to draw two lines at once. I have my event set up exactly like the tutorial.
quoted from Nutmeg0703

i am also having this exact same problem. Any chance that you have found a solution?

abdullahcs00

Friday, February 24, 2017 at 2:07:06 AM
0
Maverick1912 2,358 rep

I have found solution for this :
I added a sub-event trigger once inside Touch > Is In Touch.
Then pick instance 0 of LINE and destroy it.

While not touching anymore, I set position of DOT01 and DOT02 to Touch Position X and Y.

Cheers :)

Friday, March 10, 2017 at 9:44:38 AM
0
supinfra 237 rep

Nice! I can't put it to work with the Touch plugin, but it worked fine with Mouse.
As I didn't experienced any problem with Mouse plugin on Android, it doesn't seem a problem.

Tuesday, September 12, 2017 at 7:10:54 PM
0
rengo 381 rep
I have found solution for this :
I added a sub-event trigger once inside Touch > Is In Touch.
Then pick instance 0 of LINE and destroy it.

While not touching anymore, I set position of DOT01 and DOT02 to Touch Position X and Y.

Cheers :)
quoted from Maverick1912

Hello Maverick1912,
I tried applying your solution into my code, but it does not seem to work would you mind sharing the screen shot of the actual event. thank you

Saturday, September 16, 2017 at 4:34:36 AM
0
rengo 381 rep

Never mind. Got it working :)

Saturday, September 16, 2017 at 6:21:37 AM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.