How to make a drawing canvas

  • 29 favourites

Stats

5,107 visits, 8,232 views

Tools

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!

  • 0 Comments

  • Order by
Want to leave a comment? Login or Register an account!