Home » Construct 2 » How to draw lines or a swipe in construct 2 | html5

How to draw lines or a swipe in construct 2 | html5

In my game toxic bubble I needed to draw lines. I already said I would be making a tutorial about this. This tutorial is also useful if you want to use a swipe action like in the game “fruit ninja”.


1: First create a sprite like this, a long rectangle. It is important that you set the image point to the left like in the example above.

2: Add a Boolean to the sprite and call it “placed.” We will use this later.

3: Add the touch object to layout.



4: Add a new event touch – on any touch start. Add the action system – create object and spawn the sprite on touch.x and touch.y so it will appear where we touched on the screen.

5: Also add the event touch – on any touch end and set the Boolean of the sprite “placed” to true.



6: Now we need to set the size of the sprite and the direction you are touching the screen.
First add the action Sprite – on screen and another condition to check if the Boolean “placed” is false. We do this because we only want this action to apply to the line we are currently drawing.

7: Add the action sprite – set angle and set the angle towards touch.X and touch.Y test the game now to see how this works. The last thing we need to do is set the size of the line.

8: Add another action sprite – set width and use the handy build-in formula of construct2 called “distance.” Set the width to distance(sprite.x,sprite.y,touch.x,touch.y)

Now test it out and if you have done it correctly you can draw lines. If you want them to disappear after a certain amount of time you can easily add the fade behavior.

Hope you liked this tutorial


Posted in Construct 2, html5, Tutorials

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>