Permüt - a quiz game for iOS and Facebook

I'm a bit late writing about this one (though in my defense, it's had a lot of updates, so I was waiting for a "definitive" version), but this is the first project released by my current company, TripleFun; Permüt.

A bit about the game

It's a quiz game, developed for iOS (iPhone and iPad) and Facebook, where you're presented with a question and several answers, which you have to sort in the right order. It's a novel concept, and the images for each of the cards help make it stand out from the other quiz apps.

It's a multiplayer-only game, and you can play with your friends, to a total of 5 in a game, or in quick games, where you're paired up with 4 other random stangers.

There are 9 categories to choose from, and we're now into the thousands in terms of questions.

Each game has 5 progressively harder rounds, and you win via a combination of Perfects (all cards in the right order) and speed. At the end of each game, you can win or lose ranking points, and you can track your progression in both a friends and a country-wide leaderboard.

Development

Permüt is developed using Flash (AIR) and Starling. This let us build both the mobile and web versions in parallel using the same codebase. Flash (still) gets a lot of flak, but to be honest, about 90% of the work on the project was pretty handy. The remaining 10% where it was a pain in the ass was with mobile specific stuff where you'd either have to search out some ANEs, or roll your own. We ended up using about 8 in total, one of which was developed in-house, covering:

• Facebook integration
• Getting contacts (so you can invite them to games)
• Handling notifications
• Ads
• Emails (so you can invite people by email)
• Purchases
• SMS (so you can get contacts and invite them by SMS)

On the web front, the heavy-lifting for Facebook was performed by JS and PHP, with Flash just interfacing via ExternalInterface.

As the game is for iPhone, iPad, and web, it obviously has to scale properly across different resolutions and screen sizes. There's no easy way to do this, but we had a simple system to convert mockup coordinates (PSDs) to current screen coordinates, and then positioned everything relatively. There were a few special cases for different screens (iPad and iPhone5), but that pretty much handled most of it.

Multiplayer

By nature a multiplayer game (while it could have had a single-player component, we decided to focus on getting people to play with their friends), that immediately added another factor of difficulty. The server side is written in Groovy, which is a dynamic language built over Java - basically it lets you write Java without all the painful parts, as well as adding in some sweetness like DSLs and ASTs.

In terms of gameplay, you could have an invited game, from 2 to 5 players, or a quick game, which are always 5 players. Even though the flexibility was there, we found later through statistics that the majority of players either played in 5-player quick games, or 2-player challenges. Chalk one up for experience.

Flash connects to the server through a socket, and events are dispatched in real-time, meaning we can give nice feedback like if someone is actively playing at the same time, which adds a nice dynamic. It does have the downside of needed to be always connected, though, which can be frustrating for players that aren't playing on a stable connection (e.g. on the metro).

Localisation

To date, Permüt is localised in English, French, German, Italian, Portuguese, and Spanish. As well as that, it's localised in the sense that each country (other countries are in the worldwide group) has their own specific cards and questions - an American player won't know or care about a question about French politicans. On top of that, due to the nature of the multiplayer element, you can be invited to a game in another country. This can be a bit of a headwrecker when you're trying to figure out what an English player, living in France, invited to a Spanish game, should see in their game.

Localisation for the cards and questions are stored in the database, while localisation for the app itself is embedded in an XML file bundled with the app. We have a simple script that converts an Open Office spreadsheet to XML, and another to convert tags to static consts to make them easier to use in code, so once it's set up, adding a new language is simple.

I now understand why Angry Birds made their game with zero text, though; it's just so much easier.

Facebook

When you first launch the app, you can decide whether you want to have a normal Permüt account, or a Facebook-connected one. The benefits of linking with Facebook are that you can play against your social friends, and you can play across devices - connecting via Facebook on iPhone and iPad will recover the same account on both.

Actually integrating Facebook is, as always, a joy, though it was light enough on this app - friends, sharing, and on the web, purchases.

If you've never done sharing Open Graph stories before, you are in for a treat. Basically you read about 100 pages of documentation so you understand all the different ways you can share on Facebook, create your Open Graph objects, actions, and stories, fix all the automatically generated sentences (tedium), and then make sure everything works, taking into account Facebook's caching. Simple.

The Open Graph objects were localised (the page itself is auto-generated by PHP, giving different text and images depending on whatever parameters are passed), but not the stories. To properly localise that, I think you had to change ~2500 strings, per language, per story. I decided to pass on that one.

Purchases on the web also pass through Facebook, and they're a bit hard to test, because it all works through callbacks (iOS returns immediately, and you verify on the server, which is an easier flow, but completely prone to hacking), so you have to debug in a roundabout way, such as logging through a file. So your testing flow goes like this: edit PHP code, upload to server, clear log file, start game, make fake purchase, download log file, check errors. Not the quickest.

Also, if you want to support payments using mobile, then you have to take into account price-jumping, which is where mobile users can only pay in fixed amounts, so the final price is rounded up to the nearest one. To help aleviate this, you can tell Facebook that you're flexible in the amount of the item that you sell. So you don't sell a pack of 100 hints for €1, you sell 100 hints for €0.01 each. Aside from modifying your logic in the app (multiple amounts in web vs 1 amount in iOS), as you can't specify half cents, depending on what you price each unit as, there can be a big difference in the final amount. E.g. 250 hints for €2.99 - that's €0.012 cents each. But you can't have that, so you can set it as €0.01 or €0.02 each, for a final price of €2.50 and €5.00 respectively. You'd probably round down, so that's a loss of €0.50 each sale. If your game has a lot of purchases, that quickly adds up.

Also, Open Graph 2.0 came out about a week before launch :D

Play it

Go check out Permüt on iOS or Facebook - it's free! If you want an idea of what it's like, here's a French Let's Play: