How do I show range of grid movement in AS3? When player controls a character and chooses "move" options, the grid of movement will be displayed as 3 grid of X, 4 grid of Y (Both sides, + and -). So, it will be like this:

enter image description here

In the image above, movement grid displayed in blue color. But, how do i display a range grid movement like that?

  • 1
    \$\begingroup\$ You want to know how to display it or how to find it in the first place? \$\endgroup\$
    – House
    Oct 26, 2013 at 16:19
  • \$\begingroup\$ Both of it Sir. I am sorry, i am new in game progrmming \$\endgroup\$
    – Kaoru
    Oct 26, 2013 at 16:23
  • \$\begingroup\$ If your characters have a range pattern then it's as simply as filling in the tiles and checking it against non walkable tiles. \$\endgroup\$
    – Sidar
    Oct 26, 2013 at 17:54

2 Answers 2


Not sure exactly how you have your current system setup, but one way to handle this situation rather simply is to have a Sprite that depicts the range and simply do a quick collision check with your tiles currently displayed.

The Sprite itself could be your visual element, but it doesn't have to be. You could trigger whatever tile specific highlighting you want after the collision check.

So you could have a method that does this collision check and returns valid tiles, then you can do any secondary checks such as if it's actually a tile that you can occupy - ie not water. Ideally that method accepts a range Sprite and the location it should be centered at for the check as parameters.


As for how to identify the tiles in range, there was a question similar to this recently - maybe this will give you a useful starting point?

(Note that those examples assume you want to work with all tiles within a radius. If you want to show walking distances around obstacles, use Depth-First Search from the character's position, returning whenever you hit an obstacle or your search depth reaches your maximum hop count)

For displaying the range with a blue tint, I might try something like...

const WITHIN_RANGE_COLOR : ColorTransform = new ColorTransform(0.5, 0.5, 1, 1);
const NORMAL_COLOR : ColorTransform = new ColorTransform(1, 1, 1, 1);

then each time you find a tile in range, do:

tileDisplayObject.transform.colorTransform = WITHIN_RANGE_COLOR

just don't forget to set it back to NORMAL_COLOR when you're done displaying movement range.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .