How do I draw lines ?

0 favourites
  • 12 posts
From the Asset Store
Draw It!
$19 USD
The objective is to correctly guess and complete the missing part of the picture.
  • I am starting to work at a connect-the-dots game. I figured the technical part, but I don't know how to draw lines (like Pencil Tool from Paint) <img src="smileys/smiley36.gif" border="0" align="middle" />

    The technical part goes something like this:

    There are points A and B and the event starts when the player touches point A. Then, every X seconds (0.5s ~ 0.7s) the position of the touched area is memorized in an array. When the user touches point B, an invisible object (line) is created starting from point A and finished to point B. Then an event checks and validates the line drawn by user if the object overlaps all the points recorded in the array.

    So the question that remains is how to draw lines ? (I need a better method then to create small dots (objects) every frame)

    Also feel free to correct me if the logic behind the technical part is wrong or if it can be optimized even better <img src="smileys/smiley20.gif" border="0" align="middle" />

  • Just Create a rectangle sprite 1 pixel high(or your choice of width), Move the origin point to far left. When you want to draw a line, create the sprite in x,y of starting point, set angle to start point x, start point y, end point x, end point y, then Set width to start point x, start point y, end point x, end point y.

    I am not sure

    about the Order though.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • You could also use the canvas plugin. Makes drawing stuff easier.

  • It's not exactly what you looking for. But i created a line drawing experiment while ago. It can give you some ideas.

  • Windwalker


    Thanks, but I know how to make a <font color="blue">Straight line</font> ... I need to know how to make a <font color="red">Drawn line</font> <img src="smileys/smiley1.gif" border="0" align="middle">

    <img src="" border="0">


    Do you mean this one ?

    Does it work without WebGL ?

  • Yeah, the only way to do this really well is with the canvas plugin, or the paster plugin. Canvas if you don't use webGL, Paster if you want to use webGL.

  • Yeah works without WebGL, try code like this:

    <img src="" border="0" />

    edit: you can probably also add the condition for lastx and lasty to be different from the mouse positions to save some resources.

  • mindfaQ


    Thank you <img src="smileys/smiley31.gif" border="0" align="middle" />

    At the moment I want to make simple games that run well on mobile browsers so is great that Canvas Plugin works without WebGL <img src="smileys/smiley1.gif" border="0" align="middle" />

  • Switching from Canvas to Paster since Canvas has lower FPS when WebGL is enabled <img src="smileys/smiley24.gif" border="0" align="middle" />

  • I had a little fiddle and managed to make this, hold your mouse to draw. ... WdyNFZPN0U

  • : Two things

    First the topic dates from 2013, this could be considering necroposting, so please be careful when answering to a topic, check the dates of the previous messages.

    Second, instead of "Every 0.00001 sec" you should just use "Every tick".

  • Sorry, didn't realise this was from 2013.

    Thanks, I hadn't tried every tick, thought it wouldn't have worked

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)