Making my first app for iPad

Doodle Duel IconIn 2011 my new years resolution was to build a game and put it into the app store. By January 2012 I still hadn’t finished it. It wasn’t through lack of trying, I just bit off more than I could chew; using a Mac for the first time, learning a new programming language (lua) and producing illustrations which stretch my ability to draw.

In mid January I started to think that I could make something much simpler and use the technologies I’m more comfortable with (HTML, JS and CSS). After a some lame ideas (a sheep piano, goat organ and cow-a-phone), some ideas that had been done many times (drawing a perfect circle and being scored on it), I finally had the idea of a game where you guess what the iPad is drawing. This idea has become Doodle Duel (name thanks to Dav), a competitive game for 2 players to be played in the style of an old 1980s cocktail video game.

How it works

Doodle Duel is built using web technologies with a little help from PhoneGap – where the browser doesn’t quite have the functionality yet (I’m looking at you Audio API).

The illustrations were produced with Ink Scape, then rendered to the screen using Canvas. I’d done some rough tests last year with a SVG/Raphael  (if you haven’t used this before… do it) drawing the paths, but I found the performance suffered as the drawings became more complex. The conversion to Canvas seems to keep the drawing speed consistent, regardless of the complexity (even on iPad 1).

The interface is rendered with CSS3, eg rounded corners and gradients, with a few images where needed. The JS is written with a combination of  jQuery and standard JavaScript, nothing fancy. just keeping track of the user, listening for events and randomising the game.

The app that has been submitted to App Store weighs in at around 4mb, fairly small for an iPad app. I was quite conscious of keeping it well under 20mb, as this is the limit for a 3G download when purchasing the app, and I like the idea that people might want to download it for a road trip, or a rainy holiday day.

Submitting the app to apple

I’ve never been so paranoid about a personal project. Checking everything a million times, and annoying people by asking them to play and watching out of problems. I read and re-read the guidelines, searched for checklists that people use, anything to help me ensure the app was acceptable.

The final process for building the app for release drove me a little nuts, Apple have a guide on their site, but I also found the guide by Steve Gill invaluable.

Now I wait with my fingers an toes crossed…

To get an idea of how long the game will take to finish it’s review, I’ve been keeping an eye on http://reviewtimes.shinydevelopment.com/ which uses crowd sourcing via Twitter to calculate approval times.

Get a sneak preview of what the game looks like:

Articles I really must read when I get to work

Quick post with a series of URLs I’m keen to look at in more detail. I tend to skim things when I come across them, but the following pages deserve a closer look and a demo or 2.

Creating awesome CSS3 animations Thomas Fuchs

At the moment, my work is all about how to start producing Flash style animation without Flash. This looks like it should give me a few insights into achieving this with CSS.

Processing demos at Monocubed

On the path to figuring out this animation puzzle I’ve also been playing around with ProcessingJS. Monocubed has heaps of great demos, most of which are really easy to replicate

How to Centre and Layout Pages Without a Wrapper

As soon as I read  the first paragraph I’d ripped off the idea and starting playing with code. But I really should read through this article entirely

HTML5 Doctor

Just sit down and devour this site I think…

CSS Gradients

Turns out that ye olde IE6+ has some gradient tricks up it’s sleeve… not quite (!) as flexible as the modern browsers, but still work reviewing this to see what can be squeezed out of the old dog.