Bitmap fonts

Rendering images is far faster than rendering text with HTML5 canvas - this is not a canvas specific issue, most game APIs have the same issue. So since this is an old problem, it has an old solution: using bitmap fonts to compose text instead of regular fonts.

Bitmap fonts are simply collections of raster images of glyphs. For each variant of the font, there is a complete set of glyph images, with each set containing an image for each character. For example, if a font has three sizes, and any combination of bold and italic, then there must be 12 complete sets of images.

See bitmap fonts on Wikipedia.
The biggest advantaje of the bitmap fonts is that they are fast to draw, the biggest disadvantaje is that you'll need new bitmaps for each dimension, font style, etc.
The good news is that for our games we need a limited set of the font family(s), font size(s), etc, so we can happilly use custom generated bitmap fonts.

The plan

The plan is to generate two things:

1. a big image with all the characters rendered using the font.
2. a "map" file that indicates the place of each char image.

When we will need to render a word, like "Play", we'll do the following:

1. Break the word in characters (e.g P, l, a and y).
2. For each character, use the font map to get the char image position.
3. Read the char image from the fonts image.
4. Draw the char image on the canvas.

The conversion

Before we begin I must warn you that you should check if the licence of your favorite font allows you to do this. Let's begin.

• Choose a font
  Download a font or choose one from your system. For example I used one from moorstation.org, one of my favorites, is called Die Deutsche Druckschrift .
  
• Choose a tool
  Now as you image there are lots of tools for this job out there, both free and paid, so you can experiment with them for a while. I settled with fontbuilder - Bitmap font generator , an open source project. While there are executables only for Windows (at the moment), it runs with Wine on Mac OS X also.
  1. Select the font, size, etc:
     
  2. Select the character set:
     
  3. Select the layout of the generated image:
     
  4. Select the output folder:
     
  5. Convert XML to JSON. JavaScript likes JSON so we need to convert the XML to JSON (e.g. http://www.utilities-online.info/xmltojson/)

The usage

Once we have both the font image and the font map we need to load them in our game and we are ready to draw texts using them.
I've created a Bitmap font reader repo on Github that contains the JavaScript code, so if you're interested go ahead and have a look.
If everything works fine, you should see this in your browser:

Till next time: keep calm and don't forget to be awesome!

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.

Best Anti-Tank Gun of WWII: the German 88

© S H Photos

While the best tank of the war is controversial, I think we can find more agreement on the best anti tank gun of the WWII: the 88mm Flak.

Originally used as anti aircraft gun, the 88mm Flak became famous when used as a anti-tank weapon.

Here is an example about its efficiency. The Real Reason for the 88’s Success:

During Operation Battleaxe from 15th to 18th June 1941 the Commonwealth forces are known to have lost 92 AFVs including 82 tanks to the I./Flak-Regiment 33, a Luftwaffe mixed flak battalion with 12 88s.(7) The only other heavy flak battalion available to Rommel through 1941 was the identical I./Flak-Regiment 18. By the end of 1941 these two Luftwaffe flak battalions (authorised a total of 24 88s) had destroyed 264 tanks and 42 aircraft.(8) During this period the Allied forces had over three times as many 3.7inch AA guns available as the Axis forces had 88s, yet the German and Italian tank crews probably never even got to see one.(9)

Game Music

© @Doug88888

When you develop a game there are so many little details that set you back. One of these details is the music for the game. It can be unbelievable hard to find the best fit for the game. Especially when you have no idea what you should do.

Since Panzer Division is a WW2 game, a historical game, my first choice would be a epic background music, maybe something symphonic. But you know what? I might be wrong.

One of the best game music I ever heard is the one created for Machinarium. The game, which features the adventures of a robot in a town full of robots, has a great jazz soundtrack. Who would pick that? When you think future, robots, technology, computers what music you think would fit? Maybe electronic, maybe psychedelic, but jazz?

We have two options:

1. Find some music online. There are some nice sources - but we might choose something that others might also choose.
2. Find somebody to create the music for us. I have two musicians who might compose the music - thus creating something unique - but I'm afraid they will not create what I need.

We'll have to think some more.

UPDATE: Mr. FunkyLand has some nice proposals, check them out:

• The Tide Turns
• Tribunal

Panzerlied

Who knew there was a song for the Panzers?
The song starts at 1:30, but the rest of the movie provides a nice context. I was curios what is says, so here are the lyrics in case you are curios too:

In blizzard or storm,
Or in sun warm and bright,
The day hot as hell
Or bone-chilling be the night,
Our faces may with dust be laid,
But spirits never fade,
No, never fade;
Relentless, our tank
Thunders out on a raid.

With engines a-howling,
Fast as is the wind,
We head for the foe,
Safe, as we're in armor skinned.
Our comrades still behind us roam;
We fight the foe alone,
Yes, fight alone.
We stab through the line
To break the foes backbone.

Whenever the foe
May appear in our sight,
We'll ram throttle full,
Then we'll humble all his might!
Of what use is our life if we
Our country serve freely?
Yes, serve freely!
To die for our country,
Our honour shall be.

With tank traps and mines,
Our foe tries to impede.
We laugh at his ruses;
We know he'll not suceed.
And when, in threat, his cannons stand,
Half hidden in the sand,
Yes, in the sand,
We can find our way
Over much safer land.

And should at long last,
Fickle Lady Luck leave,
And we remain here,
Leaving family to grieve,
A bullet with our name on it,
Find us and seal our fate,
Yes, seal our fate,
Our tank will our grave be
On that final date.

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.

How to become a game design master

Machinarium game concept

You think you can design games? You think you know why is a game fun or not? Maybe not now but you will as soon as you read Game Design Concepts - An experiment in game design and teaching

Game Design Concepts was started as an experiment by Ian Schreiber - one of the authors of Challenges for Game Designers book. It is an online course in game design. Unlike most of the stuff out there that is mostly theoretical, this course is very practical.

So what will you find there?

By the end of this course, you will be familiar with the (relatively small) body of work that is accepted in the game industry as the theoretical foundation of game design. You will also be comfortable enough in processes to start designing your own games, as well as critically analyzing other people’s games.

Each lesson ends with a homeplay (a.k.a homework) and links to related articles or books. Those links alone are gems, believe me you'll find what to read there.

We found some nifty strategy ideas for Panzer Division there, I'm sure you'll find too as soon as you start designing a game.

In case you are hungry for more, in 2010, the experiment continued as Game Balance Concepts - A continued experiment in game design and teaching.

Breaking News : We have Gareth Hector's artwork

Great news, we acquired the rights for great artwork from one of the best artist that modeled Tigers and Focke-Wulfs.

Here they are:

Target!

Normandy Bound

Bad Omen

Desperate Days

Bottleneck

OK, I lied, this is just wishful thinking.
Sometimes I wish we could hire a great artist like Gareth Hector to so some great artwork for Panzer Division. Sadly that won't happen. Huge budgets never happens with small indie games.

Still, you are a great artist Gareth!