The Map Editor - Part I

I'm working on the Map Editor for the Panzer Division for a while now. It's not done yet but I decided to share some of the experience, maybe somebody will find it useful or maybe somebody will spot something horribly wrong and let me know.

To understand some of the decisions we took is important to know that:

• Panzer Division is made with HTML5, CSS3 and JavaScript.
• Panzer Division is supposed to run even on the first iPad (where we are facing tough constraints especially related to the maximum canvas memory.)
• Panzer Division maps have pointy hexagonal tiles.

Intro

In Panzer Divizion the first thing you'll have to do is to choose what to play: a campaign or a scenario.

• A campaign has an associated set of scenarios.
• A scenario has an associated map.

Before we can create campaigns, we need to have scenarios. And in order to create scenarios we need maps. (Actually with one map we can create multiple scenarios, and those scenarios can be used to create campaigns.)

To create maps we need a Map Editor.
To create scenarios we need a Scenario Editor.
To create campaigns we need - what a surprise - a Campaign Editor.

The maps, scenarios and campaigns are kept on disk in some format like JSON. When the user chooses a scenario, the corresponding scenario file and map file are loaded from disk.

All the three editors have to:

1. read and parse the file and generate data structures to be used by the game.
2. allow the user to modify the data.
3. save the data back to the file.

For the moment we work on the map editor, the others are to be done later.

The Map Files

The purpose of the Map Editor is to read, modify and save map files.

A map file contains the following information:

1. map size - number of rows and columns.
2. tile data for each of the tile - indicates how a specific tile must be rendered (e.g as sea, forest, shore, etc).

Map file example:

"numberOfColumns":30,
"numberOfRows":20,
"tiles": [
 [0,0,0,0,0,0,0,0,0,0,5,11,11,11,6,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 [0,0,0,0,0,0,0,0,0,0,10,106,106,106,106,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 [0,0,0,0,0,0,0,0,0,10,193,176,169,159,23,6,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 [0,0,0,0,0,5,11,6,5,16,188,217,178,178,172,106,1,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 [5,6,0,5,16,33,106,22,106,193,218,238,178,156,106,7,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 [0,106,17,16,106,106,64,106,106,188,189,208,207,196,24,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 [0,175,158,114,110,133,100,133,117,192,199,106,191,106,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 [9,155,178,165,106,130,106,64,106,106,106,106,106,24,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 [9,161,160,106,145,117,106,63,106,13,14,106,106,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 [0,9,106,128,119,106,163,60,106,18,0,3,8,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 [0,9,113,106,106,157,174,31,106,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 [0,0,3,14,106,157,178,179,165,18,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 [0,0,0,15,162,178,167,160,106,12,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 [0,0,0,4,106,20,160,13,14,106,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 [0,0,0,3,2,3,2,0,3,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] ]

The tile information must also be used by the game logic to influence the unit movement (e.g rivers or swamps reduce it) or to prevent movement (e.g battleships cannot go over forests) so is important to spend a while to think about various ways to do it.

We also need a tile set image - a big image that contains all the terrain tiles. We now have a big problem: the tile set image can be very different based on the choises we make so we need to spend as little time as possible on making that tile set for the moment. My advice is to use obvious colors and big brushes to create a rude version of the tile set. I lost lots of time trying to create nice, detailed tiles only to throw them away later because I realised I need a different tile set.

Defining hexes

The map is composed of pointy hexagonal tiles. Each hex has 6 corners and 6 sides.

 S6  /\  S1
 S5 |  | S2
 S4  \/  S3

We can use either to describe the tile, for example we could use 1 for the side that matches forest and 0 for the side that is not forest.

Since there are 6 sides/corners, so we have 64 possible combinations for each type of tile, the sides index is: 000000-111111 (00-63)

The side 1 is the last significant digit, side 6 the most significant digit, like this:

S6 S5 S4 S3 S2 S1
1  1  0  1  1  0 

The many facets of the terrain

There are forests, mountains, rivers, shore, etc. How can we encode more than one terrain type in one tile data? That will be discussed in another post.

The beginning

I remember that more than an year ago, I was talking with Rares about the games he has played on his iPad. He told me that he was looking for a strategy game similar to Panzer General, be he hadn't found any on AppStore. It seemed that one couldn't find any WW2 strategy game published for iPad at that time.

I suggested to him that we should try to make such a game. We are both software developers and creating games is certainly a interesting challenge for people like us. But besides being interesting, making games is also hard, especially bringing them to completion. Anyway, developing a turn-based strategy game was something we thought we could accomplish, so we started working.

The main idea was to create a Panzer General remake that could run on iPad. We decided that a 2D look, similar to the first Panzer General game, was more likely for us to get done. From this first PG game we would also use the strategic feeling of its campaigns, something that the second Panzer game kind of missed. But anyway, the PG2 was better from other perspectives, such as control and leader abilities, so this meant that our remake would be a mix of the best elements of the two Panzer General games.

Is there a site that list all the computer wargames ever?

©Will Merydith(Creative Commons)

Guess what! There are at least two sites that list all the computer wargames ever.
Now, don't panic when you see them, they are old, as wargaming itself.

Web-Grognards
Connoisseurs say that if a wargame is not on Grognard, chances are no one considers it a wargame as well. They define themselves like this:

'Grognard' is slang for someone who likes playing wargames. 'Web-Grognards' therefore has a unique collection of various conflict simulation game (i.e. wargame) information, including (but not limited to) rules errata and variants, game reviews and links to relevant web sites. The emphasis is on board wargames, but miniatures, computer and card-based wargames are also covered. Many hundreds of games are covered here.

M. EVAN BROOKS HOME PAGE
Mr. Brooks stopped in 2002 but who can beat the quote on his site:

"It is well that war is so terrible, lest we grow too fond of it." -- GEN Robert E. Lee to LTG James Longstreet at the Battle of Fredericksburg (1862); obviously Lee never played PANZER GENERAL.

In case you still have doubts Mr. Brooks is a Panzer General fan, this is what he writes about it:

Initially marketed as a non-wargame, this has become one of the classics of wargaming, and spun off an entire series (ALLIED GENERAL, PACIFIC GENERAL, etc.). Start in 1939 and trying to win enough operational battles in order to successfully win the assault on Washington, D.C. (Ty Bomba would be proud!) But a plethora of scenarios, entertaining graphics and a user-friendly interface combine to form a winning combination. While I both admire and enjoy it, the military lessons of combined arms are not taught overly well, and often gaming logic supersedes military logic (for example, in order to win a decisive victory at Moscow, one must air assault north of the city; then, in following turns, one can recruit armored units in this isolated area and pincer Moscow from two sides until it falls).