Mobiletuts+

Build a Monster Smashing Game with Cocos2D: Sound & Game Mechanics

Jorge Costa and Orlando Pereira — Tue, 18 Jun 2013 16:02:07 +0000

This tutorial will teach you how to use the Cocos2D iOS framework in order to create simple yet advanced 2D games aimed at all iOS devices. It’s designed for both novice and advanced users. Along the way, you’ll learn about the Cocos2D core concepts, touch interaction, menus and transitions, actions, particles, and collisions. Read on!

Organization of the Series:

This entry is the third and final tutorial in the series Monster Smashing. Make sure that you’ve completed the previous tutorial before beginning.

In today’s tutorial, we’ll focus on finishing up the game. We’ll add several properties, including particles, labels, sound, and music. We’ll use the properties list for monster creation. We’ll also learn how to correctly pause and resume the Cocos2D data flow process without too much processing power.

1. Lives

The label system in games is normally used for scores, lives, or other related information. In this tutorial we’ll only use player lives. Each life is represented with a heart on the top left side of screen. The heart image is in the resources.

The user will start the game with three lives. To do this, we initialize the heartArray and use the for loop to receive the images for each life. We also set the position of the three lives on the top left of the screen.

The first step is to add two new properties, NSMutableArray *hearthArray and NSInteger lives, to the MonsterRun.h class. With that done we can now add the correct implementation, MonstrRun.m. The following snippet will help us do that.

    lives = 3;
    hearthArray = [[NSMutableArray alloc] init];
    for(NSInteger i = 0; i lives; i++){
    CCSprite *hearth = [CCSprite spriteWithFile:@"hearth.png"];
    [hearthArray insertObject:hearth atIndex:i];
    hearth.position = ccp( ((i+1)*50), winSize.height - 50);
    [self addChild:hearth];
    }

Now if you run the project, you’ll see the the lives at the top of the screen. However, we can’t interact with them yet. The next step is to interact with them and make the player lose some lives.

In the method addMonster:(ccTime)dt in the Block 4 section inside the CCCallBlockN function, we should add the following snippet.

    lives--;
    [self removeChild:[hearthArray lastObject] cleanup:YES];
    [hearthArray removeLastObject];
    if(lives == 0)
        [[CCDirector sharedDirector] replaceScene:[HelloWorldLayer scene]];

Note that you should add it twice, one for each if statement.

The code will be called every time a sprite (monster) leaves the screen. If a monster leaves the screen, a life will be lost and at the same time the array of hearts (heartArray) will be changed, and the last position will be removed. The image on screen will also be removed.

If we reach zero lives, the game will stop and we’re sent back to the initial screen.

2. Particles

Particles are an effect used to achieve, among other things, several effects such as fire, smoke, or waterfalls. In this case, we’ll use them to explode the red monster. Every time a red monster is touched, we activate the particle.

In part two, we left that section incomplete. Now is the time to finish it.

Add the following property CCParticleExplosion *particleExplosion to the MonsterRun.h class. In the -(void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event method, where we have the if([m killMethod] == 2) condition, we’ll add a new piece of code.

    CCCallFuncND *emitter = [CCCallFuncND actionWithTarget:self selector:@selector(startExplosion:data:) data:monster];
    CCSequence *sequencia = [CCSequence actions:emitter, nil];
    if([defaults integerForKey:@"sound"]==1)
        [[SimpleAudioEngine sharedEngine] playEffect:@"SplatEffect.caf"];
    [splashPool runAction:sequencia];
[/sourcecode]
This code will provide the necessary requirements for the particle system. First we use the <code>CCCallFuncND</code> to call a selector <code>startExplosion:data:</code>. Then we create a particle sequence calling the above-mention "<strong>emitter</strong>" object.
The next step is to create the <code>CCParticleExplosion *particleExplosion</code> method. For that you can simply copy and paste the following snippet.
[sourcecode language="objective c"][/sourcecode]
//Positions the explosion emitter and sets it off
- (void)startExplosion:(id)sender data:(CCSprite*)monster {
    particleExplosion = [[CCParticleExplosion alloc] initWithTotalParticles:809];
    particleExplosion.texture = [[CCTextureCache sharedTextureCache] addImage:@"textureRed.png"];
    particleExplosion.life = 0.0f;
    particleExplosion.lifeVar = 0.708f;
    particleExplosion.startSize = 40;
    particleExplosion.startSizeVar = 38;
    particleExplosion.endSize = 14;
    particleExplosion.endSizeVar = 0;
    particleExplosion.angle = 360;
    particleExplosion.angleVar = 360;
    particleExplosion.speed = 243;
    particleExplosion.speedVar = 1;
    CGPoint g = CGPointMake(1.15, 1.58);
    particleExplosion.gravity = g;
    ccColor4F startC =  {0.89f, 0.56f, 0.36f, 1.0f};
    particleExplosion.startColor = startC;
    ccColor4F endC = {1.0f,0.0f,0.0f,1.0f};
    particleExplosion.endColor = endC;
    [self addChild:particleExplosion];
    particleExplosion.position = [monster position];
    [particleExplosion resetSystem];
}

This method will

Allocate for the particleExplosion property.
Define the total particles count (809).
Define the particle texture (CCTextureCache)
Define several properties, such as start and end size, angle, speed, and color.

After the particle is configured, we can put it in the center of the monster. The particle explosion will always move when the monster is moving, and it will always be centered.

You can now build and run the project. An example of the particle explosion can be seen in the next image.

Illustration of the particle system.

3. Sound and Music

Sound effects and background music are assets to all games. In this section, we’ll explain how to add them into this game. We’ll have two types of sounds, a monster click and the background music.

Audio in iOS devices is achieved using the Simple Audio Engine. In order to activate it, import the SimpleAudioEngine.h at the HelloWorldLayer.m and MonsterRun.m classes.

At the HelloWorldLayer.m, we have several steps to do. The first one is to add the CCMenuItem *_soundOn property before the @implementation section.

It should look like this:

#import "HelloWorldLayer.h"
#import "AppDelegate.h"
#import "MonsterRun.h"
#import "SimpleAudioEngine.h"
CCMenuItem *_soundOn;
// HelloWorldLayer implementation
@implementation HelloWorldLayer
...

Now we can move to the -(id) init method. We chose to use the NSUserDefaults class to help us to store the user preferences regarding the sound option. We will first define a number with the 1 value (with sound) and store it using the “sound” key. The next step is to verify the value of the “sound” key, and react accordingly to that value. If the value is 1, the sound system is initialized. Otherwise, it remains paused.

The following snippet shows this implementation.

// Check the sound system
    NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults];
    NSObject * object = [defaults objectForKey:@"sound"];
    if(object == nil){
        NSNumber *soundValue = [[NSNumber alloc ] initWithInt:1];
        [defaults setObject:soundValue forKey:@"sound"];
    }
    int soundDefault = [defaults integerForKey:@"sound"];
    if (soundDefault == 1) {
            [[SimpleAudioEngine sharedEngine] playBackgroundMusic:@"backgroundSound.caf"];
            [[SimpleAudioEngine sharedEngine] setEffectsVolume:0.4f];
        }
        else {
            [[SimpleAudioEngine sharedEngine] pauseBackgroundMusic];
        }

Now you can modify the CCMenuItemToggle *toggleItem.

CCMenuItemToggle *toggleItem;
        if(soundDefault == 1)
            toggleItem = [CCMenuItemToggle itemWithTarget:self selector:@selector(soundButtonTapped:) items:_soundOn, _soundOff, nil];
        else
            toggleItem = [CCMenuItemToggle itemWithTarget:self selector:@selector(soundButtonTapped:) items:_soundOff,_soundOn, nil];

With this change, the menu will change according to the user’s sound preferences. Note that the toggleItem calls a selector soundButtonTapped:, so we’ll need to write that method and create the right logic to verify the toggle button. If the toggle button is selected to _soundOn, we should start the sound and store 1 in the NSUserDefaults preferences. If the toggle button is selected to _soundOff, we should pause the background music and store 0 in the NSUserDefaults preferences.

Use the following snippet to that effect.

- (void)soundButtonTapped:(id)sender {
    CCMenuItemToggle *toggleItem = (CCMenuItemToggle *)sender;
    if (toggleItem.selectedItem == _soundOn) {
        NSLog(@"Sound Enabled");
        NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults];
        [[SimpleAudioEngine sharedEngine] playBackgroundMusic:@"backgroundSound.caf"];
        [defaults setInteger:1 forKey:@"sound"];
        [defaults synchronize];
    } else {
        NSLog(@"Sound Disabled");
        NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults];
        [defaults setInteger:0 forKey:@"sound"];
        [[SimpleAudioEngine sharedEngine] pauseBackgroundMusic];
        [defaults synchronize];
    }
}

Now we must also change the MonsterRun.m class. We must add the NSUserDefaults *defaults; global property. Next, we’ll initialize it and verify the user’s sound preferences. The following snippet will help us achieve that.

- (void)soundButtonTapped:(id)sender {
    defaults = [NSUserDefaults standardUserDefaults];
        int soundDefault = [defaults integerForKey:@"sound"];
        if (soundDefault == 1) {
            [[SimpleAudioEngine sharedEngine] playBackgroundMusic:@"backgroundSound.caf"];
            [[SimpleAudioEngine sharedEngine] setEffectsVolume:0.4f];
        }

With this code we can add background sound and a way for the user to control it using the default system preferences. You can now run the project and play with the sound button in order to test the new sound property.

4. Properties List

Property lists (plist) are a useful resource for storing information regarding the game’s environment and evolution. In our case, we’ll store information regarding the monsters. The plist created (Enemy.plist) can be seen in the next image.

Illustration of the enemy plist.

We will not discuss the best way to create or parse the plist. We’ll focus on this plist and a possible way to parse the data from it.

The first step is to add the plist to the project. Click File -> New -> File and choose from the right side the option resource, and then the property list (on the left). Name it Enemy.plist and add the information from the previous image.

Now we should parse the data and use it to create the monsters with that information. We first create a string with the path to the plist file, and then we create a dictionary that will store the information inside the plist. The final step is to retrieve the monster’s options. For each monster, we’ll add those same properties to them.

    // plist reading
        NSString * plistPath = [[NSBundle mainBundle] pathForResource:@"Enemy" ofType:@"plist"];
        NSMutableDictionary *dictionary = [[NSMutableDictionary alloc] initWithContentsOfFile:plistPath];
        // load monster information from pList
        if ([dictionary objectForKey:@"Monsters" ] != nil ){
            NSMutableArray *array = [dictionary objectForKey:@"Monsters"];
            for(int i = 0; i < [array count]; i++){
                NSMutableDictionary *m = [array objectAtIndex:i];
                Monster *m1 = [[Monster alloc] init];
                [m1 setTag:(i+1)];
                [m1 setMonsterSprite:[[NSString alloc] initWithString:[m objectForKey:@"monsterSprite"]]];
                [m1 setSplashSprite:[[NSString alloc] initWithString:[m objectForKey:@"splashSprite"]]];
                [m1 setMinVelocity:[[m objectForKey:@"minVelocity"] floatValue]];
                [m1 setMaxVelocity:[[m objectForKey:@"maxVelocity"] floatValue]];
                [m1 setMovement:[[m objectForKey:@"movement"] intValue]];
                [m1 setKillMethod:[[m objectForKey:@"killMethod"] intValue]];
                [_monsters addObject:m1];
            }
        }

The new and final -(id) init method should look like this.

-(id) init {
    if( (self=[super init]) ) {
        self.isTouchEnabled = YES;
        CGSize winSize = [CCDirector sharedDirector].winSize;
        CCSprite *dirt = [CCSprite spriteWithFile:@"WoodRetroApple_iPad_HomeScreen.jpg"];
        dirt.position = ccp(winSize.width/2, winSize.height/2);
        [self addChild:dirt z:-2];
        _monsters = [[NSMutableArray alloc] init];
        // plist reading
        NSString * plistPath = [[NSBundle mainBundle] pathForResource:@"Enemy" ofType:@"plist"];
        NSMutableDictionary *dictionary = [[NSMutableDictionary alloc] initWithContentsOfFile:plistPath];
        // load monster information from pList
        if ([dictionary objectForKey:@"Monsters" ] != nil ){
            NSMutableArray *array = [dictionary objectForKey:@"Monsters"];
            for(int i = 0; i < [array count]; i++){
                NSMutableDictionary *m = [array objectAtIndex:i];
                Monster *m1 = [[Monster alloc] init];
                [m1 setTag:(i+1)];
                [m1 setMonsterSprite:[[NSString alloc] initWithString:[m objectForKey:@"monsterSprite"]]];
                [m1 setSplashSprite:[[NSString alloc] initWithString:[m objectForKey:@"splashSprite"]]];
                [m1 setMinVelocity:[[m objectForKey:@"minVelocity"] floatValue]];
                [m1 setMaxVelocity:[[m objectForKey:@"maxVelocity"] floatValue]];
                [m1 setMovement:[[m objectForKey:@"movement"] intValue]];
                [m1 setKillMethod:[[m objectForKey:@"killMethod"] intValue]];
                [_monsters addObject:m1];
            }
        }
        lives = 3;
        hearthArray = [[NSMutableArray alloc] init];
        for(NSInteger i = 0; i lives; i++){
            CCSprite *hearth = [CCSprite spriteWithFile:@"hearth.png"];
            [hearthArray insertObject:hearth atIndex:i];
            hearth.position = ccp( ((i+1)*50), winSize.height - 50);
            [self addChild:hearth];
        }
        CCMenuItem *pauseButton = [CCMenuItemImage itemFromNormalImage:@"pauseButton.png" selectedImage:@"pauseButton.png" target:self selector:@selector(plusMinusButtonTapped:)];
        pauseButton.position = ccp(winSize.width - 50 , winSize.height - 50 );
        pauseMenu = [CCMenu menuWithItems:pauseButton, nil];
        pauseMenu.position = CGPointZero;
        [self addChild:pauseMenu];
        [self schedule:@selector(addMonster:) interval:0.5];
        _monstersOnScreen = [[NSMutableArray alloc] init];
        defaults = [NSUserDefaults standardUserDefaults];
        int soundDefault = [defaults integerForKey:@"sound"];
        if (soundDefault == 1) {
            [[SimpleAudioEngine sharedEngine] playBackgroundMusic:@"backgroundSound.caf"];
            [[SimpleAudioEngine sharedEngine] setEffectsVolume:0.4f];
        }
    }
    return self;
}

Note that the plists should be used over other storage methods, since iOS is optimized to read, write, and process them.

5. Pause and Resume

The pause and resume options are two very important options, since the game will not always be running. The correct pause and resume will save battery life and make your code performance-oriented.

The first step is to add another class called PausedScene.

The .h should look like:

#import <Foundation/Foundation.h>
#import "cocos2d.h"
@interface PausedScene : CCScene {
}
+(CCScene *) scene;
@end

while the implementation will look like:

#import "PausedScene.h"
#import "MonsterRun.h"
#import "HelloWorldLayer.h"
@implementation PausedScene
+(CCScene *) scene {
    CCScene *scene = [CCScene node];
    PausedScene *layer = [PausedScene node];
    [scene addChild: layer];
    return scene;
}
-(id) init {
    if( (self=[super init]) ) {
        CGSize winSize = [CCDirector sharedDirector].winSize;
        CCSprite *background = [CCSprite spriteWithFile:@"WoodRetroApple_iPad_HomeScreen.jpg"];
        background.position = ccp(winSize.width/2, winSize.height/2);
        [self addChild:background z:-2];
        CCSprite *logo = [CCSprite spriteWithFile:@"MonsterSmashing.png"];
        logo.scale = 1.2;
        logo.position =  ccp(winSize.width /2 , 800 );
        [self addChild: logo];
        CCMenuItem *resumeGameButtonImage = [CCMenuItemImage itemFromNormalImage:@"resume.png" selectedImage:@"resume.png" target:self selector:@selector(onStartGamePressed)];
        CCMenuItem *exitGameButtonImage = [CCMenuItemImage itemFromNormalImage:@"exit.png" selectedImage:@"exit.png" target:self selector:@selector(mainMenuPressed)];
        CCMenu *menu = [CCMenu menuWithItems:resumeGameButtonImage,exitGameButtonImage, nil];
        menu.position = ccp(winSize.width * 0.5f, winSize.height * 0.4f);
        [menu alignItemsVerticallyWithPadding:15];
        [self addChild:menu];
    }
    return self;
}
- (void) mainMenuPressed{
    CCScene *menuScene = [HelloWorldLayer scene];
    [[CCDirector sharedDirector] replaceScene:menuScene];
}
- (void)onStartGamePressed {
    [[CCDirector sharedDirector] popScene];
}
- (void) dealloc {
    [super dealloc];
}
@end

At this point, the code should be self-explanatory with the exception of the - (void)onStartGamePressed method. That method is fairly simple, however. It will “pop” away a screen and make the last screen visible.

In MonsterRun.h, add the CCMenu *pauseMenu; property. The MonsterRun.m code is now complete, so we’ll look at the following lines.

    CCMenuItem *pauseButton = [CCMenuItemImage itemFromNormalImage:@"pauseButton.png" selectedImage:@"pauseButton.png" target:self selector:@selector(plusMinusButtonTapped:)];
    pauseButton.position = ccp(winSize.width - 50 , winSize.height - 50 );
    pauseMenu = [CCMenu menuWithItems:pauseButton, nil];
    pauseMenu.position = CGPointZero;

The method codes mean that for a given CCMenuItem, we’ll add an image (available in the resources), a selector, and a position.

The - (void)plusMinusButtonTapped method is called every time the pause menu is touched. If the game is not paused, it will “push” a new scene, the PauseScene, onscreen and pause the game. If the game is paused, it’ll resume the animation and verify if it can start sound-checking the user defaults.

- (void)plusMinusButtonTapped:(id)sender {
    if(![[CCDirector sharedDirector] isPaused]){
        [self pauseSchedulerAndActions];
        CCScene *menuScene = [PausedScene scene];
        [[CCDirector sharedDirector] pushScene:menuScene];
    }
    else{
        [[CCDirector sharedDirector] stopAnimation];
        [[CCDirector sharedDirector] resume];
        [[CCDirector sharedDirector] startAnimation];
        int soundDefault = [defaults integerForKey:@"sound"];
        if (soundDefault == 1)
            [[SimpleAudioEngine sharedEngine] resumeBackgroundMusic];
    }
}

The next image presents the pause menu with two options, resume and exit. Resume will bring the player back to the game board, whilst exit will take the user back to the main menu.

Illustration of the pause menu.

6. Results

The next image presents the final version of the gameplay interface.

Illustration of gameplay.

The next image presents the final version of the main menu.

Illustration of the Main menu.

At this point, you should be able to understand and perform the following tasks:

Add custom labels.
Use, define and add the particle system.
Add custom sound and background music.
NSUserDefaults and SimpleAudioEngine knowledge
Use simple or advanced plists.
Pause and resume Cocos2D mechanisms.
Know how to create a game.

7. Notes

The authors have done additional work, which is summarized below:

Custom background.
Customization of application icon (using Apple guidelines).
Changing the application name that appears on the device or emulator, eliminating the dots in the name if that name is too long.

This concludes the third and final tutorial demonstrating how to create a Monster Smasher game using Cocos2D. By now, you should have enough knowledge to create a simple Cocos2D game using the same game engine. If you have any questions or comments, please feel free to leave them in the comments section here.

Tuts+ Jobs is now free!

Joel Bankhead — Mon, 17 Jun 2013 18:11:23 +0000

Our awesome new job board is now free and full of enticing opportunities!

Tuts+ Jobs is a job board for full time, part time and casual employment opportunities for web and creative professionals. A brand new site to go alongside the Tuts+ Educational Network and the Envato Marketplaces, all run by Envato.

There’s no need to sign up to apply for jobs, and it’s now free to post a job – try it now!

Earn and Learn

Envato is committed to helping people earn and learn online. We provide a wealth of educational material through Tuts+ and Tuts+ Premium, alongside the Envato Marketplaces to help you benefit from the creative skills you learn.

Tuts+ Jobs furthers this vision perfectly. With Tuts+ you can learn the skills you need to become a creative professional, and with Tuts+ Jobs you can find an amazing job that uses those skills. Our goal here is to take the hassle out of finding a job, so we’ve made the process as simple as can be!

Finding a Job

With Tuts+ Jobs we’re committed to making every step of the job-finding process more intuitive, simpler and more efficient. We don’t want to stand between you and a great opportunity.

It’s totally free to sign up and start applying for jobs, and if nothing matches your initial search you can receive notifications when jobs come up that match your criteria. We will have full time, part time and casual listings from all around the world. Check the listing to find out where the job is based, as some jobs may offer remote opportunities.

Posting a Job

Posting a job is now free!

If you have a position that you need to fill, or a great part/full-time opportunity, then Tuts+ Jobs is the best way to find a talented and creative individual to do that job. Each 30-day listing is completely free, regardless of the type of job you’re posting.

Your job listing will be promoted across the entire Tuts+ network. With exposure to our ten million visitors over the course of 30 days, it’s a brilliant way to reach exactly the type of audience you’re looking for.

Sign Up, Explore, and Subscribe

There are lots of great opportunities already on Tuts+ Jobs, and we’ll be posting even more exciting job positions over the next few weeks, so now is the best time to head over to the site and subscribe to a job search that interests you. That way you’ll be the first to know when any new listings show up that match your skill set and requirements.

Check out Tuts+ Jobs

Create a Location-Aware Site with Sencha Touch

Swarnendu De — Mon, 17 Jun 2013 16:22:00 +0000

This tutorial will guide you through the development of a Location-based mobile website using the Google Place search engine and Sencha Touch 2.1 . This is a two part tutorial and in this first part we’ll learn how to create a project with Sencha cmd, create a cool theme using SASS/Compass, and find services close to the user’s location.

1. Google Place Search API

Google provides a set of APIs for searching different services by types and user location. At the present time, Google supports a total of 96 service types. There are 30 more services that can only be retrieved via search. Google has a full list of them.

To access the Places API, the primary goal is to register the application at Google’s API console. Once we authenticate, we’ll get an API key which is required for each API request. Google has a step by step guide.

The Google Places API uses an API key to identify your application. API keys are managed through the Google APIs Console. You’ll need your own API Key before you can begin using the API. To activate the Places API and create your key:

Visit the API Console at https://code.google.com/apis/console and log in with your Google Account.
A default project called API Project is created for you when you first log in to the API Console. You can use the project, or create a new one by clicking the API Project button at the top of the window and selecting Create. Maps API for Business customers must use the API project created for them as part of their Places for Business purchase.
Click the Services link from the left-hand menu.
Click the Status switch next to the Places API entry. The switch slides to On.
Click API access from the left navigation. Your key is listed in the Simple API Access section.

2. Create and Structure the App

I’m assuming that you’ve got a local server and Sencha setup is done. If not, please go through the detail documentation here with all the steps. We generate the Locator app using this command inside our local server.

sencha -sdk /path/to/sdk generate app Locator c:/xampp/htdocs/locator

Once we’re done, we’ll open the app in the browser with the url http://localhost/locator and see a basic tabbed application.

Now we need to structure the app with the MVC components.

Controllers

App.js

Views

Main.js
Categories.js
PlaceList.js

Stores

Categories.js
Places.js

Models

Category
Place

A Sencha application can have multiple controller files. However, for a small application like this, one controller will be okay. We’ll keep all the event’s bindings and related functionality inside this controller.

The views represent the pages of the application.

Main view works like a parent of all the views.
Categories will list all the services Google supports.
PlaceList view will show a list of all the places near the user’s location and based on a particular service.

Since we have two lists, we maintain two models: Category and Place. Similarly, two storage Categories and Places are needed for retrieving and saving related data. We need to add all these component details in app.js so that the Sencha engine can load them up on start.

Ext.Loader.setPath({
  'Ext': 'touch/src',
  'Locator': 'app'
});
Ext.application({
  name: 'Locator',
  requires: [
    'Ext.MessageBox',
    'Locator.util.Util'],
  views: [
    'Main',
    'Categories',
    'PlaceList'],
  controllers: ['App'],
  models: ['Category', 'Place'],
  stores: ['Categories', 'Places'],
  icon: {
    '57': 'resources/icons/Icon.png',
    '72': 'resources/icons/Icon~ipad.png',
    '114': 'resources/icons/Icon@2x.png',
    '144': 'resources/icons/Icon~ipad@2x.png'
  },
  isIconPrecomposed: true,
  startupImage: {
    '320x460': 'resources/startup/320x460.jpg',
    '640x920': 'resources/startup/640x920.png',
    '768x1004': 'resources/startup/768x1004.png',
    '748x1024': 'resources/startup/748x1024.png',
    '1536x2008': 'resources/startup/1536x2008.png',
    '1496x2048': 'resources/startup/1496x2048.png'
  },
  launch: function () {
    // Destroy the #appLoadingIndicator element
    Ext.fly('appLoadingIndicator').destroy();
    // Initialize the main view
    Ext.Viewport.add(Ext.create('Locator.view.Main'));
  },
  onUpdated: function () {
    Ext.Msg.confirm(
      "Application Update",
      "This application has just successfully been updated to the latest version. Reload now?",
    function (buttonId) {
      if (buttonId === 'yes') {
        window.location.reload();
      }
    });
  }
});

3. Common Functions

For every application, we need a set of common functions and properties that will be used throughout the application. We create a Util singleton class for the same thing and put the file under the app/util/ directory. You do not need to understand the functions of this file at present. We’ll keep discussing these functions as we move forward.

Ext.define('Locator.util.Util', {
  singleton: true,
  // Whether the application views will have a animation while changing on=r not
  enablePageAnimations: true,
  // User's current location is saved here
  userLocation: null,
  // Google place api key
  API_KEY: 'AIzaSyBmbmtQnXfq22RJhJfitKao60wDgqrC5gA',
  // All the api urls
  api: (function () {
    //var baseUrl = 'https://maps.googleapis.com/maps/api/place/';
    var baseUrl = 'php/action.php';
    return {
      baseUrl: baseUrl,
      categories: 'resources/data/categories.json',
      nearestPlaces: baseUrl + '',
      nearBySearch: 'nearbysearch',
      photo: 'photo',
      details: 'details'
    }
  })(),
  // Destroy a Sencha view
  destroyCmp: function (child, parent) {
    parent = parent || Ext.Viewport;
    if (child) {
      Ext.defer(function () {
        parent.remove(child);
      }, Locator.util.Util.animDuration);
    }
  },
  // Show general message alert
  showMsg: function (msg, title, cb, scope) {
    if (msg) {
      Ext.Msg.alert(title || 'Error', msg.toString(), cb || function () {}, scope || window);
    }
    return this;
  },
  // Animate the active item
  showActiveItem: function (parentPanel, childPanel, animation) {
    animation = Ext.apply({
      type: 'slide',
      duration: LocatrConfig.amimationDuration
    }, animation || {});
    if (parentPanel &amp; amp; &amp; amp; childPanel) {
      if (this.enablePageAnimations &amp; amp; &amp; amp; animation &amp; amp; &amp; amp; animation.type) {
        parentPanel.animateActiveItem(childPanel, animation);
      } else {
        parentPanel.setActiveItem(childPanel);
      }
    }
    return this;
  },
  // Show a loading box on a
  showLoading: function (panel, doShow, message) {
    panel = panel || Ext.Viewport;
    if (panel) {
      if (doShow) {
        panel.setMasked({
          xtype: 'loadmask',
          message: message || 'Loading...'
        });
      } else {
        panel.setMasked(false);
      }
    }
    return this;
  },
  // Capitalize first character of each word of a string
  toTitleCase: function (str) {
    if (!str) {
      return '';
    }
    return str.replace(/\w\S*/g, function (txt) {
      return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    });
  }
});

4. Categories List

We set up the Main view, which is the wrapper of all the views. We use Navigation View for the same thing, which is pretty useful for simple Card layout and back button management. At launch, it only has the categories list as its child.

/**
 * Main view - holder of all the views.
 * Card layout by default in order to support multiple views as items
 */
Ext.define('Locator.view.Main', {
  extend: 'Ext.NavigationView',
  xtype: 'main',
  config: {
    cls: 'default-bg',
    items: [{
      xtype: 'categories'
    }]
  }
});

Now application setup is done. We have the Google Places API key and we’re ready to create a list of all the types and show it in the home page. There’s a problem, though. Google doesn’t provide an API for retrieving all these types. We have to manually create a data file listing all the types. I’ve created a json file named categories.json listing all the available types, and put it inside the resources/data directory.

{categories:[{type:"accounting"},{type:"airport"},{type:"amusement_park"},{type:"aquarium"},{type:"art_gallery"},{type:"atm"},{type:"bakery"},{type:"bank"},{type:"bar"},{type:"beauty_salon"},{type:"bicycle_store"},{type:"book_store"},{type:"bowling_alley"},{type:"bus_station"},{type:"cafe"},{type:"campground"},{type:"car_dealer"},{type:"car_rental"},{type:"car_repair"},{type:"car_wash"},{type:"casino"},{type:"cemetery"},{type:"church"},{type:"city_hall"},{type:"clothing_store"},{type:"convenience_store"},{type:"courthouse"},{type:"dentist"},{type:"department_store"},{type:"doctor"},{type:"electrician"},{type:"electronics_store"},{type:"embassy"},{type:"establishment"},{type:"finance"},{type:"fire_station"},{type:"florist"},{type:"food"},{type:"funeral_home"},{type:"furniture_store"},{type:"gas_station"},{type:"general_contractor"},{type:"grocery_or_supermarket"},{type:"gym"},{type:"hair_care"},{type:"hardware_store"},{type:"health"},{type:"hindu_temple"},{type:"home_goods_store"},{type:"hospital"},{type:"insurance_agency"},{type:"jewelry_store"},{type:"laundry"},{type:"lawyer"},{type:"library"},{type:"liquor_store"},{type:"local_government_office"},{type:"locksmith"},{type:"lodging"},{type:"meal_delivery"},{type:"meal_takeaway"},{type:"mosque"},{type:"movie_rental"},{type:"movie_theater"},{type:"moving_company"},{type:"museum"},{type:"night_club"},{type:"painter"},{type:"park"},{type:"parking"},{type:"pet_store"},{type:"pharmacy"},{type:"physiotherapist"},{type:"place_of_worship"},{type:"plumber"},{type:"police"},{type:"post_office"},{type:"real_estate_agency"},{type:"restaurant"},{type:"roofing_contractor"},{type:"rv_park"},{type:"school"},{type:"shoe_store"},{type:"shopping_mall"},{type:"spa"},{type:"stadium"},{type:"storage"},{type:"store"},{type:"subway_station"},{type:"synagogue"},{type:"taxi_stand"},{type:"train_station"},{type:"travel_agency"},{type:"university"},{type:"veterinary_care"},{type:"zoo"}]}

Category Model: Model/Category.js

Ext.define('Locator.model.Category', {
  extend: 'Ext.data.Model',
  config: {
    fields: [
      "type", {
      name: "name",
      type: "string",
      convert: function (v, record) {
        // Converts to title case and returns
        return Locator.util.Util.toTitleCase(record.get('type').split('_').join(' '));
      }
    }, "size"]
  }
});

The “name” property of this model uses the same “type” value of the category. Since most of the types have an “underscore”, this convert function creates a value omitting the “_” and converting the string into title case. So, “travel_agency” becomes “Travel Agency” and we save it under the name property of this model.

Categories Store: Store/Categories.js

Ext.define('Locator.store.Categories', {
  extend: 'Ext.data.Store',
  config: {
    model: 'Locator.model.Category',
    autoLoad: true,
    sorters: 'name',
    grouper: {
      groupFn: function (record) {
        return record.get('name')[0];
      }
    },
    proxy: {
      type: 'ajax',
      url: Locator.util.Util.api.categories,
      reader: {
        type: 'json',
        rootProperty: 'categories'
      }
    }
  }
});

We auto-load the store because it should be the first request in the app. We use a grouper function for a grouped list, and sort by the first character of each service name.

Categories View: View/Categories.js

Category view is a plain list. We use indexBar and grouped functionality for easy accessing all the types.

Ext.define('Locator.view.Categories', {
  extend: 'Ext.List',
  xtype: 'categories',
  config: {
    cls: 'default-bg category-list',
    itemTpl: '{name}',
    store: 'Categories',
    grouped: true,
    indexBar: true,
    title: Lang.home
  }
});

The list looks like this:

5. Tweaking the Existing Theme

We can add certain sets of pre-existing variables to change the existing Sencha theme and get a new look. The following is the SASS file. If you don’t have SASS setup already done, please follow this blog post for a step-by-step guide.

// Basic color definitions
$base-color: #333;
$base-gradient: 'matte';
$active-color: #36B8FF;
// Toolbar styles
$toolbar-base-color: #444;
// List styles
$list-header-bg-color : #ABE2FF;
@import 'sencha-touch/default/all';
// You may remove any of the following modules that you
// do not use in order to create a smaller css file.
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
@include sencha-carousel;
@include sencha-form;
@include sencha-msgbox;
@include sencha-loading-spinner;
@include sencha-list-pullrefresh;

We change the top toolbar color and list header color, and add the list plugin mix-in.

6. Geolocation and Retrieving API Data

Once we click one of the category items, we’ll want to view all the businesses near the user’s current location in that category. We must follow this set of tasks:

Fetch user’s current location using GeoLocation API
With the latitude and longitude, send a request to Google API to fetch the data
Show the place list page

Geolocation

We can either use the navigator’s geolocation function directly or use Sencha’s Ext.device.Geolocation. We save the latitude and longitude in the Util instance for future use.

Ext.device.Geolocation.getCurrentPosition({
  success: function (position) {
    me.util.userLocation = position.coords.latitude + ',' + position.coords.longitude;
  },
  failure: function () {
    me.util.showMsg(Lang.locationRetrievalError);
  }
});

Data Retrieval

Google Places API doesn’t support JSONP requests yet, so we won’t be able to retrieve the data directly from the client side. We have to use a server proxy to retrieve the data. This problem can be solved using PHP and cURL.

The Config file holds a number of constants. We set the base API url, data output type, and image size details.

define("BASE_API_URL", "https://maps.googleapis.com/maps/api/place/");
define("DATA_OUTPUT_TYPE", "json");
define("IMAGE_MAX_HEIGHT", 500);
define("IMAGE_MAX_WIDTH", 500);

Locator.php

This is a PhP class which holds the functionality for setting up the URL, sending cURL requests, and retrieving data.

class Locatr {
  /**
   * Sets up the url according to passed parameters
   * @return String A complete url with all the query strings
   */
  private static function getFinalUrl() {
    return html_entity_decode(BASE_API_URL.$_REQUEST["action"].
    "/".DATA_OUTPUT_TYPE.
    "?".$_SERVER['QUERY_STRING']);
  }
  /**
   * A generic function to send all the cURL requests
   * @return String Response for that cURL request
   */
  private static function sendCurlRequest() {
    // Get cURL resource
    $curl = curl_init();
    // Set some options - we are passing in a useragent too here
    curl_setopt_array($curl, array(
    CURLOPT_RETURNTRANSFER = &gt; 1,
    CURLOPT_URL = &gt; self::getFinalUrl(),
    CURLOPT_SSL_VERIFYPEER = &gt; false,
    CURLOPT_USERAGENT = &gt; 'Codular Sample cURL Request'));
    // Send the request &amp; save response to $resp
    $response = curl_exec($curl);
    // Close request to clear up some resources
    curl_close($curl);
    return $response;
  }
  /**
   * Retrieves all the nearby places and one image of each if available
   * @return String Returns all the places in json
   */
  public static function getNearBySearchLocations() {
    try {
      $data = json_decode(self::sendCurlRequest());
      $item = "";
      for ($i = 0; $i &lt; count($data - &gt; results); $i++) {
        $item = $data - &gt; results[$i];
        if (isset($item - &gt; photos)) {
          $imageUrl = BASE_API_URL.
          "photo?photoreference=".$item - &gt; photos[0] - &gt; photo_reference.
          "&amp;sensor=false&amp;maxheight=300&amp;maxwidth=300&amp;key=".$_GET["key"];
          $data - &gt; results[$i] - &gt; photos[0] - &gt; url = $imageUrl;
        }
      }
      return json_encode($data);
    } catch (Exception $e) {
      print "Error at getNearBySearchLocations : ".$e - &gt; getMessage();
    }
  }
}

Here’s the functionality of each method in this class:

getFinalUrl: This sets up the complete URL with the base URL, the response data type, and the query strings sent from the client side. We call this function from the action.php file.
sendCurlRequest: This is a basic cURL GET request for retrieving the data. You can use the file_get_contents() method as well to get the data here.

getNearBySearchLocations: This fetches the data from Google API for the related type within a certain radius. However, there is a trick: Google doesn’t pass the photos of a business with this data. Instead they send references to the images. You need to construct a URL with the image height, width, API key, and photo reference to get that image.

This URL is constructed with the first image reference and passed with the response data for every place. This helps us show at least one image available for every business.

action.php

This file is just used to call the getNearBySearchLocations function of the Locator class. We send the ajax requests from our client side directly to this file.

include_once 'config.php';
include_once 'Locatr.php';
$action = $_REQUEST["action"];
if (!isset($action)) {
  throw new Exception("'action' parameter is not supplied");
}
switch ($action) {
  case "nearbysearch":
    print Locatr::getNearBySearchLocations();
    break;
}

7. Place List

For the Place list, we need a store and a model similar to the categories list.

Place Model: Model/Place

Ext.define('Locator.model.Place', {
  extend: 'Ext.data.Model',
  config: {
    fields: [
      "formatted_address",
      "geometry",
      "icon",
      "id",
      "name",
      "rating",
      "reference",
      "types",
      "vicinity",
      "photos"]
  }
});

Places Store : Store/Places

Ext.define('Locator.store.Places', {
  extend: 'Ext.data.Store',
  config: {
    model: 'Locator.model.Place',
    proxy: {
      type: 'ajax',
      url: Locator.util.Util.api.nearestPlaces,
      reader: {
        type: 'json',
        rootProperty: 'results'
      }
    }
  }
});

Main Controller: Controller/App.js

Until now, we didn’t need a controller for any functionality because the category list was populated automatically by its store. Now we need the controller to handle the events. We’ll list all the required components under the controller refs property.

refs: {
  categoriesList: 'categories',
  main: 'main',
  placeList: 'placelist'
}

The list click event in controls:

control: {
  categoriesList: {
    itemtap: 'loadPlaces'
  }
}

When clicking on a category, we want to show the list of places available under that category. As we discussed earlier, first we’ll fetch the user’s current location and then, with the latitude and longitude, we’ll send an ajax request to the action.php file. The controller with the “loadPlaces” function looks like this:

Ext.define('Locator.controller.App', {
  extend: 'Ext.app.Controller',
  requires: ['Ext.device.Geolocation', 'Ext.Map'],
  util: Locator.util.Util,
  config: {
    refs: {
      categoriesList: 'categories',
      main: 'main',
      placeList: 'placelist'
    },
    control: {
      categoriesList: {
        itemtap: 'loadPlaces'
      }
    }
  },
  /**
   * Retrieve all the places for a particlur category
   */
  loadPlaces: function (list, index, target, record) {
    var me = this,
      loadPlaces = function () {
        // Show the place list page
        me.showPlaceList(record);
        // Load the store with user's location, radius, type and api key
        store.getProxy().setExtraParams({
          location: me.util.userLocation,
          action: me.util.api.nearBySearch,
          radius: me.util.defaultSearchRadius,
          sensor: false,
          key: me.util.API_KEY,
          types: record.get('type')
        });
        store.load(function (records) {
          me.util.showLoading(me.getPlaceList(), false);
        });
      },
      store = Ext.getStore('Places');
    // If user's location is already not set, fetch it.
    // Else load the places for the saved user's location
    if (!me.util.userLocation) {
      Ext.device.Geolocation.getCurrentPosition({
        success: function (position) {
          me.util.userLocation = position.coords.latitude + ',' + position.coords.longitude;
          loadPlaces();
        },
        failure: function () {
          me.util.showMsg(Lang.locationRetrievalError);
        }
      });
    } else {
      // Clean the store if there is any previous data
      store.removeAll();
      loadPlaces();
    }
  },
  /**
   * Show place list
   */
  showPlaceList: function (record) {
    this.getMain().push({
      xtype: 'placelist',
      title: record.get('name')
    });
  }
});

Place List View: View/PlaceList

The PlaceList view is also a plain list. We use XTemplate here in order to use some filtering functions. The getImage function receives the image of the business. If the image is not available, it returns the icon for that business.

Ext.define('Locator.view.PlaceList', {
  extend: 'Ext.List',
  xtype: 'placelist',
  config: {
    cls: 'default-bg placelist',
    store: 'Places',
    emptyText: Lang.placeList.emptyText,
    itemTpl: Ext.create('Ext.XTemplate',
      '{[this.getImage(values)]}',
      '&lt;div class="item" data-placelistitem-id="{id}"&gt;',
      '&lt;div class="name"&gt;{name}&lt;/div&gt;',
      '&lt;div class="vicinity"&gt;{vicinity}&lt;/div&gt;',
      '{rating:this.getRating}',
      '&lt;/div&gt;', {
      // Returns the business image if available. Else shows the icon available for that business
      getImage: function (data) {
        if (data.photos &amp;&amp; data.photos.length &gt; 0) {
          return '&lt;div class="photo"&gt;&lt;img src="' + data.photos[0].url + '" /&gt;&lt;/div&gt;';
        }
        return '&lt;div class="icon-wrapper"&gt;&lt;div class="icon" style="-webkit-mask-image:url(' + data.icon + ');" &gt;&lt;/div&gt;&lt;/div&gt;';
      },
      // Shows a star based rating. The functional details is given in the Util class
      getRating: function (rating) {
        return Locator.util.Util.getRating(rating);
      }
    })
  }
});

We get a rating from zero to five for businesses. Instead of showing the rating number, we can write a simple function to show the ratings as stars. We add the getRating function to the util file, which can be used inside this PlaceList template functions:

There are three images: no-star, half-star and full-star. The CSS is given below:

getRating: function (rating, max, hideRatingValue) {
  if (rating !== undefined) {
    var str = '&lt;div class="ratings"&gt;';
    rating = parseFloat(rating);
    max = max || 5;
    // We divide the rating into a part upto maximum value
    for (var i = 1; i &lt; = max; i++) {
      // For each 1 rating, add a full star
      if (i &lt; = rating) {
        str += '&lt;div class="star full-star"&gt;&lt;/div&gt;';
      }
      if (i &gt; rating) {
        // If the part rating is a decimal between 0 &amp; 1, add half star
        if (rating % 1 !== 0 &amp;&amp;; (i - rating) &lt; 1) {
          str += '&lt;div class="star half-star"&gt;&lt;/div&gt;';
        }
        // For all part rating value 0, add no star
        else {
          str += '&lt;div class="star no-star"&gt;&lt;/div&gt;';
        }
      }
    }
    if (!hideRatingValue) {
      str += '&lt;div class="value"&gt;' + rating + '&lt;/div&gt;';
    }
    str += '&lt;/div&gt;';
    return str;
  }
  return Lang.noRating;
}

Rating CSS:

.ratings{
    overflow: auto;
}
.ratings div.star{
    float: left;
    height: 14px;
    width: 14px;
    background-size: 12px !important;
    background-position: 50%;
}
.ratings .full-star{
    background: url(../images/full_star.png) no-repeat;
}
.ratings .half-star{
    background: url(../images/half_star.png) no-repeat;
}
.ratings .no-star{
    background: url(../images/no_star.png) no-repeat;
}
.ratings .value{
    float: left;
    font-size: 13px;
    font-weight: bold;
    margin-left: 5px;
}

Here is the final PlaceList view.

CSS for the PlaceList Page:

/****************************** Place List ******************************/ .placelist.x - list - emptytext {
  font - size: 14px;
  color: #fff;
  padding: 20px;
}
.x - list.placelist.x - list - item.x - dock - horizontal {
  border: 0!important;
}
.x - list.placelist.x - list - item.item {
  /*				background: rgba(255, 255, 255, 0.8);
                                    font-size: 14px;
                                    padding: 8px;*/
  /*				background: rgba(255, 255, 255, 0.8);*/
  background: -webkit - gradient(linear, left top, left bottom, color - stop(0 % , #ffffff), color - stop(47 % , #f6f6f6), color - stop(100 % , #ededed)); /* Chrome,Safari4+ */
  background: -webkit - linear - gradient(top, #ffffff 0 % , #f6f6f6 47 % , #ededed 100 % ); /* Chrome10+,Safari5.1+ */
  font - size: 14px;
  border - radius: 5px;
  padding: 8px; - webkit - box - shadow: 0 0 10px 2px rgba(0, 0, 0, 0.6);
  padding - right: 82px;
}
.x - list.placelist.x - list - item.item.name {
  font - weight: bold;
  margin: 3px 0 8px 0;
}
.x - list.placelist.x - list - item.item.vicinity {
  font - size: 12px;
  color: #222;
    margin-bottom: 10px;
}
.x-list.placelist .x-list-item .item .rating{
}
.x-list.placelist .x-list-item .photo,
.x-list.placelist .x-list-item .icon-wrapper{
    position: absolute;
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    right: 25px;
    top: 6px;
}
.x-list.placelist .x-list-item .photo img{
    max-width: 75px;
    max-height: 63px;
    border: 2px solid white;
    -webkit-box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.5);
    background: black;
}
.x-list.placelist .x-list-item .icon-wrapper{
    background: # 960000;
  border: 2px solid white; - webkit - box - shadow: 0 0 5px 0px rgba(0, 0, 0, 0.5);
}
.x - list.placelist.x - list - item.icon {
  width: 50px;
  height: 50px;
  background: white; - webkit - mask - image: url(http: //maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png);
  -
  webkit - mask - size: 35px; - webkit - mask - repeat: no - repeat; - webkit - mask - position: 50 % ;
  }
  /****************************** Place List ENDS ******************************/
</code>
<p>We can add a pull-to-refresh plugin to this place list. Just add the code below in the <strong>PlaceList</strong> array config.</p>
<code>
plugins: [{
  xclass: 'Ext.plugin.PullRefresh',
  pullRefreshText: Lang.placeList.pullToRefresh
}]</pre>
And because we are using a dark background, we need to change the pull-to-refresh css a bit. So, add following css in locator.css file:
<pre lang="css">/* Pull to refresh plugin */
.x-list-pullrefresh {
  color: #fff;
}
.x-list-pullrefresh-arrow {
  -webkit - mask: center center url(data: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAACgAAAA8CAYAAAAUufjgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAjFJREFUeNrsmU8oREEYwOexdtNuKBfFwdVhCyfuysnFiXISS + 1BLopyUpKLXETkRLaUi1LK3Q2lpPbiQLnIn03a / Hm + z86Ttv0zM++bfbOar36Hbad5v535Zp7v47iuy0wOpyoEHccRHV9L9NxPkUE / bhKCOKiOSPAdn69DsJ5I8E2HYA0QJRJ8Bb50CDYRCT7pEMQD0kwk + CByUFQEW4gE73UIhoA2IsFb4ENEMCQ5MdU1IxwygpT3oKNLMGyyYFVscdhusc8tDpu + xRG7xf95BW0O2kNiV1AgIvaQ2BzUJNgJNJYZGyUU7OG1cal4Bi68oqkDPszy2teEwJp5Cdyu / lZ1g8CwIYJ7wEF + 2YmrNw90Byx3BizgKhaqizEP1wg7CLLxCEzy / CtauMeBlQDyEfNuGrgU6SyM8F9SyVgHdmRaH6tAb4XkToEp2d4M5mOK0TWMigU2koa8vJMRZPxEb2ss2LEVPMpPLlMRxBgDZjQJLgNbxb6Uab9tAn3EcifAeKkBMoLY + j0GWonk7oB + lmsFkwhidAGHBPmIeTcAnJcbKCuIMQEs + hScAzZEBqoIYuzyFVCJI36lMJ2CDfxibZeUu + EX / 4uMIFP8ZyLejxkgK0hG5a8kP4IYSZbr1IuQVHmAX0HGX4VuGfZVJ6cQxPd1uoRcWqDW0SroFVzZAnJZ / h0LWhAjUUAw4XdSSsH8fExRTEgtGAOuOTETBb16Jk412e + bxOSwglYw6PgWYABvLk8P7zGJFwAAAABJRU5ErkJggg == ) no - repeat;
  background: #fff;
}

Here it goes:

Conclusion

This is the first part of the tutorial. We created a list of services provided by the Google Places API and then for a particular service, and we showed a list of all the nearby places. In the next and final part of this tutorial, we’ll cover the following functionality:

Showing all the places for a category in Google Maps
Showing the details of each place. This will include showing an individual map for a certain place, creating a mosaic Sencha-based photo gallery, a full screen image carousel, and a list of reviews.

Sencha is at present one of the strongest HTML5-based mobile libraries. Once you set it up, you’ll be able to write great, smooth mobile applications. These applications can either be used as mobile websites or can be wrapped in Phonegap to create iOS and Android hybrid apps.

Android SDK: Create a Book Scanning App

Sue Smith — Fri, 14 Jun 2013 18:20:05 +0000

With the ZXing library, you can create Android applications with barcode scanning functionality. In Android SDK: Create a Barcode Reader, we implemented basic barcode reading with the library in a simple app. In this tutorial series, we will build on what we learned to create an app that will scan books and retrieve related information about them from Google Books API.

Here is a preview of the app we are working toward:

This series on Creating a Book Scanner App will be in three parts:

Google Books API and ZXing Setup
User Interface Creation and Book Search (Pending Publication)
Retrieving and Displaying Book Information (Pending Publication)

In this first part of the series, we will get the app set up for scanning – you will be able to use most of the code from the previous tutorial, with any changes necessary outlined below. We will also get setup for accessing Google Books API. In the second part we will create the rest of the user interface and carry out a book search via Google Books API. In the final part we will retrieve the results of the book search and present them within the interface.

When the app runs, the user will be able to scan books on clicking a button. When the app receives the scan result, it will check that the format is EAN. If it is, the app will build a search query for Google Books which it will attempt to execute. When the app receives the JSON book search results, it will pick particular details out and display them within the interface. We will use two inner AsyncTask classes, one for retrieving the book search results and one for retrieving an image thumbnail of the book, if one is available. We will also create a second class with a Web View in it, in which we will use the Embedded Viewer API to display a preview of the scanned book, again if one is available. We will use an asset file for the Web View, and will provide a link to the Web page for the book on Google Books site. The final app will also include steps to preserve the data displayed on state changes.

1. Create a Scanner Project

Step 1

If you have not already completed the previous tutorial Android SDK: Create a Barcode Reader, you may wish to do so first. If you did complete that tutorial, you can either create a new app for this tutorial or amend the code in the scanner app you already created. We will not be explaining the functionality outlined in that first tutorial again but will run through the code necessary for the book scanning app.

If you are working with the app you created during the previous tutorial you may be able to omit some of the steps below – just read through them and make sure you have the code outlined. We will be using the scan button as before, but do not need the two Text Views we created for that app as we will be using different views to display the book info – you can leave most of the Activity class the way it is, but should replace your XML layout file content with the code indicated below.

If you are creating a new Android Project, let Eclipse create a blank Activity plus layout for you. Create a second package in your project for the ZXing classes as we did in the previous tutorial, giving the package the name “com.google.zxing.integration.android” and copying the two scanning via Intent classes into it. In your main Activity class, add the following import statements (omitting any Eclipse has already added):

import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;
import com.google.zxing.integration.android.IntentIntegrator;
import com.google.zxing.integration.android.IntentResult;

We will be adding code to the main Activity class later in this tutorial and throughout the series, as well as creating a second class and adding to some resource files including the layout. For the moment a new blank Activity class should contain the default content, setting the layout file created when Eclipse created the project:

protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
}

Step 2

Let’s start getting our user interface set up. Open your layout file and replace the content with the following Relative Layout contained within a Scroll View:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:background="#ffffffff" >
	<RelativeLayout
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:padding="10dp" >
	</RelativeLayout>
</ScrollView>

Inside the Relative Layout, add a Button for scanning as we did in the previous tutorial:

<Button android:id="@+id/scan_button"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_centerHorizontal="true"
	android:padding="10dp"
	android:background="#ff333333"
	android:textColor="#ffcccccc"
	android:text="@string/scan"
	/>

Add the specified string to your “res/values/strings” XML file:

<string name="scan">Scan a Book</string>

Step 3

Let’s turn to the Activity class. If you are working with the code you created for the previous scanning tutorial, you can remove all lines referencing the two Text Views we used in the Activity (formatTxt and contentTxt). Otherwise you can leave the Activity as it was when you completed that tutorial.

If you are creating the app from scratch, extend the opening Activity declaration line to implement the click listener interface:

public class MainActivity extends Activity implements OnClickListener

Add the outline of the onClick method to your class:

public void onClick(View v){
//handle clicks
}

At the top of the class declaration, before onCreate, add an instance variable for the scan button:

private Button scanBtn;

Inside onCreate, retrieve a reference to the button after the existing code:

scanBtn = (Button)findViewById(R.id.scan_button);
scanBtn.setOnClickListener(this);

Step 4

Let’s initiate scanning when the user presses the button, as we did last time. In the onClick method, check for clicks on the scan button:

if(v.getId()==R.id.scan_button){
	IntentIntegrator scanIntegrator = new IntentIntegrator(this);
	scanIntegrator.initiateScan();
}

As before, we are scanning via Intent, which will prompt the user to download the ZXing barcode scanner if they do not already have it installed. The scanning result will be returned to onActivityResult, so add it to your class:

public void onActivityResult(int requestCode, int resultCode, Intent intent) {
	//retrieve result of scanning - instantiate ZXing object
	IntentResult scanningResult = IntentIntegrator.parseActivityResult(requestCode, resultCode, intent);
	//check we have a valid result
	if (scanningResult != null) {
		//get content from Intent Result
		String scanContent = scanningResult.getContents();
		//get format name of data scanned
		String scanFormat = scanningResult.getFormatName();
	}
	else{
		//invalid scan data or scan canceled
		Toast toast = Toast.makeText(getApplicationContext(),
				"No book scan data received!", Toast.LENGTH_SHORT);
		toast.show();
	}
}

This is virtually identical to the code we used in the last tutorial except for the reference to the two Text Views which we have removed. We will output information about scanned books in user interface items we create later in the series. For the moment you can add the following line to your onActivityResult method, inside the if block, outputting the scan content and format to the log if you wish to run the app in the meantime:

Log.v("SCAN", "content: "+scanContent+" - format: "+scanFormat);

2. Setup Google Books API Access

Step 1

We are going to use Google Books API to retrieve information about books scanned by the user. Sign into your Google account and browse to the APIs Console. Select “Services” and scroll to the Books API listing. Click to turn Books API on for your account, accepting the terms if prompted.

You will need your API key to access the Books API in the app. In your Google APIs Console, select “API Access”. If you already have a key it should be listed under “Key for browser apps”. If not you can create one by selecting “Create new Browser key” and following the instructions. Copy your key for later reference – we will use it in the next tutorial.

Step 2

To use the Google Books API service, we will need Internet access, so finally add the permission to your app Manifest:

<uses-permission android:name="android.permission.INTERNET" >
</uses-permission>

Conclusion

In this first part of the series we have set the app up to use scanning functionality via ZXing. We have also retrieved an API key for accessing Google Books data. In the next part we will build a book search query and execute it. Over the second and third parts of the series we will fetch and retrieve information about scanned books. Check the source code download to ensure you have everything in the right place before you complete the next part.

Build a Monster Smashing Game with Cocos2D: Movement & Animations

Jorge Costa and Orlando Pereira — Thu, 13 Jun 2013 21:52:01 +0000

This tutorial is the second entry in the three-part Monster Smashing series. Make sure you’ve completed the previous section before beginning.

Organization of the Series:

In today’s tutorial we’ll program the game board for Monster Smashing. This part focuses on several things, including the MonsterRun class, movements, animations, touches, and so on. We’ll explain everything in the tutorial below.

1. Monsters

Monsters are the main objects of the game. Each monster has a few unique attributes like sprites, movement, velocity, and kill action. To represent an object we can use a specific class, so we’ve created a Monster class to represent a monster.

Usually, in Objective-C, we create a new NSObject subclass. In this case, we need to use the CCNode class, which is a class that includes the Foundation.h and the cocos2d.h headers. To create a new class in Xcode, choose File -> New -> New File…. In the left-hand table of the panel that appears, select Cocos2D from the iOS section. Select CCNode class from the upper panel and hit next. We’ll name the class “Monster”.

Illustration of the Template Chooser (Xcode).

Now we need to declare the instance variables. In Monster.h, add five instance variables:

NSString *monsterSprite
NSString *splashSprite
int movement
float minVelocity
float maxVelocity
int killMethod

Now, as with every oriented object language, we need to implement the setters and getters. In objective-C, properties are a convenient alternative to writing out accessors for instance variables. It saves a lot of typing and it makes your class files easier to read. Add the above-mentioned properties on the .h file.

@property(nonatomic,readwrite,retain) NSString *monsterSprite;
@property(nonatomic,readwrite,retain) NSString *splashSprite;
@property(nonatomic, readwrite) int movement;
@property(nonatomic, readwrite) float minVelocity;
@property(nonatomic, readwrite) float maxVelocity;
@property(nonatomic, readwrite) int killMethod;

2. Initializing the Gameboard

Before continuing, you’ll need to initialize several things. we can add a background to our game just like we did in the first section of the tutorial. We can use the same one in the menu scene. If you don’t remember how to do that, you can use the following code on the -(id) init method (MonsterRun.m).

self.isTouchEnabled = YES;
// Add background
        winSize = [CCDirector sharedDirector].winSize;
        CCSprite *background = [CCSprite spriteWithFile:@"WoodRetroApple_iPad_HomeScreen.jpg"];
        background.position = ccp(winSize.width/2, winSize.height/2);
        [self addChild:background z:-2];

Now we need to initialize some “monsters”. Before you start adding monsters, we need to create a NSMutableArray in order to store them. Once again, the images for the monster sprites are available in the resources folder.

We’d also like to thank Rodrigo Bellão for providing us with the images for the monsters.

In MonsterRun.m add two NSMutableArray objects: _monsters and _monstersOnScreen. Then, in the init method, we must initialize those arrays in order to use them. The following snippet can help us achieve that.

        //initializing monsters
        _monsters = [[NSMutableArray alloc] init];
        _monstersOnScreen = [[NSMutableArray alloc] init];
        Monster *m1 = [[Monster alloc] init];
        [m1 setTag:1];
        [m1 setMonsterSprite:[[NSString alloc] initWithString:@"monsterGreen.png"]];
        [m1 setSplashSprite:[[NSString alloc] initWithString:@"splashMonsterGreen.png"]];
        [m1 setMinVelocity:2.0];
        [m1 setMaxVelocity:8.0];
        [m1 setMovement:1];
        [m1 setKillMethod:1];
        [_monsters addObject:m1];
        Monster *m2 = [[Monster alloc] init];
        [m2 setTag:2];
        [m2 setMonsterSprite:[[NSString alloc] initWithString:@"monsterBlue.png"]];
        [m2 setSplashSprite:[[NSString alloc] initWithString:@"splashMonsterBlue.png"]];
        [m2 setMinVelocity:2.0];
        [m2 setMaxVelocity:8.0];
        [m2 setKillMethod:2];
        [m2 setMovement:1];
        [_monsters addObject:m2];
        Monster *m3 = [[Monster alloc] init];
        [m3 setTag:3];
        [m3 setMonsterSprite:[[NSString alloc] initWithString:@"monsterRed.png"]];
        [m3 setSplashSprite:[[NSString alloc] initWithString:@"splashMonsterRed.png"]];
        [m3 setMinVelocity:3.0];
        [m3 setMaxVelocity:6.0];
        [m3 setKillMethod:1];
        [m3 setMovement:2];
        [_monsters addObject:m3];

These arrays should be used to store all the monsters for a given level.

3. Adding Monsters to the Screen

Now that we have some monsters on memory, the next step is to put them on screen. To do that, we just need a few lines.

First we need to create a scheduler to invoke a method to a specific action which, in this case, is the monster location and movement. Right next to the monster’s allocation, we can create the scheduler as the next line presents.

[self schedule:@selector(addMonster:) interval:1.0];

The selector indicates the method that will be called addMonster. At the moment, we don’t have that method, but it will be created soon. The scheduler can also receive a time interval that represents the time when a specific sprite is updated.

The addMonster method is the one responsible for the monster movement. Since we’ve added three different monsters, we will also create three different movement patterns. The addMonster method is depicted below.

- (void) addMonster:(ccTime)dt {
    //select a random monster from the _monsters Array
    int selectedMonster = arc4random() % [_monsters count];
    //get some monster caracteristics
    Monster *monster = [_monsters objectAtIndex:selectedMonster];
    int m = [monster movement];
    //!IMPORTANT -- Every Sprite in Screen must be an new CCSprite! Each Sprite can only be one time on screen
    CCSprite *spriteMonster = [[CCSprite alloc] initWithFile:[monster monsterSprite]];
    spriteMonster.tag = [monster tag];
    //BLOCK 1 - Determine where to spawn the monster along the Y axis
    CGSize winSize = [CCDirector sharedDirector].winSize;
    int minX = spriteMonster.contentSize.width / 2;
    int maxX = winSize.width - spriteMonster.contentSize.width/2;
    int rangeX = maxX - minX;
    int actualY = (arc4random() % rangeX) + minX;
    //BLOCK 2 - Determine speed of the monster
    int minDuration = [monster minVelocity];
    int maxDuration = [monster maxVelocity];
    int rangeDuration = maxDuration - minDuration;
    int actualDuration = (arc4random() % rangeDuration) + minDuration;
    if(m == 1){ //STRAIGHT MOVIMENT
        //BLOCK 3 - Create the monster slightly off-screen along the right edge,
        // and along a random position along the Y axis as calculated above
        spriteMonster.position = ccp( actualY,winSize.height + spriteMonster.contentSize.height/2);
        [self addChild:spriteMonster];
        //BLOCK 4 - Create the actions
        CCMoveTo * actionMove = [CCMoveTo actionWithDuration:actualDuration position:ccp( actualY,-spriteMonster.contentSize.height/2)];
        CCCallBlockN * actionMoveDone = [CCCallBlockN actionWithBlock:^(CCNode *node) {
            [_monstersOnScreen removeObject:node];
            [node removeFromParentAndCleanup:YES];
        }];
        [spriteMonster runAction:[CCSequence actions:actionMove, actionMoveDone, nil]];
        [_monstersOnScreen addObject:spriteMonster];
    }
    else if(m == 2){ //ZIGZAG-SNAKE MOVIMENT
        /* Create the monster slightly off-screen along the right edge,
         and along a random position along the Y axis as calculated above
         */
        spriteMonster.position = ccp( actualY,winSize.height + spriteMonster.contentSize.height/2);
        [self addChild:spriteMonster];
        CCCallBlockN * actionMoveDone = [CCCallBlockN actionWithBlock:^(CCNode *node) {
            [_monstersOnScreen removeObject:node];
            [node removeFromParentAndCleanup:YES];
        }];
        // ZigZag movement Start
        NSMutableArray *arrayBezier = [[NSMutableArray alloc] init];
        ccBezierConfig bezier;
        id bezierAction1;
        float splitDuration = actualDuration / 6.0;
        for(int i = 0; i< 6; i++){
            if(i % 2 == 0){
                bezier.controlPoint_1 = ccp(actualY+100,winSize.height-(100+(i*200)));
                bezier.controlPoint_2 = ccp(actualY+100,winSize.height-(100+(i*200)));
                bezier.endPosition = ccp(actualY,winSize.height-(200+(i*200)));
                bezierAction1 = [CCBezierTo actionWithDuration:splitDuration bezier:bezier];
            }
            else{
                bezier.controlPoint_1 = ccp(actualY-100,winSize.height-(100+(i*200)));
                bezier.controlPoint_2 = ccp(actualY-100,winSize.height-(100+(i*200)));
                bezier.endPosition = ccp(actualY,winSize.height-(200+(i*200)));
                bezierAction1 = [CCBezierTo actionWithDuration:splitDuration bezier:bezier];
            }
            [arrayBezier addObject:bezierAction1];
        }
        [arrayBezier addObject:actionMoveDone];
        id seq = [CCSequence actionsWithArray:arrayBezier];
        [spriteMonster runAction:seq];
        // ZigZag movement End
        [_monstersOnScreen addObject:spriteMonster];
    }
}

You may have noticed that there are comments within the code. The comments will guide us (both programmers and readers) to implement and learn each instruction. In this tutorial, the monsters are chosen randomly (however, in part three we’ll show how use pList to put the monsters on the screen).

The first line of our code does exactly that. We get the total number of monsters on our array and then we randomly choose which one we will put onscreen next. After the monster is selected, we define some properties such as movement, velocity, range over the XX axis and its tag.

We defined three Blocks that define specific properties.

Block 1 determines where on screen we will span the monsters. Note that the monster will only spawn in a visible area of screen. For that, we get the range of the XX axis and then randomly place the monster.
Block 2 determines the speed of the monster. Note that each monster’s type will have the minimum and maximum speed defined. The speed of the monster is the duration in seconds that the monster will pass through the screen. This duration will be between the minDuration and the maxDuration defined on the monster object on the init method
Block 3 creates the monster slightly off-screen along the right edge and along a random position along the XX axis, calculated above
Block 4 creates the actions for the straight movement. Two actions are created, the movement itself CCMoveTo * actionMove and one that is called when the sprite leaves the screen (CCCallBlockN * actionMoveDone). To create an action with straight movement, we use the CCMoveTo object, which receives the duration of the action and the final position. We also use the CCCallBlockN. This particular object will detect when a monster gets off the screen. Using the CCCallBlockN is advantageous because Cocos2D already has some mechanisms in place to detect if a particular resource leaves the screen.

We have defined two movements: straight and zig-zag. The straight one can be analyzed in Block 4, mentioned above. The zig-zag uses the bezier path to create the zig-zag effect and will be depicted below.

4. The Zig-Zag (Snake) Movement

To make the zig-zag movement we use the CCBezier. This class allow us to create an action that will move the target with a cubic bezier curve to a destination point.

The created curves will always move 100 pixels to the left or right, and at the same time the object will move 200 pixels below. The for loop will create the path of the monster. Since the screen, which is the normal iPad resolution, has 1024 pixels in the vertical position, we need to run the loop six times (200px * 6 = 1200px). The condition inside the for loop will determine if the iteration is odd or pair. When the number is odd, the monster move to the left. If the number is pair, the monster moves to the right.

Now each condition will calculate the controlPoint1 and controlPoint2, which are used to control and guide the curve on screen. The endPosition, as the name suggests, is the final position that each monster will end up in after each curve. We concatenate all these actions into an array and create a sequence from it. Just as we did with the straight movement, we’ll run the action and add the monster to the array.

It’s now time to build and run the project. Your game should look similar to the image below.

Illustration of the game with several monsters.

5. Touch Interaction

A game with monsters that cannot be killed is not a game, right?

It’s time to add some interaction between the screen and the user. We’ll follow the same philosophy we used above, code and explanation.

Cocos2D provides us with several mechanisms for touch interaction. For now, we’ll only focus on one touch. For that, we need to add a specific method called ccTouchesBegan. The method receives an event and will act accordingly to that event. Obviously, the event is a touch event. The snippet is presented below.

-(void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    NSMutableArray *monstersToDelete = [[NSMutableArray alloc] init];
    UITouch * touch = [[touches allObjects] objectAtIndex:0];
    CGPoint touchLocation = [self convertTouchToNodeSpace:touch];
    for (CCSprite *monster in _monstersOnScreen) {
        if (CGRectContainsPoint(monster.boundingBox, touchLocation)) {
            [monstersToDelete addObject:monster];
            //add animation with fade - splash
            Monster *m = [_monsters objectAtIndex:(monster.tag-1)];
            CCSprite *splashPool = [[CCSprite alloc] initWithFile:[m splashSprite]];
            if([m killMethod] == 1){
                splashPool.position = monster.position;
                [self addChild:splashPool];
                CCFadeOut *fade = [CCFadeOut actionWithDuration:3];  //this will make it fade
                CCCallFuncN *remove = [CCCallFuncN actionWithTarget:self selector:@selector(removeSprite:)];
                CCSequence *sequencia = [CCSequence actions: fade, remove, nil];
                [splashPool runAction:sequencia];
                //finish splash
            }
            if([m killMethod] == 2){
                // in Part 3 - Particles section
            }
            break;
        }
    }
     for (CCSprite *monster in monstersToDelete) {
         [monster stopAllActions];
         [_monstersOnScreen removeObject:monster];
         [self removeChild:monster cleanup:YES];

The first line of this method is the allocation of an auxiliary array monstersToDelete that defines what monsters will be deleted at each action.

The next step is to know the touch interaction location. With that location, we’ll loop all the sprites on the screen and test to see if the touch location is inside an invisible box that contains a monster. We’ll use f (CGRectContainsPoint(monster.boundingBox, touchLocation)). If it is true, we’ll add the monsters to the auxiliary array. Plus, we’ll add two splash animations when a monster is killed. The first one is a simple splash, while the second is a particle. We’ll discuss that in part three. To create the splash, we verify the monster type and then we add that monster to a splash pool. CCFadeOut will create a fade effect on the splash image, and the CCCallFuncN will call another method to remove the Monster sprite.

Now we just need one little thing. In the CCCallFuncN *remove, the call method removeSprite needs to be created and the objective is to remove that sprite. Add that method using the following code.

-(void) removeSprite:(id)sender {
    [self removeChild:sender cleanup:YES];
}

Finally, when the loop is over, the touch interaction is tested against all objects in the scene we have in another loop, for (CCSprite *monster in monstersToDelete). It will iterate over monstersToDelete and remove the object.

It’s now time to build and run the project. We should see some monsters popping up onscreen. Now we can start killing them! You will notice that the red monsters don’t have any splash when they die. This will be covered in the next part. The final image in this part is the following.

Illustration of the game with several monsters with splash animation.

6. Conclusion

At this point you should be able to understand and perform the following tasks:

Add sprites to the screen.
Define sprite properties.
Define custom classes.
Initialize the game board.
Define custom movements and actions.
Know how to use touch interaction.

In the next tutorial we’ll learn about sound and game mechanics!

Check Out the New Recommended Resources on Mobiletuts+

Sean Hodge — Tue, 11 Jun 2013 21:10:25 +0000

We’ve added a new page to the site, which will help mobile design and development professionals grab top quality software and tools. It’s filled with our favorite resources that we recommend for mobile app developers. You can jump straight over to our Recommended Resources page here on Mobiletuts+ or read on for further information.

Hand Picked Resources for Mobile App Professionals

Our Tuts+ editorial team has hand-picked these resources, which feature core applications, hosting recommendations, editors, testing, and deployment services. Our goal here is to feature the highest quality, useful resources that we highly recommend and in most cases use ourselves. It’s a quick stop to finding the best of the best when you have an urgent need to fill as a mobile creative professional.

Keep an eye out for more of these site sections as our Resource pages roll out across the Tuts+ network.

Jump over to the Mobiletuts+ Recommended Resources Page

What Mobile App Development Tools Do You Recommend?

This is version 1.0 of this Mobiletuts+ Resources page. We’ll continue to add to it and grow this section of the site. We could use your help with that!

Are there any awesome apps, tools or services that you feel we missed? Bounce into the discussion below and leave a comment about what resource you recommend to fellow mobile development experts.

Designing a Meaningful Social Layer for Mobile Applications

Sven Lenaerts — Mon, 10 Jun 2013 19:48:29 +0000

Applications with social features have become the norm, but, as a designer, it’s important that you question how these social features add value for the user. In this article, we’ll explore how to improve an application by designing a meaningful social layer.

When we talk about social layers, there’s a lot involved. Basically, we’re building an interactive experience where people can create, share, and exchange information within a virtual network. The importance of user-generated content has grown enormously. Even a simple output of a social layer can create value for people, like Facebook’s simple “Like” feature. On the flip side, social layers can have negative effects on our lives. They often create an unwanted (and unconscious) pressure to be successful not just in our work and our lives, but within the social media apps we’re active using.

That being said, it’s important to make sure that the social aspect we design and build is meaningful and fun. Even better, try to ignore the social layer if it isn’t relevant to your application. The assumption that the social aspect is mandatory is wrong. When present, social interaction needs to be thoughtfully utilized.

A Subtle Difference

The social layer is more extensive than social media. Social media is intended to connect people with people, but a social layer is much more extensive. Social media became a social layer because it connected us with brands, experiences, products, feelings, applications, and games. When we try to connect to something or someone, it’s a much larger part of our lives than it was just a few years ago. Social media has evolved into a social layer of life and our digital data online, and we spread it through our actions. It has become increasingly valuable for developers to use this layer in their applications.

Understanding the power of a social layer creates a range of possibilities for empowering your application. Social aspects are a cheap way to promote your application and they can improve the features of your application if they’re relevant to what your application will do.

Qualities of a Good Social Layer

Dribbble Connections by Bruce Spang on Dribbble

Generally, when we’re talking about social layers we’re talking about two important characteristics. They either help the user or help the community.

When we speak of helping the user, there are a lot of obvious solutions. We can offer them ways to express themselves by creating and sharing content. These features are just an example, but there are numerous options. Still, it’s important to understand that you shouldn’t force a social layer in your application if it doesn’t create any value. Users might not want to share content or compare themselves to other users. Try to understand what the social aspect means for your target audience.

Another important part of the social layer is the sense of community it creates. These can be obvious things, like helping each other through content or building ways to interact with each other.

The interaction you create should be simple, fun, and worth the user’s time. Try to analyze your own behavior on social media and see how it influences you. Use that as an example for the features you are planning in your application. Generally, people give value to their actions on social media. This is why it’s important to add social features to your applications in a rewarding way.

Designing The Social Experience

Diversity by Andy Mangold on Dribbble

Start by defining your community and understanding what the added value of that community is.

When you’re dealing with applications, everything starts with the features. Do you believe that a social layer enhances the experience of using your application? What are the advantages and disadvantages?

It’s also necessary to understand how individuals participate in the community. What action or features are connected with the community? How much effort does such an action cost and what are the rewards? Specify what your social layer looks like. What are the important actions and how do they link to each other? Make a scheme for yourself.

Once you’ve figured out how you’d like to add a social layer to your application, think about the technical aspects. How will you handle user data? How will you create your features? How will you integrate every aspect of your social layer into a coherent application? It’s often very difficult to make everything a streamlined experience, but it’s important to keep that streamlined user experience in mind even if it costs features in the end.

Best Practices

This article has been purely theoretical thus far, so let’s take a look at some applications and see how they made their social aspects a success.

Foursquare

One of my favorite examples is Foursquare. They’ve made the community the most important contributor in their application while also integrating the user’s personal relationships. They also made all the user interactions within the social layer simple, fun, and accessible.

In addition, FourSquare also did a great job at rewarding the user’s actions and keeping the application competitive between friends by resetting check-in points weekly. Most of all, it offers useful content and just about everyone can contribute to the experience. They understand how a social layer should work and the social aspect of their application has made it a huge success.

Flipboard

Flipboard isn’t as popular as Foursquare, but they know how to make interaction with content fun. By creating simple navigation gestures and combining them with the ability to integrate social media accounts, Flipboard has made social media interaction much more fun. It’s still possible to like, comment, or share and it’s much less cluttered than most social media sites like Facebook.

The social layer they’ve created is hidden, and it’s so well done that it doesn’t even feel like a real social layer. Flipboard is like reading a newspaper that you can interact with. A hidden social layer can work just as well as an obvious one.

What are some of your personal favorite applications which handle the social aspects of applications very well?

Some Final Tips and Tricks

Start on paper. Brainstorm, use feedback, and weigh out your pros and cons.
Don’t assume that every user wants to interact. Never force it.
If you plan to work with accounts, make registering and logging in very simple and quick.
Add a low-level form of interacting (a like button or checking in)
Add a high-level form of interacting (commenting or leaving tips)
Use a social layer to indirectly promote your application. Sharing is a great example of this.
As a developer, make use of the social layer yourself to interact with your community.
Do some usability tests. It’s a great idea to use a beta version to find out how streamlined the interaction is.
Finally, if a social layer doesn’t create any added value for your application, just leave it out.

Conclusion

Social layers have grown and gained importance. As always, carefully weigh the pros and cons when deciding to use one within your application. Make interaction fun and rewarding, and users will gladly participate in the community you build. Good luck!

Android SDK: Create an Interactive Screen Saver with Daydream

Sue Smith — Fri, 07 Jun 2013 16:26:01 +0000

Daydream interactive screen savers are a new feature in Android 4.2 (API Level 17). With Daydream, you can create a screen saver with animation, interaction, and just about anything else you would include in an Android Activity. Daydream screen savers are displayed while the user device is charging. Users with devices running Jelly Bean 4.2 can select and configure a Daydream screen saver in their display settings. In this tutorial we’ll go through the required steps to create a Daydream screen saver for Android.

The sample Daydream we’ll create in this tutorial will display a simple animation featuring the Android robot image used as default launcher icon. The user will be able to stop and start the animation by tapping the robots. The Daydream will display a grid with multiple instances of the rotating robot and a button the user can use to dismiss the Daydream, which will be placed randomly within the grid.

In your own projects, you can choose interactive screen saver elements that will reuse the views you have in existing apps, or web views that provide links to your projects. The code in this tutorial is simply intended to familiarize you with the process of creating a functioning interactive Daydream, but these potential applications can enhance user engagement with any existing projects you may have.

Tip: Daydream is only available on devices running version 4.2 of Android, which is API Level 17. If you don’t have a device running API 17, you’ll only be able to test your Daydream apps on the emulator. As long as your Android development environment has version 17 installed, you should be able to create an AVD (Android Virtual Device) on which the Daydream will run. During development, you can create a test Activity in which you place the same content as your Daydream apps. The Eclipse and Android development resources are particularly useful for Activities.

1. Create a Project

Step 1

Create a new Android Project in Eclipse. The app will have one class in it, which will be a Service. When you go through the process of creating your new Android project in Eclipse, select API Level 17 as both target and minimum SDK for your project. There’s no need to let Eclipse create an Activity or layout file. You won’t need one. You can, however, let it create a launcher icon. In the New Android Application “Configure Project” screen, uncheck “Create Activity” but leave “Create Custom Launcher Icon” checked. Choose the default Android robot icon; we are going to use it within the Daydream.

Step 2

Open your project Manifest file to configure the app as a Daydream. Include the following code within the Manifest application element.

<service
	android:name=".RobotDaydream"
	android:exported="true"
	android:label="@string/daydream_name">
	<intent-filter>
		<action android:name="android.service.dreams.DreamService" />
		<category android:name="android.intent.category.DEFAULT" />
	</intent-filter>
</service>

This allows your app to be listed in the Daydream options within the user’s display settings. You can change the name of the service class “RobotDaydream” if you like, as long as you give your service class the same name when we create it. Add the specified label string to your application’s “res/values/strings” file(s).

<string name="daydream_name">Spinning Androids</string>

This name will appear in the device display settings when selecting a Daydream.

Tip: The Manifest code above is complete for a functioning Daydream. However, you can opt to add a metadata element, linking to a resource where you can specify a settings Activity class for your app.

2. Define an Animation

Step 1

Before we get started on the Daydream Service class, we’ll define an animation set resource. The little robot icons we display will rotate back and forth when the Daydream runs, so let’s define this animation first. In your project “res” folder, create a new folder named “animator” and create a new file in it named “android_spin.xml“. Inside the new XML file, define the animation.

<set xmlns:android="http://schemas.android.com/apk/res/android"
	android:interpolator="@android:anim/linear_interpolator"
	android:ordering="together" >
	<objectAnimator
	android:duration="5000"
	android:propertyName="rotation"
	android:repeatCount="infinite"
	android:repeatMode="reverse"
	android:valueTo="360"
	android:valueType="floatType" />
</set>

You can alter the animation properties if you wish. This simply defines an animation that will rotate the target image 360 degrees in one direction over five seconds and back in the opposite direction. It will repeat continuously.

The image views in the grid will rotate back and forth continuously while the Daydream is visible.

3. Create a Daydream Service

Step 1

In your project, create a new class in the main package. If Eclipse did not create a default package when you created the project, add one now by selecting the “src” folder and choosing File > New > Package and entering your package name. Add your new class to the package, naming it “RobotDaydream” or whatever you included in the Manifest service name attribute. Extend the opening line of the class declaration.

public class RobotDaydream extends DreamService implements OnClickListener

You will need the following imports in the class for the remainder of the code in this tutorial.

import java.util.Random;
import android.animation.AnimatorInflater;
import android.animation.AnimatorSet;
import android.graphics.Color;
import android.graphics.Point;
import android.service.dreams.DreamService;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.GridLayout;
import android.widget.ImageView;

Step 2

When you extend the Daydream class, there are a number of methods you can override to control the appearance and behavior of your screen saver. Inside your Service class, add the method outline for when the Daydream starts.

@Override
public void onDreamingStarted() {
//daydream started
}

Now add the method outline for when Daydreaming stops.

@Override
public void onDreamingStopped(){
//daydream stopped
}

Add the method outline for when your Daydream is initially attached. You’ll include setup tasks for the screen saver.

@Override
public void onAttachedToWindow() {
//setup daydream
}

Any tidying up from setup will be placed inside the method for when the Daydream is detached, so add that next.

@Override
public void onDetachedFromWindow() {
//tidy up
}

Lastly, add the method outline for handling clicks. Depending on their functionality, your Daydream apps may not always require all of these methods.

public void onClick(View v){
//handle clicks
}

We will be working with each of these methods.

4. Prepare for Daydreaming

Step 1

At the top of your Daydream Service class, add some instance variables that we’ll use to implement the animation and interaction. First you’ll add a button so that the user can stop the Daydream.

private Button dismissBtn;

If you set your Daydream up to be interactive, which we’ll do here, you’ll need to manually implement a way to stop the Daydream. Otherwise, the default behavior for a Daydream is to stop when the user touches the screen. We won’t be using the default behavior because we want to allow the user to interact with the views in our Daydream. We’ll provide a button that allows the user to dismiss the Daydream instead.

Next, add two arrays.

private ImageView[] robotImgs;
private AnimatorSet[] robotSets;

These will store the robot image views and animator sets for them. We’ll use a constant to set the number of robots to display, using the number of rows and columns we want in the grid.

private final int ROWS_COLS=5;
private final int NUM_ROBOTS=ROWS_COLS*ROWS_COLS;

Finally, we’ll use a random number to determine where the stop button will be placed in the grid.

private int randPosn;

Step 2

The onAttachedToWindow method gives us the opportunity to carry out setup tasks for the Daydream. Call the superclass method inside the method.

super.onAttachedToWindow();

Set the Daydream to be interactive and occupy the full screen, hiding the status bar.

setInteractive(true);
setFullscreen(true);

Step 3

Get a random number to determine where the stop button will be.

Random rand = new Random();
randPosn = rand.nextInt(NUM_ROBOTS);

Create a grid layout for the Daydream, setting the number of rows and columns using the constant.

GridLayout ddLayout = new GridLayout(this);
ddLayout.setColumnCount(ROWS_COLS);
ddLayout.setRowCount(ROWS_COLS);

Initialize the arrays.

robotSets = new AnimatorSet[NUM_ROBOTS];
robotImgs = new ImageView[NUM_ROBOTS];

Determine the width and height for each robot image in the grid.

Point screenSize = new Point();
getWindowManager().getDefaultDisplay().getSize(screenSize);
int robotWidth = screenSize.x/ROWS_COLS;
int robotHeight = screenSize.y/ROWS_COLS;

Step 4

Now we can loop through the arrays, adding the stop button and robots to the grid.

for(int r=0; r<NUM_ROBOTS; r++){
//add to grid
}

Inside the loop, create some layout parameters using the width and height we calculated.

GridLayout.LayoutParams ddP = new GridLayout.LayoutParams();
ddP.width=robotWidth;
ddP.height=robotHeight;

Check to make sure we are at the index allocated for the stop button.

if(r==randPosn){
//stop button
}
else{
//robot image view
}

Inside the if block, create and add the stop button to the layout, setting display properties and listening for clicks.

dismissBtn = new Button(this);
dismissBtn.setText("stop");
dismissBtn.setBackgroundColor(Color.WHITE);
dismissBtn.setTextColor(Color.RED);
dismissBtn.setOnClickListener(this);
dismissBtn.setLayoutParams(ddP);
ddLayout.addView(dismissBtn);

Inside the else block, create an Image View and set the launcher icon as its drawable, adding it to the layout.

robotImgs[r] = new ImageView(this);
robotImgs[r].setImageResource(R.drawable.ic_launcher);
ddLayout.addView(robotImgs[r], ddP);

Inside the else, create and add an animator set to the array, referencing the animation resource we created. You can alter the drawable image to suit one of your own.

robotSets[r] = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.android_spin);

Set the current robot image as target for the animation and listen for clicks on it.

robotSets[r].setTarget(robotImgs[r]);
robotImgs[r].setOnClickListener(this);

After the for loop (but still inside the onAttachedToWindow method), set the content view to the layout we created and populated.

setContentView(ddLayout);

5. Handle Clicks

Step 1

Inside your onClick method, find out whether a robot image view or the stop button was clicked.

if(v instanceof Button && (Button)v==dismissBtn){
//stop button
}
else {
//robot image
}

Step 2

In the if block, finish the Daydream.

this.finish();

You must implement this for any interactive Daydreams you create (in which you call setInteractive(true)). The user will not be able to dismiss the screen saver the default way.

Step 3

Inside the else block, add a loop to iterate through the robot image views.

for(int r=0; r<NUM_ROBOTS; r++){
//check array
}

Inside the loop, make sure that the index is not in the position designated for the stop button. If this is the case, the image view array entry will be empty.

if(r!=randPosn){
//check image view
}

Inside the if block, find out if the current view is the one just clicked.

if((ImageView)v==robotImgs[r]){
//is the current view
}

Inside this if, stop or start the animation depending on whether it’s currently running.

if(robotSets[r].isStarted()) robotSets[r].cancel();
else robotSets[r].start();

This lets the user turn the animations on and off for each robot image view. Now that we’ve responded to the click, break out of the loop.

break;

Clicking the image views will start and stop the animations, clicking the stop button will dismiss the Daydream.

6. Starting and Stopping Daydreaming

Step 1

In your onDreamingStarted method, call the superclass method.

super.onDreamingStarted();

Next, loop through the animations and start them.

for(int r=0; r<NUM_ROBOTS; r++){
	if(r!=randPosn)
		robotSets[r].start();
}

Step 2

In your onDreamingStopped method, stop the animations.

for(int r=0; r<NUM_ROBOTS; r++){
	if(r!=randPosn)
		robotSets[r].cancel();
}

Now call the superclass method.

super.onDreamingStopped();

Step 3

In the onDetachedFromWindow method, we can get rid of anything we set up in onAttachedToWindow. In this case we’ll just stop listening for clicks.

for(int r=0; r<NUM_ROBOTS; r++){
	if(r!=randPosn)
		robotImgs[r].setOnClickListener(null);
}

Finally, call the superclass method.

super.onDetachedFromWindow();

Conclusion

This completes the basic Daydream app! You can test yours on the emulator or on a real device running Jelly Bean 4.2. Browsing to the Settings > Display section of the device menu will let you select the Daydream from the available list. Once it’s selected, you can choose “Start Now” to see it in action. In your own projects, you can implement pretty much the same interactive and informational functions you would in an Activity, so you can use Daydreams to provide engaging access points for your existing apps. However, be aware that if your screen saver is using too much of the available processing resources, the Android system will stop it from running to allow the device to charge properly. Other options to explore in your Daydream apps include setting the screen brightness and providing a settings activity for user configuration.

Create a Weather App with Forecast – User Interface

Bart Jacobs — Mon, 03 Jun 2013 20:12:56 +0000

In the last article of this series, I will show you how to create the user interface of our weather application. Thanks to the work of Chris Carey, a regular contributor of Vector Tuts+, we have a beautiful design that we can work with!

Introduction

For the design of our weather application, I collaborated with Chris Carey, a regular contributor of Vectortuts+. Chris crafted a beautiful design that we can use to create the application’s user interface. After Chris handed me the design as a vector illustration, I sliced the artwork and prepared it for use in our project. You can find the sliced artwork in the source files of this article.

Figure 1: Chris Carey’s Design

Due to the limited customizability of UIKit, we will have to make a few compromises when implementing Chris’ design. The final result, however, will very much look like the design that Chris created for us. Customizing UIKit’s UISwitch class, for example, is very limited and we will therefore use a different approach to implement the temperature setting. Chris used two custom fonts for his design, Maven Pro and Mission Gothic. Even though iOS supports custom fonts, we will only use fonts available on iOS.

1. Notifications

Step 1: Creating String Constants

Whenever the weather view controller receives weather data from the Forecast API, its own view and the right view need to be updated. This means that we need to notify the forecast view controller and send it the weather data. There are several ways to notify the forecast view controller of such an event. Posting a notification using NSNotificationCenter is the simplest solution and provides us with the most flexibility. We can use the same solution for updating the user interface after the user has toggled the temperature setting. By sending a notification, every object that is interested in this event can register itself as an observer. I have updated MTConstants.h/.m to create a string constant for each notification.

extern NSString * const MTRainWeatherDataDidChangeChangeNotification;
extern NSString * const MTRainTemperatureUnitDidChangeNotification;

NSString * const MTRainWeatherDataDidChangeChangeNotification = @"com.mobileTuts.MTRainWeatherDataDidChangeChangeNotification";
NSString * const MTRainTemperatureUnitDidChangeNotification = @"com.mobileTuts.MTRainTemperatureUnitDidChangeNotification";

Step 2: Weather View Controller

After receiving a response from the Forecast API, we need to store it so that we can use it later to update the view. Create two private properties in MTWeatherViewController.m, (1) response (of type NSDictionary) that will hold the response of the Forecast API and (2) forecast (of type NSArray) that will hold a subset of the response, the weather data for the next hours.

#import "MTWeatherViewController.h"
#import "MTForecastClient.h"
@interface MTWeatherViewController () <CLLocationManagerDelegate> {
    BOOL _locationFound;
}
@property (strong, nonatomic) NSDictionary *location;
@property (strong, nonatomic) NSDictionary *response;
@property (strong, nonatomic) NSArray *forecast;
@property (strong, nonatomic) CLLocationManager *locationManager;
@end

To receive notifications, we need to update initWithNibName:bundle: as shown below (MTWeatherViewController.m). In weatherDataDidChangeChange:, we store the response of the Forecast API in response and forecast and we update the view controller’s view. In temperatureUnitDidChange, we only need to update the view to reflect the changed setting.

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Initialize Location Manager
        self.locationManager = [[CLLocationManager alloc] init];
        // Configure Location Manager
        [self.locationManager setDelegate:self];
        [self.locationManager setDesiredAccuracy:kCLLocationAccuracyKilometer];
        // Add Observer
        NSNotificationCenter *nc = [NSNotificationCenter defaultCenter];
        [nc addObserver:self selector:@selector(applicationDidBecomeActive:) name:UIApplicationDidBecomeActiveNotification object:nil];
        [nc addObserver:self selector:@selector(reachabilityStatusDidChange:) name:MTRainReachabilityStatusDidChangeNotification object:nil];
        [nc addObserver:self selector:@selector(weatherDataDidChangeChange:) name:MTRainWeatherDataDidChangeChangeNotification object:nil];
        [nc addObserver:self selector:@selector(temperatureUnitDidChange:) name:MTRainTemperatureUnitDidChangeNotification object:nil];
    }
    return self;
}

- (void)weatherDataDidChangeChange:(NSNotification *)notification {
    // Update Response & Forecast
    [self setResponse:[notification userInfo]];
    [self setForecast:self.response[@"hourly"][@"data"]];
    // Update View
    [self updateView];
}

- (void)temperatureUnitDidChange:(NSNotification *)notification {
    // Update View
    [self updateView];
}

Step 3: Forecast View Controller

The steps are almost identical in the MTForecastViewController class. We update initWithNibName:bundle: as shown below, create two properties (response and forecast), and implement weatherDataDidChangeChange: and temperatureUnitDidChange:. The difference is the weather data stored in forecast. We will implement updateView a bit later in this tutorial, but it is good practice to create a stub implementation to get rid of any compiler warnings.

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Add Observer
        NSNotificationCenter *nc = [NSNotificationCenter defaultCenter];
        [nc addObserver:self selector:@selector(weatherDataDidChangeChange:) name:MTRainWeatherDataDidChangeChangeNotification object:nil];
        [nc addObserver:self selector:@selector(temperatureUnitDidChange:) name:MTRainTemperatureUnitDidChangeNotification object:nil];
    }
    return self;
}

#import "MTForecastViewController.h"
@interface MTForecastViewController ()
@property (strong, nonatomic) NSDictionary *response;
@property (strong, nonatomic) NSArray *forecast;
@end

- (void)weatherDataDidChangeChange:(NSNotification *)notification {
    // Update Response & Forecast
    [self setResponse:[notification userInfo]];
    [self setForecast:self.response[@"daily"][@"data"]];
    // Update View
    [self updateView];
}

- (void)temperatureUnitDidChange:(NSNotification *)notification {
    // Update View
    [self updateView];
}

- (void)updateView {
}

2.User Interface Center View

Step 1: Outlets and Actions

Even though the center view contains a lot of information, it isn’t that difficult to implement. Let’s start by creating a number of outlets and one new action. Update MTWeatherViewController.h as shown below. Revisit Chris’s design to better understand the location and purpose of each user interface element. The difference with Chris’s design is that we will replace the calendar icon in the top right with the refresh button that we created in the previous tutorial. The weather data for the next hours will be presented in a collection view, which implies that the MTWeatherViewController class needs to conform to the UICollectionViewDataSource, UICollectionViewDelegate, and UICollectionViewDelegateFlowLayout protocols.

#import <UIKit/UIKit.h>
#import "MTLocationsViewController.h"
@interface MTWeatherViewController : UIViewController <UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout, MTLocationsViewControllerDelegate>
@property (weak, nonatomic) IBOutlet UIButton *buttonLocation;
@property (weak, nonatomic) IBOutlet UIButton *buttonRefresh;
@property (weak, nonatomic) IBOutlet UILabel *labelDate;
@property (weak, nonatomic) IBOutlet UILabel *labelTemp;
@property (weak, nonatomic) IBOutlet UILabel *labelTime;
@property (weak, nonatomic) IBOutlet UILabel *labelWind;
@property (weak, nonatomic) IBOutlet UILabel *labelRain;
@property (weak, nonatomic) IBOutlet UILabel *labelLocation;
@property (weak, nonatomic) IBOutlet UICollectionView *collectionView;
@end

We also need to add an action for the location button in the top left. Open MTWeatherViewController.m and add a new action named openLeftView:. In openLeftView:, we tell the view controller’s view deck controller to toggle the left view. Remember that it is also possible to swipe from left to right to open the left view.

- (IBAction)openLeftView:(id)sender {
    [self.viewDeckController toggleLeftViewAnimated:YES];
}

Step 2: Creating the User Interface

Open MTWeatherViewController.xib and create the user interface as shown in figure 2. While creating the user interface, it is important to verify that the user interface displays correctly on both the 3.5″ screen and the iPhone 5′s 4″ screen. You can test this by selecting the view controller’s view and changing the Size attribute in the Attributes Inspector. To accomplish the desired result, you need to tweak the autolayout constraints of the user interface elements. The goal is to make the weather data stick to the top of the view, while the collection view is glued to the bottom. The icons next to the time, wind, and rain labels are instances of UIImageView.

Figure 2: Creating the User Interface of the Weather View Controller

Configure the labels and buttons as shown in figure 2. This includes properly aligning the text of the labels, setting the types of both buttons to Custom, making the File’s Owner the collection view’s dataSource and delegate, and setting the scroll direction of the collection view flow layout to horizontal. I am a fan of Gill Sans so that is the font I chose to use for this project. Before switching back to the implementation file of the weather view controller, connect the outlets and action that we created earlier. In addition to the labels and buttons, I’ve also added an image view to the view controller’s view to display the background image.

As I mentioned in the introduction, you can find the application’s artwork in the source files of this tutorial. Create a folder named Artwork in your Xcode project and drag the artwork in this folder.

Step 3: Populating the User Interface

We currently log the response of the Forecast API to Xcode’s Console. To start using the weather data, we need to update the fetchWeatherData method as shown below. In the completion block of requestWeatherForCoordinate:completion:, we hide the progress HUD and send a notification on the main thread. We make use of the dispatch_async function and pass the queue of the main thread as the first argument. The notification’s userInfo dictionary is the response of the request.

- (void)fetchWeatherData {
    if ([[MTForecastClient sharedClient] networkReachabilityStatus] == AFNetworkReachabilityStatusNotReachable) return;
    // Show Progress HUD
    [SVProgressHUD showWithMaskType:SVProgressHUDMaskTypeGradient];
    // Query Forecast API
    double lat = [[_location objectForKey:MTLocationKeyLatitude] doubleValue];
    double lng = [[_location objectForKey:MTLocationKeyLongitude] doubleValue];
    [[MTForecastClient sharedClient] requestWeatherForCoordinate:CLLocationCoordinate2DMake(lat, lng) completion:^(BOOL success, NSDictionary *response) {
        // Dismiss Progress HUD
        [SVProgressHUD dismiss];
        if (response && [response isKindOfClass:[NSDictionary class]]) {
            dispatch_async(dispatch_get_main_queue(), ^{
                // Post Notification on Main Thread
                NSNotification *notification = [NSNotification notificationWithName:MTRainWeatherDataDidChangeChangeNotification object:nil userInfo:response];
                [[NSNotificationCenter defaultCenter] postNotification:notification];
            });
        }
    }];
}

The weather and forecast view controllers are both observers of MTRainWeatherDataDidChangeChangeNotification notifications. The weather view controller invokes weatherDataDidChangeChange:, which in turn invokes updateView. In updateView, we invoke updateCurrentWeather and update the collection view by sending it a message of reloadData.

- (void)updateView {
    // Update Location Label
    [self.labelLocation setText:[self.location objectForKey:MTLocationKeyCity]];
    // Update Current Weather
    [self updateCurrentWeather];
    // Reload Collection View
    [self.collectionView reloadData];
}

Before we implement updateCurrentWeather, I want to take a small detour. We will be displaying temperature values in various places of the application and because we support both Fahrenheit and Celsius this can become cumbersome. It is therefore useful to create a class that centralizes this logic so that we don’t need to clutter our code base with if statements and temperature conversions.

Step 4: Creating the Settings Class

Before we create the class that handles temperature conversions, we need to be able to store the current temperature setting in the user defaults database. Revisit MTConstants.h/.m and declare a string constant with a name of MTRainUserDefaultsTemperatureUnit.

extern NSString * const MTRainUserDefaultsTemperatureUnit;

NSString * const MTRainUserDefaultsTemperatureUnit = @"temperatureUnit";

To make working with settings easier, I often create a category on NSUserDefaults that allows me to quickly and elegantly access the application’s settings. Let me show you what I mean. Create a new Objective-C category (figure 3), name the category Helpers, and make it a category on NSUserDefaults (figure 4). In NSUserDefaults+Helpers.h, we declare three class methods as shown below.

Figure 3: Creating a New Objective-C Category

Figure 4: Creating a Category on NSUserDefaults

#import <Foundation/Foundation.h>
@interface NSUserDefaults (Helpers)
#pragma mark -
#pragma mark Temperature
+ (BOOL)isDefaultCelcius;
+ (void)setDefaultToCelcius;
+ (void)setDefaultToFahrenheit;
@end

Even though these methods aren’t magical, they are very useful. The first method, isDefaultCelcius, tells us if the temperature unit is set to Celsius or not. The other two methods make it very easy to switch between Fahrenheit and Celsius. Not only do we update the user defaults database, we also post a notification that informs observers of the change.

+ (BOOL)isDefaultCelcius {
    return [[NSUserDefaults standardUserDefaults] integerForKey:MTRainUserDefaultsTemperatureUnit] == 1;
}
+ (void)setDefaultToCelcius {
    // Update User Defaults
    NSUserDefaults *ud = [NSUserDefaults standardUserDefaults];
    [ud setInteger:1 forKey:MTRainUserDefaultsTemperatureUnit];
    [ud synchronize];
    // Post Notification
    [[NSNotificationCenter defaultCenter] postNotificationName:MTRainTemperatureUnitDidChangeNotification object:nil];
}
+ (void)setDefaultToFahrenheit {
    // Update User Defaults
    NSUserDefaults *ud = [NSUserDefaults standardUserDefaults];
    [ud setInteger:0 forKey:MTRainUserDefaultsTemperatureUnit];
    [ud synchronize];
    // Post Notification
    [[NSNotificationCenter defaultCenter] postNotificationName:MTRainTemperatureUnitDidChangeNotification object:nil];
}

It is time to create the settings class that I wrote about earlier. The solution is surprisingly easy. Create a new Objective-C class, name it MTSettings, and make it a subclass of NSObject (figure 5). In MTSettings.h, we declare one class method, formatTemperature:. In MTSettings.m, we import the header of the category we created a moment ago and implement formatTemperature: as shown below. The method accepts an instance of NSNumber, converts it to a float, and returns a formatted string based on the temperature setting.

Figure 5: Creating the MTSettings Class

#import <Foundation/Foundation.h>
@interface MTSettings : NSObject
#pragma mark -
#pragma mark Convenience Methods
+ (NSString *)formatTemperature:(NSNumber *)temperature;
@end

#import "NSUserDefaults+Helpers.h"

+ (NSString *)formatTemperature:(NSNumber *)temperature {
    float value = [temperature floatValue];
    if ([NSUserDefaults isDefaultCelcius]) {
        value = (value  -  32.0)  *  (5.0 / 9.0);
    }
    return [NSString stringWithFormat:@"%.0f°", value];
}

Before we continue, add an import statement for the MTSettings class to the project’s precompiled header file so that we can use it throughout the project.

#import <Availability.h>
#ifndef __IPHONE_3_0
#warning "This project uses features only available in iOS SDK 3.0 and later."
#endif
#ifdef __OBJC__
    #import <UIKit/UIKit.h>
    #import <Foundation/Foundation.h>
    #import <QuartzCore/QuartzCore.h>
    #import <CoreLocation/CoreLocation.h>
    #import <MobileCoreServices/MobileCoreServices.h>
    #import <SystemConfiguration/SystemConfiguration.h>
    #import "AFNetworking.h"
    #import "SVProgressHUD.h"
    #import "IIViewDeckController.h"
    #import "MTSettings.h"
    #import "MTConstants.h"
#endif

It is now time to implement updateCurrentWeather in the MTWeatherViewController class. The data for the current weather is a subset of the response we received from the Forecast API. The implementation of updateCurrentWeather is pretty straightforward. The only caveat to watch out for is the precipitation probability. If this value is equal to 0, the key precipProbability is not included in the response. That is the reason that we first check for the existence of the key precipProbability in the response dictionary.

- (void)updateCurrentWeather {
    // Weather Data
    NSDictionary *data = [self.response objectForKey:@"currently"];
    // Update Date Label
    NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
    [dateFormatter setFormatterBehavior:NSDateFormatterBehavior10_4];
    [dateFormatter setDateFormat:@"EEEE, MMM d"];
    NSDate *date = [NSDate dateWithTimeIntervalSince1970:[data[@"time"] doubleValue]];
    [self.labelDate setText:[dateFormatter stringFromDate:date]];
    // Update Temperature Label
    [self.labelTemp setText:[MTSettings formatTemperature:data[@"temperature"]]];
    // Update Time Label
    NSDateFormatter *timeFormatter = [[NSDateFormatter alloc] init];
    [timeFormatter setFormatterBehavior:NSDateFormatterBehavior10_4];
    [timeFormatter setDateFormat:@"ha"];
    [self.labelTime setText:[timeFormatter stringFromDate:[NSDate date]]];
    // Update Wind Label
    [self.labelWind setText:[NSString stringWithFormat:@"%.0fMP", [data[@"windSpeed"] floatValue]]];
    // Update Rain Label
    float rainProbability = 0.0;
    if (data[@"precipProbability"]) {
        rainProbability = [data[@"precipProbability"] floatValue] * 100.0;
    }
    [self.labelRain setText:[NSString stringWithFormat:@"%.0f%%", rainProbability]];
}

Step 5: Populating the Collection View

To populate the collection view, we first need to create a UICollectionViewCell subclass. Create a new Objective-C class, name it MTHourCell, and make it a subclass of UICollectionViewCell (figure 6). Creating custom table or collection view cells can be laborious and painstaking. If you want to learn more about creating custom table and collection view cells, then I suggest you take a look at a tutorial I wrote a few weeks ago.

Figure 6: Creating a Custom Collection View

In the interface of MTHourCell, we declare four properties of type UILabel. We don’t do much magic in MTHourcell.m as you can see below. To better understand the initWithFrame: method, revisit the design I showed you at the beginning of this article. I won’t discuss the implementation of initWithFrame: in detail, but I do want to point out that I use a preprocessor define for the text color of the labels. I added the preprocess define to MTConstants.h to make it available to the entire project (see below).

#import <UIKit/UIKit.h>
@interface MTHourCell : UICollectionViewCell
@property (strong, nonatomic) UILabel *labelTime;
@property (strong, nonatomic) UILabel *labelTemp;
@property (strong, nonatomic) UILabel *labelWind;
@property (strong, nonatomic) UILabel *labelRain;
@end

#import "MTHourCell.h"
#define kMTLabelBottomWidth 40.0
#define kMTLabelBottomHeight 40.0
@interface MTHourCell ()
@end
@implementation MTHourCell
- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        // Helpers
        CGSize size = self.contentView.frame.size;
        // Initialize Label Time
        self.labelTime = [[UILabel alloc] initWithFrame:CGRectMake(30.0, 0.0, 50.0, 40.0)];
        // Configure Label Time
        [self.labelTime setBackgroundColor:[UIColor clearColor]];
        [self.labelTime setTextColor:[UIColor whiteColor]];
        [self.labelTime setFont:[UIFont fontWithName:@"GillSans-Light" size:18.0]];
        [self.labelTime setAutoresizingMask:(UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleBottomMargin)];
        [self.contentView addSubview:self.labelTime];
        // Initialize Label Temp
        self.labelTemp = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 46.0, 80.0, 44.0)];
        // Configure Label Temp
        [self.labelTemp setBackgroundColor:[UIColor clearColor]];
        [self.labelTemp setTextAlignment:NSTextAlignmentCenter];
        [self.labelTemp setTextColor:kMTColorGray];
        [self.labelTemp setFont:[UIFont fontWithName:@"GillSans-Bold" size:40.0]];
        [self.labelTemp setAutoresizingMask:(UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleBottomMargin)];
        [self.contentView addSubview:self.labelTemp];
        // Initialize Label Wind
        self.labelWind = [[UILabel alloc] initWithFrame:CGRectMake(0.0, size.height - kMTLabelBottomHeight, kMTLabelBottomWidth, kMTLabelBottomHeight)];
        // Configure Label Wind
        [self.labelWind setBackgroundColor:[UIColor clearColor]];
        [self.labelWind setTextAlignment:NSTextAlignmentCenter];
        [self.labelWind setTextColor:kMTColorGray];
        [self.labelWind setFont:[UIFont fontWithName:@"GillSans-Light" size:16.0]];
        [self.labelWind setAutoresizingMask:(UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleTopMargin)];
        [self.contentView addSubview:self.labelWind];
        // Initialize Label Rain
        self.labelRain = [[UILabel alloc] initWithFrame:CGRectMake(size.width - kMTLabelBottomWidth, size.height - kMTLabelBottomHeight, kMTLabelBottomWidth, kMTLabelBottomHeight)];
        // Configure Label Rain
        [self.labelRain setBackgroundColor:[UIColor clearColor]];
        [self.labelRain setTextAlignment:NSTextAlignmentCenter];
        [self.labelRain setTextColor:kMTColorGray];
        [self.labelRain setFont:[UIFont fontWithName:@"GillSans-Light" size:16.0]];
        [self.labelRain setAutoresizingMask:(UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleTopMargin)];
        [self.contentView addSubview:self.labelRain];
        // Background View
        UIImage *backgroundImage = [[UIImage imageNamed:@"background-hour-cell"] resizableImageWithCapInsets:UIEdgeInsetsMake(40.0, 10.0, 10.0, 10.0)];
        UIImageView *backgroundView = [[UIImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, size.width, size.height)];
        [backgroundView setAutoresizingMask:(UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight)];
        [backgroundView setImage:backgroundImage];
        [self setBackgroundView:backgroundView];
    }
    return self;
}
@end

#define kMTColorGray [UIColor colorWithRed:0.737 green:0.737 blue:0.737 alpha:1.0]
#define kMTColorGreen [UIColor colorWithRed:0.325 green:0.573 blue:0.388 alpha:1.0]
#define kMTColorOrange [UIColor colorWithRed:1.000 green:0.306 blue:0.373 alpha:1.0]

As you can see below, implementing the UICollectionViewDataSource, UICollectionViewDelegate, and UICollectionViewDelegateFlowLayout protocols is very similar to implementing the UITableViewDataSource and UITableViewDelegate protocols.

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return self.forecast ? 1 : 0;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return [self.forecast count];
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    MTHourCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:HourCell forIndexPath:indexPath];
    // Fetch Data
    NSDictionary *data = [self.forecast objectAtIndex:indexPath.row];
    // Initialize Date Formatter
    NSDateFormatter *timeFormatter = [[NSDateFormatter alloc] init];
    [timeFormatter setFormatterBehavior:NSDateFormatterBehavior10_4];
    [timeFormatter setDateFormat:@"ha"];
    NSDate *date = [NSDate dateWithTimeIntervalSince1970:[data[@"time"] doubleValue]];
    // Configure Cell
    [cell.labelTime setText:[timeFormatter stringFromDate:date]];
    [cell.labelTemp setText:[MTSettings formatTemperature:data[@"temperature"]]];
    [cell.labelWind setText:[NSString stringWithFormat:@"%.0fMP", [data[@"windSpeed"] floatValue]]];
    float rainProbability = 0.0;
    if (data[@"precipProbability"]) {
        rainProbability = [data[@"precipProbability"] floatValue] * 100.0;
    }
    [cell.labelRain setText:[NSString stringWithFormat:@"%.0f%%", rainProbability]];
    return cell;
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    return CGSizeMake(80.0, 120.0);
}
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
    return UIEdgeInsetsMake(0.0, 10.0, 0.0, 10.0);
}

To make all this work, we need to (1) import the header file of MTHourCell, (2) declare a static string constant that serves as the cell reuse identifier, and (3) tell the collection view to use the MTHourCell class to instantiate new cells. In viewDidLoad, we also set the collection view’s background color to transparant.

#import "MTHourCell.h"

static NSString *HourCell = @"HourCell";

- (void)viewDidLoad {
    [super viewDidLoad];
    // Load Location
    self.location = [[NSUserDefaults standardUserDefaults] objectForKey:MTRainUserDefaultsLocation];
    if (!self.location) {
        [self.locationManager startUpdatingLocation];
    }
    // Configure Collection View
    [self.collectionView setBackgroundColor:[UIColor clearColor]];
    [self.collectionView registerClass:[MTHourCell class] forCellWithReuseIdentifier:HourCell];
}

3.User Interface Right View

Step 1: Outlets

Even though the right view displays a lot of data, the implementation of the MTForecastViewController class isn’t that complex. We start by creating an outlet for the table view in MTForecastViewController.h and conform the class to the UITableViewDataSource and UITableViewDelegate protocols.

#import <UIKit/UIKit.h>
@interface MTForecastViewController : UIViewController <UITableViewDataSource, UITableViewDelegate>
@property (weak, nonatomic) IBOutlet UITableView *tableView;
@end

Step 2: Creating the User Interface

Creating the user interface is as simple as adding a table view to the view controller’s view, connecting the outlet we created a moment ago, and setting the File’s Owner as the table view’s dataSource and delegate (figure 7).

Figure 7: Creating the User Interface of the Forecast View Controller

Step 3: Populating the Table View

Before we populate the table view with data, we need to create a UITableViewCell subclass. Create a new Objective-C class, name it MTDayCell, and make it a subclass of UITableViewCell (figure 8). Open MTDayCell.h and declare five outlets of type UILabel. As with the MTHourCell class, the implementation of MTDayCell isn’t too difficult as you can see below.

Figure 8: Creating a Custom Table View Cell

#import <UIKit/UIKit.h>
@interface MTDayCell : UITableViewCell
@property (strong, nonatomic) UILabel *labelDay;
@property (strong, nonatomic) UILabel *labelDate;
@property (strong, nonatomic) UILabel *labelTemp;
@property (strong, nonatomic) UILabel *labelWind;
@property (strong, nonatomic) UILabel *labelRain;
@end

#import "MTDayCell.h"
#define kMTCalendarWidth 44.0
#define kMTCalendarHeight 80.0
#define kMTCalendarMarginLeft 60.0
#define kMTLabelRightWidth 30.0
#define kMTLabelRightHeight 14.0
@interface MTDayCell ()
@property (strong, nonatomic) UIImageView *imageViewCalendar;
@end
@implementation MTDayCell
#pragma mark -
#pragma mark Initialization
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        // Helpers
        CGSize size = self.contentView.frame.size;
        // Configure Table View Cell
        [self setSelectionStyle:UITableViewCellSelectionStyleNone];
        // Initialize Image View Clock
        self.imageViewCalendar = [[UIImageView alloc] initWithFrame:CGRectMake(kMTCalendarMarginLeft, 0.0, kMTCalendarWidth, kMTCalendarHeight)];
        // Configure Image View Clock
        [self.imageViewCalendar setContentMode:UIViewContentModeCenter];
        [self.imageViewCalendar setImage:[UIImage imageNamed:@"background-calendar-day-cell"]];
        [self.imageViewCalendar setAutoresizingMask:(UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleBottomMargin)];
        [self.contentView addSubview:self.imageViewCalendar];
        // Initialize Label Day
        self.labelDay = [[UILabel alloc] initWithFrame:CGRectMake(kMTCalendarMarginLeft, 10.0, kMTCalendarWidth, 20.0)];
        // Configure Label Day
        [self.labelDay setTextColor:[UIColor whiteColor]];
        [self.labelDay setTextAlignment:NSTextAlignmentCenter];
        [self.labelDay setBackgroundColor:[UIColor clearColor]];
        [self.labelDay setFont:[UIFont fontWithName:@"GillSans" size:14.0]];
        [self.labelDay setAutoresizingMask:(UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleBottomMargin)];
        [self.contentView addSubview:self.labelDay];
        // Initialize Label Date
        self.labelDate = [[UILabel alloc] initWithFrame:CGRectMake(kMTCalendarMarginLeft, 20.0, kMTCalendarWidth, 60.0)];
        // Configure Label Date
        [self.labelDate setTextColor:kMTColorGray];
        [self.labelDate setTextAlignment:NSTextAlignmentCenter];
        [self.labelDate setBackgroundColor:[UIColor clearColor]];
        [self.labelDate setFont:[UIFont fontWithName:@"GillSans" size:24.0]];
        [self.labelDate setAutoresizingMask:(UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleBottomMargin)];
        [self.contentView addSubview:self.labelDate];
        // Initialize Label Wind
        self.labelWind = [[UILabel alloc] initWithFrame:CGRectMake(size.width - kMTLabelRightWidth, (size.height / 2.0) - kMTLabelRightHeight, kMTLabelRightWidth, kMTLabelRightHeight)];
        // Configure Label Wind
        [self.labelWind setTextColor:kMTColorGray];
        [self.labelWind setTextAlignment:NSTextAlignmentCenter];
        [self.labelWind setBackgroundColor:[UIColor clearColor]];
        [self.labelWind setFont:[UIFont fontWithName:@"GillSans" size:12.0]];
        [self.labelWind setAutoresizingMask:(UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleTopMargin)];
        [self.contentView addSubview:self.labelWind];
        // Initialize Label Rain
        self.labelRain = [[UILabel alloc] initWithFrame:CGRectMake(size.width - kMTLabelRightWidth, (size.height / 2.0), kMTLabelRightWidth, kMTLabelRightHeight)];
        // Configure Label Rain
        [self.labelRain setTextColor:kMTColorGray];
        [self.labelRain setTextAlignment:NSTextAlignmentCenter];
        [self.labelRain setBackgroundColor:[UIColor clearColor]];
        [self.labelRain setFont:[UIFont fontWithName:@"GillSans" size:12.0]];
        [self.labelRain setAutoresizingMask:(UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleBottomMargin)];
        [self.contentView addSubview:self.labelRain];
        // Initialize Label Temp
        self.labelTemp = [[UILabel alloc] initWithFrame:CGRectMake(kMTCalendarWidth + kMTCalendarMarginLeft + 12.0, 0.0, size.width - kMTCalendarWidth - kMTCalendarMarginLeft - kMTLabelRightWidth - 12.0, size.height)];
        // Configure Label Temp
        [self.labelTemp setTextColor:kMTColorGray];
        [self.labelTemp setTextAlignment:NSTextAlignmentCenter];
        [self.labelTemp setBackgroundColor:[UIColor clearColor]];
        [self.labelTemp setFont:[UIFont fontWithName:@"GillSans-Bold" size:40.0]];
        [self.labelTemp setAutoresizingMask:(UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight)];
        [self.contentView addSubview:self.labelTemp];
    }
    return self;
}
@end

The implementation of the table view data source protocol is very similar to that of the collection view data source protocol that we saw earlier. We also implement one method of the table view delegate protocol, tableView:heightForRowAtIndexPath:, to set the row height to 80.0.

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return self.forecast ? 1 : 0;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return [self.forecast count];
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    MTDayCell *cell = [tableView dequeueReusableCellWithIdentifier:DayCell forIndexPath:indexPath];
    // Fetch Data
    NSDictionary *data = [self.forecast objectAtIndex:indexPath.row];
    // Initialize Date Formatter
    NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
    [dateFormatter setFormatterBehavior:NSDateFormatterBehavior10_4];
    NSDate *date = [NSDate dateWithTimeIntervalSince1970:[data[@"time"] doubleValue]];
    // Configure Cell
    [dateFormatter setDateFormat:@"EEE"];
    [cell.labelDay setText:[dateFormatter stringFromDate:date]];
    [dateFormatter setDateFormat:@"d"];
    [cell.labelDate setText:[dateFormatter stringFromDate:date]];
    float tempMin = [data[@"temperatureMin"] floatValue];
    float tempMax = [data[@"temperatureMax"] floatValue];
    [cell.labelTemp setText:[NSString stringWithFormat:@"%.0f°/%.0f°", tempMin, tempMax]];
    [cell.labelWind setText:[NSString stringWithFormat:@"%.0f", [data[@"windSpeed"] floatValue]]];
    float rainProbability = 0.0;
    if (data[@"precipProbability"]) {
        rainProbability = [data[@"precipProbability"] floatValue] * 100.0;
    }
    [cell.labelRain setText:[NSString stringWithFormat:@"%.0f", rainProbability]];
    return cell;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 80.0;
}

To make all this work, we need to (1) import the header file of the MTDayCell class, (2) declare a static string constant for the cell reuse identifier, and (3) register the MTDayCell as the class for that cell reuse identifier in viewDidLoad. In updateView, we reload the table view.

#import "MTDayCell.h"

static NSString *DayCell = @"DayCell";

- (void)viewDidLoad {
    [super viewDidLoad];
    // Configure Table View
    [self.tableView registerClass:[MTDayCell class] forCellReuseIdentifier:DayCell];
}

- (void)updateView {
    // Reload Table View
    [self.tableView reloadData];
}

4.User Interface Right View

Step 1: Updating the User Interface

It is clear that we need to make some significant changes to the locations view controller to implement Chris’s design. The table view of the locations view controller will include two sections instead of one. The top section will display the stored locations while the bottom section is reserved for the temperature setting. Start by opening MTLocationsViewController.xib and remove the navigation bar that we added in the previous article (figure 9). This means that we can also delete the outlet for the edit button in MTLocationsViewController.h and the editLocations action in MTLocationsViewController.m.

Figure 9: Updating the User Interface of the Locations View Controller

Step 2: Creating the Location Cell

The cells that display the locations have a delete button on the left. To make this work, we need to create a custom table view cell. Create another UITableViewCell subclass and name it MTLocationCell (figure 10). Open MTLocationCell.h and create two properties, (1) buttonDelete (UIButton) and (2) labelLocation (UILabel). As you can see, the implementation of MTLocationCell is less complex than those of MTHourCell and MTDayCell.

Figure 10: Creating a Custom Table View Cell

#import <UIKit/UIKit.h>
@interface MTLocationCell : UITableViewCell
@property (strong, nonatomic) UIButton *buttonDelete;
@property (strong, nonatomic) UILabel *labelLocation;
@end

#import "MTLocationCell.h"
#define kMTButtonDeleteWidth 44.0
#define kMTLabelLocationMarginLeft 44.0
@implementation MTLocationCell
#pragma mark -
#pragma mark Initialization
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        // Helpers
        CGSize size = self.contentView.frame.size;
        // Initialize Delete Button
        self.buttonDelete = [UIButton buttonWithType:UIButtonTypeCustom];
        // Configure Delete Button
        [self.buttonDelete setFrame:CGRectMake(0.0, 0.0, kMTButtonDeleteWidth, size.height)];
        [self.buttonDelete setImage:[UIImage imageNamed:@"button-delete-location-cell"] forState:UIControlStateNormal];
        [self.buttonDelete setImage:[UIImage imageNamed:@"button-delete-location-cell"] forState:UIControlStateSelected];
        [self.buttonDelete setImage:[UIImage imageNamed:@"button-delete-location-cell"] forState:UIControlStateDisabled];
        [self.buttonDelete setImage:[UIImage imageNamed:@"button-delete-location-cell"] forState:UIControlStateHighlighted];
        [self.buttonDelete setAutoresizingMask:(UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleRightMargin)];
        [self.contentView addSubview:self.buttonDelete];
        // Initialize Location Label
        self.labelLocation = [[UILabel alloc] initWithFrame:CGRectMake(kMTLabelLocationMarginLeft, 0.0, size.width - kMTLabelLocationMarginLeft, size.height)];
        // Configure Text Label
        [self.labelLocation setTextColor:kMTColorGray];
        [self.labelLocation setBackgroundColor:[UIColor clearColor]];
        [self.labelLocation setFont:[UIFont fontWithName:@"GillSans" size:20.0]];
        [self.labelLocation setAutoresizingMask:(UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleLeftMargin)];
        [self.contentView addSubview:self.labelLocation];
    }
    return self;
}
@end

Step 3: Updating the Table View Data Source Protocol

To implement the design, we need to update the UITableViewDataSource and UITableViewDelegate protocols. Start by importing the header file of the MTLocationCell class and the category on NSUserDefaults that we created earlier. The table view will contain three types of cells and we need to declare a reuse identifier for each type (see below).

#import "MTLocationsViewController.h"
#import "MTLocationCell.h"
#import "NSUserDefaults+Helpers.h"
@interface MTLocationsViewController ()
@property (strong, nonatomic) NSMutableArray *locations;
@end

static NSString *AddLocationCell = @"AddLocationCell";
static NSString *LocationCell = @"LocationCell";
static NSString *SettingsCell = @"SettingsCell";

In setupView, we configure the table view by (1) setting its separatorStyle property to UITableViewCellSeparatorStyleNone and (2) registering a class for each reuse identifier.

- (void)setupView {
    // Setup Table View
    [self.tableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];
    // Register Class for Cell Reuse
    [self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:AddLocationCell];
    [self.tableView registerClass:[MTLocationCell class] forCellReuseIdentifier:LocationCell];
    [self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:SettingsCell];
}

The UITableViewDataSource protocol changes significantly and the implementations of the various methods can seem daunting at first. Most of the complexity, however, is due to nested if statements.

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 2;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    if (section == 0) {
        return [self.locations count] + 1;
    }
    return 2;
}

We also implement tableView:titleForHeaderInSection: and tableView:viewForHeaderInSection: to replace the default section headers with a custom design that matches the application’s design. When implementing tableView:viewForHeaderInSection:, it is important to also implement tableView:heightForHeaderInSection:.

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {
    switch (section) {
        case 0: {
            return NSLocalizedString(@"Locations", nil);
            break;
        }
        default: {
            return NSLocalizedString(@"Temperature", nil);
            break;
        }
    }
    return nil;
}
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
    // Header Text
    NSString *text = [self tableView:tableView titleForHeaderInSection:section];
    // Helpers
    CGRect labelFrame = CGRectMake(12.0, 0.0, tableView.bounds.size.width, 44.0);
    // Initialize Label
    UILabel *label = [[UILabel alloc] initWithFrame:labelFrame];
    // Configure Label
    [label setText:text];
    [label setTextColor:kMTColorOrange];
    [label setFont:[UIFont fontWithName:@"GillSans" size:20.0]];
    [label setBackgroundColor:[UIColor clearColor]];
    // Initialize View
    UIView *backgroundView = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, tableView.bounds.size.width, 34.0)];
    [backgroundView setBackgroundColor:[UIColor clearColor]];
    [backgroundView addSubview:label];
    return backgroundView;
}
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
    return 40.0;
}

We make use of tableView:heightForFooterInSection: to create some whitespace between the top and bottom sections. This means that we also need to implement tableView:viewForFooterInSection:.

- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section {
    // Initialize View
    UIView *backgroundView = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, tableView.bounds.size.width, 34.0)];
    [backgroundView setBackgroundColor:[UIColor whiteColor]];
    return backgroundView;
}
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section {
    if (section == 0) {
        return 40.0;
    }
    return 0.0;
}

The implementation of tableView:cellForRowAtIndexPath: is a bit more complex due to the three cell types in the table view.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell *cell = nil;
    if (indexPath.section == 0) {
        if (indexPath.row == 0) {
            cell = [tableView dequeueReusableCellWithIdentifier:AddLocationCell forIndexPath:indexPath];
        } else {
            cell = [tableView dequeueReusableCellWithIdentifier:LocationCell forIndexPath:indexPath];
        }
    } else {
        cell = [tableView dequeueReusableCellWithIdentifier:SettingsCell forIndexPath:indexPath];
    }
    // Configure Cell
    [self configureCell:cell atIndexPath:indexPath];
    return cell;
}

In configureCell:atIndexPath:, we configure each cell. As I wrote earlier, the complexity is primarily due to nested if statements. Tapping the delete button in a location cell sends a message of deleteLocation: to the locations view controller. We will implement deleteLocation: shortly.

- (void)configureCell:(UITableViewCell *)cell atIndexPath:(NSIndexPath *)indexPath {
    // Helpers
    UIFont *fontLight = [UIFont fontWithName:@"GillSans-Light" size:18.0];
    UIFont *fontRegular = [UIFont fontWithName:@"GillSans" size:18.0];
    // Background View Image
    UIImage *backgroundImage = [[UIImage imageNamed:@"background-location-cell"] resizableImageWithCapInsets:UIEdgeInsetsMake(10.0, 0.0, 0.0, 10.0)];
    // Configure Table View Cell
    [cell.textLabel setFont:fontLight];
    [cell.textLabel setTextColor:kMTColorGray];
    [cell.textLabel setBackgroundColor:[UIColor clearColor]];
    [cell setSelectionStyle:UITableViewCellSelectionStyleNone];
    if (indexPath.section == 0) {
        if (indexPath.row == 0) {
            [cell.textLabel setText:@"Add Current Location"];
            [cell.imageView setContentMode:UIViewContentModeCenter];
            [cell.imageView setImage:[UIImage imageNamed:@"icon-add-location"]];
            // Background View Image
            backgroundImage = [[UIImage imageNamed:@"background-add-location-cell"] resizableImageWithCapInsets:UIEdgeInsetsMake(10.0, 0.0, 0.0, 10.0)];
        } else {
            // Fetch Location
            NSDictionary *location = [self.locations objectAtIndex:(indexPath.row - 1)];
            // Configure Cell
            [[(MTLocationCell *)cell buttonDelete] addTarget:self action:@selector(deleteLocation:) forControlEvents:UIControlEventTouchUpInside];
            [[(MTLocationCell *)cell labelLocation] setText:[NSString stringWithFormat:@"%@, %@", location[MTLocationKeyCity], location[MTLocationKeyCountry]]];
        }
    } else {
        if (indexPath.row == 0) {
            [cell.textLabel setText:NSLocalizedString(@"Fahrenheit", nil)];
            if ([NSUserDefaults isDefaultCelcius]) {
                [cell.textLabel setFont:fontLight];
                [cell.textLabel setTextColor:kMTColorGray];
            } else {
                [cell.textLabel setFont:fontRegular];
                [cell.textLabel setTextColor:kMTColorGreen];
            }
        } else {
            [cell.textLabel setText:NSLocalizedString(@"Celsius", nil)];
            if ([NSUserDefaults isDefaultCelcius]) {
                [cell.textLabel setFont:fontRegular];
                [cell.textLabel setTextColor:kMTColorGreen];
            } else {
                [cell.textLabel setFont:fontLight];
                [cell.textLabel setTextColor:kMTColorGray];
            }
        }
    }
    if (backgroundImage) {
        // Background View
        UIImageView *backgroundView = [[UIImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, cell.frame.size.width, cell.frame.size.height)];
        [backgroundView setAutoresizingMask:(UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight)];
        [backgroundView setImage:backgroundImage];
        [cell setBackgroundView:backgroundView];
    }
}

Because locations can now be deleted by tapping the delete button in the location cells, the rows themselves no longer need to be editable. This means that the implementation of tableView:canEditRowAtIndexPath: can be reduced to returning NO and the implementation of tableView:commitEditingStyle:forRowAtIndexPath: can be removed altogether.

- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath {
    return NO;
}

Step 4: Updating the Table View Delegate Protocol

In tableView:didSelectRowAtIndexPath:, we add a bit more complexity due to the inclusion of the second section containing the temperature setting. Thanks to our category on NSUserDefaults, the implementation is simple and concise.

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    [tableView deselectRowAtIndexPath:indexPath animated:YES];
    if (indexPath.section == 0) {
        if (indexPath.row == 0) {
            // Notify Delegate
            [self.delegate controllerShouldAddCurrentLocation:self];
        } else {
            // Fetch Location
            NSDictionary *location = [self.locations objectAtIndex:(indexPath.row - 1)];
            // Notify Delegate
            [self.delegate controller:self didSelectLocation:location];
        }
    } else {
        if (indexPath.row == 0 && [NSUserDefaults isDefaultCelcius]) {
            [NSUserDefaults setDefaultToFahrenheit];
        } else if (![NSUserDefaults isDefaultCelcius]) {
            [NSUserDefaults setDefaultToCelcius];
        }
        // Update Section
        [self.tableView reloadSections:[NSIndexSet indexSetWithIndex:1] withRowAnimation:UITableViewRowAnimationNone];
    }
    // Show Center View Controller
    [self.viewDeckController closeLeftViewAnimated:YES];
}

The rows in Chris’s design are slightly taller than the default height of 44 points. To put this detail into practice, we implement tableView:heightForRowAtIndexPath: as shown below.

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 50.0;
}

Step 5: Deleting Locations (Revisited)

The last thing that we need to do is implement the deleteLocation: method that is invoked when the delete button is tapped in a location cell. The implementation is more verbose than you might expect. Inferring the row number from the cell to which the delete button belongs isn’t as trivial as it should be. However, once we have the index path of the cell to which the button belongs, we only need to update the array of locations, update the user defaults database, and update the table view.

- (void)deleteLocation:(id)sender {
    UITableViewCell *cell = (UITableViewCell *)[[(UIButton *)sender superview] superview];
    NSIndexPath *indexPath = [self.tableView indexPathForCell:cell];
    // Update Locations
    [self.locations removeObjectAtIndex:(indexPath.row - 1)];
    // Update User Defaults
    [[NSUserDefaults standardUserDefaults] setObject:self.locations forKey:MTRainUserDefaultsLocations];
    // Update Table View
    [self.tableView deleteRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationTop];
}

5. Finishing Touch

To finish our project, we need to replace the default launch images with the ones provided by Chris Carey. The launch images are also included in the source files of this article.

Build and run the application to see the final result in action. Even though we have spent quite some time creating and designing the application, there are still some rough edges. It would also be nice to implement a caching mechanism so that we can show cached data to the user as long as a request to the Forecast API hasn’t returned. These are a few examples of refinements that we can add to our application.

Conclusion

Creating the user interface was quite a bit of work, but the code involved wasn’t all that complicated. I hope this tutorial has shown you what a great design can do for an application. Consumer applications in particular really benefit from an appealing, fresh design like the one we used in this tutorial.

Build a Monster Smashing Game with Cocos2D: Project Setup

Jorge Costa and Orlando Pereira — Thu, 30 May 2013 20:43:18 +0000

The Cocos2D tutorial will be divided into three parts in order to completely cover each section. After the three part tutorial, you’ll be able to create an interesting 2D game using Cocos2D!

Each part will produce a practical result, and the sum of all parts will produce the final game. Despite the fact that each part can be read independently, for better understanding and guidance we suggest that the tutorial be followed step by step. We’ve also included the source code for each part separately, providing a way to start the tutorial at any point of the tutorial without having to read the prior portions.

Organization of the Series:

Before we start the tutorial, we’d like to thank Rodrigo Bellão for providing us with the images of the monsters.

1. Installation and Basics

If this is your first time working with Cocos2D, you’ll need to download and install the SDK from the Cocos2D for iPhone Webpage or from the GitHub Repository. Once you’ve downloaded it, you’ll need to install the Xcode project templates. Unzip the package and open up a terminal window on the directory you downloaded Cocos2D to.

Enter the following command.

./install-templates.sh -f -u

This command will only work if Xcode is installed within the default directory.

2. Monster Smashing!

Now we have Cocos2D installed. To start our game, we need to launch Xcode and go to File Menu > New > Project. We’ll see something like the following image.

Illustration of the template chooser (Xcode).

We need to choose the “Cocos2D iOS” template (from the Cocos2D v2.x lateral list). This template creates what we need to start our project, and includes the libraries required to run Cocos2D. The project is created with three classes (AppDelegate, HelloWorldLayer, and IntroLayer). Today, you will be working with HelloWorldLayer.

3. Pixel and Point Notation

A pixel is the smallest controllable element of a picture represented on the screen. There are several display resolutions in the iDevice family. Thus, the Cocos2D framework introduces a notation to help developers positioning objects in the screen. This is called point notation.

The device coordinate space is normally measured in pixels. However, the logical coordinate space is measured in points. The next table presents the direct relation between devices, points, and pixels.

Device	Points	Pixel
iPhone 3G	480×320	480×320
iPhone Retina	480×320	960×640
iPad 3	1024×768	2048×1536

From Cocos2D version 0.99.5-rc0 and above, the user can place objects in the screen using only point notation. This will offer a great advantage since the user knows that the object placement will be the same despite the end device where the application will run.

Nevertheless, if the user wants to, it’s possible to place objects using pixel notation simply by modifying the type of message that we pass to the object.

// Director
CCDirector *director [CCDirector sharedDirector];
CGSize objectA = [director winSize]; // points notation
CGSize objectB = [director winSizeInPixels]; // pixel notation
// Node
CCNode *node = [...];
CGPoint posA = [node position];  // points notation
CGPoint posB = [node positionInPixels]; // pixel notation
// Sprite
CCSprite *sprite = [...];
CGRect rectA = [sprite rect]; // points notation
CGRect rectB = [sprite rectInPixels]; // pixel notation

Note that the object setters can also be used in both notations.

[sprite setPosition:ccp(x,y)]; // points notation
[sprite setPositionInPixels:(x,y)] // pixel notation

We recommend using the point notation since we know that the positions will be the same in all devices.

Now that we know how the pixel and point notation work, the next step is to understand where the objects are positioned when we pass a specific coordinate. In Codos2D, the point (0,0) is in the bottom left corner of the screen. Thus, the top-right corner has the (480,320) point.

Illustration of pixel and dot notation using the iPhone simulator.

For example, to position a sprite you had to do:

sprite.position = ccp(480,320); // at the top-right corner
sprite.position = ccp(0,320); // at the top-left corner
sprite.position = ccp(480,0); // at the bottom-right corner
sprite.position = ccp(240,160); // at the center of the screen

4. Background and Logo

Cocos2D introduced the concept of scenes. Each scene can be seen as a different screen, which is used to incorporate menus, levels, credits, and everything else that you see during the game. Note that only one scene can be active at a given time.

Inside the scenes, you can have several layers (like Photoshop). The layers can have several properties, and we can have a large number of them on the screen simultaneously. They can have several properties such as background color, animation, a menu, or even a shadow.

Sprites are simply 2D images that can be moved, rotated, scaled, animated, and so on. In the next step, you will change the project source code and add a sprite.

Before you add a sprite, some artwork, which is available in the resources folder, is required.

All resources used in this tutorial are designed for the original iPad resolution.

Once you have downloaded the resources, you will find six images. Copy them to the resources folder of your project and make sure that the option “Copy items into destination goups’s folder (if needed)” is checked.

Now, in the HelloWorldLayer.m you can delete everything inside the condition if( (self=[super init])). The sprite creation can be achieved in code using the following snippet.

CGSize winSize = [CCDirector sharedDirector].winSize;
CCSprite *backgroundImage = [CCSprite spriteWithFile:@"WoodRetroApple_iPad_HomeScreen.jpg"];
backgroundImage.position = ccp(winSize.width/2, winSize.height/2);
[self addChild:backgroundImage z:-2];

With the above-mentioned snippet you can change the default background image of that class. The code is simple to understand, and to summarize.

Ask for the window size
Initialize a CCSprite with the picture we want to load
Center the sprite on screen
Add the CCSprite to the scene

Note that we put the z = -2 because the background needs to stay behind all objects.

Let’s add a logo. Looking at the above-mentioned code, we already know how to achieve it. The process is simple and straightforward. If you need some help, you can use the following code.

CCSprite *logo = [CCSprite spriteWithFile:@"MonsterSmashing.png"];
logo.scale = 1.2;
logo.position =  ccp(winSize.width /2 , 800 );
[self addChild: logo];

It’s now time to run the project and see if everything is working as expected. You should see similar to the next screen.

Illustration of the first screen. The screen contains the default game name and logo.

5. Creating the Menu

The main objective for this step is to add a default menu. The menu will have two options:

Play
Sound

The Play option will start a new game, while the Sound option is a toggle button that will provide us a way to stop or start the sound engine (in this case the background music).

To implement the Play button (using the CCMenuItem class), we just need to add a line (for now). This line represents an Item of the Menu. The option is represented using an image (added previously to the resources)

CCMenuItem *startGameButtonImage = [CCMenuItemImage itemFromNormalImage:@"playButton.png" selectedImage:@"playButtonSelected.png" target:self selector:@selector(onStartGamePressed)];

To create and describe the Play Button we need to pass it through several messages. The itemFromNormalImage is the image location information, and the selectedImage is the image that appears when our finger is hovering over the item. The selector is the method that will be called when the user lifts their finger from the menu item, which in this case is the method onStartgamePressed. We’ll talk about that later.

The toggle button is more complex than the play button since it uses two states, on and off. We need to define the two states and then add them to the final toggle button, CCMenuItemToogle. The on and off button is defined as the play button.

After we create the two options, we need to join the options. Use the snippet below for this.

CCMenuItem *startGameButtonImage = [CCMenuItemImage itemFromNormalImage:@"playButton.png" selectedImage:@"playButtonSelected.png" target:self selector:@selector(onStartGamePressed)];
CCMenuItem *_soundOn = [[CCMenuItemImage  itemFromNormalImage:@"soundOn.png"
                                                         selectedImage:@"soundOnSelected.png" target:nil selector:nil] retain];
CCMenuItem *_soundOff = [[CCMenuItemImage itemFromNormalImage:@"soundOff.png"
                                                         selectedImage:@"soundOffSelected.png" target:nil selector:nil] retain];
CCMenuItemToggle *toggleItem = [CCMenuItemToggle itemWithTarget:self
                                                               selector:@selector(soundButtonTapped:) items:_soundOn, _soundOff, nil];

After adding the above snippet, we need to create the real menu with the inherent options. We need to use a CCMenu and send several CCMenuItems through the method menuWithItems. As with any other object, we must define its position and its padding, which in this case is vertical. Here’s the code.

CCMenu *menu = [CCMenu menuWithItems:startGameButtonImage, toggleItem, nil];
menu.position = ccp(winSize.width * 0.5f, winSize.height * 0.4f);
[menu alignItemsVerticallyWithPadding:15];
//Add the menu as a child to this layer
[self addChild:menu];

Previously, we said that the selector parameter called a method. We call two methods, onStartGamePressed and soundButtonTapped. The first one will replace the current scene, while the second will activate or deactivate the game sound.

Before we go to the method implementations, we need to create a new scene. So, go to File > New > File… and select a CCNode class and name it “MonsterRun“. Two new files will be added to your project, MonsterRun.h and MonsterRun.m). Make sure that the class uses the following code.

+(CCScene *) scene {
  CCScene *scene = [CCScene node];
  MonsterRun *layer = [MonsterRun node];
  [scene addChild: layer];
  return scene;
}

Now, we can go back to the HelloWorldLayer.m and reference the MonsterRun. We use the following line to create it.

#import "MonsterRun.h"

For now, we’ll leave this class and its code alone. It’ll be covered in the next tutorial. Let’s rewind a bit for the menus and the two methods that we talked about before, onStartGamePressed and soundButtonTapped.

- (void)soundButtonTapped:(id)sender {
    // Covered in Part 3
}
- (void)onStartGamePressed {
  CCScene *MonsterRunScene = [MonsterRun scene];
  CCTransitionFlipAngular *transition = [CCTransitionFlipAngular transitionWithDuration:0.5f scene:helloWorldScene];
  [[CCDirector sharedDirector] replaceScene:MonsterRunScene];
}

Now run the project in order to see if everything is working correctly. You will see something similar to the next image.

Illustration of the first screen. The screen contains the default game name, logo, and options menu.

6. Results

At this point, you have to be able to understand and perform the following tasks:

Install the Cocos2D framework.
Configure a Cocos2D project.
Implement scenes, layers, sprites and use the director.
Pixel and point differences.
Screen positioning and x-, y- axis orientation.
Define and use menus.