Epic Citadel - Unreal Engine 3 demo - is running in the browser

This is crazy. The web is moving so fast. Never though that I'll live the day when a full blown shooter will be played in the browser.

Requires special JavaScript, available in Firefox 22 only. if you have it go here.
I wonder if other browsers will follow. Or maybe the question is when..

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!

Udacity - HTML5 Game Development course

Recently I discovered a new HTML5 Game course, this time from Udacity. I was intrigued to see if they can teach something I didn't knew already, so I started to take the course. Since the course was just beginning I was able to do it quickly.

The course is based on GRITS game and a couple of Google I/O presentation about the game. GRITS is open source, so you can browse the source code and if you find something clever you can let us know (for example like Paul Irish did with jQuery).

Most of the things are the basic and well known, but you can find here and there a few good tips. I'm not saying that you'll throw away your code and rewrite it again but maybe you'll do a couple of tweaks here and there.

I didn't knew about TexturePacker - is a nice little tool that we might use in the future, as for Tiled - we already have our own map editor, so I don't know if we'll switch but, you know, it can be good for new projects.

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.

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

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.