View Single Post
Old 02-12-2005, 01:48 PM
Iceplug's Avatar
Iceplug Iceplug is offline

Retired Moderator
* Guru *
Join Date: Aug 2001
Location: Iowa, USA
Posts: 16,583
Lightbulb Hexagon Tile Maps

Setting up a Hexagon Tile Map is a bit different from the regular Tile Maps above.
First of all, it's important to figure out how the hexagon map will be laid out, how it will be shaped, and how the hexagons will be assigned tile locations.
After all, a hexagon map represents a two-dimensional array... so each hexagon on the map should have an X and a Y tile location.
The first thing to do is determine how the X and Y tile location values change as you move to adjacent hexagons. There are two examples in the hexref picture below of how you might do this: The left method is starting with a hexagon that has the tile location of (5, 5) and from there, linearly assigning
tile location to all of the surrounding hexagons (below, moving to the lower right hexagon, there will be the same Y value as on the previous hexagon).
The second method on the right is taking the six directions of movement and indicating how much each tile location changes as you move in this direction. for example, moving to the lower left hexagon causes the X location to increase by 1, but Y remains constant (changes by 0).

After you do this (its recommended that you do the 'differential' if you choose the left method), you should look at the hexagon that models the tiles in the map. Look at the hexmetrics picture - all of the properties of the hexagon are measured - find these properties by looking at the images that you are using for the hexagon tiles - these values will be constants in the program. (The hexagons in the file are 32 wide)

The map is still a 2D array, as well as the character location is still unchanged. The map is still read from the same type of file.

The next thing that needs to be figured is the drawing of the hexagon map.
Drawing it like a regular tile map leaves lots of holes and doesn't look hexagonal at all. The drawing subroutine needs to draw the map 'hexagonally'... and this is done by a 'transformation', (that's what I call it). The transformation will transform a tile location into a display location.

The tilemaps that have drawn before would have transformation functions of
xX = 16 * LX, where xX is a screen X location, and LX is a tile location.
and similarly, xY = 16 * LY
16 would be the width and height of each tile representing the amount to skip over in each direction when going to the next tile, and the first tile (the one at (0, 0) ) is drawn at the upper left corner of the map, at screen coordinates (0, 0).
These are not the same with a hexagon map.
In the project, you'll see the transformation function in the X direction also depends on the Y tile location as well as the X tile location... similarly xY depends on LX and LY.
In the project, they are xX = 24 * LX - 24 * LY and xY = 16 * LX + 16 * LY, or
xX = 24 (LX - LY), and xY = 16(LX + LY)
The 24 and 16 are expressed as constants in the project - keep your eye out for them .
Also, you have to find the zero point (like the y-intercept for line equations in algebra)... this is the coordinates where the hexagon at tile location (0,0) will be drawn. In the project, each coordinate is a constant expressed in terms of the other constants (that define the hexagon sizes). The zero point in the project is (264,0), the 0 for the top would be pretty obvious.
These zero values need to be added to the expressions for the transform functions.

        GFX.FillRectangle(Brushes.Black, New Rectangle(0, 0, Me.MapViewWidth, Me.MapViewHeight))

        For LY = 0 To Me.MapSizeInTilesE
            For LX = 0 To Me.MapSizeInTilesE

                Thistile = Map(LX, LY)

                Tile = New Rectangle(32 * Thistile, 0, 32, 32)

                xX = (Me.HexagonEdgesWidth + Me.HexagonTopEndWidth) * (LX - LY) + Me.ZeroPointLeft
                xY = Me.HexagonEdgesHeight * (LX + LY) + Me.ZeroPointTop

                GFX.DrawImage(Tileset, xX, xY, Tile, GraphicsUnit.Pixel)


        'Also, to draw the character, we use the same translation but with character location instead of LX and LY.
        xX = (Me.HexagonEdgesWidth + Me.HexagonTopEndWidth) * (CharacterLocation.X - CharacterLocation.Y) + Me.ZeroPointLeft
        xY = Me.HexagonEdgesHeight * (CharacterLocation.X + CharacterLocation.Y) + Me.ZeroPointTop

        GFX.DrawImage(Charpics(Cyc), xX, xY, 32, 32)

        FormGFX.DrawImage(Backup, Me.ClientRectangle())
Also, there's the character movement, where the differential comes in handy to determine how much the character coordinates should increase with each direction. (I used 7, 8, 9, 1, 2, and 3 on the numpad for controls).
The collision detection is still the same.

Have fun.
Attached Images
File Type: jpg hexmetrics.jpg (14.3 KB, 228 views)
File Type: jpg hexref.jpg (31.0 KB, 206 views)
File Type: jpg screeny.jpg (23.2 KB, 265 views)
Attached Files
File Type: zip (43.1 KB, 292 views)

Iceplug, USN
Quadrill 1 Quadrill 2 (full) Quadrill 3 JumpCross .NET Website is ALIVE! - DL Platform Tour for VB.NET! Posting Guidelines Hint: Specify your location in your user cp profile if you want compassion!
Reply With Quote