A Game for iPhone: From a Silly Idea to an Application

A few years ago I created two characters that soon became very popular – Rabtus and Cumber. Their personalities were formed and added to with time and they became two characters that tease and torment each other gently and with a lot of humor.

A Game for iPhone: From a Silly Idea to an Application

Rabtus

Rabtus

I made vinyl stickers of their likeness in different situations and locations and distributed them around the world in direct relation to the specific locations.

Photo

With time, they tormented each other so much that I felt I simply had to make it into a game as a fun personal project.

Together with Ziv Meltzer I decided to develop the game. The iPhone came up as a suitable platform for the game and I started to think of ways in which we could use this platform’s abilities in order to develop the idea for the game. We wanted a relatively simple idea in terms of the game experience. It was clear to all that the game would be hand-illustrated, while giving special attention to the smallest details (remember my previous article )?.

Using the Accelerometer: Helping Rabtus Not Vomit

Cumber built Rabtus a swing on a spring and the player has to get Rabtus to stay upright by tilting the iPhone in the direction opposite to the fall. The swing is affected by the angle of the tilt as well as by the Cumberd bird that perches itself on one of Rabtus’s ears and adds to his overall weight. If Rabtus is tilted too much for too long, he will vomit and the player is disqualified.

From Idea to Action: Planning & Beginning Production

We created an initial characterization and shared a request for a price quote on social networks to program the game.

Sketch 1

Sketch 2

We received a number of offers and chose the one made to us by Jorge Cohen, a freelance programmer. We detailed the characterization even further and that ‘s how we started the process of designing the characters, backgrounds, animation and general visual scheme as well as the programming stage of the game.

Sketch 3

The three of us worked on shared documents on Google Docs to manage the schedule, the QA lists, the Beta testers’ lists, the texts, etc.

We decided to create 20 levels for the game in the first stage. Each level contains a different eccentric “world” in the same style the characters themselves were designed, with as much humor as possible and with a surprise for the player in each individual level.

I illustrated the different levels according to the dimensions of the iPhone screen and added an extra 30 pixels per illustration on each side in order to allow for the movement of the different layers and thus providing a sense of depth in the different levels. Each layer will move in correspondence with the tilting of the iPhone, so that the farther away the layer is the more it will move sideways, this way the sense of depth will be greater.

Screenshot

Designing the different characters that participate in this game took up a large portion of the work. Although Rabtus was an existing character already, I had to illustrate him in different situations throughout the game, especially while being tilted and when he’s vomiting, with the different facial expressions and the nausea he experiences. In addition to Rabtus, I illustrated and animated another 8 characters – 8 birds, each with a different purpose in the game.

Birds

When we were done with the first 20 stages of the game we went on to work on the other screens seen throughout the game: Load screen, Main Menu screen, Instructions screen, About screen, Pause screen, Level Selection screen, Level Failure screen, Level Complete screen, Trophies screen, Facebook/Twitter share screen.

Each screen was pre-characterized in order to ensure the correct flow between the screens and a user-friendly experience. They were then illustrated and animated.

I made the illustrations using Flash and they were done in multiple layers. I also animated their movements until I reached the desired result. It was important to limit the number of layers in the game in order to avoid performance issues with the iPhone – up to 4 layers per screen.

In order to make it more interesting, I added tiny animations to some of the illustrated elements such as monsters blinking in the background, a moving zeppelin, background smoke and so on. Here too I needed to limit the number of frames, and when it came to circular animation like the zeppelin moving from side to side and back again, we instructed the programmer to program this repetition using a code and generally tried to use coded animation whenever possible in order to avoid making the files too heavy and to facilitate the overall performance.

Exporting the Graphic Material

All the images were exported from Flash to Photoshop as PNG files and then were optimized with Save For Web.

After extensive research following some performance issues, we found a wonderful tool by Yahoo called Smush.it which enables files to be reduced by at least 30%. The process of image saving was a long one (all in all we saved about 1000 images, most of them manually, and they were consolidated into sprite sheets).

Rabtus Sprite

During this lengthy work process we discovered it is best to save the images in even pixel numbers both height and lengthwise in order to avoid image distortion.

We tried to avoid using text throughout the game as much as we could and used as many icons as possible that would be universally understood. The parts that still required text, we saved separately because the game was translated into several languages and each language requires corresponding text files.

Sound

We wanted to use unique sounds and voices for the game as well as for the video. We invited a group of our friends for an evening of fun and funny sound takes. Each one of them donated their voice in a few different versions, we played around with the speed and pitch and in the end we picked the best of the bunch. In addition to that, we also purchased sound samples from sound stores on the internet.

Finding a Name for the Game

For two months we were looking for a name that would work – it needed to be catchy and the domain needed to be available, and during a casual conversation with a close friend a name came up and it was obvious we’d found the right name – "Stop The Vom".

Feedback

All through our work process we found it important to hear comments and suggestions from friends and colleagues about the experience they had while playing as well as the smallest details that added to the visual identity of the game. We were also glad to hear feedback from other designers.

Putting Everything Together

We started getting versions from our programmer and were really starting to "feel" the game. We made a few changes and were then free to design the additional materials that surround the game.

The Trailer

We wanted to make a short animated video that would be part of the game as well as serve as a trailer/teaser.

In order to generate curiosity and interest, we chose to tell the supposed story behind the game and show Cumber plotting and preparing his trap, from the moment he builds the swing right up to the moment he lures Rabtus into falling into it.

I wrote a script and then went on to the storyboard, all the while making sure not to exceed a 45 second limit (so as to keep the file light and also to get the message across quickly).

I illustrated all the scenes, each scene in a separate Flash file. The part where you see Cumber building the swing I illustrated in a dark atmosphere and the final scene I animated using the first screen of the game as background in order to forge the link to the actual game.

I eventually transferred all the scenes to After Effects, where I edited them together, added visual effects, chose sound effects as well as adding the sounds we recorded. I searched for the right music; it had to also work for the game itself. I then exported the video in two different versions, one compatible for YouTube and the other for iPhone.

The video starts when you first enter the game and can be played again from the game menu as well as being embedded in the site.

The Site

It was important to us to create a site that in addition to serving as a landing page, would get across the message and atmosphere of the game, the humor in the characters and the smallest details, would provide information about how to play the game and about the characters in it, would showcase screenshots from the game and the trailer, iPhone backgrounds and more, and of course – a download button for the game.

Stop The Vom
Site

Technologically speaking, we couldn’t use Flash because we wanted to make sure iPhone, iPod touch and iPad users would all have access to the site in full. We used Animated GIFs in order to draw attention to the download button, so that it can be active in devices that do not support Flash.

In addition, it was important to us to create a version that would be compatible with iPhone surfing, including the option to watch the video.

We researched the subject of site development for iPhones and found, to our relief, that YouTube’s Embedding allows the viewing of videos on iPhone with Quicktime instead of the Flash player.

After the Design and Programming Process

We compiled a diverse list of Beta testers in order to get a wide focus group including “the gamer”, “the designer”, “the occasional player”, as well as iPhone and iPod Touch owners with different models. We launched the Beta version and for two weeks we collected the feedbacks we were getting. From there we went on to iteration – more corrections and changes, some to do with the player’s experience and some to do with the interface and design.

Getting Ready to Launch

We opened a Facebook and Twitter account, adding a link to the site as well of course as a “Like” button. In addition to all these, we started to research our advertising and marketing options extensively. We gave our all in order to finish the design portion and the development of supplementary materials as well as all our research as soon as we could in order to concentrate on the fine tuning of the game in preparation for the launch.

We submitted the game for Apple’s approval and admittance into the App Store, crossed our fingers and then came the mail... The game is approved!

In Conclusion

Ziv and I usually work on commercial projects for our clients, and the learning process as well as the research of how we could design our own game for iPhone was fascinating. No doubt the design work and even the administrative side of the project were a wonderful and challenging experience for us.

This was the first time we had created an entire project that was all our own and not for a client. It entails a large monetary investment as well as hundreds of work hours, but we enjoyed the process, we learned a great deal from it and we’re ready to get to work on our next application!

Download Stop The Vom

And Now... The Giveaways!

I'll be more than happy to hear your feedback about the game, and will give away 3 exclusive promo codes to Onextrapixel readers! All you have to do is share this article on your Facebook/Twitter accounts and place a link to the post/tweet on the comments below. It’d also be great if you like Stop The Vom's Facebook page. We'll choose 3 of the commenters randomly by the end of the week - Sunday, 17th July 2011. Please provide a valid email.

Good luck!

Here Are The 3 Lucky Winners

We are glad to announce the 3 lucky winners for the Stop The Vom Apps giveaway. They are:

  • Eskimo
  • Graham D
  • Kellie Edland

Winners will be contacted through email soon. If you are one of them and have not received an email from us or our sponsor by next week, please contact us.

Thank you for all your support. For sure, we will be organising more giveaway contest so everyone will have a chance to win, stay tuned!