Drawing a hex grid in Flash?

Question

What's the easiest way to draw a hex grid algorithmically? How should I present them in data?

For example, in a square grid, I could just save x-y coordinates..

Answer 1

So hexagon is a neat library for AS3 games, it has some hexagon classes that might be handy in your research. This article has some very nice details about hexagon tiles in Flash.

Answer 2

There are several ways to manage hex map coordinates and most of them unintuitively insist on mapping them to x-y coordinates which is only important for rendering. Some form of polar coordinates is usually best. I have a perl library for managing most vector calculations which is very useful point-of-reference computing like AI and other search trees.

http://en.wikipedia.org/wiki/Polar_coordinate_system

For the cheap seats, polar coordinates plots a point as the origin (like the standard x-y Cartesian graph), picks a vector as a baseline (like the Cartesian) and then designates points as (magnitude, degrees).

Where this really hits a home-run with hex maps is that every pure angle is a multiple of 60 degrees. If you assign each hex side a facing ((a,b,d,e,f,g) and apply a vector as a magnitude and facing, several useful properties emerge.

1) Every hex can be represented as a sum of two adjacent vectors (or a single vector where the second vector is a magnitude 0 or identity element). e.g. 1a+1b = 1a1b or 1b1a. Either way, it's a traversal of 2 hexes, a magnitude of 2, and designates a unique hex from the origin (0,0). 2) Non-adjacent vectors can always be simplified to two adjacent vectors applying these rules: 2) Negation: 1A + 1D = 0, 1B + 1E = 0, 1C + 1F = 0, e.g. 3) Combination : 1A + 1C = 1B, 1B + 1D = 1C, 1C + 1E = 1D, 1D + 1F = 1E, 1E + 1A = 1F

Keeping these principles in mind, a missile that must traverse the actual space, needs to preserve the vectors as a concatenation or order of smaller traversals. 1A + 1A + 1C + 1C represents a missile that travels two hexes out and then banks sharply (120 degrees) and travels two hexes, ending its traversal only 2 hexes away but 60 degrees off course from it's initial direction.

The targeting computer or resulting explosion, however, may only care about the range, so simplifying these vectors using those rules may be important. To figure out the shortest distance between any two points, simply concatenate the vectors and simplify them.

It's also pretty easy to create a hex map and render it Create a Hex Object as the origin with properties, Magnitude = 0, Vector = NULL, Label(optional) = some string (I like to make this the human readable value), Name = 0 (concatenation of the Magnitude and Vector), and Exits = Array (you'll populate 6 nodes, barring wormholes or other). Plot the Origin centered on the pixel you choose to make the center of the map. Render the hex. Choose a Radius for your map

Foreach Magnitude, ---populate the ring with each combination of adjacent vectors. There are a number of ways to do this, but the simplest is choose a single vector as a base and then traverse Magnitude hexes in an appropriate direction and orbit with a 60 degree turn. e.g. For Magnitude 3, Start at 3E, then go 3A, 3B, 3C, 3D, 3E, 3F calculating each hex as sums of the last hex traversed and the new single hex vector. ---In each of these hexes, apply some trig to calculate where the center pixel should be relative to your origin pixel and render the hex

Hope that helps someone. Hex Maps rock. Rendering them sucks a bit.