Or maybe not? Despite my initial excitement, Civilization Revolution for the iPhone left me a little cold. The game itself is an excellent reimagining of the franchise for a more casual crowd, programmed by Sid Meier himself. The interface, on the other hand, leaves much to be desired.

Don’t drag, tap!

The basic interaction in Civ Rev is moving units across the world. This is done by tap-and-holding a unit, and then dragging to the destination. This doesn’t work as well as you’d expect.

The difference between the mouse and the finger as a pointing device is that the mouse cursor lives in the screen, but your finger is attached to your hand. As you drag your finger across the screen your hand gets in the way.

This is especially annoying in Civ Rev because as you drag, the game draws the path your unit is going to take. Because my hand covers most of the screen while dragging, I find myself constantly struggling to both move to my destination as well as review the path which my unit will take. That the fundamental interaction in the game is this frustrating ruins the game for me.

Solutions? At the very least, instead of commiting the move immediately after the finger is raised off the screen, allow the player to move the destination somewhere else before commiting the command.

A better interface would involve more tapping and less dragging. Upon tapping a unit to select it, the game would show the possible destinations, and allow the player to simply tap to select the destination. The excellent Advance Wars for Nintendo’s GBA and DS do this, and it works very well.

Civ Rev includes an option that kind of allows this, but it involves and extra tap (to initiate the move command) and is quite glitchy. Why this was not polished up and used as the default movement method is anyone’s guess.

No love for lefties

Civ Rev contains context-sensitive commands for the unit/city you have selected. These appear in a vertically laid out menu on the right of the screen.

Are there no lefties at Firaxis?!

This is incredibly frustrating. This means I need to stretch my left thumb all the way over to right side of the screen. Moreover, like moving, it means that my hand is often covering most of the screen.

A “lefty flip” option would be ideal. Move the context-sensitive buttons to the left of the screen, and the non-interactive interface elements to the right, flipping the current interface setup.

I know it seems like a minor point, but it is very frustrating for us lefties.

Yet another pointless use of tilt

The screens to select a leader and advisors are presented using a rather lovely Cover Flow style interface. Similar to Cover Flow, the player swipes to scroll through the cards, and taps to select. Unfortunately, it also uses an awful tilt-to-scroll method, where tilting the device left and right scrolls through the list.

This means that if I want to select something, I need to hold my iPhone incredibly steady and then carefully swipe through the list. Thankfully, there is a clear indication of how far you’ve tilted the device above the cards. This makes the experience slightly less painful.

There’s no need for this. It adds nothing to the game, it’s not intuitive, and worst of all, it cannot be disabled.

Obviously, this controller is incredible! Firm stick, tactile buttons, and nicely laid out. It’s designed with a bunch of well thought out extras too: turbo modes, a built-in storage compartment for the cable, and the ability to lock Xbox Guide button. The build quality feels solid without being very heavy. I play with it on my lap very comfortably.

Also, the packaging is very fancy. I haven’t gotten this exciting about an unboxing since my MacBook.

Chinatown Wars addresses core issues with the GTA formula, and does so ingeniously.

We start with the core mechanic of GTA: losing the cops. Previously this involved running away, hiding, or zooming to the nearest Pay ‘n’ Spray. Evading the cops meant giving up the all carnage and destruction which makes GTA so much fun. Chinatown Wars replaces this with a perfectly thought out arcade-style mechanism. Instead of running away, you lose cop cars by smashing them off the road! The more cops you lose this way, the less cop cars are left to chase you. Play your cards right (which does, I admit, involve a bit of hiding out) and the cops are off your tail. Violence just lead to more cops in GTA IV, but here violence is the solution.

The controversial drug dealing mini-game is surprisingly good. I worried it would end up being gimmicky “added shock-value” feature, but I couldn’t have been further from the truth. It’s a modern-day take on Elite. It follows a simplistic “buy low, sell high” formula with the added twist of time-limited deals and the occasional drug bust. What should be a simple “drive from A to B” exercise always ends up being exciting due to the inherently unpredictable nature of GTA.

Speaking of which, sandboxes are wonderful things, but only if you get fun toys to play with. Rockstar have consistently created cities that feel alive, but also empty when there isn’t much to do. Chinatown Wars introduces armoured vans dotted around the city which you can hijack for weapons or drugs. Taxis, police cars, ambulances and fire trucks have done similar in the past. But these are minigames which need to be explicitly activated, and play out as (dare I say it) gimmicky side-missions. Hijacking an armoured van is completely seamless. There is no explicit activation here, you simply ram into the vans and/or using some good old fashioned weapon-based violence. Moreover, the vans are filled with valuable drugs or weapons, giving you far more incentive to have a go than the other minigames.

Finally, there are a few small but very welcome changes. Restartable missions were introduced in GTA IV, but here we have the ability to not only restart a mission, but also to skip the drive-to-this-location foreplay that missions often begin with. You can also replay previously successful missions.

I’m really pleased with what Rockstar have done here and, judging by the rave reviews, the critics agree. I can say without a doubt that Chinatown Wars is the most fun I’ve had playing GTA in years. By making daring design changes in the smaller, cheaper to produce GTA game, Rockstar has been able to innovate without risking their flagship title (GTA IV). I’ll be very surprised if we don’t see some (if not all) these excellent mechanics in the next release of GTA on consoles.

A reasonably established band going off and doing something different is a recipe for disaster, but when it turns out well, it’s oh-so rewarding. Fatboy Slim’s Palookaville is the last time I recall an artist reinventing themselves like this. Franz Ferdinand do much the same, albeit not to the same extent. They’re still hanging on to their (excellent) edgy vocals and indie sounds, but there’s a distinct electronica influence to the music. Tonight manages to work as a dance album as much as it does an indie album. Ulysses, their debut single and first song off the album, captures this perfectly. Smooth lyrics, an electronica vibe, and some very strong vocals definitely inspired my confidence that Franz could actually pull this off. The album moves from one catchy, energetic song to the next at a relentless pace hitting the apex at Bite Hard. Working toward the conclusion Tonight mellows out, producing memorable songs with a different, but very distinctly Franz, style.

There isn’t a weak song on the album, although some may argue it lacks variation. I wouldn’t disagree, but I’d also say that the sound is interesting enough to hold my interest from start to end over the course of dozens and dozens of listens. Tonight: Franz Ferdinand is a great album with a unique new sound. It’ll appeal to the electronica fan and the indie fan alike. And if, like me, you happen to adore both genres, you’re in for a real treat.

6. Grand Theft Auto 4
I agonized over including this. GTA4 is fun, but it fails to do anything interesting with the GTA format. I’ve been a fan since the first (top-down view) game, so I was heartbroken to find that GTA4 is essentially The Same Game With Better Graphics^TM. The few tweaks in there are great. Specifically, the wanted system now displays the police patrol radius on your mini-map telling you how far you need to drive to lose your wanted rating. Brilliant! I just wish Rockstar North did more of this sort of thing, i.e.: iterating on the core mechanics of GTA.

Having said that, experiencing Liberty City in its HD glory for the first time is an amazing experience. Never has a city been so well realized in a game before. It’s been said about many an open world game before, but Liberty City really does feel alive. There are approximately a million different little touches you notice over the course of playing the game. How the radio keeps playing when you leave a car. How people stand around and chat about things. How every citizen looks and dresses a little differently. I really could go on forever.

The setting should have been a platform for great storytelling, but GTA4 is very disappointing here. The protagonist, Nico Bellic, is a likable character. The dialogue is excellent: short, to-the-point and very witty. The plot, the tale of an immigrant and the American Dream, is an interesting one. The problem is that it never really materializes. It starts off strong, but ends up getting lost in the endless stream of repetitive missions, most of which are only loosely related to the plot, if at all. Which is a shame, because I think there is a lot of potential, especially in the colourful cast of characters.

After ten years, I think I’m getting a bit tired of the formula. Curiously, I put a ridiculous amount of hours into this game. So for the sole reason of being oddly addictive despite knowing that I’ve done it all before, GTA4 gets included.

 

5. Everyday Shooter
Everyday Shooter picks up where Rez left off: a beautiful fusion of abstract art and procedural music.

Mechanically, it’s a solid game, but it’s nothing spectacular. Your avatar (a tiny white dot) moves sluggishly and is often difficult to see. You can only shoot in 8 directions even when played with dual analog sticks. It seems to hold little promise, but the level design is where it all comes together. Everyday Shooter uses the concept of an “album game”, where each level/song is a different take on the “explode” mechanic (as made famous by Every Extend). Every level is a new world to explore, each with its own unique mechanics, enemies, music, and art. This works wonders.

It’s not best shooter, but Everyday Shooter is one of those games which are more than the sum of its parts. Playing it in a dark room with loud speakers and a big TV is gaming bliss.

 

4. Gears of War 2
CHAINSAW GUN! GoW2 is more of the same, but that’s not a bad thing. Epic took GoW and tweaked it into run-and-gun gaming perfection. Satisfying combat, meaty guns, and an excellent cover system contribute toward this. The level design is littered with lots of fun set pieces. Heck, even the laughable storyline adds to the charm. Of course, playing co-op is the only way to go. There’s nothing more fun than making intricate strategies with your co-op buddy followed by attempt after attempt at it going oh-so-horribly wrong. Things go south when the game strays from the excellent run-and-gun formula. The vehicles are mediocre, the bosses needlessly frustrating, and the platforming level is perhaps the most appallingly ill-conceived videogame sequence I’ve experienced in all of 2008. Ultimately, my critical analysis leads me to belie- CHAINSAW GUN! BBBRRRRRRR!!!! *splat* *splat*.

 

3. World of Goo
World of Goo is one of those games that puts a huge stonkin’ grin on my face every time I boot it up. After a long day of work, I could always rely on World of Goo to cheer me right up. The initial loading screen is filled with little jokes. Then the upbeat (and incredibly catchy) music kicks in. Already I’m grinning, and that’s just the menu! The game itself of course is even better, with great music, quirky characters, cute sound FX, and little gags hidden all over the place. There’s something about a joke hidden away that is inherently funnier than one that is simply presented to you. 2D Boy gets this.

The game itself relies on a bridge-building/physics mechanic which has that Nintendo-esque “quick to pick up, but plenty of depth” quality to it. The mechanics are presented as you go through the levels in a simple, non-intrusive way. This is backed up with levels that constantly challenge and surprise you with their inventiveness. There are plenty of “Aha!” moments to be had.

The best thing I can say about World of Goo is that I couldn’t stop playing the damn thing! I constantly wanted to know, “what are they going to throw at me next?!” So I’d click on the next level and get sucked into the gleeful world of Goo!

 

2. Mirror’s Edge
Mirror’s Edge comes in a close second. Yes, my experience was also filled with retries and weak gunplay, but that is missing the point entirely. The movement, the speed, and the physicality that Faith displays, that’s the point. Playing Mirror’s Edge is a new experience. You can’t say that about many games.

The fluid player movement is worthless without controls to back them up. Mirror’s Edge delivers with elegantly designed controls. Three buttons (up action, down action, turn) perform all the moves in the game. These aren’t arbitrary combos to memorize, they are logical, context sensitive actions. Push “up action” to jump. Do it while running against a wall will do a wall run. Do it while on a wall run will make you jump off the wall. Push down action when you’re about to land will give you a rolling finish. Simple. Logical. Ingenious.

Mirror’s Edge feels a bit like a good shoot-em-up. It’s part memorization, part improvisation. And lots of trying again and again.

 

1. Braid
To describe Braid in one word: mind-fuck. And a wonderful one at that. It’s been so long since a game has made me sit down and stare at it for 20 minutes, finally producing an “Aha!” followed by solving a puzzle. I described World of Goo as having plenty of “Aha!” moments. Braid is a series of sixty incredible “Aha!” moments.

Braid is split up into 5 worlds, each with it’s own unique time mechanic. Each puzzle is entirely unique. Puzzles will build upon other puzzles, but you’ll never solve two puzzles in the same manner. As a result, the game is constantly challenging you to experiment and to think differently.

Finally, and I say this without a hint of hyperbole, Braid has an ending sequence that is the greatest meld of story and game mechanism I have ever witnessed. Definitely the best game I’ve played all year.

 

Closing thoughts
It’s worth noting what a great year it’s been for graphics. I left this out of the individual write ups so I could mention it here. Four of the games on this list feature non-realistic art styles, and remarkably, each of them are unique. Everyday Shooter with it’s abstract weirdness. World of Goo with it’s charming cartoony art. Mirror’s Edge with its stark, flat-shaded, and almost sterile environments. And finally Braid with its beautiful watercoloured backgrounds. Even GTA4 and Gears, while firmly set in reality, have a stylized look to them.

Also, 2008 will definitely be remembered as the year of the indie. Games like Braid, Castle Crashers, Everyday Shooter and World of Goo made their debuts this year. They made it with critical acclaim and commercial success. This is a good sign for things to come.

Finally, I should point out that I haven’t played Fable 2, Dead Space and Far Cry 2 as yet. I suspect at least one (if not all) of them would have made it onto the list had I found the time.

Dynamic Tessellation, Part 2

Part 1 went through the initial attempts at dynamic tessellation. They were good but I wanted to do better. Turns out, doing better is really hard. I ended up using a really simple algorithm that works well most of the time, but still isn’t as “perfect” as I wanted.

The algorithm works like this:

segment bézier curve into 4 edges
change = true

while (change)
{
   change = false

   for (each edge)
   {
      if ( edge.length > THRESHOLD )
      {
         change = true
         split the edge in half
      }
   }
}

Basically, we start off with 4 edges, and tessellate the curve until no edge is longer than THRESHOLD pixels. Using a small enough value for THRESHOLD (I used 8.0) ensures that the curve will appear be smooth when rendered. The problem with this method is that it doesn’t work well for small paths. Given a path that is small enough, a complete change in slope can happen within 8 pixels. This method would most likely skip the slope entirely, thus not really rendering the curve correctly.

I suspect a better solution would be to combine the threshold idea presented here with the methods I discussed in Part 1.

BezzyDemo

BezzyDemo tied it all together. The idea was to do something subtle. Not too flashy, not too complicated, but pretty, in that abstract art kind of way. It also had to show off all the features of Bezzy. I’ll let the result speak for itself.

 

So what have I been working on for the past week? Keyframe animation, two Non-Photorealistic Rendering (NPR) fill techniques, and a little tech demo to tie all of this together. I also visited my “friend” Dynamic Tessellation for a bit.

We’ll talk about the first two today. Part two will be posted “soon”.

Keyframe animation

This along with morphing animation forms the animation module of Bezzy. I was a bit unsure whether something as high-level as animation would work in a very low-level API, but it turned out really well. What’s neat is that there’s a good deal of flexibility to allow for the type of “reactive” animation that videogames require. So you can start an animation and (with a bit of work) tweak it on a per-frame basis depending on what the state of the game is.

Keyframe animation does two things: (a) it allows you to make an object move along a path, and (b) rotate and scale an object any number of times along the way.

Here’s an example screenshot. I’ve super-imposed the animation on the same image to save me the trouble of posting a video. As you can see, the diamond is scaling differently on both axes, as well as rotating clockwise and counter-clockwise along the path. The path it travels on is rendered in the background, but this is obviously my doing, not the API.

Non-Photorealistic Rendering

The field of Computer Graphics is focused on achieving photorealistic rendering. Thankfully, some smart people decided this was a terrible goal, and started researching aspects of non-photorealistic rendering. This has lead to all sorts of fantastic rendering techniques that are more art-like, and mostly quite abstract. I implemented two NPR techniques right into Bezzy.

The first is Stippling. Stippling is using dots to simulate light and shading. This is problematic, because Bezzy is 2D, and therefore doesn’t have any light or shading. To compensate for that, I simulate light for stippling. Basically, to stipple fill a path you have to provide a light position and radius.

This was the last feature I implemented, so it was a bit rushed. I’m not entirely pleased with it, but it works reasonably well.

Contour filling, on the other hand, worked out fantastically. Like contours on a map, this renders a gradient fill of your path using discrete colours. The number of contours and their distance is customizable, as the screenshot below demonstrates.

I plan to take this a step further and write a “smooth contour” fill mode to make the transitions between the contours gradient, which would create a sort of halo of the path. Presently, I can do this by increasing the contour count to a very big number, but there’s a very noticeable hit on performance.

If you read my last post you can probably figure out what’s going on here. The fill geometry I’m rendering is smaller than the path itself. Here’s a screenshot that makes this a bit more obvious:

This is possible because the programmer has the ability to scale the fill and position the fill origin wherever s/he would like. What I need to do is ensure that the entire path is always filled, regardless of the fill parameters. This means that the geometry needs to be big enough to go from the fill origin to every vertex that creates the path.

An obvious solution is to loop through each vertex (and control point for Bézier curves) finding the distance between the point and the fill origin. Keep track of the largest value and use that as the width of the fill. That works, but we can do a bit better.

Instead of doing a distance check with each vertex, why not do a distance check with each corner of the path? My optimized solution calculates the bounding box for each path on creation. When the path is rendered it simply checks the distance between the fill origin and each corner of the bounding box. The maximum distance becomes the size of the fill geometry. Simple optimization, but it takes us from O(n) efficiency to O(1).

Now that we know what the size of the geometry should be, what do we do with the extra space? I went with the easiest solution of just “clamping” the fill, which means it’ll use whatever colour is at the edge of the fill. In the future, I could make this a configurable setting, similar to OpenGL. This would make tiling possible by allowing the fills to repeat or mirror.

We’ll go into how I fixed that in my next post. I want to spend this post talking about how I got fill modes to work in the first place.

Anyone who has done any work in OpenGL will tell you that creating gradient filled shapes is a trivial task. All the programmer has to do is assign colours to each vertex in a triangle and OpenGL will do all the magic colour interpolation for you. Unfortunately, this isn’t good enough for Bezzy. If we can only colour on a per-vertex basis, what happens when a gradient fill is applied to a path where the colour changes between vertices?

For example, let’s say we have a rectangle filled with a red-green-blue linear gradient fill. The rectangle has four vertices, one at every corner. We can colour those vertices red or blue, but since there are no vertices in the middle of the rectangle, we can’t colour anything green.

The obvious solution is to use pixel shaders to do the filling. Bezzy is targeted at computers with fixed-pipeline graphics cards, so I didn’t even consider that solution. Instead, I used a magic little videocard feature called the stencil buffer.

The stencil buffer is a buffer (duh!) on the GPU similar to the depth buffer. However, instead of storing depth data, it stores whatever data you’d like by drawing geometry to the buffer using a set of rules. Then, when drawing to the colour buffer (the screen) you can run “stencil tests” on the subsequent drawing operations. Stencil tests determine whether or not a pixel will be drawn by examining the value at the same pixel-position on the stencil buffer. Think of all this as an elaborate form of masking.

Using the stencil buffer, I came up with the following algorithm to render a linear or radial filled path:

1. Render the filled path to the stencil buffer using a certain value. Let’s say the value is “1″ in this example.

2. Set OpenGL to render to the colour buffer using a stencil rule that states, “only draw if the stencil buffer value of this pixel equals to 1″.

3. Render some simple geometry representing the fill to the colour buffer. For a linear fill, draw a gradient coloured quad, and for a radial fill draw a gradient coloured circle. This geometry will definitely fall out of the bounds of the shape, but the stencil test will ensure that the only pixels within the path are actually drawn.

I hope that made sense. If not, here’s a diagram that might help.

First, what the heck is tessellation, and why is my approach dynamic? Tessellation is breaking up smooth paths (in our case, Bézier curves) into a number of smaller lines. The more lines we use, the closer the approximation is to the actual curve, and as a result, the smoother the lines appear to be. Videocards are unable to render Bézier curves, they can only render points, lines and triangles. As a result, tessellation is critical to rendering curves on hardware.

Now the “dynamic” bit. This has to do with how we perceive smoothness. Basically, the bigger a curve appears on screen, the more lines are required to make it appear smooth. By scaling the amount of tessellation we use on the curves, we can ensure that we always have smooth looking curves using a minimal amount of lines.

Let’s take a look at the different approaches I took to solving this problem. I used three paths which I will creatively call (from left to right) Path 1, Path 2 and Path 3. The screenshot on the left shows the paths rendered in debug mode. Each line is coloured differently to make the tessellation obvious. The screenshot on the right shows how it would actually appear.

The naive approach

When I started off with my prototype, I simply used 16 edges for every curve regardless of it’s size or complexity. As you can see, some paths work out better than others. In particular, Path 1 looks terrible.

Length by control points

This method scales the tessellation by using the length of the curve. The longer the curve, the more tessellation required. We calculate the length by finding the distance between p0, c0, c1, p1 and multiplying by the scaling factors.

It then uses this rather arbitrary formula to figure out tessellation:

number of edges = 16 * (quicklength / 10000.0f) + 1
(quicklength is defined as the length sans the square root part … it’s an extra operation I save, and I’m not terribly interested in the actual length, just some form of measuring relative distances)

While Path 2 & 3 are look quite nice, Path 1 has visible edges. This is because the more extreme the shape of the path, the further the control points are from the actual curve. Take a look at the debug screenshot below to see what I mean.

Length by coarse sampling

I solve the issue above by using coarse sampling. Instead of using the control points I sample the curve at t=0.00, 0.25, 0.50, 0.75, 1.00 and find the “quicklength”. This yields better results, but there are still problems.

The middle of Path 1 is too finely tessellated whereas Path 3 isn’t well tessellated at all. The reason for this is that we are uniformly tessellating the curve. Slope plays a big role in how finely tessellated a path should be, and we aren’t taking this into consideration.

What’s next

My next algorithm will non-uniformly tessellate the curve by taking it’s slope into account. Wish me luck!