Line Drawing - Polish?

HappyKat78

Hi All,

I've been using TShirtBooth's Line Drawing with Ink template (thanks for that TSB!), but if I draw curved lines slowly they appear really cracked as the end of one segment isn't quite meeting or rotating to the next I guess. Does anyone know how to draw lines that are smooth (i.e. don't have gaps in them) a la Flight Control even when using a width of 8 pixels?

Thanks very much in advance!

HK

HappyKat78

Just bumping this in case anyone has figured out a good solution. :-) Thanks

ericzingeler

Just finished this up today. Let me know if you have any questions. Thanks!

http://www.ezinterweb.com/2013/06/line-draw-for-gamesalad.html

HappyKat78

Wow, this looks good. I wonder it the squares could be rotated slightly better to look smoother? I'll take a stab at that over the weekend. Also, do you think there is a way to create a solid line using this method (as opposed to dashed line)?

tatiang

@HappyKat78 try changing self.spotDistance to something smaller in the Point Maker actor.

ericzingeler

Yes, its possible to make a solid line. You'll probably have to increase the speed of the function. You can do that my duplicating the top condition rule inside the two loop part rules in the Make Point actor.

HappyKat78

Sorry for the delayed response, been traveling. Thanks for the help, I'll try it out.

HappyKat78

I had a play with the line drawing example. While it's the most accurate I've seen in terms of evenly spacing dashed lines and it does place everything exactly where the mouse/finger was dragged, there is quite a delay in actually drawing the line when dragging the finger fast.

Check out this video: http://tonyngo.net/2011/09/smooth-line-drawing-in-ios/

I wonder if it's possible to draw quickly and smoothly like this in GS? So far the examples I've seen either have broken/cracky lines, have a delay when drawing reasonably quickly or don't draw exactly where the mouse/finger goes as they're trying to update to the new position without following the actual path.

This would be a good thing to solve as right now I haven't seen a "flawless" line drawing example yet that rivals what other developers are doing outside of GS. Interestingly I think Corona has a few line drawing examples that are quite good and Corona is also based off of LUA. Makes me think it's possible to do in GS, but I certainly haven't figured it out yet. If anyone comes up with anything solid please share on this thread. I will too.

Appreciate all of the efforts so far!

Cheers,

HK

ericzingeler

@HappyKat78

Yes, I agree that my line draw function was a bit slow and thus I created a non-floating point version that uses integers instead of reals to increase performance. Results are rather promising. Download my latest project that contains both real and integer version.

If the main event in your scene is the drawing function, then here is a fast integer version that runs the draw point function 5 times per loop cycle. I think this is about as fast as this function gets.

About a "flawless" line drawing example... maybe possible in GS. The big restriction right now is the speed of loops. Basically, the function doesn't loop fast enough to keep up with your finger. So the big question is... why is it not fast enough? I'd say two reasons:

1. My function is nowhere near perfect. After completing this project, I ran across some algorithms on the web specifically designed for this task... but at this point, I just don't have the time to implement them into GS.

2. GameSalad when compared to let's say Corona, is well... slow. I've run some loop tests in Corona and the results were too fast to compare. Yes GameSalad and Corona both use Lua, but obviously not in the same way. In Corona, you build projects coding directly in Lua and in GS we don't... could have something to do with it. In any case a trade off I'm willing to accept for ease of use.

So give that fast integer version a shot and let me know how it goes. Maybe one day I'll get around to a new implementation.

HappyKat78

Thanks very much. I'll definitely give it a shot and let you know how I get on!

HappyKat78

@EricZingleler

Nice job! I tried the faster code and actually added some gaps (I made the points 24x12 with the plotGap at 30) and it's very fast and responsive. Definitely the best I've seen yet. One comment and one question for you:

Comment - The vectors aren't quite accurate (you can see this more clearly when increasing the width of the points as I have). They're not bad, but I found TShirtBooth's line drawing vectors appear more accurate. It might be good to combine TSBs vector coding with your super responsive line drawing code. I'll have a go at this too, although I'm not great at altering other's code.

Question - I notice you're repeating the rules 12 times in the plot maker (and twice in the Path Creator). I've never seen this. I was curious to know how you found that 12 was the optimal number. Is this also to help "beat the clock" to help update the tables quick enough. The logic at least makes sense to me but I'm interested to learn more.

Thanks again for all of your help. This really is great stuff!

Cheers,

HK

Braydon_SFX

Nice one, @ericzingler!

HappyKat78

@ericzingler - Did you get chance to have a look at the rotation of segments? I've played around but haven't figured it out yet. I know there must be a way though to combine your approach and TShirtBooth's approach to end up with fast, accurate lines drawing with good segment rotation.

HappyKat78

Also, I figured out why the segments don't rotate properly (you need to use wider segments, say 24x12 pixels to see this)... It's because they are rotating from the center position of the previous segment, not the end point of the segment. Haven't worked out how to improve this yet, but that's definitely causing the issue.