143 GAMES
   356 MEMBERS
   44 DEV LOGS
Forgot your password? Click here

Real time pixel arms

Posted: 2018-02-19 19:10:52 |    Posted by DanBarreno |

Login to like

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


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!



Would you like to comment on this post? Create an account in less then 1 minute. Click here

Login to like
iDev Commented:

Looking great thanks for sharing!

Back to top