Real time pixel arms

When I posted the following tweet, many of you asked me how I manage to draw the arm of our character in real time. It is much simpler than it seems.

We start by drawing a segment.

What we have? 2 points, the beginning of the segment and the end, we also have the pixel size, which in our case we determine depending on the Sprite selected automatically.

        The process is pretty simple, we calculate distances between the possible positions of our next pixel with the end point, the pixel that has the best distance to the final pixel will be the one chosen to be drawn. (this is very optimizable, for example, if the target pixel is in a lower position than our current pixel, we can directly discard the higher positions)

Possible position of the next pixel
Position of the next pixel
Segment 

In an iterative task, our origin pixel is now the pixel already drawn, until the distance of the next pixel to be drawn is greater than the distance of the current pixel with the destination.

Not optimized version .

Optimized version

Real-time Example

This process has to be repeated every frame.

We have almost all the work done, to have the complete arm we just have to position the elbow, this elbow will be the end of the first segment and the beginning of the second segment, which will move based on the position of the initial point of the first segment and the end point of the second segment.

Real-time Example  

Ready, we have our fully functional arm , let's see it in action.

I hope you liked it.

we take this opportunity to say we are about to launch our Kickstarter (probably when you read this has already been released) for more information you can enter our Website or follow us on Twitter, thanks for reading our article!

Dan.