Hexagonal Maps – Part V; Designing Contiguous Hexagons

Introduction

Admittedly it has been quite a while since I last released a document on my development adventures in military simulation design. I call it such as I rather dislike the term “war game” as the current capabilities of such software applications are now far beyond that of a “game”.  And in reality have been so since Kriegspiel was created in the 19^th century.

The delay in this new document comes as a result of a huge amount of graphics rework to the code base, which introduces far more efficient display processing and corrects a number of scrolling issues both of which arose as a result of testing out much larger map sizes.

In this document however, we are going to cover the next phase of my development effort, which is specifically that of designing hexagons that display overlapping structures with each other.  As a result, the updated code base will not be made available until after the release of my next piece, which will describe the many modifications to the existing source code.

Working With Tiled Hexagonal Maps

When working with tiled hexagonal maps you have a choice to either compartmentalize your terrain to each hexagonal tile, maintaining such terrain displays as completely separate from each other or to provide a display that allows for terrain to seamlessly flow between two or more hexagons.  The first technique is of course, far easier to work with.  However, it is the second technique that allows for a more pleasing display, which this paper concentrates on and which the title image above demonstrates.

An example of such a display, which comes from the most recent code base of my work is shown below…

In the graphic above you will note that several hexagons display terrain that seamlessly flow between each other.  The left-most blue terrain hexagons represent the beginnings of a river to the map, while the two hexagons to the right of the river hexagons represent mountainous terrain.

Please note that I am not a graphic artist, so my depictions of board-game hexagonal terrain may not be the best.  However, hopefully it will be good enough to generate interest in a final product if I can complete it.  Such technical complexities as that of creating such a simulation usually have small teams devoted to their development.  I on the other hand, like many other indie developers, have merely myself to depend on.  As a result, this is quite a long term project.

So let’s get to it then…

The Required Graphic Tools

I work exclusively with Corel Paintshop Pro as I find it one of the easiest tools of such software to learn. All of the graphic displays in this paper have been produced with Corel Paintshop.

For years Corel has produced a fine line of affordably priced graphic tools that allow artists and graphic designers to accomplish literally anything that can be found with Adobe’s former more expensive and now subscription based components.  And though the Corel products have their own learning curves they are not nearly as steep as those that come with the Adobe products.  Nonetheless, if you are already an Adobe user and have access to their products, you are more than well equipped to handle the upcoming steps to creating hexagonal tiles with terrain and\or structures that flow seamlessly between each other.

If you have neither the Corel or the Adobe tools at hand, your best bet would probably be the highly popular, Open Source, GIMP tool, which can be found at the following link…

https://www.gimp.org/

Whatever tool you do choose or feel comfortable with, it must be able to support image layers, which are images that you can stack on top of each other with transparent backgrounds.  This is very important since you will be using a base hexagon to layer your terrain designs upon it.

Designing Contiguous Hexagons

Designing contiguous hexagons is more time-consuming work than actual difficulty once you have mastered working with layered images.  However, the following basic steps, which should be applicable to any graphic tool you choose to use, should allow you to create large areas of contiguous hexagonal tiles for your own simulation development.

To begin with, you will require a base hexagon tile for your land based terrain. For water based  terrains, such hexagonal tiles may require graphic designs as coastlines, rivers, bridges, large islands, etc.  However, the following approach is exactly the same no matter the terrain type.

In our case we will start with the base land hexagon tile that I am using in my own simulation.  In this case we have a dark green hexagon tile, which I am using to present meadow-land or grassy areas.  The size of my tile is 72 pixels by 72 pixels…

The gray and white checkered background is Corel Paintshop’s display of area that is transparent, allowing this type of image to be overlaid on another with the bottom-most image being visible only through the transparent area.

For an example, let us take this image of a dark green hexagon tile and add a basic structure to it that will run from the upper-right area of this tile into the lower-left area of an adjacent tile.

However, before we begin our drawing we want to ensure that whatever we draw comes out correctly without damaging the original image.  In Corel Paintshop we do this by using the options at the bottom of the right-most Materials panel…

On the left-most side of the above Options Area you will find what appears to be several blue pages with one of them having an upturned corner.  This is the New Layer option that can be selected to add an additional layer to your Materials panel.  Doing so will pop up the context menu as shown in the graphic immediately above, allowing you to add a second image to the image list in the Materials panel with the same dimensions as the original image.  Please note that you want to select a Raster Layer for this type of work, which is the top-most selection in the context menu.

In Corel Paintshop you will be also provided with a Settings dialogue for your newly added layer (after selecting the addition of a new layer) that will allow you to adjust this layer to any additional requirements you may have for it.  However, for our purposes, you can simply select OK on this dialogue resulting in a new image list as shown below…

Now that you have a new layer to draw on you may begin making your terrain additions\modifications without harming the base image.

For our purposes we will simply add a yellow brick-like structure that will span two hexagonal tiles.  Before doing so, ensure that you have selected your newly added layer for drawing and not your base image.

Notice in the graphic above, the outer, lighter green edge on all of the sides in the hexagonal tile.  Also notice that the yellow line that has been drawn onto the image ends at these lighter edges.  This is so that when being displayed, each hexagonal tile will still retain its border between its adjacent tiles.

Of course, you do not have to develop your images in this fashion by leaving the hexagon edges intact but it is how I prefer to do mine.  Nonetheless, it should be noted that many simulations being produced recently, in fact prefer to eliminate such edging in their map displays.

The next thing we have to do is now create the adjacent hexagonal tile to which the above drawing will seamlessly flow into.  This means we have to also calculate on this adjacent hex where the yellow lines should continue from its edges.

To do this we will require the horizontal and vertical rulers that come with every good graphic application.  If you are using Corel Paintshop and you have not turned on your ruler displays, simply select the View option from the master menu and then select the Rulers option from the subsequent popup menu as shown below.

Returning to our image with the yellow outline we notice that we have started the drawing from the top-most position where X=56 and Y=7 (units in pixels).  This means in the adjacent hexagon where the yellow outline will flow into we will have our outline continuing into the lower left-hand side of the adjacent hex.  As a result, we will have to continue the top-most part of our yellow outline in the adjacent hexagon at a position equivalent to where we started drawing our outline in the current hexagon tile.

In this case, we merely have to begin our drawing at the seventh pixel down from the mid-point on the left-hand side of our new, adjacent hex.  This then should have our outline begin at the following coordinates… with X=6 and Y=43 (hexagon midpoint = 36 + 7 = 43).

We also have to account for the bottom-most ending position of our yellow outline in our original hexagonal tile so that we can successfully close the outline in the new adjacent hexagonal tiles.  Our ending position or bottom-most position of our yellow outline where it meets the hexagon edge in our original hexagonal tile then ends at the following coordinates… with X=66 and Y=27,28 (for two pixels).

On our new adjacent hexagonal tile, the continuation of our yellow outline will then start at the following coordinates… with X=15 and Y=63,64 (again for two pixels; hexagon midpoint = 36 + 27 = 63, hexagon midpoint = 36 + 28 = 64).  Our adjacent hexagonal tile will now appear as follows…

Just a note on saving your work…  Now that we have gotten this far, it may be a good idea to save your working images.  However, before you save them, ensure that you save them in a format that retains all the layer information until you are satisfied that what you have drawn is exactly what you want.  For Corel Paintshop, this file format is indicated by the ”.pspimage” file extension.

Testing Your Image Alignments

After saving your newly created images in the native format for your graphic application that will retain the layer information in both, we can now test how well our two hexagonal tiles line up.  We can do this by following the steps below…

• Create a new blank image (as shown below; image size 400×400 pixels) in your graphic software and ensure that it is large enough to accommodate multiple hexagonal tiles and is created as a Raster image as your existing tiles are.

• Copy your source images on to the blank image.  Doing this will require that the copy of your source image be Copy Special as Copy Merged in Corel Paintshop.  If you are not using Corel Paintshop, your graphic software should have a similar option if not done automatically for you.

• Paste your copied source images on to the new blank image as new layers as shown below…

• To verify if you have drawn the outline’s starting and end points correctly on both images we have to line them up as we would if we were displaying them on a map board.  As a result, we will have to enlarge the image so that we can see the individual pixels at the starting and points as shown below…

Obviously, within your graphic application, your view would be even larger than what is displayed here but the image above provides you with an idea about what I am trying to describe.

• Now simply select your Move tool, which will allow you to move your layered images (as one image each) around on the base image (transparent background image) to connect both of the hexagonal tile images to each other with the upper-right side of the lower image against the lower-left side of the higher image.

When you connect your two images to verify if the outline’s starting and end points line up in both images, the subsequent alignment should look as follows…

Notice in the graphic above that the top-most connected points of the lower hexagonal tile meet at the mid-point of the higher hexagonal tile.  This mid-point is comprised of two vertical pixels, thus making the connecting point at the lower of the two pixels.

Conclusion

It took me a while to devise this technique for creating hexagonal tiles with contiguous structures across them.  This is hardly rocket science but merely an indication of my own lack of training in the graphic arts, which is not my area of expertise to begin with.

However, the concepts presented here should allow other non-artists to devise acceptable levels of terrain design that can be implemented in their military simulations that allow for more detailed displays, which are comprised of individual tiles.

If you have any questions, comments, or suggestions regarding this paper’s concepts please either leave a reply on this paper’s blog-page or use the contact form at my site…  http://www.blackfalconsoftware.com