Alive and kicking

It's been a while since our last post, so it's time to dust off this a little.

Today I'll tell about my latest adventures on the journey to beat the final boss, Panzer Division Gold Version. A while ago, I became increasingly unhappy with the performance of PzDiv on iPad 1 so I decided to stop everything else and seek a solution to make it run smoother. Plain HTML/CSS/JavaScript is not working good enough on iPad no matter what, so was time to try something else.

We love HTML5 Games

I followed many leads but most of them were dead ends. The only interesting solutions were the so called hardware accelerated canvases - implementations of HTML5 Canvas API in native code.

There are quite a few of them, here are those that I investigated:

• CocoonJS
• Impact
• DirectCanvas

I know now which is better but I settled on CocconJS for the simple reason that:

• is free (at least for the moment)
• has a nice app on both iOS and Android so you can test you app asap
• PzDiv runs quite fast on it.

Even if we choosed for the moment CocconJS, I'm confident that we'll be able to migrate the code to the other frameworsk if needed - since they are all canvas based.

To canvas or not to canvas

The thing is PzDiv code is using CSS transitions, transforms, scrolls, all kinds of regular HTML stuff. All those things will not work anymore in a canvas only game and must be rewritten, redesigned, recreated. Sadly that will take a while.

It is a tough choice but I believe is the right thing to do. Till next time: keep calm and don't forget to be awesome!

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.

How we chose HTML5 to develop Panzer Division

The story is quite simple, we wanted the game to run on the iPad. On the iPad you can either run:

• native apps from the Apps Store - developed with Xcode in Objective-C
• web apps - developed in HTML5

None of us had Macs at the time so a native app was out of the question, we could only choose HTML5. After an initial evaluation of HTML5 we concluded we could give it a try. From that day we move forward with it.

As expected, not everything is peachy, we had to redo the rendering several times because of the performance on the iPad 1 and I'm not sure we won't do it again. And we still have problems with the sounds. But we are still optimistic.

PhoneGap : from web to app store

While we'll use for development just plain text editors and browsers, we do plan to use PhoneGap to build our app to a native app that can be published in a app store. PhoneGap provides some nice APIs that fill the gap between native and web apps.

For desktop version we plan to create wrapper apps around WebKit or Chromium libraries.

Store and marketplace

We cannot afford to have fancy stuff like DRM, licence keys, purchase mechanism, etc. We also cannot afford to test on every browser ever made, so we decided to use existing app stores, that is to publish our app in one or more of the following stores:

1. Apple App Store
2. Chrome Web Store
3. Mac App Store
4. Google Play
5. Amazon Kindle Fire Appstore
6. Microsoft Marketplace
7. Mozilla Marketplace

The good news there are quite a few places to publish Panzer Division. An even better news is that the app must run only in WebKit (stores 1-5), Internet Explorer 10 (store 6) and Firefox (store 7).

So we decided to focus initially only on WebKit and to periodically test in IE10 and Firefox. If the compatibility issues can be solved quickly we solve them, otherwise just move on.

IE 6,7,8,9 must die

The biggest advantage of a web app is that it theoretically can run on any device that has a browser. Theoretically. In practice most of the browsers are just a pain in the ass. Panzer Division will never work on them, we will not even try.

We know, "Requires browser XXX to run" is lame in 2012 but we do what we have to do: be pragmatic and accept the reality that we don't have time or resources to support the others.

Keep the faith

Even that we use HTML5, we hope the players won't be aware of that. Hopefully we'll make Panzer Division feel like a native app. If not for iPad 1 at least for some of the other options.

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.

More than a gadget

A couple of years ago, Apple launched a new device which looked like an oversized iPhone. This new tablet computer proved very successful, more than 50 millions iPads being sold in the first two years. Other manufacturers started producing tablet PCs, using Google's Android operating system. Also, the incoming Microsoft's Windows 8 OS has been designed to run of both PC computers as well as on tablet devices. The conclusion is obvious, this kind of device will be the future of consumer computing.

The iPad owns a lot of its success to the multitude of applications that were developed to run on it. A great deal of those application are games. But many of those games are the ones designed for smartphones, where the general use case is to play for short periods of time. The iPad, however, seems to be suitable for other kind of games, as well. This is mainly due to its big screen size compared to a smartphone.

A lot of people are passionate about strategy games, but there are few titles available that cover this genre on iPad. I am not aware of any that focuses on the same gameplay and WWII setting as the Panzer General series and I think many strategy gamers would like to play such a game on their tablets.

If one thinks about it, turn based strategy games are quite a good fit to be played on a tablet device. There's no need for real-time 3D flashy graphics and the touch interface can easily provide the required level of control. The game can be played for a while, suspended and then later the player can continue from where he left off.

Multiplayer is also a viable option, in some derivative form of the old play by e-mail (PBEM) system. Such an option would be an online server which could provide both a game lobby to find opponents and storage for the between-turn saved games.

So, it seems that the stage is set. It's time for The Panzer Division to show up.