Flash’s drawing API is really useful for a lot of applications and games, but it has one major drawback: user-drawn lines are usually jagged and sloppy looking. The simple fact is that it’s really difficult to draw smooth lines with a mouse. In many cases, it’s not a big deal and it is an accepted drawback of drawing with a mouse.
Recently, however, I built a flash game and those jagged lines were a real problem. I was creating a linerider-style game similar to this one, in which a user draws a track and then clicks a button to watch a character sled down the lines that they have just drawn. It’s fun to draw loops and jumps and watch the rider flip and fly all over the place. The jagged lines created by the Flash drawing API were creating a lot of problems for the physics simulation. My sled never picked up any speed because of all the little bumps on the user-drawn lines.
After spending a lot of time Googling around, I found a forum post that suggested using a basic easing script to draw smooth lines. It was so simple and so clever at the same time! It solved my problem, so I created a demo to show how it works.
Check out the Flash demo below. When it loads, the ease factor is 1, meaning that there is NO EASING. Try drawing a few circles on the gray rectangle and you’ll see that it’s the usual jagged drawing tool. Now, drag the red slider down until the easing reads about 0.25 and try drawing the circles again. You should notice that the lines look much smoother. Try drawing lines at different speeds and with different easing amounts. Remember that lower numbers mean MORE EASING (I know, it seems backwards, but it prevents a deadly “divide by zero” issue that you get by doing it the other way).
There is one drawback to this method. The line lags behind your mouse a little bit as you draw. In most cases, this isn't a huge issue and the benefit of smoother lines outweighs this drawback.
As usual, you can download the complete source code packet here.
If you've never played Linerider, check out this killer version. Please note that I did not create this awesome game. I created a similar game for a client that wishes to remain anonymous.