How to draw line given X and Y coords. Stair-step algorigthm?

I am trying to create a 2D board game.  To move a game piece, you click on the game piece to select it, then move the mouse to the square you want the piece to move to.

I am wanting to draw a "path" as the mouse moves to the potential destination square, showing which squares the piece will move to, taking into account any obstacles the game piece will need to navigate around.

The part I am struggling with most is how to draw the path line.  For example, the line will look different based upon the game piece moving SOUTH (indicated in blue) vs moving EAST (indicated in red).

[NOTE:  I am not sure what this is called in gaming circles (the shape of the lines themselves).  Is it called aliasing?  Anti-aliasing is supposed to "smooth"-out the "jagged" stair-step look of the lines formed (lines drawn at an angle, or circles).  I know that the letters I am typing, when zoomed up to like 800% of normal size appear very jagged. ]

I am just wondering what the algorithm is called and where I might go for help on this (including here on EE, of course).


Example:
draw-line.png
LVL 5
Tom KnowltonWeb developerAsked:
Who is Participating?
 
Tom KnowltonWeb developerAuthor Commented:
Yep - this is what I was thinking of:

https://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.