How to make a drawing canvas

5

Stats

10,543 visits, 16,604 views

Tools

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 28 Sep, 2014. Last updated 19 Feb, 2019

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!

  • 6 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • For mobile games, if you replace mouse with touch, I found that it creates lines coming from the top left of the screen. I solved this problem by adding the following:

    Line > Compare X = 0

    Line > set width to distance(Dot1.X,Dot1.Y,Dot2.X,Dot2.Y)+20

    Please note that you could do the same for Comparing Y if you wanted to but it isn't necessary. I also used +20 instead of +1 because my sprite was 20 pixels wide. Please also note that there is still a quarter of a sprite in the top left corner but it can be hidden by adding a new layer and placing a sprite to cover it. There might be a better solution but hope this helps you out a little

  • I tried it (for mobile) and it worked! In my case instead of getting the X,Y from mouse I was dragging a pen object and getting the position from the image point (set up a 2nd one in the tip of the pen). Had no issues!

  • it dosent work help

  • Following on from my earlier comment. If you do not want to use another layer to hide the quarter of a sprite in the top left corner, you can make them invisible instead.

    On start of layout> DOT1 set invisible

    DOT2 set invisible

    Line set invisible

    Line > X = 0 Line > set width to

    distance(Dot1.X,Dot1.Y,Dot2.X,Dot2.Y)+20

    Line > X = 0 DOT1 set invisible

    DOT2 set invisible

    Line set invisible

  • works very well on construct 3.Thank you so much for making this tutorial. One thing I would say is that I would recommend that you make the line into a dot for a much smoother drawn line and its better for single dots too

  • Load more comments (1 replies)