by Firedroid

Archive for the ‘Featured’ Category

Our game has a good solid base: inviting scenery, difficult and engaging puzzles, a great atmosphere and a polished GUI. But it still needed that emotional trigger, an element players can relate to and easily recognize. To this end, we crafted a storyline and created two main characters for Kings Can Fly.

Despite the name suggesting a king, we started out with a female protagonist, captain of the airships and navigator of the Air Kingdom. Keywords for the character were adventurer, cartographer, spunky, tough, happy.

First round of concept sketches for the main protagonist.

Here basic shapes and outfits were tried to fit the character into the role of navigator (as evidenced by the rulers, maps, goggles), as well as fit her/him with appropriate attire – a 1890′s look with a touch of steam punk.

The small sketch of the girl in the top-center was favoured most, so she was fleshed out into the right hand character. The period clothing worked well in general, so the next round focused on the outfit.

Second round of concept sketches, focusing on the outfit.

On the bottom you can see the female version of the character from the first sketches, because we liked the expression, but wanted to keep a female character. The outfits show vests, jackets and gloves to make the char seem adventurous, while the big coats tend to lend authority. The goggles are present everywhere, hinting at air travel.

In the end we picked the outfit third from the left, loving the big black coat and the high collar along with sturdy, big boots.

Final outfit, sketch to determine style.

Colour matching the outfit.

To pick fitting colours, the character was placed in the general game setting. The final colours (far right) were quickly chosen.

Finalized sketch to experiment with a more realistic style.

The original story and setting were fairly serious, dealing with a world that inhabited complex characters who schemed and plotted. However, this didn’t fit the general upbeat theme of the levels and it wasn’t a style we were keen on pursuing. Instead we opted for cheerful, cartoony characters with over-the-top expressions and a stylized look.

Now that we had a firm grasp on where we wanted to go with the characters, fleshing out the king was much easier and concepting was a lot faster. We wanted an iconic figure, an archetypical king with recognizable facets like bushy, white facial hair and a big ermine mantle. Keywords for the king were short, comic relief, easily bored and easily entertained, older, royal.

Concept sketches for the king character.

A mere five sketches later, we went for king number four; we couldn’t resist his huge mustache and adorable pot-belly.

King colour schemes.

We opted for a blue-red king, with shiny golden footies. Then there was the matter of adapting the captain character to fit the same style the king was drawn in, which was quickly done. We ended up with a bright, happy team of characters who will guide our players through the game, giving hints, explaining the rules and responding to player actions.

We’ve added a new feature, where players can now also place fans on the ground, instead of just on the mountains. We’ve given the new fan more body and made them look cuter. The current model has 292 triangles.

As our development progresses we’re closer and closer to a version that supports puzzles and can be played as a game (although it’ll be a work-in-progress). So we’ve had to think about how we’re making those puzzles and how to feed them into our game. Now we already stumbled upon the Tiled Map Editor, which is a free and opensource mapping tool for games that are based on tilemaps. We filed it away as a great tool for later use, while we focused on the basic elements of the game.

Recently that core has become complete enough to warrant a second visit to Tiled and see how we could use it to build our puzzles. We made a tileset and set to work!

First up is handling rotation. The tileset has four different versions for straight lines and corners, as they can go up, down, right or left. We only have one 3d model for such things, so they needed to be mapped to the tileset. We thought about building fancy and complicated solutions but in the end we simply used an array with objects that contain information about the tile. Each tile in the tileset is coupled with such an object, which holds information like rotation, direction, height, etc, everything the engine needs.

Tiled outputs an XML file containing the information about the map size, layers and tiles in it and after fiddling with some Unity scripts people wrote we decided to just use C#’s native XML functions. In the end this works really neat and we’re very happy with Tiled as our tool for building levels since it’s a good map editor for our needs.

Apart from the concept art and stylesheets, we’re been working hard on a prototype. Developing purely theoretical is doable, but it’s much more efficient to have a prototype to check whether your concept is engaging and fun.

So we turned to Flash/AS3/Flixel for development speed and after a few days of programming and super smooth & polished programmer graphics, our prototype was done.

http://www.youtube.com/watch?v=5itdOjJaYCQ

As you can see the interface is quite rough and the ships move jerkily, but the core ideas are implemented. After a few iterations the prototype reflected the core gameplay properly and it seemed like a fun and engaging puzzle game in its basic form.

The basis for our game is a grid of tiles. In our setup we’ve got a grid and tiles, with every tile aware of its neighbours (left, right, above, below). This makes lookups for determining the next tile to navigate to faster and easier.

The airships need to navigate this grid and turn away from mountains (because that’s what the airstream does). While navigating the grid we want the ships to move exactly one tile per ‘tick’ (a tick is a arbitrary amount of time, the rate at which ticks go by basically control the speed of the game). This isn’t very hard, all we need to do is make the ship pick a new tile when a tick has passed. Movement still needed to be smooth however and since we will be making turns and moving up and down, simple interpolation wasn’t going to work.

So we’ve chosen to use Bezier Curves to move our ships. The basis for this system is that the ships should move on the current tile towards their next tile, with the beginpoint being between the last tile and the current tile, and the endpoint being between the next tile and the current tile:

The begin and end points (p0 & p2) are shown in yellow, with the control points (p1 & p3) being shown in green, with lines from the begin/endpoints to them in green as well. The blue line is the bezier curve itself, and the red point is the ship’s position. The ships current direction is shown as a red line.

I’m quite happy with the way this turned out, the ships seem to move naturally. Of course there’s a lot to do to make the ships movements appear more natural, such as swinging from side to side, bobbing up and down a bit, etc. Still, this is a very nice basis for movement and I hope it’ll continue to work well.

There are many tactics for ‘visual’ brainstorming, and this is one of them. Drawing silhouettes of an object gives you an impression of a shape.

This allows you to work a lot faster than normal sketching because a silhouette doesn’t need any details and is focused on just the shape. I thought this was a great technique for the designing of the airships in the projects early phase.