Phaser cannot draw a line when moving too fast

[Allen]

Hello guys,

 

I got an issue when I want to implement a drawing tool, if I move the pointer slow, it can draw a linear line, but if I move the point fast, it will have the gap between my 'brush' dot. I have attached a screenshot for this issue.

 

My planning solution is: when the pointer isDown or is dragging, start drawing. However, it seems there are not 'dragging' or 'moving' method for input.pointer. Is there any other ways that can solve this problem? Thank you very much.

[AzraelTycka]

Hello,

I don't know the general way for this but can't you just store positions and fill them in (start/end positions and fill in between) or better use canvas lineTo or Phaser's line?

EDIT: Wonder if that helps with fast mouse movements though.

[AzraelTycka]

Just to advance the idea above, when I got some time on my hands now :-).

You can probably save each point into an array when mouse moves and then draw that as lines with some approximations (some curve fitting would be probably fine here, there are some things like quadratic curve and so on in canvas, aren't there?). That way it will hopefully smooth out and removes the stuttering.

I'd love to see how you tackle this problem so could you post here some example (working not just code ;-)) when you get it working the way you want?

[lewster32]

You can detect when the pointer is down, when it is up and when it has moved - by taking all three of these things, you can simply draw lines between each point while the pointer is down. This is how virtually all paint apps work; some modern clever ones will try to make the lines between the points smoother but generally speaking, they're just drawing lines between the points the cursor is measured at each frame while the mouse button is down.