Showing posts with label Design. Show all posts
Showing posts with label Design. Show all posts

Wednesday, April 18, 2012

5 Steps to Publish (a fairly successful) Android Game

Hi all, when we first published "Where's my Chicken?" on the Android market, it was an evolution of our experience in game development. We had previously published "What's that Country?", a quiz game which we knew will not be our best app. However we still did it. Developing "What's that Country?" taught us valuable lessons on Game UI design and we didn't want to shelf something that worked just because it wasn't something mainstream. "Where's my Chicken?" was our first fully featured game with units, levels, rudimentary AI, sound effects, high scores, and global leader boards.

Following I share with you our design and development process for "Where's my Chicken?". At the time of writing, it has been a month since launch. We have over 50,000 downloads with 70% of them being Active Installs. We are ranked 7th on Casual game installs and 70th for all games in Malaysia. We did not spend any money for marketing and the first day of launch begun with 3 installs (me, my brother & my wife).

Here we discuss the 5 steps we applied in our game development as well as until you publish and market it to the public.

I just hope some of you find this interesting, and a few others will find this motivating enough to venture forth and make games!

1. Graphic / Design
I am a design person. That's the basic truth. Its easy for me to sit down and just produce design after design. Coding was fun, I learned it and used it for some projects. But design has always been closer to me. So now I take care of game design, while my brother takes care of ALL the coding. Yes, he is the real brains behind all of our games. Just don't tell him that :)

For "Where's my Chicken?" after our brainstorming session, we fleshed out the basic premise and idea of the game. I set to work on the first unit you will use. I did not do the game ui, icon, or anything else. The first thing I did was this:

Behold! The Chicken!

The design of the Chicken was a real challenge. It is obvious that I was inspired by Angry Birds, but we still wanted the unit to look distinctly ours. That is why in the final version, we removed the tail you see above. My brother's comment was that tail is Angry Bird style. So yes, you are enjoying our games with tailless chickens! 

This first design set the stage and theme for the rest of the game. We wanted the words "Round & Juicy" conveyed in our design. Another thing we did was to randomize the chicken position by flipping the images. This brought variation in visual design and the chickens didn't just look like mechanical clones of each other. 

The game UI was designed to be simple, because we knew later levels
will have a lot of action on screen. 

We maintained a variation of 3 shades on each layer. Meaning an original color, a highlight and another darker shade to indicate shadows. We did not do any texture or gradients. It is my opinion that designers overuse gradients when a little bit more work in positioning the shadows and highlights will make the design far more original. 

Only after doing the second unit, which is the Rooster; did we design the game screen. We included the ability to scroll when we realized the problem of scaling the number of chickens horizontally. We had to add an increase in game challenge through the larger number of units on screen. So due to a technical difficulty, scrolling down and finding chickens to collect eggs became a game play element which we didn't start out with. 

This is one thing we should remember when we design games. We shouldn't be so set in stone based on our initial idea. The idea should be like water, easy to change and adapts to the challenges the design and development team faces. Sacrifices have to be made and decisions have to be done fast. We do not have the luxury of arguing a single point for days when we could have used that same time getting more downloads!

So remember, for design always follow a theme. It would help if everyone in the team are aware of the design ideas. It helps them to focus on the game elements and atmosphere. This is why we have big game studios doing all those detailed 2d art which they never use in game. It is to help their team conceptualize the final product and to be always be within the scope of the game. 

2. Coding
By putting coding as second, I am not in any way saying it is second to design. But the bulk of it actually seemed to get done after having the basic design down. Of course, developing the basic principles and game mechanics early on helps immensely in reaching the project dateline.

Another point to understand is this, design and  coding goes hand in hand. One cannot be finished ahead of another. So both parts will continue to develop and evolve right until the end of the development cycle. You need to have some programming background using Object Oriented programming languages. Even better, if you had learned Java and are familiar with it, you can get started developing Android games quickly. 

We used only the stock Android SDK and didn't use any paid game engine or sound engine. Everything was built from the ground up, this is why "Where's my Chicken?" was built to support multicore processors early on. 

When developing for an open system like Android, compatibility has to always be number one. Sure, you can limit which devices can download your game but why would you reduce your income potential? Usually, the compatibility issues can be worked out with some additional work. 


Why oh why did you pull down my ratings?

For example, we had a tough time with "Where's my Chicken?" when we started to receive dozens of Force Close and Freeze comments from Samsung Galaxy S2 users. We didn't have a Samsung Galaxy S2 in hand to test and reproduce the error. We did over 4 updates each a day apart before we stopped receiving negative comments from Galaxy S2 users. What was even more mind boggling was that over 20% of our active users were Samsung Galaxy S2 users. So the error was only evident in a small number of devices. But unfortunately this pushed our game from a 4.7 star game, down to 4.1 stars. 

Understand that developing the code for a game is not a one time deal. It is a continuous development process where you need to adapt to your user comments and needs. It was never a choice for us to ignore players who were having problem with our App, we wanted to build trust with our users and the only way you can do that is by caring and responding to them. They trusted you by downloading your Game and even commenting on it, show respect to their feedback. 

3. Sound
My oh my, have you ever wondered how important is sound design in a game? Let me tell you this, sound design is like the third pillar that supports the whole game experience.

But integrating sound into your game basically breaths new life into your game. The right sound sets the stage and atmosphere for your game. Even the element of fun is transferred to the player through music alone. A lively and cute music 4 seconds long is more then enough to make your players receptive to your game play.

To really understand how beautiful the right sound can make your game, watch the following.

The Sounds of Dead Space 

I never played Dead Space, its an excellent game mind you. But I really, really, really don't like horror games. Attribute it to my overactive imagination, but my brother did and I watched him play. The sound in the game was amazing! Of course its scary and horrifying, but the sound was so good. Just listen to it and I bet you will understand what I mean.

Journey on PS3, perfect sound

See the sounds from the game Journey which is available on PS3. The sounds are so mystifying and evocative. The best match for such an abstract game.

Although we may wish to get such beautiful sound for our game, budget constraints and the lack of proper equipment to record good sound will hamper your efforts. The best way an indie developer working on a shoe string budget can obtain good sounds is to sift through the thousands of free sounds available online and find a good enough match. Just hope that you will be luck enough to find something that fits your game theme.

Never skip on sound design, every extra sound you find could mean the difference between excellent and mediocre. Sound design can also be used to convey feedback, and error messages to the user without opting to text & visual cues. Sometimes it is actually easier to just add a error sound rather then spend time adding an error message!


4. Gameplay Design
To be realistic, Gamepay design is actually a full article in itself. But I will highlight the top concepts that you should be aware in designing how your game will play out.

The first concept we do in designing games is discuss about layers. For example, the concept for  "Where's my Chicken?" came from this! 


Tenori-On 

I was just fascinated with all the blinking lights and chasing to click them. So the idea formed that the basic interaction of the user was to quickly find something and click on it. We did an initial concept where it was just colored dots and you clicked on them when they lit up. 

But my brother insisted on having more character to the game. Something not abstract, something that users can easily relate to. It was my wife who said why not change the colored bulbs into eggs, and boom! The whole concept for  "Where's my Chicken?" was designed in the next 10 minutes. We added the the Fox as the antagonist, thought of the other units, and created the theme of the game. 

Ogres are like onions! So is gameplay design!

This is what we call layers. When you have a basic game interaction, you will need to add layers on top of the basic gameplay to keep your players interested. The more layers you put, the longer you game session is, the more complicated your game will be, and the harder it will be for some players to understand it. 

Being number 4 in the list, you may wonder how can we have thought of the game play first before even designing the game? Well game play design is unique in that you have to have the basic down before you start. But the full game play and tweaking is only done after you have completed most of the game. 

Here is a short list of points which you should be aware of during design:
  1. Mechanics : How does the user interact with the game world? What can he touch? Manipulate? What are the limits of his actions and the effects? All of these has to be known prior to a full game design. 
  2. Duration : How long does it take for the user to pass a level? Being mobile games, we should look at game sessions from as short as 30 seconds to as long as 30 minutes. How long do you want a user to spend in a level? Expecting 10 minutes of focus from a user is not feasible for mobile games. If you design it as a 30 second game, then you cannot put much complexity in it. 
  3. Rewards : You have to give rewards to your players. Without rewards, why would your players be interested in playing your game? Think of rewards like positive reinforcement for your players. When they do something that you want them to do, reward them. Rewards could be your game currency, new levels, new designs, new skins, etc. Be creative!
  4. Difficulty : Level difficulty is one of the hardest issue you will face. Each and every one of your player will have a different opinion of your level difficulty. It cannot be too hard that it borders impossible, and it cannot be too easy that it borders on boredom. 
  5. Experience : Write down what is the experience that you want your player to feel. How would you translate this into game play elements. For example if you wrote down Action as an experience, what event in your game can convey this feeling to your player? 


5. Marketing & Sustainability
Many first time developers live in this mythical world where they believe that the moment they launch their app, they will get 100,000 downloads in the first day. They might even aim for 1 million downloads in the first month .

I'm sorry to burst your bubble, but the best you can hope to get in the first day of download is a couple of hundred. Maybe a thousand, if your game is really good and you have already integrated social media sharing.

But a typical game will need to gain traction, meaning being reviewed by websites and blogs, being posted on player's Facebook page, being shared on Twitter messages, etc. What do you need to do? You have to keep on trying to get bloggers to review your app. Write a personal email to each friend, and ask them to "like" on Facebook. Write to all the thousands of helpful bloggers out there who would like to do a free review of your app. At the same time, keep on updating your app and listen to their comments and improve.

But most importantly remember this, you get better at something that you do again and again. The more games you release, the better you become at it. The more people you interact with as a game developer, the more opportunities that you will come across!

Friday, March 2, 2012

A Visual Design Guide on Angry Birds

Yes, I do know that the title sounds like the start of a long winded theses. But this guide (or discussion) intends to look at the design language of the Angry Birds game and hopes to outline the major points that other designers can emulate.

At first look, the Angry Birds looks to be a simple game with minimal graphics and design work. However trust me when I say that the artwork that some take for granted, actually goes to define the core experience of the game.

The first thing a user sees when he/she starts an Angry Birds game is this:




Whichever version you may have played, the first Call to Action you see is the big Play button in the middle. Many games forget to give this action the importance it deserves. The difference that developers tend to forget is that this is a Mobile Game. The average user is not looking to spend the next one hour engrossed in your grand story and complex game play. The average user is trying to spend the next 10 minutes of their life doing something fun. 

Drowning them in a menu system would have been the wrong way to go. Let us compare this menu style with some popular PC games:

Civilization IV

Modern Warfare

Starcraft 2

All of these 3 games are excellent games, however players of these games know that when they start these games; they are looking to spend the next 1 hour playing it. Which gives the designer the leeway to put as much information in the menu system. Also, the complexity of the game play means that a complex menu is a must for the user to enjoy the full spectrum of game play available. 

This level of complexity is not needed for mobile games. Big buttons that are touchscreen friendly, as well bright colors and clearly defined shapes help to funnel to the player into the game play as fast as possible. 

After selecting play, you move on to the level selection. And you see this:



Again you see a simple yet elegant menu system which continues on with the design cues from the previous screens. You can also see a wide variety of color scheme being used through the game. Most of the screen has solid colors that guides you visually and lets you know what you are exactly looking at. 

Green for the pigs, Red and other basic colors for the birds, the structures also use the same colors throughout the game. This helps the player to familiarize themselves with the map and challenges on a visual level. With just one look, a player can easily say what material is widely used in the structure of the map. 

If you were to further simplify the design of the birds, it would be like looking at colored spots on the screen. Most of the basic characters are circular in shape. From the birds to the enemies, all of them have a circle theme. Looking at the following picture, could you imagine 2 green dots and 1 red dot in the middle?

3 dots, 2 green and 1 red. 

Now take a closer look the following picture of the Red Bird. 

A red circle with a beak!

If I asked you to simplify the design of a bird, how would proceed? What would you remove from the basic idea of a bird? Would you remove the neck? the legs? the wings? the feathers? What is left after removing all of these? 

Only the head of the bird is left. However is is this exact simplicity that you see in the Angry Birds. It is like someone sketched a bird and only colored the head while removing everything else. 

Now add a base color to the bird, apply a simple 3 tone color scheme and you are done. Embellish the design with some visual cues like eyebrows and a mouth to convey emotions and you have an angry bird. 

This layered tone design is evident throughout the game. From the colored backgrounds, to pigs and everything else in between, you see this layered effect of different hues of the base color overlapping the basic shape. 


6 green dots, 1 black dot, 1 blue dot, and 2 red dots!

 And that's it! With a basic knowledge in Illustrator (or any vector graphics program) you could draw any of the elements in the Angry Birds Game. Perhaps I could put up an Illustrator tutorial on how to do this in an upcoming post.

Monday, February 27, 2012

Guide for Tron Visual Style


During our most recent development of an Android App, namely the RhythmBot FREE. We had the idea of designing it Tron-esque visual style. Now designing something to look like its from the Tron universe is not like making everything into a wire frame model and giving it a glow effect. The important thing is the colour palette and the use of negative space.



Although RhythmBot FREE does not utilize a highly visual design scope, it was still fun finding sources and existing guides online.


One of the best (namely because it comes direct from the special effect designer of Tron Legacy) is jtnimoy. The link for his Tron design page is this.

I was amazed at the level of detail that was put in designing all the elements, that basically had a screen presence of only a few minutes. But it is perhaps these few minutes that truly defined the Tron experience for the viewer.



Have fun analyzing the design elements, we certainly did!

We are back!

First up, sorry for the massive delay since my last post. I can give a lot of reasons, but the simple truth is this. We have been developing Android apps!

Yes, that's right. We have jumped on the Android Development platform for now and are having a blast developing Apps. Is it a success I hear you ask? Well, lets just say it is too early to make any definitive conclusion. 

So here is the marketing pitch. Do download and try some of our Apps, and drop a good rating if you find it nice! 

For the blog, I will be sharing some of our experience in Android development with all of you. Heck, dont just play games, learn something I tell you!

Click to here to go to RhythmBot FREE


Click here to go to What's That Country?




Wednesday, June 22, 2011

Adobe Photoshop Replacements - There Isn't That Many

I am an avid Photoshop user. From blogging, graphic design, to product design sketches, I use it practically every day. But there have been times when my access to my laptop has been cut off and I was in need of some quick graphic editing software. 

So this let me on a quest, to find the best replacement for Photoshop. 

The search has been less then rewarding. There really isn't that many good replacements for Photoshop. For those of us who have learned Photoshop as their first tool, you can't readily sit and use another graphic program without some heavy referrals to online tutorials. 

Although there are many graphic programs out there, I have chosen only 2. This is because they have the best communities with easy to find tutorials and their developers are fairly active. 

1. GIMP
The most common and widely used free alternative to Photoshop or other graphic programs. It is quite famous among our Linux brethren. It has rich functionality and tons of tutorials online. Very easy to learn and it shares many similarities with Photoshop. 

2. Paint.NET
Don't underestimate Paint.NET. it might have the flavor of the common Paint in Windows, but it has been developed beyond its initial scope. It has most of the common functions you would expect from Photoshop. There is also an active community of users with readily available tutorials online.