play.idevgames.co.uk
   156 GAMES
   394 MEMBERS
   15 TUTORIALS
   48 DEV LOGS
Forgot your password? Click here
Back

Real time pixel arms


Posted: 2018-02-19 19:10:52 |    Posted by DanBarreno |    www.netherworldgame.com/


2
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.

https://i.imgur.com/wO4zGBJ.jpg

 

 

 

 

 

 

 

 

 

 

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.

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

1
Login to like
iDev Commented:

Looking great thanks for sharing!

Back to top