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 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.

A little bit of history..

In 1994, Panzer General, a PC turn-based strategy game was launched. Set in World War II, the player had the chance of taking the role of a German general leading his elite fighting units to victory. The longest campaign started in ’39 with the invasion of Poland and ended in ’45. The player’s performance as a strategist determined whether the last battle in 1945 was defending Berlin against allied onslaught or storming Washington for the ultimate victory.

Probably Panzer General wasn’t the first computer strategy game with a WW2 background, but for me and many others it was *the* game. I played it many times, in order to try its various scenarios (yeah, it was fun to purposely lose some key battles in order to go with your super-army into the defense, an easy one at that).

Then, a few years later, Panzer General II, came out. Like its predecessor, it was a turn-based strategy game. It had improved graphics (isometric perspective), some new concepts appeared (like the use of leaders that would add benefits to the unit they commanded) but it lost the grand-strategy feeling. The battles were confined to small tactical situation in a greater campaign context. Nevertheless, PG2 was a very nice game, indeed and I guess even more people played and liked it (that is, has a greater fan base than PG1)

PG2 had also an scenario editor (it was becoming the norm for real-time and turn-based strategy games to ship with an editor). I used it to start working on a campaign for the Romanian army, but I think I was the only one playing it ;-)

Panzer General 3 jumped in the 3D madness bandwagon. It also brought in some interesting features, like relying more on the unit commander concept. I didn’t play PG3 too much, and I could say this was true for other PG fans I know. It was the last game in the Panzer General series.