Posts Tagged ‘User interface’


Nov 28

A Compendious Guide On Creating A Simple iPhone Game Using Cocos 2D 2.X

The current trend of iPhone gaming apps has taken the gaming world by storm. Almost every iPhone app developer has tried his/her hands on developing a game. Thanks to the availability of highly effective iOS app development frameworks, it has become feasible for the developers to create simple yet fun 2D games targeted at iOS devices. Cocos 2D is a fantastic iOS framework that has worked wonders for developers looking to develop games for smartphones. The following is a simple guide on developing your first game using the Cocos 2D 2.X framework.

Step 1- Download and install Cocos2D

Firstly, you’ll need to download the Cocos2D framework from the official Cocos2D-iPhone home page here. On this page, you’ll be able to choose from different versions of the software program including: Cocos2D 1.X vs Cocos2D 2.x and the stable vs stable choices. In this post, I’ll be referring to the creation of a simple iPhone game using the most recent Cocos2D 2.X. Many companies offering iPhone application development services have already worked on building gaming apps using Cocos2D.

Step 2- Start with adding a sprite

Just in case… A sprite is basically a 2D image that can be rotated, moved, animated, scaled and so on. Prior to proceeding ahead with addition of a sprite, opt for gathering some good game art/graphics. After having downloaded the required resources, unzip the file and drag everything over the Resources folder available within the Xcode. With images ready-for-use, try and figure out where you’d be placing the player. In Cocos2D, choosing the landscape mode means that the upper right corner is (480, 320) and that the game would run on a 3.5” screen. In addition to this, you may also opt for the (568, 320) option which would denote that the game would run on a 4” screen.

Step 3- Open the HelloWorldLayer.m file and replace the existing init method with the following code:

– (id) init


if ((self = [super init])) {

CGSize winSize = [CCDirector sharedDirector].winSize;

CCSprite *player = [CCSprite spriteWithFile:@“player.png”];

player.position = ccp(player.contentSize.width/2, winSize.height/2);

[self addChild:player];


return self;


Step 4- Add moving monsters

On this step, you’ll add some monsters into the game’s scene for the ninja to combat. Here, it is important to make the monsters move. You can do this by simply creating the monsters slightly off screen towards the right side, followed by setting up an action for them, prompting them to move into the left direction. For all this, simply add the below mentioned method before the init method:

– (void) addMonster {


CCSprite * monster = [CCSprite spriteWithFile:@“monster.png”];


// Determine where to spawn the monster along the Y axis

CGSize winSize = [CCDirector sharedDirector].winSize;

int minY = monster.contentSize.height / 2;

int maxY = winSize.height – monster.contentSize.height/2;

int rangeY = maxY – minY;

int actualY = (arc4random() % rangeY) + minY;


// Create the monster slightly off-screen along the right edge,

// and along a random position along the Y axis as calculated above

monster.position = ccp(winSize.width + monster.contentSize.width/2, actualY);

[self addChild:monster];


// Determine speed of the monster

int minDuration = 2.0;

int maxDuration = 4.0;

int rangeDuration = maxDuration – minDuration;

int actualDuration = (arc4random() % rangeDuration) + minDuration;


// Create the actions

CCMoveTo * actionMove = [CCMoveTo actionWithDuration:actualDuration

position:ccp(-monster.contentSize.width/2, actualY)];

CCCallBlockN * actionMoveDone = [CCCallBlockN actionWithBlock:^(CCNode *node) {

[node removeFromParentAndCleanup:YES];


[monster runAction:[CCSequence actions:actionMove, actionMoveDone, nil]];



Step 5- Setting the background and logo

With Cocos2D came the concept of ‘scenes’. Each scene within the game can be effectively used for incorporating levels, menus, credits and a variety of other assets that collaboratively work as the backbone of the iPhone game. Within each scene, you can choose to include several Photoshop designs that can have separate properties including animations, background color, a shadow and even menus.

Step 6-Giving the finishing touches

Now that you’re pretty much close to having a workable game, it’s time to add some sound effects and music to your game. For this, you can add the following import to the top of your HelloWorldLayer.m file:

#import “SimpleAudioEngine.h

Also, in the init method, add the code for the background music as shown below:

[[SimpleAudioEngine sharedEngine] playBackgroundMusic:@“background-music-aac.caf”];

Lastly, for the sound effects, add the below code snippet in your ccTouchesEnded method:

[[SimpleAudioEngine sharedEngine] playEffect:@“pew-pew-lei.caf”];

Finally, create a new file using the iOS\cocos2d ve.x\CCNode class template followed by making it a subclass of CCLayerColor and clicking the “Next” button. Now, name this class as GameOverLayer and click on the ‘Create’ button. Replace the GameOverLayer.h file with the following code:


#import “cocos2d.h

@interface GameOverLayer : CCLayerColor


+(CCScene *) sceneWithWon:(BOOL)won;

– (id)initWithWon:(BOOL)won;



Lastly, replace the GameOverLayer.m

#import “GameOverLayer.h

#import “HelloWorldLayer.h


@implementation GameOverLayer


+(CCScene *) sceneWithWon:(BOOL)won {

CCScene *scene = [CCScene node];

GameOverLayer *layer = [[[GameOverLayer alloc] initWithWon:won] autorelease];

[scene addChild: layer];

return scene;



– (id)initWithWon:(BOOL)won {

-­————————————– for more, please refer to Google.

Wrapping Up

There you have it, all the basic steps that need to create an iPhone game using the very cool Cocos iOS framework. I hope the above guide has encouraged you to keep learning more about Cocos2D 2.X and its varied appealing advantages.


Aug 20

How to improve user experience when designing a game

After you have been working on a game for so long it is common to develop “blindness” to certain aspects. A good tip is to get a post it note and write that user experience is not only about how intuitive features in the user interface are, it is about the ENTIRE gaming experience as a whole (including game balancing, the retention and viral mechanics, even the graphics and ensuring that it goes with the theme of the overall game). Here are a few top tips from working in gaming:

1. Let non gamers play it

Ask non-gaming/non-techy friends to have a play of the game and watch them play it. Write down anything that was too difficult or confused them. Try to avoid helping them straight away when they get stuck, but try to include a few cheats for you to input to get your player further in the game depending on how much of your game you want them to test.

2. Get them to explain what they are doing

Ask your test players every so often why they are doing whatever it is that they are doing. The answers may surprise you. “Well I don’t want to enter that dungeon yet so I am just going to chop down bunch of trees first.” or “Completing that level is too much effort (probably a game balancing issue), so I’m just going to explore for a while” or “I do not know what to do so I’m not even going to bother paying attention to it or interacting with it.”

3. Balance the goals

User experience design in video games isn’t just about captivating your players (but it’s a big part of it), it’s also about balancing the goals. The UI is where users invite their friends, spend money, and it’s through the UI that you can get people to come back – the user interface is perhaps one of the most important, if not THE most important way to meet/exceed your product goals. You want to create a enjoyable and fun gaming experience while also retaining players, increasing virality, and monetizing (if that is your thing). This is more ‘Product Management’, but every UX designer should understand some principles of product management (and every product manager should understand some principles of user experience design). Sometimes, to meet product goals, you have to compromise with delighting users. Your players will tell you one thing but do the complete opposite. Example: during testing, we had users complain that they hated how they had to spend 3 energies to chop down one tree. Their feedback to us was to get rid of it. If we got rid of it, it would severely disadvantage our balancing of the game. But guess what? Looking at their behavior, they still did it to advance in the game. You’ll only be able to measure this in an unreleased game if you do a couple of user tests. There are a few ways to do this, here are two:

For bigger teams, get a good group of users (around 50 or so) to test your game while you’re developing it. Be sure to prepare surveys/questionaires to send them. If these are all power users, well, I’d take the results with a grain of salt, but you’ll have a good starting point in that the mechanics and features at least work for them. Try using a service like to test your game in front of completely new people that haven’t been exposed to any of your previous games. 4. Test features on existing games

Use existing games that are maturing as a testing ground. If you’re introducing a new mechanic/feature/balancing, scrap something quick together and release it in an existing game you have that’s maturing in its userbase. This is powerful in that you have real users interacting with the feature or mechanic or the game balance, and you can measure quantitatively rather than qualitatively. That being said, you should also keep confounding factors in mind (theme of the game could be totally different, and therefor it works…etc etc).

5. Check out the Competition

See what the competition is doing – you might find that every so often, much larger games companies have a larger budget to test things against their users, so if it’s working for them, chances are, it’s something that works. You can use that as a starting point.

6. Don’t reinvent the wheel

There is no point reinventing the wheel or get overly creative. If there’s a common convention for a certain feature or mechanic, stick with it. Chances are, it’s something your players are already used to and it’s something they understand, so seeing something completely different can confuse them or throw them off. For example: in social games, players are used to their neighbour/friends hud on the bottom and Quests on the side. This is a fairly common convention, and if you decided to have the quests on the bottom, and friends on the side, it could cause confusion and frustration.

And remember

Making something simple is often harder than creating something complex. Don’t bury anything beyond two clicks – if you do, it’s probably something your users won’t take the time to find, or it’s something that’s not significant. And if it’s not significant, why have it in the first place? It’s just taking up server/bandwidth space.