Learn how to encode and decode JSON in you iOS apps.

Video Tutorial: Saving Data in iOS Part 7: Using JSON is a post from: Ray Wenderlich

The post Video Tutorial: Saving Data in iOS Part 7: Using JSON appeared first on Ray Wenderlich.

Line up for some Zombie Conga!

Welcome back to our Unity 4.3 2D Tutorial series!

Yes, Unity 4.5 was recently released, but this series is about Unity’s 2D features, which were first introduced in version 4.3. Some bugs have been fixed in 4.5 and a few GUI elements have changed slightly. So, keep that in mind if you’re using a newer version of Unity and you see slight discrepancies between your editor and the screenshots here.

Throughout the first, second and third parts of this series, you learned most of what you need to begin working with Unity’s 2D tools, including how to import and animate your sprites.

In the fourth part of the series, you were introduced to Unity’s 2D physics engine and learned one way to deal with different screen sizes and aspect ratios.

By the end of this, the final part of this series, you’ll have cats dancing in a conga line and your player will be able to win or lose the game. You’ll even throw in some music and sound effects just for fun.

This last tutorial is the longest of the series, but it seemed better to post it as one huge chunk rather than to make you wait even one extra day for the second half.

This tutorial picks up where the fourth part of the series left off. If you don’t already have the project from that tutorial, download it here.

Unzip the file (if you needed to download it) and open your scene by double-clicking ZombieConga/Assets/Scenes/CongaScene.unity.

You’ve got most of Zombie Conga’s pieces in place, so now it’s time to do what so many aspiring game developers have trouble doing: finish the game!

Getting Started

Zombie Conga is supposed to be a side-scrolling game, but so far you’re zombie has been stuck staring at one small section of beach. It’s high time he had someplace to go.

In order to scroll the scene to the left, you’ll move the camera within the game world to the right. That way, the beach, along with the cats, zombies and old ladies that hang out there, will scroll by naturally without you needing to modify their positions yourself.

Select Main Camera in the Hierarchy. Add a new C# script called CameraController. You’ve already created several scripts by this point in the tutorial series, so try it yourself. If you need a refresher, check out the following spoiler.

Open CameraController.cs in MonoDevelop and add the following instance variables:

public float speed = 1f;
private Vector3 newPosition;

You’ll use speed to control how quickly the scene scrolls. You only need to update the x component of the Camera‘s position, but the individual components of a Transform‘s position are readonly. Rather than repeatedly creating new Vector3 objects every time you update the position, you’ll reuse newPosition.

Because you’ll only be setting newPosition‘s x value, you need to initialize the vector’s other components properly. To do so, add the following line inside Start:

newPosition = transform.position;

This copies the camera’s initial position to newPosition.

Now add the following code inside Update:

newPosition.x += Time.deltaTime * speed;
transform.position = newPosition;

This simply adjusts the object’s position as if it were moving speed units per second.

Save the file (File\Save) and switch back to Unity.

Play your scene and things start moving. The zombie and enemies seem to handle it fine, but they quickly run out of beach!

You need to handle the background similarly to how you handled the enemy. That is, when the enemy goes off screen, you’ll change its position so it reenters the scene from the other side of the screen.

Create a new C# script named BackgroundRepeater and add it to background. You’ve done this sort of thing several times now, so if you need a refresher, look back through the tutorial to find it.

Open BackgroundRepeater.cs in MonoDevelop and add the following instance variables:

private Transform cameraTransform;
private float spriteWidth;

You’ll store a reference to the camera’s Transform in cameraTransform. This isn’t absolutely necessary, but you’ll need to access it every time Update runs, so rather than repeatedly finding the same component, you’ll simply find it once and keep using it.

You’ll also need to repeatedly access the sprite’s width, which you’ll cache in spriteWidth because you know you aren’t changing the background’s sprite at runtime.

Initialize these variables by adding the following code in Start:

//1
cameraTransform = Camera.main.transform;
//2
SpriteRenderer spriteRenderer = renderer as SpriteRenderer;
spriteWidth = spriteRenderer.sprite.bounds.size.x;

The above code initializes the variables you added as follows:

1. It finds the scene’s main Camera object (which is the only camera in Zombie Conga) and sets cameraTransform to point to the camera’s Transform.
2. It casts the object’s built-in renderer property to a SpriteRenderer in order to access its sprite property, from which it gets the Sprite’s bounds. The Bounds object has a size property whose x component holds the object’s width, which it stores in spriteWidth.

In order to determine when the background sprite is off screen, you could implement OnBecameInvisible, like you did for the enemy. But you already learned about that, so this time you’ll check the object’s position directly.

In Zombie Conga, the camera’s position is always at the center of the screen. Likewise, when you imported the background sprite way back in Part 1 of this tutorial series, you set the origin to the sprite’s center.

Rather than calculate the x position of the left edge of the screen, you’ll estimate by assuming the background has scrolled off screen if it’s at least a full sprite’s width away from the camera. The following image shows how the background sprite is well offscreen when positioned exactly one-sprite’s width away from the camera’s position:

The left edge of the screen will be different on different devices, but this trick will work as long as the screen’s width is not larger than the width of the background sprite.

Add the following code to Update:

if( (transform.position.x + spriteWidth) < cameraTransform.position.x) {
  Vector3 newPos = transform.position;
  newPos.x += 2.0f * spriteWidth; 
  transform.position = newPos;
}

The if check above checks to see if the object is sufficiently off screen, as described earlier. If so, it calculates a new position that is offset from the current position by twice the width of the sprite.

Why twice the width? By the time this logic determines that the background went offscreen, moving the sprite over by spriteWidth would pop it into the area viewable by the camera, as shown below:

Save the file (File\Save) and switch back to Unity.

Play the scene and you’ll see that the background goes off screen and eventually comes back into view, as shown in the sped-up sequence below:

That works fine, but you probably don’t want those blue gaps that keep showing up. To fix it, you’ll simply add another background sprite to fill that space.

Right-click on background in the Hierarchy and select Duplicate from the popup menu that appears. Select the duplicated background (if it already isn’t selected) and set the x value of the Transform‘s Position to 20.48, as shown below:

Remember from Part 1 of this series that the background sprite is 2048 pixels wide and you imported it with a ratio of 100 pixels per unit. That means that setting one background sprite’s x position to 20.48 will place it immediately to the right of the other object, whose x position is zero.

You now have a much longer stretch of beach in your Scene view, as shown below:

Play the scene again and now your zombie can spend his entire apocalypse strolling along the beach, as shown in the following sped-up sequence. Don’t let the glitches in this low-quality GIF fool you – in the real game, the background scrolls seamlessly.

While playing the scene, one thing that probably stands out is how utterly devoid of cats that beach is. I don’t know about you, but whenever I go to the beach, I always bring my kitty.

Spawning Cats

You’ll want new cats to keep appearing on the beach until the player wins or loses the game. To handle this, you’ll create a new script and add it to an empty GameObject.

Create a new empty game object by choosing GameObject\Create Empty in Unity’s menu. Name the new object Kitten Factory.

Create a new C# script called KittyCreator and attach it to Kitten Factory. No more hints for creating new scripts – you can do it! (But if you can’t do it, look back through the earlier parts of the tutorial.)

Open KittyCreator.cs in MonoDevelop and replace its contents with the following code:

using UnityEngine;
 
public class KittyCreator: MonoBehaviour {
  //1
  public float minSpawnTime = 0.75f; 
  public float maxSpawnTime = 2f; 
 
  //2    
  void Start () {
    Invoke("SpawnCat",minSpawnTime);
  }
 
  //3
  void SpawnCat()
  {
    Debug.Log("TODO: Birth a cat at " + Time.timeSinceLevelLoad);
    Invoke("SpawnCat", Random.Range(minSpawnTime, maxSpawnTime));
  }
}

This code doesn’t actually spawn any cats, it simply lays the groundwork to do so. Here’s what it does:

1. minSpawnTime and maxSpawnTime specify how often new cats appear. After a cat spawns, KittyCreator will wait at least minSpawnTime seconds and at most maxSpawnTime seconds before spawning another cat. You declared them public so you can tweak the spawn rate in the editor later if you’d like.
2. Unity’s Invoke method lets you call another method after a specified delay. Start calls Invoke, instructing it to wait minSpawnTime seconds and then to call SpawnCat. This adds a brief period after the scene starts during which no cats spawn.
3. For now, SpawnCat simply logs a message letting you know when it executes and then uses Invoke to schedule another call to SpawnCat. It waits a random amount of time between minSpawnTime and maxSpawnTime, which keeps cats from appearing at predictable intervals.

Save the file (File\Save) and switch back to Unity.

Run the scene and you’ll start seeing logs like the following appear in the Console:

Now that you have your Kitten Factory working on schedule, you need to make it spit out some cats. For that, you’ll be using one of Unity’s most powerful features: Prefabs.

Prefabs

Prefabs reside in your Project rather than in your scene’s Hierarchy. You use a Prefab as a template to create objects in your scene.

However, these instances are not just copies of the original Prefab. Instead, the Prefab defines an object’s default values, and then you are free to modify any part of a specific instance in your scene without affecting any other objects created from the same Prefab.

In Zombie Conga, you want to create a cat Prefab and have Kitten Factory create instances of that Prefab at different locations throughout the scene. But don’t you already have a cat object in your scene, properly configured with all the animations, physics and scripts you’ve set up so far? It sure would be annoying if you had to redo that work to make a Prefab. Fortunately, you don’t have to!

To turn it into a Prefab, simply drag cat from the Hierarchy into the Project browser. You’ll see a new cat Prefab object created in the Project browser, but you should also see the word cat turn blue in the Hierarchy, as shown below:

While working on your own games, remember that objects with blue names in the Hierarchy are instances of Prefabs. When you select one, you will see the following buttons in the Inspector:

These buttons are useful while editing instances of a Prefab. They allow you to do the following:

• Select: This button selects in the Project browser the Prefab object used to create this instance.
• Revert: This button replaces any local changes you’ve made to this instance with the default values from the Prefab.

• Apply: This button takes any local changes you’ve made to this instance and sets those values back onto the Prefab, making them the default for all Prefab instances. Any existing instances of the Prefab that have not set local overrides for these values will automatically have their values changed to the new defaults.

  Important: Clicking Apply affects every GameObject that shares this object’s Prefab in every scene of your project, not just the current scene.

Now you need to get the Kitten Factory to stop polluting your Console with words and start polluting your beach with cats!

Go back to KittyCreator.cs in MonoDevelop and add the following variable to KittyCreator:

public GameObject catPrefab;

You’ll assign your cat Prefab to catPrefab in Unity’s editor and then KittyCreator will use it as a template when creating new cats. But before you do that, replace the Debug.Log line in SpawnCat with the following code:

// 1
Camera camera = Camera.main;
Vector3 cameraPos = camera.transform.position;
float xMax = camera.aspect * camera.orthographicSize;
float xRange = camera.aspect * camera.orthographicSize * 1.75f;
float yMax = camera.orthographicSize - 0.5f;
 
// 2
Vector3 catPos = 
  new Vector3(cameraPos.x + Random.Range(xMax - xRange, xMax),
              Random.Range(-yMax, yMax),
              catPrefab.transform.position.z);
 
// 3
Instantiate(catPrefab, catPos, Quaternion.identity);

The above code chooses a random position that’s visible to the camera and places a new cat there. Specifically:

1. The camera’s current position and size define the visible part of the scene. You use this information to calculate the x and y limits within which you want to place a new cat. This calculation does not place cats too close to the top, bottom, or far left edges of the screen. See the image that follows to help visualize the math involved.
2. You create a new position using catPrefab‘s z position (so all cats appear at the same z-depth), and random values for x and y. These random values are chosen within the area shown in the image that follows, which is slightly smaller than the visible area of the scene.

3. You call Instantiate to create an instance of catPrefab placed in the scene at the position defined by catPos. You pass Quaternion.identity as the new object’s rotation because you don’t want the new object to be rotated at all. Instead, the cat’s rotation will be set by the spawn animation you made in Part 2 of this tutorial series.

   Note: This makes all cats face the same direction when they spawn. If you wanted to mix it up, you could pass to Instantiate a random rotation around the z axis instead of using the identity matrix. However, be advised that this won’t actually work until after you’ve made some changes you’ll read about later in this tutorial.

Cat spawn area calculation.

Save the file (File\Save) and switch back to Unity.

You no longer need the cat in the scene because your factory will create them at runtime. Right-click cat in the Hierarchy and choose Delete from the popup menu that appears, as shown below:

Select Kitten Factory in the Hierarchy. Inside the Inspector, click the small circle/target icon on the right of the Kitty Creator (Script) component’s Cat Prefab field, shown below:

Inside the Select GameObject dialog that appears, choose cat from the Assets tab, as shown in the following image:

Kitten Factory now looks like this in the Inspector:

Don’t worry if your Kitten Factory doesn’t have the same Transform values as those shown here. Kitten Factory only exists to hold the Kitty Creator script component. It has no visual component and as such, it’s Transform values are meaningless.

Run the scene again and watch as everywhere you look, the very beach itself appears to be coughing up adorable fur balls.

Photo of spawning cats, because the GIFs weren’t cooperating.

However, there’s a problem. As you play, notice how a massive list of cats slowly builds up in the Hierarchy, shown below:

This won’t do. If your game lasts long enough, this sort of logic will bring it crashing to a halt. You’ll need to remove cats as they go off screen.

Open CatController.cs in MonoDevelop and add the following method to CatController:

void OnBecameInvisible() {
  Destroy( gameObject ); 
}

This simply calls Destroy to destroy gameObject. All MonoBehaviour scripts, such as CatController, have access to gameObject, which points to the GameObject that holds the script. Although this method doesn’t show it, it is safe to execute other code in a method after calling Destroy because Unity doesn’t actually destroy the object right away.

Save the file (File\Save) and switch back to Unity.

Run the scene again. As was mentioned in Part 3, OnBecameInvisible only gets called once an object is out of sight of all cameras, so be sure the Scene view is not visible while testing this bit.

Now, no matter how long you play, the Hierarchy never contains more than a few cats. Specifically, it contains the same number of objects as there are cats visible in the scene, as shown below:

After running for a minute, Hierarchy still only contains the visible cats

Ok, you’ve got a beach filling up with cats and a zombie walking around looking to party. I think you know what time it is.

Conga Time!

If you’ve been following along with this tutorial series since Part 1, you’ve probably started wondering why the heck this game is even called Zombie Conga.

It is time.

When the zombie collides with a cat, you’ll add that cat to the conga line. However, you’ll want to handle enemy collisions differently. In order to tell the difference, you’ll assign specific tags to each of them.

Using Tags to Identify Objects

Unity allows you to assign a string to any GameObject, called a tag. Newly created projects include a few default tags, like MainCamera and Player, but you are free to add any tags that you’d like.

In Zombie Conga, you could get away with only one tag, because there are only two types of objects with which the zombie can collide. For example, you could add a tag to the cats and then assume if the zombie collides with an object that is missing that tag, it must be an enemy. However, shortcuts like that are a good way to cause bugs when you later decide to change something about your game.

To make your code easier to understand and more maintainable, you’ll create two tags: cat and enemy.

Choose Edit\Project Settings\Tags and Layers from Unity’s menu. The Inspector now shows the Tags & Layers editor. If it’s not already open, expand the Tags list by clicking the triangle to the left of its name, as shown in the following image:

Type cat in the field labeled Element 0. As soon as you start typing, Unity adds a new tag field labeled Element 1. Your Inspector now looks like this:

Select cat in the Project browser and choose cat from the combo box labeled Tag in the Inspector, like this:

When you were adding the cat tag, you could have added the enemy tag, too. However, I wanted to show you another way to create a tag.

Many times you’ll decide you want to tag an object, only to check the Tag combo box in the Inspector and realize the tag you want doesn’t exist yet. Rather than go through Unity’s Editor menu, you can open the Tags and Layers editor directly from the Tags combo box.

Select enemy in the Hierarchy. In the Inspector, choose Add Tag… from the Tag combo box, as shown below:

Once again, the Inspector now shows the Tags & Layers editor. Inside the Tags section, Type enemy in the field labeled Element 1. The Inspector now looks like the image below:

With the new tag created, select enemy in the Hierarchy and set its Tag to enemy, as shown below:

Now that your objects are tagged, you can identify them in your scripts. To see how, open ZombieController.cs in MonoDevelop and replace the contents of OnTriggerEnter2D with the following code:

if(other.CompareTag("cat")) {
  Debug.Log ("Oops. Stepped on a cat.");
}
else if (other.CompareTag("enemy")) {
  Debug.Log ("Pardon me, ma'am.");
}

You call CompareTag to check if a particular GameObject has the given tag. Only GameObjects can have tags, but calling this method on a Component – like you’re doing here – tests the tag on the Component’s GameObject.

Save the file (File\Save) and switch back to Unity.

Run the scene and you should see the appropriate messages appear in the Console whenever the zombie touches a cat or an enemy.

Now that you know your collisions are set up properly, it’s time to actually make them do something.

Triggering Animations From Scripts

Remember all those animations you made in Parts two and three of this series? The cat starts out bobbing happily, like this:

When the zombie collides with a cat, you want the cat to turn into a zombie cat. The following image shows how you accomplished this in the earlier tutorial by setting the cat’s InConga parameter to true in the Animator window.

Now you want to do the same thing, but from within code. To do that, switch back to CatController.cs in MonoDevelop and add the following method to CatController:

public void JoinConga() {
  collider2D.enabled = false;
  GetComponent<Animator>().SetBool( "InConga", true );
}

The first line disables the cat’s collider. This will keep Unity from sending more than one collision event when the zombie collides with a cat. (Later you’ll solve this problem in a different way for collisions with the enemy.)

The second line sets InConga to true on the cat’s Animator Component. By doing so, you trigger a state transition from the CatWiggle Animation Clip to the CatZombify Animation Clip. You set up this transition using the Animator window in Part 3 of this series.

By the way, notice that you declared JoinConga as public. This lets you call it from other scripts, which is what you’ll do right now.

Save CatController.cs (File\Save) and switch to ZombieController.cs, still in MonoDevelop.

Inside ZombieController, find the following line in OnTriggerEnter2D:

Debug.Log ("Oops. Stepped on a cat.");

And replace it with this line:

other.GetComponent<CatController>().JoinConga();

Now whenever the zombie collides with a cat, it calls JoinConga on the cat’s CatController component.

Save the file (File\Save) and switch back to Unity.

Play the scene and as the zombie walks into the cats, they turn green and start hopping in place. So far, so good.

Nobody wants a bunch of zombie cats scattered across a beach. What you want is for them to join your zombie’s eternal dance, and for that, you need to teach them how to play follow the leader.

Conga Motion

You’ll use a List to keep track of which cats are in the conga line.

Go back to ZombieController.cs in MonoDevelop.

First, add the following at the top of the file with the other using statements.

using System.Collections.Generic;

This using statement is similar to an #import statement in Objective-C. It simply gives this script access to the specified namespace and the types it contains. In this case, you need access to the Generic namespace to declare a List with a specific data type.

Add the following private variable to ZombieController:

private List<Transform> congaLine = new List<Transform>();

congaLine will store Transform objects for the cats in the conga line. You’re storing Transforms instead of GameObjects because you’ll be dealing mostly with the cat’s positions, and if you ever need access to anything else you can get to any part of a GameObject from its Transform, anyway.

Each time the zombie touches a cat, you’ll append the cat’s Transform to congaLine. This means that the first Transform in congaLine will represent the cat right behind the zombie, the second Transform in congaLine will represent the cat behind the first, and so forth.

To add cats to the conga line, add the following line to OnTriggerEnter2D in ZombieController, just after the line that calls JoinConga:

congaLine.Add( other.transform );

This line simply adds the cat’s Transform to congaLine.

If you were to run the scene right now, you wouldn’t see any difference from before. You’re maintaining a list of cats, but you haven’t written any code to move the cats from their initial positions when they join the conga line. As conga lines go, this one isn’t very festive.

To fix this, open CatController.cs in MonoDevelop.

The code for moving the cats will be similar to what you wrote to move the zombie in
Part 1. Start out by adding the following instance variables to CatController:

private Transform followTarget;
private float moveSpeed; 
private float turnSpeed; 
private bool isZombie;

You’ll use moveSpeed and turnSpeed to control the cat’s rate of motion, the same way you did for the zombie. You only want the cat to move after it becomes a zombie, so you’ll keep track of that with isZombie. Finally followTarget will hold a reference to the character (cat or zombie) in front of this cat in the conga line. You’ll use this to calculate a position toward which to move.

The above variables are all private, so you may be wondering how you’ll set them. For the conga line to move convincingly, you’ll base the movement of the cats on the zombie’s movement and turn speeds. As such, you’re going to have the zombie pass this information to each cat during the zombification process.

Inside CatController.cs, replace your implementation of JoinConga with the following code:

//1
public void JoinConga( Transform followTarget, float moveSpeed, float turnSpeed ) {
 
  //2
  this.followTarget = followTarget;
  this.moveSpeed = moveSpeed;
  this.turnSpeed = turnSpeed;
 
  //3
  isZombie = true;
 
  //4
  collider2D.enabled = false;
  GetComponent<Animator>().SetBool( "InConga", true );
}

Here’s a break down of this new version of JoinConga:

1. The method signature now requires a target Transform, a movement speed and a turn speed. Later you’ll change ZombieController to call JoinConga with the appropriate values.
2. These lines store the values passed into the method. Notice the use of this. to differentiate between the cat’s variables and the method’s parameters of the same names.
3. This flags the cat as a zombie. You’ll see why this is important soon.
4. The last two lines are the same ones you had in the previous version of JoinConga.

Now add the following implementation of Update to CatController:

void Update () {
  //1
  if(isZombie)
  {
    //2
    Vector3 currentPosition = transform.position;            
    Vector3 moveDirection = followTarget.position - currentPosition;
 
    //3
    float targetAngle = 
      Mathf.Atan2(moveDirection.y, moveDirection.x) * Mathf.Rad2Deg;
    transform.rotation = Quaternion.Slerp( transform.rotation, 
                                           Quaternion.Euler(0, 0, targetAngle), 
                                           turnSpeed * Time.deltaTime );
 
    //4
    float distanceToTarget = moveDirection.magnitude;
    if (distanceToTarget > 0)
    {
      //5
      if ( distanceToTarget > moveSpeed )
        distanceToTarget = moveSpeed;
 
      //6
      moveDirection.Normalize();
      Vector3 target = moveDirection * distanceToTarget + currentPosition;
      transform.position = 
        Vector3.Lerp(currentPosition, target, moveSpeed * Time.deltaTime);
    }
  }
}

That may look a bit complicated, but most of it is actually the same as what you wrote to move the zombie. Here’s what it does:

1. You don’t want the cat to move until it joins the conga line, but Unity calls Update during every frame that the cat is active in the scene. This check ensures the cat doesn’t move until it’s supposed to.
2. If the cat is in the conga line, this method gets the cat’s current position and calculates the vector from its current position to followTarget‘s position.
3. This code rotates the cat to point in the direction its moving. This is the same code you wrote in ZombieController.cs back in Part 1 of this series.
4. It then checks moveDirection‘s magnitude – which is the vector’s length, for the non-mathies out there – and checks to see if the cat is not currently at the target.
5. This check makes sure that the cat doesn’t move more than moveSpeed per second.
6. Finally, it moves the cat the appropriate distance based on Time.deltaTime. This is basically the same code you wrote in ZombieController.cs in Part 1 of this series.

You’re done with CatController.cs for now, so save the file (File\Save).

Because you changed JoinConga‘s method signature, you need to change the line that calls this method in ZombieController. Switch back to ZombieController.cs in MonoDevelop.

Inside OnTriggerEnter2D, replace the call to JoinConga with the following code:

Transform followTarget = congaLine.Count == 0 ? transform : congaLine[congaLine.Count-1];
other.GetComponent<CatController>().JoinConga( followTarget, moveSpeed, turnSpeed );

That first, tricky-looking line figures out what object should be in front of this cat in the conga line. If congaLine is empty, it assigns the zombie‘s Transform to followTarget. Otherwise, it uses the last item stored in congaLine.

The next line calls JoinConga, this time passing to it the target to follow along with the zombie’s movement and turn speeds.

Save the file (File\Save) and switch back to Unity.

Run the scene and your conga line is finally in place. Sort of. But not really.

When you played the scene, you may have noted the following problems:

1. If any cat in the conga line goes off screen, it gets removed and then Unity starts printing the following exception to the console:
   
2. The motion is too perfect. It’s smooth like a snake, but the animation you defined in CatConga was meant to resemble happy hopping zombie cats, not slippery snake cats. You do know what happy hopping zombie cats look like, don’t you?
3. The cats always point straight to the right, no matter what direction they’re moving. Zombie cats are one thing, but that’s downright spooky.

These issues happen to be listed in the order of effort required to fix them. The first fix is simple, so start with that.

Go back to CatController.cs inside MonoDevelop.

You already added isZombie to keep track of when the cat is a zombie. Add the following line at the beginning of OnBecameVisible to avoid deleting the cat while it’s getting its groove on:

if ( !isZombie )

Save the file (File\Save) and switch back to Unity.

Run the scene again, and now cats in the conga line can safely go off screen and later dance right back into view.

Fixing the Conga Animation

To make it look like the cats are hopping along enjoying their undeath, you’ll need to change the logic slightly. Rather than calculating the target position every frame, each cat will choose a point and then hop to it over the course of one CatConga animation cycle. Then the cat will choose another point and hop to it, and so on.

Switch back to CatController.cs in MonoDevelop and add the following variable to CatController:

private Vector3 targetPosition;

This will store the cat’s current target position. The cat will move until it reaches this position, and then find a new target.

Initialize targetPosition by adding this line to JoinConga:

targetPosition = followTarget.position;

Here you set targetPosition to followTarget‘s current position. This ensures the cat has someplace to move as soon as it joins the conga line.

Replace the line that declares moveDirection in Update with this line:

Vector3 moveDirection = targetPosition - currentPosition;

This simply calculates moveDirection using the stored targetPosition instead of followTarget‘s current position.

Save the file (File\Save) and switch back to Unity.

Run again and bump into some kitty cats. Hmm. There seems to be a problem.

Whenever the zombie hits a cat, that cat heads straight to wherever the last member of the conga line happens to be at the moment of the collision. It then stays right there. Forever.

The problem is that you assign targetPosition when the cat joins the conga line, but you never update it after that! Silly you.

Switch back to CatController.cs in MonoDevelop and add the following method:

void UpdateTargetPosition()
{
  targetPosition = followTarget.position;
}

This method simply updates targetPosition with followTarget‘s current position. Update already looks at targetPosition, so you don’t need to write any other code to send the cat toward the new location.
Save the file (File\Save) and switch back to Unity.

Recall from Part 3 of this tutorial series that Animation Clips can trigger events. You’ll add an event that calls UpdateTargetPosition during the first frame of CatConga, allowing the cats to calculate their next target position before each hop.

However, you may also recall from that tutorial that you can only edit animations for a GameObject in your scene rather than a Prefab in your project. So to create the animation event, you first need to temporarily add a cat back into the scene.

Drag the cat Prefab from the Project browser to the Hierarchy.

Select cat in the Hierarchy and switch to the Animation view (Window\Animation).

Choose CatConga from the clips drop-down menu in the Animation window’s control bar.

Press the Animation view’s Record button to enter recording mode and move the scrubber to frame 0, as shown below:

Click the Add Event button shown below:

Choose UpdateTargetPosition() from the Function combo box in the Edit Animation Event dialog that appears, as shown in the following image, and then close the dialog.

With that set up, your cats will update their target in sync with their animation.

Run the scene again, and now the cats hop along from point to point, as you can see in the sped-up animation below:

Difficult to see in this GIF, but trust me, these cats are hopping.

This works, but the cats are spread out a bit too much. Have these cats ever even been in a conga line?

Switch back to CatController.cs in MonoDevelop.

Inside JoinConga, replace the line that sets this.moveSpeed with the following code:

this.moveSpeed = moveSpeed * 2f;

Here you set the cat’s speed to twice that of the zombie. This will produce a tighter conga line.

Save the file (File\Save) and switch back to Unity.

Run the scene again and you’ll see the conga line looks a little friendlier, as the following sped-up sequence demonstrates:

If you’d like, experiment with different conga styles by multiplying the zombie’s speed by values other than two. The larger the number, the more quickly the cat gets to its target, giving it a more jumpy feeling.

The cats are moving along nicely, except that they refuse to look where they’re going. What gives? Well, that’s just how Unity works and there’s no way around it. Sorry about that. Tutorial done.

Aaaah. I’m just messing with you. There’s an explanation for what’s going on, and a solution!

Making Animations and Scripts Play Nicely Together

Why won’t animated GameObjects respect the changes made to them via scripts? This is a common question, so it’s worth spending some time here to work through the solution.

First, what’s going on? Remember that while the cat hops along in the conga line, it’s playing the CatConga Animation Clip. As you can see in the following image, CatConga adjusts the Scale property in the cat’s Transform:

Important: If you remember only one thing today, make it this next paragraph.

It turns out that if an Animation Clip modifies any aspect of an object’s Transform, it is actually modifying the entire Transform. The cat was pointing to the right when you set up CatConga, so CatConga now ensures that the cat continues to point to the right. Thanks, Unity?

There is a way around this problem, but it’s going to require some refactoring. Basically, you need to make the cat a child of another GameObject. Then, you’ll run the animations on the child, but adjust the parent’s position and rotation.

You’ll need to make a few changes to your code in order to keep it working after you’ve rearranged your objects. Here you’ll go through the process in much the same way you might if you had just encountered this problem in your own project.

First, you need to move the cat Prefab into a parent object.

Create a new empty game object by choosing GameObject\Create Empty in Unity’s menu. Name the new object Cat Carrier.

Inside the Hierarchy, drag cat and release it onto Cat Carrier. I bet that was the least effort you’ve ever expended putting a cat into its carrier. ;]

You’re Hierarchy now looks like this:

When you made the enemy spawn point a child of Main Camera in Unity 4.3 2D Tutorial: Physics and Screen Sizes, you learned that the child’s position defines an offset from its parent’s position.

In the case of the cat, you want the child to be centered on the parent, so setting the parent’s position to (X,Y,Z) essentially places the child at (X,Y,Z).

Therefore, select cat in the Hierarchy and ensure its Transform‘s Position is (0, 0, 0), as shown below:

Likewise, select Cat Carrier in the Hierarchy and ensure its Transform‘s Position is (0, 0, 0) as well. In reality, only its z position matters, but it’s always nice to keep things tidy. (I swear I had no intention of making a Tidy Cat pun right there.)

In order to limit the number of changes you need to make to your code, you’ll move CatController from cat to Cat Carrier.

Select cat in the Hierarchy. Inside the Inspector, click the gear icon in the upper-right of the Cat Controller (Script) component. Select Remove Component from the popup menu that appears, as shown below:

Click Apply at the top of the Inspector to ensure this change makes it back to the Prefab, as shown in the following image:

Select Cat Carrier in the Hierarchy. In the Inspector, click Add Component and choose Scripts\Cat Controller from the menu that appears, as demonstrated below:

Now drag Cat Carrier from the Hierarchy into the Project browser to turn it into a Prefab. Just like when you created the cat Prefab, Cat Carrier’s name turns blue in the Hierarchy to indicate it is now an instance of a Prefab, as shown below:

Select Cat Carrier in the Hierarchy and delete it by choosing Edit\Delete from Unity’s menu.

The Hierarchy now looks like this:

Inside the Project browser, you now have a cat Prefab and a Cat Carrier Prefab, which itself contains a cat Prefab, as shown below:

The two cat Prefabs do not refer to the same asset, and you no longer need the un-parented one. To avoid confusion later, right-click the un-parented cat Prefab and choose Delete from the popup menu, then click Delete in the confirmation dialog that appears, as shown below:

Finally, select Kitten Factory in the Hierarchy. As you can see in the following image, the Kitty Creator (Script) component’s Cat Prefab field now says “Missing (GameObject)”:

That’s because Cat Prefab had been set to the asset you just deleted.

Change the Cat Prefab field in the Kitty Creator (Script) component to use Cat Carrier instead of cat. If you don’t remember how to do that, check out the following spoiler.

Run the scene. At this point, you’ll see exceptions similar to the following in the Console whenever the zombie collides with a cat.

Double-click one of these exceptions inside the Console and you’ll arrive at the relevant line, highlighted in MonoDevelop, as shown below:

The code above was rearranged slightly to better fit the screenshot. Don’t be alarmed.

These exceptions occur because ZombieController looks for a CatController component on the GameObject with which it collides, but that component now resides on the cat’s parent, Cat Carrier, rather than the cat itself.

Replace the line highlighted in the image above with the following:

other.transform.parent.GetComponent<CatController>().JoinConga( followTarget, moveSpeed, turnSpeed );

You now use the cat’s Transform to access its parent, which is the Cat Carrier. From there, the rest of the line remains unchanged from what you already had.

Save the file (File\Save) and switch back to Unity.

Run the scene. Once again, you see exceptions in the Console when the zombie collides with a cat. This time they complain of a missing component, like this:

Double-click one of these exceptions in the Console to arrive at the relevant line in MonoDevelop. As you can see, this time the problem is in CatController.cs:

Inside JoinConga, you attempt to access the object’s Animator component. This no longer works because you moved the script onto Cat Carrier but the Animator is still attached to cat.

You don’t want to move the Animator, so instead you’ll change the code.

Inside CatController.cs, find the following two lines of code in JoinConga:

collider2D.enabled = false;
GetComponent<Animator>().SetBool( "InConga", true );

Replace those lines with the following code:

Transform cat = transform.GetChild(0);
cat.collider2D.enabled = false;
cat.GetComponent<Animator>().SetBool( "InConga", true );

This code simply uses Cat Carrier’s Transform to find its first child – indexed from zero. You know Cat Carrier only has one child, which is cat, so this finds the cat. The code then accesses the cat’s Collider2D and Animator components in otherwise the same way you did before.

Transform cat = transform.FindChild("cat");

Save the file (File\Save) and switch back to Unity.

Run the scene and now when the zombie collides with a cat…you get this error:

This problem is in your Animation Clip, CatConga. Earlier, you added an event at frame zero that would call the cat’s UpdateTargetPosition. However, you’ve moved CatController.cs onto a different object, so this error is telling you that you’re trying to call a method that doesn’t exist on the target object.

Select Cat Carrier in the Project browser and then open the Animation view (Window\Animation). What’s this? There are no Animation Clips!

This actually makes sense. Remember, you added the Animation Clips to cat, not Cat Carrier. In fact, the whole reason you added Cat Carrier was because Unity’s animation system was interfering with your GameObject’s Transform.

Expand Cat Carrier in the Project browser and select cat, then choose CatConga from the clip drop-down menu in the Animation view’s control bar. Mouse-over the animation event marker in the timeline and you’ll see it says Error!:

Double click the animation event marker and…nothing happens. Pop quiz! Why? Check the spoiler below for the answer.

Once you’ve corrected the situation, double click the animation event marker again and the following dialog appears, indicating that UpdateTargetPosition is not supported:

Part 4 of this tutorial series alluded to this problem. Animation Events can only access methods on scripts attached to the object associated with the clip. That means you’ll need to add a new script to cat.

Select cat in the Hierarchy and add a new C# script named CatUpdater.cs.

Open CatUpdater.cs in MonoDevelop and replace its contents with the following code:

using UnityEngine;
 
public class CatUpdater : MonoBehaviour {
 
  private CatController catController;
 
  // Use this for initialization
  void Start () {
    catController = transform.parent.GetComponent<CatController>();  
  }
 
  void UpdateTargetPosition()
  {
    catController.UpdateTargetPosition();
  }
}

This script includes a method named UpdateTargetPosition that simply calls the identically named method on the CatController component in the cat’s parent. To avoid repeatedly getting the CatController component, the script finds the component in Start and stores a reference to it in catController.

Save the file (File\Save). However, instead of switching back to Unity, open CatController.cs in MonoDevelop.

You called CatController‘s UpdateTargetPosition from CatUpdater, but UpdateTargetPosition is not a public method. If you went back to Unity now you’d get an error claiming the method is ‘inaccessible due to its protection level’.

Inside CatController.cs, add public to the beginning of UpdateTargetPosition‘s declaration, as shown below:

public void UpdateTargetPosition()

Save the file (File\Save) and switch back to Unity.

Before moving on, you should verify that your animation events are set up correctly. Select cat in the Project browser and choose CatConga from the clip drop-down menu in the Animation view’s control bar. Mouse-over the animation event marker in the timeline and you’ll see it says UpdateTargetPosition():

With cat still selected in the Hierarchy, click Apply in the Inspector to make sure the Prefab includes the script you just added. Then delete Cat Carrier from the scene by right-clicking it in the Hierarchy and choosing Delete from the popup menu.

Run the scene and you, the zombie and the cats can all finally have a dance party.

Now, the zombie can collect cats in his conga line, but the old ladies have no way to defend against this undead uprising. Time to give those ladies a fighting chance!

Handling Enemy Contact

In Zombie Conga, the player’s goal is to gather a certain number of cats into its conga line before colliding with some number of enemies. Or, that will be the goal once you’ve finished this tutorial.

To make it harder to build the conga line, you’ll remove some cats from the line every time an enemy touches the zombie.

To do so, first open CatController.cs in MonoDevelop and add the following method to the class:

public void ExitConga()
{
  Vector3 cameraPos = Camera.main.transform.position;
  targetPosition = new Vector3(cameraPos.x + Random.Range(-1.5f,1.5f),
                               cameraPos.y + Random.Range(-1.5f,1.5f),
                               followTarget.position.z);
 
  Transform cat = transform.GetChild(0);
  cat.GetComponent<Animator>().SetBool("InConga", false);
}

The first two lines above assign targetPosition a random position in the vicinity of the camera’s position, which is the center of the screen. The code you already added to Update will automatically move the cat toward this new position.

The next two lines get the cat from inside the Cat Carrier and disable its Animator‘s InConga flag. Remember from Unity 4.3 2D Tutorial: Animation Controllers, that you need to set InConga to false in the Animator in order to move the animation out of the CatConga state. Doing so will trigger the cat to play the CatDisappear animation clip.

Save the file (File\Save).

You maintain the conga line in ZombieController, so that’s where you’ll add a call to ExitConga. Open ZombieController.cs in MonoDevelop now.

Inside the class, find the following line in OnTriggerEnter2D:

Debug.Log ("Pardon me, ma'am.");

And replace it with this code:

for( int i = 0; i < 2 && congaLine.Count > 0; i++ )
{
  int lastIdx = congaLine.Count-1;
  Transform cat = congaLine[ lastIdx ];
  congaLine.RemoveAt(lastIdx);
  cat.parent.GetComponent<CatController>().ExitConga();
}

This for loop may look a little strange, but it’s really not doing much. If there are any cats in the conga line, this loop removes the last two of them, or the last one if there is only one cat in the line.

After removing the cat’s Transform from congaLine, it calls ExitConga, which you just added to CatController.

Save the file (File\Save) and switch back to Unity.

Run the scene and get some cats in your conga line, then crash into an old lady and see what happens!

Unfortunately, when you crashed into the old lady, you crashed right into two more problems.

First, if the conga line had more than two cats when the zombie collided with the enemy, you probably saw every cat spin out of the line. You can see that in the previous animation.

The second problem is yet another exception in the Console:

No receiver, eh? Before fixing the first problem, try debugging the exception yourself. You’ve already solved an identical problem earlier in this tutorial. If you get stuck, check out the following spoiler.

void GrantCatTheSweetReleaseOfDeath()
{
  catController.GrantCatTheSweetReleaseOfDeath();
}

public void GrantCatTheSweetReleaseOfDeath()

void GrantCatTheSweetReleaseOfDeath()
{
  Destroy( transform.parent.gameObject );
}

With the exception fixed, it’s time to figure out how to keep the enemy from destroying your entire conga line with just one hit.

First, what’s going on? As you saw in Unity 4.3 2D Tutorial: Physics and Screen Sizes, Unity is reporting quite a few collisions as the zombie walks through the enemy.

For the cats, you solved this problem by disabling the cat’s collider when handling the first event. To eliminate redundant enemy collisions, you’ll do something a bit fancier.

You’re going to add a period of immunity after the initial collision. This is common in many games, where contacting an enemy reduces health or points and then blinks the player’s sprite for a second or two, during which time the player can take no damage. And yes, you’re going to make the zombie blink, too!

Open ZombieController.cs in MonoDevelop and add the following variables to the class:

private bool isInvincible = false;
private float timeSpentInvincible;

As their names imply, you’ll use isInvincible to indicate when the zombie is invincible, and timeSpentInvincible to keep track of for how long the zombie has been invincible.

Inside OnTriggerEnter2D, find the following line:

else if(other.CompareTag("enemy")) {

and replace it with this code:

else if(!isInvincible && other.CompareTag("enemy")) {
  isInvincible = true;
  timeSpentInvincible = 0;

This change to the if condition causes the zombie to ignore enemy collisions while the zombie is invincible. If a collision occurs while the zombie is not invincible, it sets isInvincible to true and resets timeSpentInvincible to zero.

To let the player know they have a moment of invincibility, as well as to indicate that they touched an enemy, you’ll blink the zombie sprite.

Add the following code to the end of Update:

//1
if (isInvincible)
{
  //2
  timeSpentInvincible += Time.deltaTime;
 
  //3
  if (timeSpentInvincible < 3f) {
    float remainder = timeSpentInvincible % .3f;
    renderer.enabled = remainder > .15f; 
  }
  //4
  else {
    renderer.enabled = true;
    isInvincible = false;
  }
}

Here’s what this code does:

1. The first if check verifies that the zombie is currently invincible, because that’s the only time you want to execute the rest of this logic.
2. If so, it adds Time.deltaTime to timeSpentInvincible to keep track of the total time the zombie has been invincible. Remember that you reset timeSpentInvincible to zero when the collision first occurs.
3. It then checks if the collision occurred less than three seconds ago. If so, it enables or disables the zombie’s renderer based on the value of timeSpentInvincible. This bit of math will blink the zombie on and off about three times per second.
4. Finally, if it’s been at least three seconds since the collision, the code enables the zombie’s renderer and sets isInvincible to false. You enable the renderer here to ensure the zombie doesn’t accidentally stay invisible.

Save the file (File\Save) and switch back to Unity.

Run now and the conga line grows and shrinks as it should.

Ok, the conga line works, but without a way to win or lose, it’s still not a game. (That’s right, I said it. If you can’t win or lose, it’s not a game!) Time to fix that.

Winning and Losing

Players of Zombie Conga win the game when they build a long enough conga line. You maintain the conga in ZombieController.cs, so open that file in MonoDevelop.

Add the following code to OnTriggerEnter2D, inside the block that handles cat collisions, just after the line that adds other.transform to congaLine:

if (congaLine.Count >= 5) {
  Debug.Log("You won!");
  Application.LoadLevel("CongaScene");
}

This code checks if the conga line contains at least five cats. If so, it logs a win message to the Console and then calls Application.LoadLevel to reload the current scene, named CongaScene. While it includes “level” in its name, LoadLevel actually loads Unity scenes. See the Application class documentation to find out more about what this class has to offer.

Don’t worry – reloading CongaScene is only for testing. You’ll change this later to show a win screen instead.

Save the file (File\Save) and switch back to Unity.

Play the scene. Once you get five cats in your conga line, you’ll see “You won!” in the Console and the scene will reset to its start state.

Winning isn’t as satisfying if there’s no way to lose, so take care of that now.

Switch back to ZombieController.cs in MonoDevelop and add the following variable to the class:

private int lives = 3;

This value keeps track of how many lives the zombie has remaining. When this reaches zero, it’s Game Over.

Add the following code to OnTriggerEnter2D, inside but at the end of the block of code that handles collisions with enemy objects:

if (--lives <= 0) {
  Debug.Log("You lost!");
  Application.LoadLevel("CongaScene");
}

This code subtracts one from lives and then checks to see if there are any lives left. If not, it logs a message to the Console and then calls Application.LoadLevel to reload the current scene. Once again, this is only for testing – you’ll change it later to show a lose screen.

Save the file (File\Save) and switch back to Unity.

Play the scene now and hit three old ladies. No, don’t do that. Play the game, and in the game, let three old ladies hit you. You’ll see “You lost!” in the Console and the scene will reset to its start state.

And that’s it! Zombie Conga works, even if it is a bit unpolished. In the remainder of this tutorial, you’ll add a few finishing touches, including additional scenes, some background music and a sound effect or two.

Additional Scenes

To finish up the game, you’ll add the following three screens to Zombie Conga:

A splash screen to show when the game launches.

A win screen to reward the player for a job well done.

A lose screen to express your disappointment with the player’s lack of skill.

So just draw those images and when you’re done, come back and learn how to add them to the game. Shouldn’t take but a minute.

Ok, I really don’t have time to wait for you to do your doodles. Just download and unzip these resources so we can get going.

The file you downloaded includes two folders: Audio and Backgrounds. Ignore Audio for now and look at Backgrounds, which contains a few images created by Mike Berg. You’ll use these images as backgrounds for three new scenes.

You first need to import these new images as Sprites. You learned how to do this way back in Part 1 of this series, so this would be a good time to see how much you remember.

Try creating Sprite assets from the images in Backgrounds. To keep things organized, add these new assets in your project’s Sprites folder. Also, remember to tweak their settings if necessary to ensure they look good!

You should now have three new Sprites in the Project browser, named StartUp, YouWin and YouLose, as shown below:

Before creating your new scenes, make sure you don’t lose anything in the current scene. Save CongaScene by choosing File\Save Scene in Unity’s menu.

Choose File\New Scene to create a new scene. This brings up an empty scene with a Main Camera.

Choose File\Save Scene as…, name the new scene LaunchScene and save it inside Assets\Scenes.

Add a StartUp Sprite to the scene, positioned at (0,0,0). You should have no problem doing this yourself, but the following spoiler will help if you’ve forgotten how.

With the background in the scene, see if you can set up LaunchScene‘s camera yourself. When you’re finished, your Game view should show the entire StartUp image, like this:

If you need any help, check the following spoiler.

At this point, you’ve set up LaunchScene. Play the scene and you should see the following:

Be honest: how long did you stare at it waiting for something to happen?

You want Zombie Conga to start out showing this screen, but then load CongaScene so the user can actually play. To do that, you’ll add a simple script that waits a few seconds and then loads the next scene.

Create a new C# script named StartGame and add it to Main Camera.

Open StartGame.cs in MonoDevelop and replace its contents with the following code:

using UnityEngine;
 
public class StartGame : MonoBehaviour {
 
  // Use this for initialization
  void Start () {
    Invoke("LoadLevel", 3f);
  }
 
  void LoadLevel() {
    Application.LoadLevel("CongaScene");
  }
}

This script uses two techniques you saw earlier. Inside Start, it calls Invoke to execute LoadLevel after a three second delay. In LoadLevel, it calls Application.LoadLevel to load CongaScene.

Save the file (File\Save) and switch back to Unity.

Run the scene. After three seconds, you’ll see the following exception in the Console.

This exception occurs because Unity doesn’t know about your other scene. Why not? It’s right there in the Project browser, isn’t it?

Yes, it’s there, but Unity doesn’t assume that you want to include everything in your project in your final build. This is a good thing, because you’ll surely create many more assets than you ever use in your final game.

In order to tell Unity which scenes are part of the game, you need to add them to the build.

Inside Unity’s menu, choose File\Build Settings… to bring up the Build Settings dialog, shown below:

The lower left of the dialog includes the different platforms for which you can build. Don’t worry if your list doesn’t look the same as the above image.

The current platform for which you’ve been building – most likely, PC, Mac & Linux Standalone – should be highlighted and include a Unity logo to indicate it’s selected.

To add scenes to the build, simply drag them from the Project browser into the upper area of Build Settings, labeled Scenes In Build. Add both LaunchScene and CongaScene to the build, as shown below:

As you can see in the following image, levels in the Scenes In Build list are numbered from zero. You can drag levels to rearrange their order, and when running your game outside of Unity, your player starts at level zero. You can also use index numbers rather than scene names when calling LoadLevel.

Close the dialog and run the scene. This time, the startup screen appears and then the game play starts after three seconds.

You should now create and add to your game two more scenes: WinScene and LoseScene. These should each display the appropriate background image – YouWin and YouLose, respectively. After three seconds, they should reload CongaScene.

Simply repeat the steps you took to create LaunchScene. The difference is that for these two scenes, you can reuse StartGame.cs rather than creating a new script. Or, check out the following spoiler if you’d like a shortcut.

After creating your new scenes, add them to the build. Your Build Settings should now look similar to this, although the order of your scenes after LaunchScene really doesn’t matter.

Once these scenes are in place, you need to change your code to launch them rather than print messages to the Console.

Open ZombieController.cs in MonoDevelop.

Inside OnTriggerEnter2D, find the following lines:

Debug.Log("You won!");
Application.LoadLevel("CongaScene");

And replace them with this line:

Application.LoadLevel("WinScene");

This will load WinScene instead of just reloading CongaScene.

Now fix OnTriggerEnter2D so it loads LoseScene at the appropriate time.

Debug.Log("You lost!");
Application.LoadLevel("CongaScene");

Application.LoadLevel("LoseScene");

Save the file (File\Save) and switch back to Unity.

At this point, you can play the game in its entirety. For the best experience, switch to LaunchScene before playing. After start up, play a few rounds, making sure you win some and you lose some. Hmm. That’s sounds pretty cool – I should trademark it.

With all your scenes in place, it’s time to get some tunes up in this tut!

Audio

Find the folder named Audio in the resources you downloaded earlier. This folder contains music and sound effects made by Vinnie Prabhu for our book, iOS Games by Tutorials.

Add all five files to your project by dragging Audio directly into the Project browser.

Open the Audio folder in the Project browser to reveal your new sound assets, as shown below:

Select congaMusic in the Project browser to reveal the sound’s Import Settings in the Inspector, shown in the following image:

Notice in the image above that Audio Format is disabled. That’s because Unity will not let you choose the format when importing compressed audio clips.

Unity can import .aif, .wav, .mp3 and .ogg files. For .aif and .wav files, Unity lets you choose between using the native format or compressing into an appropriate format for the build target. However, Unity automatically re-encodes .mp3 and .ogg files if necessary to better suit the destination. For example, .ogg files are re-encoded as .mp3 files for iOS.

There is a slight loss of sound quality if Unity needs to convert from one compressed format to another. For that reason, Unity’s documentation recommends that you import audio files in lossless formats like .aif and .wav and let Unity encode them to .mp3 or .ogg as needed. You’re using an .mp3 file here because I didn’t have a lossless version and this one sounds good enough.

For each of the five audio files you imported, you’ll leave most settings with their default values. However, you won’t be placing your sounds in 3D space, so uncheck 3D Sound, as shown below, and then click Apply:

When you hit Apply, Unity reimports the sound clip. If this takes a while, you’ll see a dialog that shows the encoding progress, as shown below:

Disable 3D sound for each of the other four sounds files: hitCat, hitEnemy, loseMusic and winMusic.

With your sound files imported properly, you’ll first add sounds to CongaScene. Save the current scene if necessary and open CongaScene.

To play a sound in Unity, you need to add an Audio Source component to a GameObject. You can add such a component to any GameObject, but you’ll use the camera for Zombie Conga’s background music.

Select Main Camera in the Hierarchy. Add an audio source from Unity’s menu by choosing Component\Audio\Audio Source. The Inspector now displays the Audio Source settings shown below:

Just like how you’ve set assets in fields before, click the small circle/target icon on the right of the Audio Source component’s Audio Clip field to bring up the Select AudioClip dialog. Select congaMusic from the Assets tab, as shown in the following image:

Note that Play On Awake is already checked in the Audio Source component. This instructs Unity to begin playing this audio clip immediately when the scene loads.

This background music should continue to play until the player wins or loses, so check the box labeled Loop, shown below:

This instructs Unity to restart the audio clip when the clip reaches its end.

Play the scene and you’ll finally hear what the cats have been dancing to all this time.

Artist’s rendering of musical good times.

Before you worry about the win and lose scenes, you’ll spice up the gameplay with a few collision sound effects.

Open ZombieController.cs in MonoDevelop and add the following variables to ZombieController:

public AudioClip enemyContactSound;
public AudioClip catContactSound;

These variables store the AudioClips you’ll play during specific collisions. You’ll assign them later in the editor.

In OnTriggerEnter2D, add the following line inside the block of code that runs when the zombie collides with a cat:

audio.PlayOneShot(catContactSound);

This calls PlayOneShot on audio to play the audio clip stored in catContactSound. But where did audio come from?

Every MonoBehaviour has access to certain built-in fields, like the transform field you’ve been accessing throughout this tutorial series. If a GameObject contains an AudioSource component, you can access it through the built-in audio field.

Now add the following line to OnTriggerEnter2D, inside the block of code that runs when the zombie collides with an enemy:

audio.PlayOneShot(enemyContactSound);

This code plays enemyContactSound when the zombie collides with an enemy.

Save the file (File\Save) and switch back to Unity.

Select zombie in the Hierarchy. The Zombie Controller (Script) component now contains two new fields in the Inspector:

Set Enemy Contact Sound to the hitEnemy sound asset. Then set Cat Contact Sound to hitCat. If you don’t remember how to set these audio clips, review the steps you used earlier to set congaMusic in the camera’s Audio Source.

Play the scene now and run the zombie into an enemy or a cat. Oops. Unity prints out the following exception each time the zombie collides with someone, letting you know there’s a component missing:

The exception points out the problem and helpfully suggests the solution. ZombieController tried to access the zombie’s AudioSource via its audio field, but zombie doesn’t currently have an Audio Source.

Correct this now by adding an Audio Source component to zombie. Select zombie in the Hierarchy and choose Component\Audio\Audio Source in Unity’s menu.

The Audio Source’s default settings are fine. You won’t set an Audio Clip on it because ZombieController provides the clips when it plays them.

Play the scene again and listen as the beach comes to life with Realistic Sound Effects Technology!

Now add some background music to WinScene and LoseScene on your own. Make WinScene play winMusic and make LoseScene play loseMusic. In both cases, make the sound play as soon as the scene starts and do not let it loop.

And that’s it! To get the full Zombie Conga experience, play LaunchScene and then enjoy the music as it kicks in when the gameplay starts. If you win, you’ll be rewarded with WinScene‘s fun image and music, but if you lose you’ll see a sad zombie listening to a sad tune. Enjoy!

Who’s the big winner? You are!

Where to Go From Here?

If you’ve stuck it out through this entire series, congratulations! You’ve made a simple game in Unity, and hopefully along the way you’ve learned a lot about Unity’s new 2D features.

You can download the complete Zombie Conga project here.

To learn more about working with Unity, 2D or otherwise, I recommend taking a look through Unity’s Live Training Archive. Also, take a look through Unity’s documentation, which was recently updated with the release of Unity 4.5.

I hope you enjoyed this series. As usual, please leave any feedback or ask questions in the Comments sections. Or contact me on Twitter.

Now go play some Zombie Conga. And when you’re done playing, go make a game!

Unity 4.3 2D Tutorial: Scrolling, Scenes and Sounds is a post from: Ray Wenderlich

The post Unity 4.3 2D Tutorial: Scrolling, Scenes and Sounds appeared first on Ray Wenderlich.

Challenge

Your challenge is to make a class named Animal that:

• Has a single string property called name
• Has an initializer that takes a string name parameter and sets the property appropriately
• Has an empty method named speak()

Then subclass Animal for Dog, Cat, and Fox so that this code:

let animals = [Dog(), Cat(), Fox()]
for animal in animals {
  animal.speak()
}

Has this output:

Woof!
Meow!
Ring-ding-ding-ding-dingeringeding!

Download demo

Download challenge finished

Video Tutorial: Introduction to Swift Part 7: Classes is a post from: Ray Wenderlich

The post Video Tutorial: Introduction to Swift Part 7: Classes appeared first on Ray Wenderlich.

Learn about image processing in iOS and create cool special effects!

Imagine you just took the best selfie of your life. It’s spectacular, it’s magnificent and worthy your upcoming feature in Wired. You’re going to get thousands of likes, up-votes, karma and re-tweets, because you’re absolutely fabulous. Now if only you could do something to this photo to shoot it through the stratosphere…

That’s what image processing is all about! With image processing, you can apply fancy effects to photos such as modifying colors, blending other images on top, and much more.

In this two-part tutorial series, you’re first going to get a basic understanding of image processing. Then, you’ll make a simple app that implements a “spooky image filter” and makes use of four popular image processing methods:

1. Raw bitmap modification
2. Using the Core Graphics Library
3. Using the Core Image Library
4. Using the 3rd-party GPUImage library

In this first segment of this image processing tutorial, you’ll focus on raw bitmap modification. Once you understand this basic process, you’ll be able to understand what happens with other frameworks. In the second part of the series, you’ll learn about three other methods to make your selfie, and other images, look remarkable.

This tutorial assumes you have basic knowledge of iOS and Objective-C, but you don’t need any previous image processing knowledge.

Getting Started

Before you start coding, it’s important to understand several concepts that relate to image processing. So, sit back, relax and soak up this brief and painless discussion about the inner workings of images.

First things first, meet your new friend who will join you through tutorial…………drumroll……Ghosty!

Boo!

Now, don’t be afraid, Ghosty isn’t a real ghost. In fact, he’s an image. When you break him down, he’s really just a bunch of ones and zeroes. That’s far less frightening than working with an undead subject.

What’s an Image?

An image is a collection of pixels, and each one is assigned a single, specific color. Images are usually arranged as arrays and you can picture them as 2-dimensional arrays.

Here is a much smaller version of Ghosty, enlarged:

The little “squares” in the image are pixels, and each one shows only one color. When hundreds and thousands of pixels come together, they create a digital image.

How are Colors Represented in Bytes?

There are numerous ways to represent a color. The method that you’re going to use in this tutorial is probably the easiest to grasp: 32-bit RGBA.

As the name entails, 32-bit RGBA stores a color as 32 bits, or 4 bytes. Each byte stores a component, or channel. The four channels are:

• R for red
• G for green
• B for blue
• A for alpha.

As you probably already know, red, green and blue are a set of primary colors for digital formats. You can create almost any color you want from mixing them the right way.

Since you’re using 8-bits for each channel, the total amount of opaque colors you can actually create by using different RGB values in 32-bit RGBA is 256 * 256 * 256, which is approximately 17 million colors. Whoa man, that’s a lot of color!

The alpha channel is quite different from the others. You can think of it as transparency, just like the alpha property of UIView.

The alpha of a color doesn’t really mean anything unless there’s a color behind it; its main job is to tell the graphics processor how transparent the pixel is, and thus, how much of the color beneath it should show through.

You’ll get to dive into depth when you work through the section on blending.

To conclude this section, an image is a collection of pixels, and each pixel is encoded to display a single color. For this lesson, you’ll work with 32-bit RGBA.

So, now you know the basics of representing colors in bytes. There are still a three more concepts to cover before you dig in and start coding.

Color Spaces

The RGB method to represent colors is an example of a colorspace. It’s one of many methods that stores colors. Another colorspace is grayscale.

As the name entails, all images in the grayscale colorspace are black and white, and you only need to save one value to describe its color.

The downside of RGB is that it’s not very intuitive for humans to visualize.

Red: 0 Green:104 Blue:55

For example, what color do you think an RGB of [0, 104, 55] produces?

Taking an educated guess, you might say a teal or skyblue-ish color, which is completely wrong. Turns out it’s the dark green you see on this website!

Two other more popular color spaces are HSV and YUV.

HSV, which stand for Hue, Saturation and Value, is a much more intuitive way to describe colors. You can think of the parts this way:

• Hue as “Color”
• Saturation as “How full is this color”
• Value, as the “Brightness”

In this color space, if you found yourself looking at unknown HSV values, it’s much easier to imagine what the color looks like based on the values.

The difference between RGB and HSV are pretty easy to understand, at least once you look at this image:

Image modified from work by SharkD under the Creative Commons Attribution-Share Alike 3.0 Unported license

YUV is another popular color space, because it’s what TVs use.

Television signals came into the world with one channel, Grayscale. Later, two more channels “came into the picture” when color film emerged. Since you’re not going to tinker with YUV in this tutorial, you might want to do some more research on YUV and other color spaces to round out your knowledge. :]

Coordinate Systems

Since an image is a 2D map of pixels, the origin needs specification. Usually it’s the top-left corner of the image, with the y-axis pointing downwards, or at the bottom left, with the y-axis pointing upwards.

There’s no “correct” coordinate system, and Apple uses both in different places.

Currently, UIImage and UIView use the top-left corner as the origin and Core Image and Core Graphics use the bottom-left. This is important to remember so you know where to find the bug when Core Image returns an “upside down” image.

Image Compression

This is the last concept to discuss before coding! With raw images, each pixel is stored individually in memory.

If you do the math on an 8 megapixel image, it would take 8 * 10^6 pixels * 4 bytes/pixel = 32 Megabytes to store! Talk about a data hog!

This is where JPEG, PNG and other image formats come into play. These are compression formats for images.

When GPUs render images, they decompress images to their original size, which can take a lot of memory. If your app takes up too much memory, it could be terminated by the OS (which looks to the user like a crash). So be sure to test your app with large images!

I’m dying for some action

Looking at Pixels

Now that you have a basic understanding of the inner workings of images, you’re ready to dive into coding. Today you’re going to work through developing a selfie-revolutionizing app called SpookCam, the app that puts a little Ghosty in your selfie!

Download the starter kit, open the project in Xcode and build and run. On your phone, you should see tiny Ghosty:

In the console, you should see an output like this:

Currently the app is loading the tiny version of Ghosty from the bundle, converting it into a pixel buffer and printing out the brightness of each pixel to the log.

What’s the brightness? It’s simply the average of the red, green and blue components.

Pretty neat. Notice how the outer pixels have a brightness of 0, which means they should be black. However, since their alpha value is 0, they are actually transparent. To verify this, try setting imageView background color to red, then build and run gain.

Now take a quick glance through the code. You’ll notice ViewController.m uses UIImagePickerController to pick images from the album or to take pictures with the camera.

After it selects an image, it calls -setupWithImage:. In this case, it outputs the brightness of each pixel to the log. Locate logPixelsOfImage: inside of ViewController.m, and review the first part of the method:

// 1.
CGImageRef inputCGImage = [image CGImage];
NSUInteger width = CGImageGetWidth(inputCGImage);
NSUInteger height = CGImageGetHeight(inputCGImage);
 
// 2.
NSUInteger bytesPerPixel = 4;
NSUInteger bytesPerRow = bytesPerPixel * width;
NSUInteger bitsPerComponent = 8;
 
UInt32 * pixels;
pixels = (UInt32 *) calloc(height * width, sizeof(UInt32));
 
// 3.
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = CGBitmapContextCreate(pixels, width, height, bitsPerComponent, bytesPerRow, colorSpace, kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);
 
// 4.
CGContextDrawImage(context, CGRectMake(0, 0, width, height), inputCGImage);
 
// 5. Cleanup
CGColorSpaceRelease(colorSpace);
CGContextRelease(context);

Now, a section-by-section recap:

1. Section 1: Convert the UIImage to a CGImage object, which is needed for the Core Graphics calls. Also, get the image’s width and height.
2. Section 2: For the 32-bit RGBA color space you’re working in, you hardcode the parameters bytesPerPixel and bitsPerComponent, then calculate bytesPerRow of the image. Finally, you allocate an array pixels to store the pixel data.
3. Section 3: Create an RGB CGColorSpace and a CGBitmapContext, passing in the pixels pointer as the buffer to store the pixel data this context holds. You’ll explore Core Graphics in more depth in a section below.
4. Section 4: Draw the input image into the context. This populates pixels with the pixel data of image in the format you specified when creating context.
5. Section 5: Cleanup colorSpace and context.

At this point, pixels holds the raw pixel data of image. The next few lines iterate through pixels and print out the brightness:

// 1.
#define Mask8(x) ( (x) & 0xFF )
#define R(x) ( Mask8(x) )
#define G(x) ( Mask8(x >> 8 ) )
#define B(x) ( Mask8(x >> 16) )
 
NSLog(@"Brightness of image:");
// 2.
UInt32 * currentPixel = pixels;
for (NSUInteger j = 0; j < height; j++) {
  for (NSUInteger i = 0; i < width; i++) {
    // 3.
    UInt32 color = *currentPixel;
    printf("%3.0f ", (R(color)+G(color)+B(color))/3.0);
    // 4.
    currentPixel++;
  }
  printf("\n");
}

Here’s what’s going on:

1. Define some macros to simplify the task of working with 32-bit pixels. To access the red component, you mask out the first 8 bits. To access the others, you perform a bit-shift and then a mask.
2. Get a pointer of the first pixel and start 2 for loops to iterate through the pixels. This could also be done with a single for loop iterating from 0 to width * height, but it’s easier to reason about an image that has two dimensions.
3. Get the color of the current pixel by dereferencing currentPixel and log the brightness of the pixel.
4. Increment currentPixel to move on to the next pixel. If you’re rusty on pointer arithmetic, just remember this: Since currentPixel is a pointer to UInt32, when you add 1 to the pointer, it moves forward by 4 bytes (32-bits), to bring you to the next pixel.

At this point, the starter project is simply logging raw image data, but not modifying anything yet. That’s your job for the rest of the tutorial!

SpookCam – Raw Bitmap Modification

Of the four methods explored in this series, you’ll spend the most time on this one because it covers the “first principles” of image processing. Mastering this method will allow you to understand what all the other libraries do.

In this method, you’ll loop through each pixel, as the starter kit already does, but this time assign new values to each pixel.

This advantage of this method is that it’s easy to implement and understand; the disadvantage is that scaling to larger images and effects that are more complicated is less than elegant.

As you see in the starter app, the ImageProcessor class already exists. Hook it up to the main ViewController by replacing -setupWithImage: with the following code in ViewController.m:

- (void)setupWithImage:(UIImage*)image {
  UIImage * fixedImage = [image imageWithFixedOrientation];
  self.workingImage = fixedImage;
 
  // Commence with processing!
  [ImageProcessor sharedProcessor].delegate = self;
  [[ImageProcessor sharedProcessor] processImage:fixedImage];
}

Also comment out the following line of code in -viewDidLoad:

// [self setupWithImage:[UIImage imageNamed:@"ghost_tiny.png"]];

Now take a look at ImageProcessor.m. As you can see, ImageProcessor is a singleton object that calls -processUsingPixels: on an input image, then returns the output through the ImageProcessorDelegate.

-processUsingPixels: is currently a copy of the code you looked at previously that gives you access to the pixels of inputImage. Notice the two extra macros A(x) and RGBAMake(r,g,b,a) that are defined to provide convenience.

Now build and run. Choose an image from your album (or take a photo) and you should see it appear in your view like this:

That looks way too relaxing, time to bring in Ghosty!

Before the return statement in processUsingPixels:, add the following code to get an CGImageRef of Ghosty:

UIImage * ghostImage = [UIImage imageNamed:@"ghost"];
CGImageRef ghostCGImage = [ghostImage CGImage];

Now, do some math to figure out the rect where you want to put Ghosty inside the input image.

CGFloat ghostImageAspectRatio = ghostImage.size.width / ghostImage.size.height;
NSInteger targetGhostWidth = inputWidth * 0.25;
CGSize ghostSize = CGSizeMake(targetGhostWidth, targetGhostWidth / ghostImageAspectRatio);
CGPoint ghostOrigin = CGPointMake(inputWidth * 0.5, inputHeight * 0.2);

This code resizes Ghosty to take up 25% of the input’s width, and places his origin (top-left corner) at ghostOrigin.

The next step is to get the pixel buffer of Ghosty, this time with scaling:

NSUInteger ghostBytesPerRow = bytesPerPixel * ghostSize.width;
UInt32 * ghostPixels = (UInt32 *)calloc(ghostSize.width * ghostSize.height, sizeof(UInt32));
 
CGContextRef ghostContext = CGBitmapContextCreate(ghostPixels, ghostSize.width, ghostSize.height,
                                       bitsPerComponent, ghostBytesPerRow, colorSpace,
                                       kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);
CGContextDrawImage(ghostContext, CGRectMake(0, 0, ghostSize.width, ghostSize.height),ghostCGImage);

This is similar to how you got pixels from inputImage. However, by drawing Ghosty into a smaller size and width, he becomes a little smaller.

Now you’re ready to blend Ghosty into your image, which makes this the perfect time to go over blending.

Okay, back to Ghosty.

As with most bitmap image processing algorithms, you need some for loops to go through all the pixels. However, you only need to loop through the pixels you need to change.

Add this code to the bottom of processUsingPixels:, again right before the return statement:

NSUInteger offsetPixelCountForInput = ghostOrigin.y * inputWidth + ghostOrigin.x;
for (NSUInteger j = 0; j < ghostSize.height; j++) {
  for (NSUInteger i = 0; i < ghostSize.width; i++) {
    UInt32 * inputPixel = inputPixels + j * inputWidth + i + offsetPixelCountForInput;
    UInt32 inputColor = *inputPixel;
 
    UInt32 * ghostPixel = ghostPixels + j * (int)ghostSize.width + i;
    UInt32 ghostColor = *ghostPixel;
 
    // Do some processing here      
  }
}

Notice how you only loop through the number of pixels in Ghosty’s image, and offset the input image by offsetPixelCountForInput. Remember that although you’re reasoning about images as 2-D arrays, in memory they are actually 1-D arrays.

Next, fill in this code after the comment Do some processing here to do the actual blending:

// Blend the ghost with 50% alpha
CGFloat ghostAlpha = 0.5f * (A(ghostColor) / 255.0);
UInt32 newR = R(inputColor) * (1 - ghostAlpha) + R(ghostColor) * ghostAlpha;
UInt32 newG = G(inputColor) * (1 - ghostAlpha) + G(ghostColor) * ghostAlpha;
UInt32 newB = B(inputColor) * (1 - ghostAlpha) + B(ghostColor) * ghostAlpha;
 
// Clamp, not really useful here :p
newR = MAX(0,MIN(255, newR));
newG = MAX(0,MIN(255, newG));
newB = MAX(0,MIN(255, newB));
 
*inputPixel = RGBAMake(newR, newG, newB, A(inputColor));

There are two points to note in this part.

1. You apply 50% alpha to Ghosty by multiplying the alpha of each pixel by 0.5. You then blend with the alpha blend formula previously discussed.
2. The clamping of each color to [0,255] is not required here, since the value will never go out of bounds. However, most algorithms require this clamping to prevent colors from overflowing and giving unexpected outputs.

To test this code, add this code to the bottom of processUsingPixels:, replacing the current return statement:

// Create a new UIImage
CGImageRef newCGImage = CGBitmapContextCreateImage(context);
UIImage * processedImage = [UIImage imageWithCGImage:newCGImage];
 
return processedImage;

This creates a new UIImage from the context and returns it. You’re going to ignore the potential memory leak here for now.

Build and run. You should see Ghosty floating in your image like, well, a ghost:

Good work so far, this app is going viral for sure!

Black and White

One last effect to go. Try implementing the black and white filter yourself. To do this, set each pixel’s red, green and blue components to the average of the three channels in the original, just like how you printed out Ghosty’s brightness in the beginning.

Write this code before the // Create a new UIImage comment you added in the previous step.

Think you got it? Check your code here.

// Convert the image to black and white
for (NSUInteger j = 0; j < inputHeight; j++) {
  for (NSUInteger i = 0; i < inputWidth; i++) {
    UInt32 * currentPixel = inputPixels + (j * inputWidth) + i;
    UInt32 color = *currentPixel;
 
    // Average of RGB = greyscale
    UInt32 averageColor = (R(color) + G(color) + B(color)) / 3.0;
 
    *currentPixel = RGBAMake(averageColor, averageColor, averageColor, A(color));
  }
}

The very last step is to cleanup your memory. ARC cannot manage CGImageRefs and CGContexts for you. Add this to the end of the function before the return statement:

// Cleanup!
 CGColorSpaceRelease(colorSpace);
CGContextRelease(context);
CGContextRelease(ghostContext);
free(inputPixels);
free(ghostPixels);

Build and run. Be prepared to be spooked out by the result:

Where To Go From Here?

Congratulations! You just finished your first image-processing application. You can download a working version of the project at this point here.

That wasn’t too hard, right? You can play around with the code inside the for loops to create your own effects, try to see if you can implement these ones:

• Swap the red and blue channels of the image
• Increase the brightness of the image by 10%
• As a further challenge, try scaling Ghosty using only pixel-based methods. Here are the steps:
  
  1. Create a new CGContext with the target size for Ghosty.
  2. For each pixel in this new Context, calculate which pixel you should copy from in the original image.
  3. For extra coolness, try interpolating between nearby pixels if your calculations for the original coordinate lands in-between pixels. If you interpolate between the four nearest pixels, you have just implemented Bilinear scaling all on your own! What a boss!

If you’ve completed the first project, you should have a pretty good grasp on the basic concepts of image processing. Now you can set out and explore simpler and faster ways to accomplish these same effects.

In the next part of the series, you replace -processUsingPixels: with three new functions that will perform the same task using different libraries. Definitely check it out!

In the meantime, if you have any questions or comments about the series so far, please join the forum discussion below!

Image Processing in iOS Part 1: Raw Bitmap Modification is a post from: Ray Wenderlich

The post Image Processing in iOS Part 1: Raw Bitmap Modification appeared first on Ray Wenderlich.

Learn about image processing in iOS and create cool special effects!

Welcome to part two of this tutorial series about image processing in iOS!

In the first part of the series, you learned how to access and modify the raw pixel values of an image.

In this second and final part of the series, you’ll learn how to perform this same task by using other libraries: Core Graphics, Core Image and GPUImage to be specific. You’ll learn about the pros and cons of each, so that you can make the best choice for your situation.

This tutorial picks up where the previous one left off. If you don’t have the project already, you can download it here.

If you fared well in part one, you’re going to thoroughly enjoy this part! Now that you understand the principles, you’ll fully appreciate how simple these libraries make image processing.

Super SpookCam, Core Graphics Edition

Core Graphics is Apple’s API for drawing based on the Quartz 2D drawing engine. It provides a low-level API that may look familiar if you’re acquainted with OpenGL.

If you’ve ever overridden the -drawRect: method for a view, you’ve interacted with Core Graphics, which provides several functions to draw objects, gradients and other cool stuff to your view.

There are tons of Core Graphics tutorials on this site already, such as this one and this one. So, in this tutorial, you’re going to focus on how to use Core Graphics to do some basic image processing.

Before you get started, you need to get familiar with the concept of a Graphics Context.

All right, enough concepts, now it’s time to make some magic with code! Add this following new method to ImageProcessor.m:

- (UIImage *)processUsingCoreGraphics:(UIImage*)input {
  CGRect imageRect = {CGPointZero,input.size};
  NSInteger inputWidth = CGRectGetWidth(imageRect);
  NSInteger inputHeight = CGRectGetHeight(imageRect);
 
  // 1) Calculate the location of Ghosty
  UIImage * ghostImage = [UIImage imageNamed:@"ghost.png"];
  CGFloat ghostImageAspectRatio = ghostImage.size.width / ghostImage.size.height;
 
  NSInteger targetGhostWidth = inputWidth * 0.25;
  CGSize ghostSize = CGSizeMake(targetGhostWidth, targetGhostWidth / ghostImageAspectRatio);
  CGPoint ghostOrigin = CGPointMake(inputWidth * 0.5, inputHeight * 0.2);
 
  CGRect ghostRect = {ghostOrigin, ghostSize};
 
  // 2) Draw your image into the context.
  UIGraphicsBeginImageContext(input.size);
  CGContextRef context = UIGraphicsGetCurrentContext();
 
  CGAffineTransform flip = CGAffineTransformMakeScale(1.0, -1.0);
  CGAffineTransform flipThenShift = CGAffineTransformTranslate(flip,0,-inputHeight);
  CGContextConcatCTM(context, flipThenShift);
 
  CGContextDrawImage(context, imageRect, [input CGImage]);
 
  CGContextSetBlendMode(context, kCGBlendModeSourceAtop);
  CGContextSetAlpha(context,0.5);
  CGRect transformedGhostRect = CGRectApplyAffineTransform(ghostRect, flipThenShift);
  CGContextDrawImage(context, transformedGhostRect, [ghostImage CGImage]);
 
  // 3) Retrieve your processed image
  UIImage * imageWithGhost = UIGraphicsGetImageFromCurrentImageContext();
  UIGraphicsEndImageContext();
 
  // 4) Draw your image into a grayscale context   
  CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceGray();
  context = CGBitmapContextCreate(nil, inputWidth, inputHeight,
                           8, 0, colorSpace, (CGBitmapInfo)kCGImageAlphaNone);
 
  CGContextDrawImage(context, imageRect, [imageWithGhost CGImage]);
 
  CGImageRef imageRef = CGBitmapContextCreateImage(context);
  UIImage * finalImage = [UIImage imageWithCGImage:imageRef];
 
  // 5) Cleanup
  CGColorSpaceRelease(colorSpace);
  CGContextRelease(context);
  CFRelease(imageRef);
 
  return finalImage;
}

That’s quite a bit of stuff. Let’s go over it section by section.

1) Calculate the location of Ghosty

UIImage * ghostImage = [UIImage imageNamed:@"ghost.png"];
CGFloat ghostImageAspectRatio = ghostImage.size.width / ghostImage.size.height;
 
NSInteger targetGhostWidth = inputWidth * 0.25;
CGSize ghostSize = CGSizeMake(targetGhostWidth, targetGhostWidth / ghostImageAspectRatio);
CGPoint ghostOrigin = CGPointMake(inputWidth * 0.5, inputHeight * 0.2);
 
CGRect ghostRect = {ghostOrigin, ghostSize};

Create a new CGContext.

As discussed before, this creates an “off-screen” context. Remember how the coordinate system for CGContext uses the bottom-left corner as the origin, as opposed to UIImage, which uses the top-left?

Interestingly, if you use UIGraphicsBeginImageContext() to create a context, the system flips the coordinates for you, resulting in the origin being at the top-left. Thus, you’ll need to apply a transformation to your context to flip it back so your CGImage will draw properly.

If you drew a UIImage directly to this context, you don’t need to perform this transformation, as the coordinate systems would match up. Setting the transform to the context will apply this transform to all the drawing you do afterwards.

2) Draw your image into the context.

UIGraphicsBeginImageContext(input.size);
CGContextRef context = UIGraphicsGetCurrentContext();
 
CGAffineTransform flip = CGAffineTransformMakeScale(1.0, -1.0);
CGAffineTransform flipThenShift = CGAffineTransformTranslate(flip,0,-inputHeight);
CGContextConcatCTM(context, flipThenShift);
 
CGContextDrawImage(context, imageRect, [input CGImage]);
 
CGContextSetBlendMode(context, kCGBlendModeSourceAtop);
CGContextSetAlpha(context,0.5);
CGRect transformedGhostRect = CGRectApplyAffineTransform(ghostRect, flipThenShift);
CGContextDrawImage(context, transformedGhostRect, [ghostImage CGImage]);

After drawing the image, you set the alpha of your context to 0.5. This only affects future draws, so the input image drawing uses full alpha.

You also need to set the blend mode to kCGBlendModeSourceAtop.

This sets up the context so it uses the same alpha blending formula you used before. After setting up these parameters, flip Ghosty’s rect and draw him(it?) into the image.

3) Retrieve your processed image

UIImage * imageWithGhost = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

To convert your image to Black and White, you’re going to create a new CGContext that uses a grayscale colorspace. This will convert anything you draw in this context into grayscale.

Since you’re using CGBitmapContextCreate() to create this context, the coordinate system has the origin in the bottom-left corner, and you don’t need to flip it to draw your CGImage.

4) Draw your image into a grayscale context.

CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceGray();
context = CGBitmapContextCreate(nil, inputWidth, inputHeight,
                         8, 0, colorSpace, (CGBitmapInfo)kCGImageAlphaNone);
 
CGContextDrawImage(context, imageRect, [imageWithGhost CGImage]);
 
CGImageRef imageRef = CGBitmapContextCreateImage(context);
UIImage * finalImage = [UIImage imageWithCGImage:imageRef];

Retrieve your final image.

See how you can’t use UIGraphicsGetImageFromCurrentImageContext() because you never set this grayscale context as the current graphics context?

Instead, you created it yourself. Thus you’ll need to use CGBitmapContextCreateImage() to render the image from this context.

5) Cleanup.

CGColorSpaceRelease(colorSpace);
CGContextRelease(context);
CFRelease(imageRef);
 
return finalImage;

At the end, you have to release everything you created. And that’s it – you’re done!

Good job! Now, replace the first line in processImage: to call this new method instead of processUsingPixels::

UIImage * outputImage = [self processUsingCoreGraphics:inputImage];

Build and run. You should see the exact same output as before.

Such spookiness! You can download a complete project with the code described in this section here.

In this simple example, it doesn’t seem like using Core Graphics is that much easier to implement than directly manipulating the pixels.

However, imagine performing a more complex operation, such as rotating an image. In pixels, that would require some rather complicated math.

However, by using Core Graphics, you just set a rotational transform to the context before drawing in the image. Hence, the more complicated your processing becomes, the more time Core Graphics saves.

Two methods down, and two to go. Next up: Core Image!

Ultra Super SpookCam, Core Image Edition

There are also several great Core Image tutorials on this site already, such as this one, from the iOS 6 feast. We also have several chapters on Core Image in our iOS by Tutorials series.

In this tutorial, you’ll see some discussion about how Core Image compares to the other methods in this tutorial.

Core Image is Apple’s solution to image processing. It absconds with all the low-level pixel manipulation methods, and replaces them with high-level filters.

The best part of Core Image is that it has crazy awesome performance when compared to raw pixel manipulation or Core Graphics. The library uses a mix of CPU and GPU processing to provide near-real-time performance.

Apple also provides a huge selection of pre-made filters. On OSX, you can even create your own filters by using Core Image Kernel Language, which is very similar to GLSL, the language for shaders in OpenGL. Note that at the time of writing this tutorial, you cannot write your own Core Image filters on iOS (only Mac OS X).

There are still some effects that are better to do with Core Graphics. As you’ll see in the code, you get the most out of Core Image by using Core Graphics alongside it.

Add this new method to ImageProcessor.m:

- (UIImage *)processUsingCoreImage:(UIImage*)input {
  CIImage * inputCIImage = [[CIImage alloc] initWithImage:input];
 
  // 1. Create a grayscale filter
  CIFilter * grayFilter = [CIFilter filterWithName:@"CIColorControls"];
  [grayFilter setValue:@(0) forKeyPath:@"inputSaturation"];
 
  // 2. Create your ghost filter
 
  // Use Core Graphics for this
  UIImage * ghostImage = [self createPaddedGhostImageWithSize:input.size];
  CIImage * ghostCIImage = [[CIImage alloc] initWithImage:ghostImage];
 
  // 3. Apply alpha to Ghosty
  CIFilter * alphaFilter = [CIFilter filterWithName:@"CIColorMatrix"];
  CIVector * alphaVector = [CIVector vectorWithX:0 Y:0 Z:0.5 W:0];
  [alphaFilter setValue:alphaVector forKeyPath:@"inputAVector"];
 
  // 4. Alpha blend filter
  CIFilter * blendFilter = [CIFilter filterWithName:@"CISourceAtopCompositing"];
 
  // 5. Apply your filters
  [alphaFilter setValue:ghostCIImage forKeyPath:@"inputImage"];
  ghostCIImage = [alphaFilter outputImage];
 
  [blendFilter setValue:ghostCIImage forKeyPath:@"inputImage"];
  [blendFilter setValue:inputCIImage forKeyPath:@"inputBackgroundImage"];
  CIImage * blendOutput = [blendFilter outputImage];
 
  [grayFilter setValue:blendOutput forKeyPath:@"inputImage"];
  CIImage * outputCIImage = [grayFilter outputImage];
 
  // 6. Render your output image
  CIContext * context = [CIContext contextWithOptions:nil];
  CGImageRef outputCGImage = [context createCGImage:outputCIImage fromRect:[outputCIImage extent]];
  UIImage * outputImage = [UIImage imageWithCGImage:outputCGImage];
  CGImageRelease(outputCGImage);
 
  return outputImage;
}

Look at how different this code looks compared to the previous methods.

With Core Image, you set up a variety of filters to process your images – here you use a CIColorControls filter for grayscale, CIColorMatrix and CISourceAtopCompositing for blending, and finally chain them all together.

Now, take a walk through this function to learn more about each step.

1. Create a CIColorControls filter and set its inputSaturation to 0. As you might recall, saturation is a channel in HSV color space that determines how much color there is. Here a value of 0 indicates grayscale.
2. Create a padded ghost image that is the same size as the input image.
3. Create an CIColorMatrix filter with its alphaVector set to [0 0 0.5 0]. This will multiply Ghosty’s alpha by 0.5.
4. Create a CISourceAtopCompositing filter to perform alpha blending.
5. Chain up your filters to process the image.
6. Render the output CIImage to a CGImage and create the final UIImage. Remember to free your memory afterwards.

This method uses a helper function called -createPaddedGhostImageWithSize:, which uses Core Graphics to create a scaled version of Ghosty padded to be 25% the width of the input image. Can you implement this function by yourself?

Give it a shot. If you are stuck, here is the solution:

- (UIImage *)createPaddedGhostImageWithSize:(CGSize)inputSize {
  UIImage * ghostImage = [UIImage imageNamed:@"ghost.png"];
  CGFloat ghostImageAspectRatio = ghostImage.size.width / ghostImage.size.height;
 
  NSInteger targetGhostWidth = inputSize.width * 0.25;
  CGSize ghostSize = CGSizeMake(targetGhostWidth, targetGhostWidth / ghostImageAspectRatio);
  CGPoint ghostOrigin = CGPointMake(inputSize.width * 0.5, inputSize.height * 0.2);
 
  CGRect ghostRect = {ghostOrigin, ghostSize};
 
  UIGraphicsBeginImageContext(inputSize);
  CGContextRef context = UIGraphicsGetCurrentContext();
 
  CGRect inputRect = {CGPointZero, inputSize};
  CGContextClearRect(context, inputRect);
 
  CGAffineTransform flip = CGAffineTransformMakeScale(1.0, -1.0);
  CGAffineTransform flipThenShift = CGAffineTransformTranslate(flip,0,-inputSize.height);
  CGContextConcatCTM(context, flipThenShift);
  CGRect transformedGhostRect = CGRectApplyAffineTransform(ghostRect, flipThenShift);
  CGContextDrawImage(context, transformedGhostRect, [ghostImage CGImage]);
 
  UIImage * paddedGhost = UIGraphicsGetImageFromCurrentImageContext();
  UIGraphicsEndImageContext();
 
  return paddedGhost;
}

Finally, replace the first line in processImage: to call your new method:

UIImage * outputImage = [self processUsingCoreImage:inputImage];

Now build and run. Again, you should see the same spooky image.

You can download a project with all the code in this section here.

Core Image provides a large amount of filters you can use to create almost any effect you want. It’s a good friend to have when you’re processing images.

Now onto the last solution, which is incidentally the only third-party option explored in this tutorial: GPUImage.

Mega Ultra Super SpookCam, GPUImage Edition

GPUImage is a well-maintained library for GPU-based image processing on iOS. It won a place in the top 10 best iOS libraries on this site!

GPUImage hides all of the complex code required for using OpenGL ES on iOS, and presents you with an extremely simple interface to process images at blazing speeds. The performance of GPUImage even beats Core Image on many occasions, but Core Image still wins with a few functions.

To start with GPUImage, you’ll need to include it into your project. This can be done using Cocoapods, building the static library or by embedding the source code directly to your project.

The project app already contains a static framework, which was built externally. It’s easy to copy into the project when you follow these steps:

To embed the source into your project, follow these instructions from the Github repo:

After you add GPUImage to your project, make sure to include the header file in ImageProcessor.m.

If you included the static framework, use #import GPUImage/GPUImage.h. If you included the project directly, use #import "GPUImage.h" instead.

Add the new processing function to ImageProcessor.m:

- (UIImage *)processUsingGPUImage:(UIImage*)input {
 
  // 1. Create the GPUImagePictures
  GPUImagePicture * inputGPUImage = [[GPUImagePicture alloc] initWithImage:input];
 
  UIImage * ghostImage = [self createPaddedGhostImageWithSize:input.size];
  GPUImagePicture * ghostGPUImage = [[GPUImagePicture alloc] initWithImage:ghostImage];
 
  // 2. Set up the filter chain
  GPUImageAlphaBlendFilter * alphaBlendFilter = [[GPUImageAlphaBlendFilter alloc] init];
  alphaBlendFilter.mix = 0.5;
 
  [inputGPUImage addTarget:alphaBlendFilter atTextureLocation:0];
  [ghostGPUImage addTarget:alphaBlendFilter atTextureLocation:1];
 
  GPUImageGrayscaleFilter * grayscaleFilter = [[GPUImageGrayscaleFilter alloc] init];
 
  [alphaBlendFilter addTarget:grayscaleFilter];
 
  // 3. Process & grab output image
  [grayscaleFilter useNextFrameForImageCapture];
  [inputGPUImage processImage];
  [ghostGPUImage processImage];
 
  UIImage * output = [grayscaleFilter imageFromCurrentFramebuffer];
 
  return output;
}

Hey! That looks straightforward. Here’s what’s going on:

1. Create the GPUImagePicture objects; use -createPaddedGhostImageWithSize: as a helper again. GPUImage uploads the images into the GPU memory as textures when you do this.
2. Create and chain the filters you’re going to use. This kind of chaining is quite different from the Core Image filter chaining, and resembles a pipeline. After you’re finished, it looks like this:

   
   GPUImageAlphaBlendFilter takes two inputs, in this case the top image and bottom image, so that the texture locations matter. -addTarget:atTextureLocation: sets the textures to the correct inputs.

3. Call -useNextFrameForImageCapture on the last filter in the chain and then -processImage on both inputs. This makes sure the filter knows that you want to grab the image from it and retains it for you.

Finally, replace the first line in processImage: to call this new method:

UIImage * outputImage = [self processUsingGPUImage:inputImage];

And that’s it. Build and run. Ghosty is looking as good as ever!

As you can see, GPUImage is easy to work with. You can also create your own filters by writing your own shaders in GLSL. Check out the documentation for GPUImage here for more on how to use this framework.

Download a version of the project with all the code in this section here.

Where to go from here?

Congratulations! You’ve implemented SpookCam in four different ways. Here are all the download links again for your convenience:

• SpookCam-Starter
• SpookCam-Pixel
• SpookCam-CoreGraphics
• SpookCam-CoreImage
• SpookCam-GPUImage

Of course, there are a few other interesting image processing concepts aside from the solutions presented in this tutorial:

• Kernels and convolution. Kernels work with image-sampling filters. For example, blur filters use it.
• Image analysis. Sometimes you need to conduct deep analysis on the image, such as when you want to perform facial recognition. Core Image provides the CIDetector class for this process.

Last but not least, no image processing tutorial is complete without mentioning OpenCV.

OpenCV is the de-facto library for all things image processing, and it has an iOS build! However, it is far from lightweight and best for more technical tasks, such as feature tracking. Learn all about OpenCV here.

There is also a great tutorial about using OpenCV right here on this site.

The true next step is to pick a method and start creating your very own revolutionary selfie app. Never stop learning!

I really hope you enjoyed this tutorial. If you have any questions or comments, please let us know in the forum discussion below.

Attribution: Photos courtesy of Free Range Stock, by Roxana Gonzalez.

Image Processing in iOS Part 2: Core Graphics, Core Image, and GPUImage is a post from: Ray Wenderlich

The post Image Processing in iOS Part 2: Core Graphics, Core Image, and GPUImage appeared first on Ray Wenderlich.

Our 500th Tutorial – Time to Celebrate!

Today marks an exciting day – we just released our 500th tutorial! :]

This blog is now 4.5 years old! Just think about how much iOS development has changed since then:

• Remember how creating a development profile used to be about 40 steps? ;]
• Remember the days of retain, release, and autorelease?
• Remember frantically updating your image assets for retina devices?
• Remember mandatory @synthesize statements, and a tool called Accessorizer?
• Remember when it took WWDC a whole month to sell out?
• Remember how people used to call the iPad useless, and “just a big iPhone”?

I also have some fond memories about this blog:

• Remember how this blog used to be just one person, hoping he wasn’t speaking to the void? :]
• Remember the founding members of the Tutorial Team?
• Remember our first team book (iOS 5 by Tutorials)?
• Remember our April Fools Jokes and silly Christmas songs? :]

Thank You!

It’s been an amazing ride, and none of this would have happened without the awesome team of authors, editors, forum subject matter experts, and translators who work hard every day to make this site possible.

It also couldn’t have happened without the support of our readers – like you! Thank you so much for reading this site and being a part of our community.

Remember, 500 tutorials is just the beginning, especially with the advent of Swift!

My cousin Ry Bristow (who also happens to be our first ever summer intern) put together this video to show you what we mean:

Thank you so much for reading and supporting the work we do on this blog – we’ll keep the tutorials coming!

To celebrate, we are giving away some free copies of 1 PDF book of your choice from this site! To enter, simply leave a comment on this post – we’ll select 3 random winners after 48 hours.

Thanks again all, and happy 500!

Our 500th Tutorial: A Reflection and Giveaway! is a post from: Ray Wenderlich

The post Our 500th Tutorial: A Reflection and Giveaway! appeared first on Ray Wenderlich.

Learn how to use UIGestureRecognizers to pinch, zoom, drag, and more!

Update note: This tutorial was fully updated for iOS 8 and Swift by Caroline Begbie. Original post by Ray Wenderlich.

If you need to detect gestures in your app, such as taps, pinches, pans, or rotations, it’s extremely easy with Swift and the built-in UIGestureRecognizer classes.

In this tutorial, you’ll learn how you can easily add gesture recognizers into your app, both within the Storyboard editor in Xcode, and programatically. You’ll create a simple app where you can move a monkey and a banana around by dragging, pinching, and rotating with the help of gesture recognizers.

You’ll also try out some cool extras like:

• Adding deceleration for movement
• Setting dependencies between gesture recognizers
• Creating a custom UIGestureRecognizer so you can tickle the monkey!

This tutorial assumes you are familiar with the basic concepts of Storyboards. If you are new to them, you may wish to check out our Storyboard tutorials first.

I think the monkey just gave us the thumbs up gesture, so let’s get started! :]

Getting Started

Open up Xcode 6 and create a new project with the iOS\Application\Single View Application template. For the Product Name enter MonkeyPinch, for the Language choose Swift, and for the Devices choose iPhone. Click Next, choose the folder to save your project, and click Create.

Before you go any further, download the resources for this project and drag the six files into your project. Tick Destination: Copy items if needed, choose Create groups, and click Finish.

Next, open up Main.storyboard. View controllers are now square by default, so that you can use just one storyboard for multiple devices. Generally you will layout your storyboards using constraints and size classes. But because this app is only going to be for the iPhone, you can disable size classes. On the File Inspector panel (View Menu > Utilities > Show File Inspector), untick Use Size Classes. Choose Keep size class data for: iPhone, and click Disable Size Classes.

Your view will now reflect the size and proportions of the iPhone 5.

Drag an Image View into the View Controller. Set the image to monkey.png, and resize the Image View to match the size of the image itself by selecting Editor Menu > Size to Fit Content. Then drag a second image view in, set it to banana.png, and also resize it. Arrange the image views however you like in the view controller. At this point you should have something like this:

Arrange the image views within the view.

That’s it for the UI for this app – now you’ll add a gesture recognizer so you can drag those image views around!

UIGestureRecognizer Overview

Before you get started, here’s a brief overview of how you use UIGestureRecognizers and why they’re so handy.

In the old days before UIGestureRecognizers, if you wanted to detect a gesture such as a swipe, you’d have to register for notifications on every touch within a UIView – such as touchesBegan, touchesMoves, and touchesEnded. Each programmer wrote slightly different code to detect touches, resulting in subtle bugs and inconsistencies across apps.

In iOS 3.0, Apple came to the rescue with UIGestureRecognizer classes! These provide a default implementation of detecting common gestures such as taps, pinches, rotations, swipes, pans, and long presses. By using them, not only does it save you a ton of code, but it makes your apps work properly too! Of course you can still use the old touch notifications instead, if your app requires them.

Using UIGestureRecognizers is extremely simple. You just perform the following steps:

1. Create a gesture recognizer. When you create a gesture recognizer, you specify a callback function so the gesture recognizer can send you updates when the gesture starts, changes, or ends.
2. Add the gesture recognizer to a view. Each gesture recognizer is associated with one (and only one) view. When a touch occurs within the bounds of that view, the gesture recognizer will look to see if it matches the type of touch it’s looking for, and if a match is found it will notify the callback function.

You can perform these two steps programatically (which you’ll do later on in this tutorial), but it’s even easier adding a gesture recognizer visually with the Storyboard editor. So now to add your first gesture recognizer into this project!

UIPanGestureRecognizer

Still with Main.storyboard open, look inside the Object Library for the Pan Gesture Recognizer, and drag it on top of the monkey Image View. This both creates the pan gesture recognizer, and associates it with the monkey Image View. You can verify you got it connected OK by clicking on the monkey Image View, looking at the Connections Inspector (View Menu > Utilities > Show Connections Inspector), and making sure the Pan Gesture Recognizer is in the gestureRecognizers Outlet Collection.

You may wonder why you associated it to the image view instead of the view itself. Either approach would be OK, it’s just what makes most sense for your project. Since you tied it to the monkey, you know that any touches are within the bounds of the monkey so you’re good to go. The drawback of this method is sometimes you might want touches to be able to extend beyond the bounds. In that case, you could add the gesture recognizer to the view itself, but you’d have to write code to check if the user is touching within the bounds of the monkey or the banana and react accordingly.

Now that you’ve created the pan gesture recognizer and associated it to the image view, you just have to write the callback function so something actually happens when the pan occurs.

Open up ViewController.swift and add the following function inside the ViewController class:

@IBAction func handlePan(recognizer:UIPanGestureRecognizer) {
  let translation = recognizer.translationInView(self.view)
  recognizer.view.center = CGPoint(x:recognizer.view.center.x + translation.x,
                                   y:recognizer.view.center.y + translation.y)
  recognizer.setTranslation(CGPointZero, inView: self.view)
}

The UIPanGestureRecognizer will call this function when a pan gesture is first detected, and then continuously as the user continues to pan, and one last time when the pan is complete (usually the user lifting their finger).

The UIPanGestureRecognizer passes itself as an argument to this function. You can retrieve the amount the user has moved their finger by calling the translationInView: function. Here you use that amount to move the center of the monkey the same amount the finger has been dragged.

It’s extremely important to set the translation back to zero once you are done. Otherwise, the translation will keep compounding each time, and you’ll see your monkey rapidly move off the screen!

Note that instead of hard-coding the monkey image view into this function, you get a reference to the monkey image view by calling recognizer.view. This makes your code more generic, so that you can re-use this same routine for the banana image view later on.

OK, now that this function is complete, you will hook it up to the UIPanGestureRecognizer. In Main.storyboard, control drag from the Pan Gesture Recognizer to View Controller. A popup will appear – select handlePan:.

One more thing. If you compile and run, and try to drag the monkey, it will not work yet. The reason is that touches are disabled by default on views that normally don’t accept touches, like Image Views. So select both image views, open up the Attributes Inspector, and check the User Interaction Enabled checkbox.

Compile and run again, and this time you should be able to drag the monkey around the screen!

Note that you can’t drag the banana. This is because gesture recognizers should be tied to one (and only one) view. So go ahead and add another gesture recognizer for the banana, by performing the following steps:

1. Drag a Pan Gesture Recognizer on top of the banana Image View.
2. Control drag from the new Pan Gesture Recognizer to the View Controller and connect it to the handlePan: function.

Give it a try and you should now be able to drag both image views across the screen. Pretty easy to implement such a cool and fun effect, eh?

Gratuitous Deceleration

In a lot of Apple apps and controls, when you stop moving something there’s a bit of deceleration as it finishes moving. Think about scrolling a web view, for example. It’s common to want to have this type of behavior in your apps.

There are many ways of doing this, but you’re going to do one very simple implementation for a rough but nice effect. The idea is to detect when the gesture ends, figure out how fast the touch was moving, and animate the object moving to a final destination based on the touch speed.

• To detect when the gesture ends: The callback passed to the gesture recognizer is called potentially multiple times – when the gesture recognizer changes its state to began, changed, or ended for example. You can find out what state the gesture recognizer is in simply by looking at its state property.
• To detect the touch velocity: Some gesture recognizers return additional information – you can look at the API guide to see what you can get. There’s a handy function called velocityInView that you can use in the UIPanGestureRecognizer!

So add the following to the bottom of the handlePan: function in ViewController.swift:

if recognizer.state == UIGestureRecognizerState.Ended {
  // 1
  let velocity = recognizer.velocityInView(self.view)
  let magnitude = sqrtf((velocity.x * velocity.x) + (velocity.y * velocity.y))
  let slideMultiplier = magnitude / 200
  println("magnitude: \(magnitude), slideMultiplier: \(slideMultiplier)")
 
  // 2
  let slideFactor = 0.1 * slideMultiplier     //Increase for more of a slide
  // 3
  var finalPoint = CGPoint(x:recognizer.view.center.x + (velocity.x * slideFactor),
                           y:recognizer.view.center.y + (velocity.y * slideFactor))
  // 4
  finalPoint.x = min(max(finalPoint.x, 0), self.view.bounds.size.width)
  finalPoint.y = min(max(finalPoint.y, 0), self.view.bounds.size.height)
 
  // 5
  UIView.animateWithDuration(Double(slideFactor * 2),
                             delay: 0,
                             // 6
                             options: UIViewAnimationOptions.CurveEaseOut,
                             animations: {recognizer.view.center = finalPoint },
                             completion: nil)
}

This is just a very simple function I wrote up for this tutorial to simulate deceleration. It takes the following strategy:

1. Figure out the length of the velocity vector (i.e. the magnitude)
2. If the length is < 200, then decrease the base speed, otherwise increase it.
3. Calculate a final point based on the velocity and the slideFactor.
4. Make sure the final point is within the view’s bounds
5. Animate the view to the final resting place.
6. Use the “ease out” animation option to slow down the movement over time.

Compile and run to try it out, you should now have some basic but nice deceleration! Feel free to play around with it and improve it – if you come up with a better implementation, please share in the forum discussion at the end of this article.

Pinch and Rotation Gestures

Your app is coming along great so far, but it would be even cooler if you could scale and rotate the image views by using pinch and rotation gestures as well!

First, add the code for the callbacks. Add the following functions to ViewController.swift inside the ViewController class:

@IBAction func handlePinch(recognizer : UIPinchGestureRecognizer) {
  recognizer.view.transform = CGAffineTransformScale(recognizer.view.transform,
                                recognizer.scale, recognizer.scale)
  recognizer.scale = 1
}
 
@IBAction func handleRotate(recognizer : UIRotationGestureRecognizer) {
  recognizer.view.transform = CGAffineTransformRotate(recognizer.view.transform, recognizer.rotation)
  recognizer.rotation = 0
}

Just like you could get the translation from the UIPanGestureRecognizer, you can get the scale and rotation from the UIPinchGestureRecognizer and UIRotationGestureRecognizer.

Every view has a transform that is applied to it, which you can think of as information on the rotation, scale, and translation that should be applied to the view. Apple has a lot of built in functions to make working with a transform easy, such as CGAffineTransformScale (to scale a given transform) and CGAffineTransformRotate (to rotate a given transform). Here you will use these to update the view’s transform based on the gesture.

Again, since you’re updating the view each time the gesture updates, it’s very important to reset the scale and rotation back to the default state so you don’t have craziness going on.

Now hook these up in the Storyboard editor. Open up Main.storyboard and perform the following steps:

1. Drag a Pinch Gesture Recognizer and a Rotation Gesture Recognizer on top of the monkey. Then repeat this for the banana.
2. In the same way that you did previously, connect the Pinch Gesture Recognizers to the View Controller’s handlePinch: function.
3. Connect the Rotation Gesture recognizers to the View Controller’s handleRotate: function.

Build and run. Run it on a device if possible, because pinches and rotations are kinda hard to do on the simulator. If you are running on the simulator, hold down the alt key and drag to simulate two fingers, and hold down shift and alt at the same time to move the simulated fingers together to a different position. Now you should be able to scale and rotate the monkey and banana!

Pinch to zoom, and drag the objects around in the running app!

Simultaneous Gesture Recognizers

You may notice that if you put one finger on the monkey, and one on the banana, you can drag them around at the same time. Kinda cool, eh?

However, you’ll notice that if you try to drag the monkey around, and in the middle of dragging bring down a second finger to attempt to pinch to zoom, it doesn’t work. By default, once one gesture recognizer on a view “claims” the gesture, no others can recognize a gesture from that point on.

However, you can change this by overriding a function in the UIGestureRecognizer delegate.

Open up ViewController.swift and mark the class as implementing UIGestureRecognizerDelegate as shown below:

class ViewController: UIViewController, UIGestureRecognizerDelegate {

Then implement one of the delegate’s optional functions:

func gestureRecognizer(UIGestureRecognizer,
 shouldRecognizeSimultaneouslyWithGestureRecognizer:UIGestureRecognizer) -> Bool {
  return true
}

This function tells the gesture recognizer whether it is OK to recognize a gesture if another (given) recognizer has already detected a gesture. The default implementation always returns false – here you switch it to always return true.

Next, open Main.storyboard, and for each gesture recognizer connect its delegate outlet to the view controller.

Build and run the app again, and now you should be able to drag the monkey, pinch to scale it, and continue dragging afterwards! You can even scale and rotate at the same time in a natural way. This makes for a much nicer experience for the user.

Programmatic UIGestureRecognizers

So far you’ve created gesture recognizers with the Storyboard editor, but what if you wanted to do things programatically?

It’s just as easy, so you’ll try it out by adding a tap gesture recognizer to play a sound effect when either of these image views are tapped.

To be able to play a sound, you’ll need to access the AVFoundation framework. At the top of Viewcontroller.swift, add:

import AVFoundation

Add the following changes to ViewController.swift just before viewDidLoad:

var chompPlayer:AVAudioPlayer? = nil
 
func loadSound(filename:NSString) -> AVAudioPlayer {
  let url = NSBundle.mainBundle().URLForResource(filename, withExtension: "caf")
  var error:NSError? = nil
  let player = AVAudioPlayer(contentsOfURL: url, error: &error)
  if player == nil {
    println("Error loading \(url): \(error?.localizedDescription)")
  } else {
    player.prepareToPlay()
  }
  return player
}

Replace viewDidLoad with the following:

override func viewDidLoad() {
  super.viewDidLoad()
  // 1
  for view:UIView! in self.view.subviews  {
    // 2
    let recognizer = UITapGestureRecognizer(target: self, action:Selector("handleTap:"))
    // 3
    recognizer.delegate = self
    view.addGestureRecognizer(recognizer)
 
    //TODO: Add a custom gesture recognizer too
  }
  self.chompPlayer = self.loadSound("chomp")
}

Add to the bottom of the ViewController class:

func handleTap(recognizer: UITapGestureRecognizer) {
  self.chompPlayer?.play()
}

The audio playing code is outside of the scope of this tutorial so I won’t discuss it (although it is incredibly simple).

The important part is in viewDidLoad:

1. Cycle through all of the subviews (just the monkey and banana image views).
2. Create a UITapGestureRecognizer for each, specifying the callback.
3. Set the delegate of the recognizer programatically, and add the recognizer to the view.

That’s it! Compile and run, and now you should be able to tap the image views for a sound effect!

UIGestureRecognizer Dependencies

It works pretty well, except there’s one minor annoyance. If you drag an object a very slight amount, it will pan it and play the sound effect. But what you really want is to only play the sound effect if no pan occurs.

To solve this you could remove or modify the delegate callback to behave differently in the case a touch and pinch coincide, but here is another useful thing you can do with gesture recognizers: setting dependencies.

There’s a function called requireGestureRecognizerToFail: that you can call on a gesture recognizer. Can you guess what it does? ;]

Open Main.storyboard, open up the Assistant Editor, and make sure that ViewController.swift is showing there. Then control-drag from the monkey pan gesture recognizer to below the class declaration, and connect it to an outlet named monkeyPan. Repeat this for the banana pan gesture recognizer, but name the outlet bananaPan.

Then simply add these two lines to viewDidLoad, right before the TODO:

recognizer.requireGestureRecognizerToFail(monkeyPan)
recognizer.requireGestureRecognizerToFail(bananaPan)

Now the tap gesture recognizer will only get called if no pan is detected. Pretty cool eh? You might find this technique useful in some of your projects.

Custom UIGestureRecognizer

At this point you know pretty much everything you need to know to use the built-in gesture recognizers in your apps. But what if you want to detect some kind of gesture not supported by the built-in recognizers?

Well, you could always write your own! Now you’ll try it out by writing a very simple gesture recognizer to detect if you try to “tickle” the monkey or banana by moving your finger several times from left to right.

Create a new file with the iOS\Source\Swift File template. Name the file TickleGestureRecognizer.

Then replace the contents of TickleGestureRecognizer.swift with the following:

import UIKit
 
class TickleGestureRecognizer:UIGestureRecognizer {
 
  // 1
  let requiredTickles = 2
  let distanceForTickleGesture:Float = 25.0
 
  // 2
  enum Direction:Int {
    case DirectionUnknown = 0
    case DirectionLeft
    case DirectionRight
  }
 
  // 3
  var tickleCount:Int = 0
  var curTickleStart:CGPoint = CGPointZero
  var lastDirection:Direction = .DirectionUnknown
}

This is what you just declared step by step:

1. These are the constants that define what the gesture will need. Note that requiredTickles will be inferred as an Int, but you need to specify distanceForTickleGesture as a Float. If you do not, then it will be inferred as a Double, and cause difficulties later on.
2. These are the possible tickle directions.
3. Here are the three variables to keep track of to detect this gesture:
   • tickleCount: How many times the user has switched the direction of their finger (while moving a minimum amount of points). Once the user moves their finger direction three times, you count it as a tickle gesture.
   • curTickleStart: The point where the user started moving in this tickle. You’ll update this each time the user switches direction (while moving a minimum amount of points).
   • lastDirection: The last direction the finger was moving. It will start out as unknown, and after the user moves a minimum amount you’ll check whether they’ve gone left or right and update this appropriately.

Of course, these properties here are specific to the gesture you’re detecting here – you’ll have your own if you’re making a recognizer for a different type of gesture, but you can get the general idea here.

One of the things that you’ll be changing is the state of the gesture – when a tickle is completed, you’ll need to change the state of the gesture to ended. In the original Objective-C UIGestureRecognizer, state is a read-only property, so you will need to create a Bridging Header to be able to redeclare this property.

The easiest way to do this is to create an Objective-C Class, and then delete the implementation part.

Create a new file, using the iOS\Source\Objective-C File template. Call the file Bridging-Header, and click Create. You will then be asked whether you would like to configure an Objective-C bridging header. Choose Yes. Two new files will be added to your project:

• MonkeyPinch-Bridging-Header.h
• Bridging-Header.m

Delete Bridging-Header.m.

Add this Objective-C code to MonkeyPinch-Bridging-Header.h:

#import <UIKit/UIGestureRecognizerSubclass.h>

Now you will be able to change the UIGestureRecognizer’s state property in TickleGestureRecognizer.swift.

Switch to TickleGestureRecognizer.swift and add the following functions to the class:

override func touchesBegan(touches: NSSet!, withEvent event: UIEvent!)  {
  let touch = touches.anyObject() as UITouch
  self.curTickleStart = touch.locationInView(self.view)
}
 
override func touchesMoved(touches: NSSet!, withEvent event: UIEvent!) {
  let touch = touches.anyObject() as UITouch
  let ticklePoint = touch.locationInView(self.view)
 
  let moveAmt = ticklePoint.x - curTickleStart.x
  var curDirection:Direction
  if moveAmt < 0 {
    curDirection = .DirectionLeft
  } else {
    curDirection = .DirectionRight
  }
 
  //moveAmt is a Float, so self.distanceForTickleGesture needs to be a Float also
  if abs(moveAmt) < self.distanceForTickleGesture {
    return
  }
 
  if self.lastDirection == .DirectionUnknown || 
     (self.lastDirection == .DirectionLeft && curDirection == .DirectionRight) || 
     (self.lastDirection == .DirectionRight && curDirection == .DirectionLeft) {
    self.tickleCount++
    self.curTickleStart = ticklePoint
    self.lastDirection = curDirection
 
    if self.state == .Possible && self.tickleCount > self.requiredTickles {
      self.state = .Ended
    }
  }
}
 
override func reset() {
  self.tickleCount = 0
  self.curTickleStart = CGPointZero
  self.lastDirection = .DirectionUnknown
  if self.state == .Possible {
    self.state = .Failed
  }
}
 
override func touchesEnded(touches: NSSet!, withEvent event: UIEvent!) {
  self.reset()
}
 
override func touchesCancelled(touches: NSSet!, withEvent event: UIEvent!) {
  self.reset()
}

There’s a lot of code here, but I’m not going to go over the specifics because frankly they’re not quite important. The important part is the general idea of how it works: you’re overriding the UIGestureRecognizer’s touchesBegan, touchesMoved, touchesEnded, and touchesCancelled functions, and writing custom code to look at the touches and detect the gesture.

Once you’ve found the gesture, you want to send updates to the callback function. You do this by changing the state property of the gesture recognizer. Usually once the gesture begins, you want to set the state to .Began, send any updates with .Changed, and finalize it with .Ended.

But for this simple gesture recognizer, once the user has tickled the object, that’s it – you just mark it as ended. The callback you will add to ViewController.swift will get called and you can implement the code there.

OK, now to use this new recognizer! Open ViewController.swift and make the following changes.

Add to the top of the class:

var hehePlayer:AVAudioPlayer? = nil

In viewDidLoad, right after TODO, add:

let recognizer2 = TickleGestureRecognizer(target: self, action: Selector("handleTickle:"))
recognizer2.delegate = self
view.addGestureRecognizer(recognizer2)

At end of viewDidLoad add:

self.hehePlayer = self.loadSound("hehehe1")

Add at the beginning of handlePan: (gotta turn off pan to recognize tickles):

//comment for panning
//uncomment for tickling
return;

At the end of the class add the callback:

func handleTickle(recognizer:TickleGestureRecognizer) {
  self.hehePlayer?.play()
}

So you can see that using this custom gesture recognizer is as simple as using the built-in ones!

Compile and run and “he he, that tickles!”

Where To Go From Here?

Here’s the download for the final project with all of the code from the above tutorial.

Congrats, you’re now a master of gesture recognizers, both built-in and your own custom ones! Touch interaction is such an important part of iOS devices and UIGestureRecognizer is the key to easy-to-use gestures beyond simple button taps.

If you have any comments or questions about this tutorial or gesture recognizers in general, please join the forum discussion below!

Credits: Artwork by Vicki Wenderlich of Game Art Guppy – Game Art Resources for Indie Game Developers.

Using UIGestureRecognizer with Swift Tutorial is a post from: Ray Wenderlich

The post Using UIGestureRecognizer with Swift Tutorial appeared first on Ray Wenderlich.

Pulse.io will help you find low frame rates, app stalls, network errors and more!

A hugely popular app is a double-edged sword. On the one hand you have lots of users. On the other hand, pretty much every edge case will be hit by somebody – which often reveals pesky performance problems or bugs.

Analytics are a good way to keep tabs on users, but how can you track more technical data such as app performance and network lag?

Well, there is now an easy way to do this – thanks to a relatively new app performance monitoring service called Pulse.io.

With Pulse.io, you’ll know if your users are experiencing long waits, poor frame rates, memory warnings or similar problems — and you’ll be able to drill down to find out which parts of your code are responsible for these issues.

In this tutorial, you’ll take a look at an example project called Tourist Helper that has some performance issues, and Pulse.io to detect and solve them.

Getting Started

Download the sample project, unzip the contents and open the project in Xcode.

You’ll need a Flickr account and Flickr API key to continue. Don’t worry — both the account and the API key are free.

Log in to your Flickr account, or sign up for a new account, then visit https://www.flickr.com/services/apps/create/noncommercial/ to register for an API key.

Once that’s done you’ll receive both the API key and a secret key as hexadecimal strings. Head back to Xcode and modify the kFlickrGeoPhotoAPIKey and kFlickrGeoPhotoSecret constants in FlickrServices.h to match your key and secret strings.

#define kFlickrGeoPhotoAPIKey                       (@"Your Flickr API Key")
#define kFlickrGeoPhotoSecret                       (@"Your Flickr API Secret")

That’s all you need for now to work with Flickr — on to integrating Pulse.io into your app.

Integrating Pulse.io Into Your App

Head to pulse.io in your browser. Sign up for an account if you don’t already have one; the process is simple as shown by the streamlined signup form below:

As soon as you have filled out and submitted the form your account will be ready to use. You’re now ready to add your app to Pulse.io. After signing up and logging in, click on the New Application button.

Enter TouristHelper for the name of your app, ensure iOS is selected and click Create Application as shown below:

Next you’ll see a page of instructions describing how to install the Pulse.io SDK. Keep this page open in a tab because it contains a link to the SDK and your app’s Pulse.io token.

Adding the Pulse.io framework to your app is quite straightforward, especially if you’ve worked with third-party frameworks before.

Download the latest version of the SDK (there’s a link at the top of the page you landed on after creating your app), unzip and open the folder that unzips. Then find the PulseSDK.framework file and drag it into your Xcode project. Ensure it’s been added to the TouristHelper target and copied into the destination group as shown below:

Keep your project tidy by putting your Pulse.io framework in the Frameworks group of your Xcode project like so:

Pulse.io has a few dependencies of its own. Select the project in the top left of the left-hand pane, select the Build Phases tab and expand Link Binary With Libraries. You should see something similar to the following screenshot:

Pulse.io requires the following frameworks:

• CFNetwork.framework
• libz.dylib
• SystemConfiguration.framework
• CoreTelephony.framework

Click the “+” icon and begin typing the name of each library. Select each of the above frameworks as you see it appear in the list. If any of these libraries have already been added to the project don’t worry about it for the purposes of this tutorial.

Once you’ve finished adding the appropriate libraries, your project should look like this:

Open main.m and add the following header import:

#import <PulseSDK/PulseSDK.h>

Next, add the following line directly before return UIApplicationMain() inside main:

[PulseSDK monitor:@"Your Pulse.io API key goes here"];

You’ll need to insert your own Pulse.io API key in this space; you can find it on the Pulse.io instructions page you saw earlier, or alternatively from your list of Pulse.io applications that’s displayed when you’re signed in.

That’s all you need to get started!

Generating Initial Test Data

Make sure you aren’t running in a 64-bit environment, such as the 64-bit simulator, iPhone 5S or iPad Air. Otherwise you’ll see a message warning you that Pulse.io doesn’t yet run in 64-bit environments. For now, select a different target for building your app.

Build and run your app and watch it for a while as it runs. Notice that it doesn’t do much yet. In fact, the observant reader will notice there appears to be an error logged to the console. More on that shortly.

The app, when working, searches Flickr for some interesting images with a default search tag of “beer” around your location and places pins on the map as photos are found. The app then calculates the route between these places and draws it on the map. Finally, the app fetches thumbnails and large images using the image’s Flickr URL and the instant tour is ready for use.

Head back to the Pulse.io page that you landed on after creating the app (you kept it open like I said, right?!); the message at the bottom of the page will eventually update to let you know the app has successfully contacted Pulse.io.

Excellent! You’re up and running and collecting data. As the message in the app states, it could take a little while for results to appear in the dashboard. While you’re waiting for that you can generate some interesting data by exploring images at other locations around the world.

If you haven’t discovered it yet, find the symbol in the Debugger control bar that looks just like the location symbol in iOS maps. Simply tap it and Xcode presents you with a list of simulated locations around the world; you can even use GPX files to create custom simulated locations.

Change the simulated location a few times while the app is running; you’ll notice that no pictures of any interesting sights appear. Hmm, that’s curious.

It turns out that Flickr doesn’t like connections over regular http and wants everything to be https. The good news is that you’ve just logged a few network errors to analyze later! :]

Open FlickrServices.h and change the kFlickrBaseURL constant as shown below:

#define kFlickrBaseURL (@"https://api.flickr.com")

That should do it!

Build and run your app and set a simulated location in Xcode. Here’s an example of what you might see if you start near Apple headquarters in Cupertino:

It’s likely that your app runs smoothly in the simulator on your nice, fast Mac. However, the story might be quite different on a slower device. Will your app create a memory-packed day for a tourist, or a memory-packed app for iOS to kill after too many allocations?

You have just a few more customizations to make before checking out the full story in your Pulse.io dashboard.

Instrumenting Custom Classes and Methods

By default, Pulse.io automatically instruments the key parts of your app to check for things such as excessive wait time and network access.

If you have custom classes that perform a lot of work such as the route calculator object in your app, you can add instrumentation to them using instrumentClass:. As well, you can add a specific selector using instrumentClass:selector: rather than instrumenting every message from the class.

Add the following import to the top of main.m:

#import "PathRouter.h"

Next, add the following line immediately after the PulseSDK monitor line you added in the previous section:

[PulseSDK instrumentClass:[PathRouter class] selector:@selector(orderPathPoints:)];

Pulse.io will now trace every time a PathRouter instance receives the orderPathPoints: message. Adding instrumentation to a method adds around 200-1000ns of execution time to that method call. This isn’t a real big hit — unless you call that method in a tight loop. Plan your instrumentation accordingly.

Take a look at PathRouter.m; you’ll see that orderPathPoints: performs the heavy lifting of finding a reasonable path between points. This is an algorithmically difficult problem, and probably a good spot to add some instrumentation.

Customizing Action Names

The actions reported by Pulse.io are grouped by the user action that triggered them. For example, if the user pans a map, you’ll see methods that result from that pan operation descending from a UIPanGestureRecognizer. It would be a great idea to attach more meaningful names to some operations to make them easier to find and understand.

Open MapSightsViewController.m and add the following Pulse.io header import to the top of the file:

#import <PulseSDK/PulseSDK.h>

Next add the following line to the beginning of mapView:viewForAnnotation::

[PulseSDK nameUserAction:@"Providing Annotation View"];

Now when you look at the results on the Pulse.io dashboard, you’ll see this method is reported using the friendly name instead.

Analyzing Data

Build and run the app again to generate some more data to analyze. After a little time has passed, say a minute or so, check the Pulse.io dashboard statistics for your application to see what they show. You should see something similar to that below. If you don’t, wait a little while longer and try again. It can take up to an hour for data to trickle in. That’s not a problem in practice though, because you will want to collect a lot of data and then work on it when it’s all in.

Things look a little sparse with just one user generating data with one app, but you can imagine the distributions would smooth out with many users contributing more data. The overview presented above serves as a signpost to the areas you should examine in more detail.

At the top of the browser window there is a row of buttons which you can use to drill down into each metric, as shown below:

The first item to drill down into is the total spinner time of your app.

Evaluating Spinner Times

Click on the UI Performance\Spinner Time button on the web site for a more detailed view of your data. Pulse.io hooks into UIActivityIndicator to determine how much time your users spend looking at that spinning animation while they wait, as shown below:

Er, that’s pretty ugly! The app displays a spinner for an average of nearly two seconds each time it appears. There’s no way a user would find that acceptable. Click on the Providing Annotation View user action to see more detail as illustrated below:

Those large image requests are taking a lot of time. Note that down as one problem to fix once you’re done reviewing the data on other problem areas.

Evaluating Frame Rate

Next, click on the UI Performance\Frame Rate button to show the detail view like so:

This view shows that there was a total of six seconds of low frame rate when displaying annotations descending from the method you annotated with the name Providing Annotation View. That’s beyond unacceptable for your app!

Note this issue on your fix list as well; you’ll have to revisit how you’re handling annotations in order to fix this.

Network Details

Next, click on the Network\Speed button to drill down into the data. Then select Network\Errors. Generally speed and error count are the two things to investigate when it comes to networking.

The image below shows an example of Pulse.io catching some network errors:

The normal HTTP status response is 200, meaning OK. However a couple of times the app received a 403 code meaning Forbidden. Recently Flickr mandated use of https and started denying plain http requests, which you made earlier in your app before you modified it to use https exclusively.

It’s good to know that Pulse.io will report any client-side, server-side, or network access issues your app will encounter.

Here’s a sample view of Pulse.io’s view of your networking speed:

Pulse.io reports speed as time per request and breaks the results down into time waiting and time receiving. This is useful data; if you find your user base growing and your server being overwhelmed by traffic you’ll see the wait time slowly creep up as time goes on.

Consider the sheer number of requests shown here from only one user with one app. It looks like there are an excessive number of requests for the limited amount of time you’ve used your app. Making excessive requests eats up bandwidth and keeping the network active wastes battery. Note this as another item to fix.

Below the chart you can see a list titled Aggregate URL Response Times. Select flickr.com/* in this list to see some of the RESTful queries your app made to Flickr.

Take a closer look at the results: there’s some sensitive information there, including your app’s Flickr API key and secret! That should be stripped out of your request before the wrong people see it.

Memory

The final button in the dashboard is Memory. Click it and you’ll see your app’s memory usage as demonstrated below:

That feels like a lot of memory for a simple app like yours. iOS is likely to terminate apps using large chunks of memory when resources get low, and making a user restart your app every time they want to use it won’t be a pleasant user experience.

This could be due to the loading of the images as you noted before, so draw a few asterisks next to the item on your fix list that addresses the loading of large images.

Fixing the Issues

Now that you’ve drilled down through the pertinent data points of your app, it’s time to address the issues exposed by Pulse.io.

A likely place to start is the image fetching strategy. Right now the app fetches a thumbnail image for each sight discovered and then pre-fetches the large image in case the user taps on the pin to view it. But not every user will tap on every pin.

What if you could defer the large image fetch until it is actually needed; that is, when the user taps the pin?

Correcting the Image Loading

Find the implementation of thumbnailImage in Sight.m. You’ll see that you make two network requests: one for the thumbnail and one for the large image.

Replace the current implementation of thumbnailImage with the following:

- (UIImage *)thumbnailImage {
  if (_thumbnail == nil) {
    NSString *urlString = [NSString stringWithFormat:@"%@_s.jpg", _baseURLString];
    AFImageRequestOperation* operation
    = [AFImageRequestOperation
       imageRequestOperationWithRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:urlString]] imageProcessingBlock:nil
       success:^(NSURLRequest *request, NSHTTPURLResponse *response, UIImage *image) {
         self.thumbnail = image;
         [_delegate sightDidUpdateAvailableThumbnail:self];
       }
       failure:nil];
    [operation start];
  }
  return _thumbnail;
}

This looks very much like the original method – it contains an AFImageRequestOperation whose success block notifies the delegate MapSightsViewController that the thumbnail is available.

You’ve removed the code that kicks off the full image download. So next, you’ll need to load the large image only when the user drills down into the annotation. Find initiateImageDisplay and replace it with the following code:

- (void)initiateImageDisplay {
  if (_fullImage) {
    [_delegate sightDisplayImage:self];
  } else {
    [_delegate sightBeginningLargeImageDownload];
    NSString *urlString = [NSString stringWithFormat:@"%@_b.jpg", _baseURLString];
    AFImageRequestOperation* operation = [AFImageRequestOperation
      imageRequestOperationWithRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:urlString]]
      imageProcessingBlock:nil success:^(NSURLRequest *request, NSHTTPURLResponse *response, UIImage *image) {
        [_delegate sightsDownloadEnded];
        self.fullImage = image;
        [_delegate sightDisplayImage:self];
      } failure:^(NSURLRequest *request, NSHTTPURLResponse *response, NSError *error) {
        [_delegate sightsDownloadEnded];
    }];
    [operation start];
    return;
  }
}

This loads the image the first time it’s requested and caches it for future requests. That should reduce the number of network requests for images — with the added bonus of reduced memory usage. Correcting both of those issues should help reduce the amount of spinner time users need to suffer through! :]

Since you’re already fixing network related items, you may as well strip the sensitive bits from the http requests while you’re at it.

Fortunately this is a simple one-line fix. Add the following line after the call to monitor: in main.m:

[PulseSDK setURLStrippingEnabled:true];

This prevents all query parameters from being logged in the Network dashboard, which helps keep your Flickr API keys secret.

Fixing Routing Performance

The next thing on your list of things to fix is the algorithm that calculates the route between the various sights. It’s easy to underestimate the complexity of finding the shortest route between an arbitrary number of points. In fact, it is one of the hardest problems encountered in computer science!

This app uses a brute force method of finding the shortest route by calculating the complete route many times and saving the shortest one. If you think about it, though, there’s no real requirement to show the shortest route through all points — you can just display any route and let the user vary the route if they feel like it. The time spent waiting for the optimal route just isn’t worth it in this case.

Take a quick look at orderLocationsInRange:byDistanceFromLocation: in PathRouter.m; you can see that it currently orders the discovered paths in a random fashion. A reasonably good route can be found by starting at one point and visiting the next closest point, repeating until all points are visited.

It’s quite unlikely that this is going to be even close to the optimal route, but the potential gains in performance make this approach your best option.

Inside the else clause in this method, replace the call to sortedArrayUsingComparator: (including the block passed to it) with the following code:

NSArray *sortedRemainingLocations = [[self.workingCopy subarrayWithRange:range] sortedArrayUsingComparator:^(id location1, id location2) {
  CLLocationDistance distance1 = [location1 distanceFromLocation:currentLocation];
  CLLocationDistance distance2 = [location2 distanceFromLocation:currentLocation];
 
  if (distance1 > distance2) {
    return NSOrderedDescending;
  } else if (distance2 < distance1) {
    return NSOrderedAscending;
  } else {
    return NSOrderedSame;
  }
}];

Now find orderPathPoints: and take a look at the for loop in there. It currently tries 1000 iterations to find the best route.

But this new algorithm only needs one iteration, because it finds a decent route straight away. 1000 iterations down to 1 – nice one! :]

Find the following lines and remove them:

for (int i = 0; i < 1000; i++) {
  if ([locations count] == 0) continue;

Then find the corresponding closing brace and remove it also. (The brace to remove is just above the line that reads // calculation of the path to all the sights, without blocking the main (UI) thread).

This change cuts the path algorithm down to one iteration and should reduce spinner time even further.

That takes care of the excess spinner time. Next up are those pesky frame rate issues uncovered by Pulse.io.

Fixing the Frame Rate

iOS tries to render a frame once every sixtieth of a second, and your apps should aim for that same performance benchmark. If the code execution to prepare a frame exceeds ~1/60 second (less the actual time to display the frame), then you’ll end up with a reduced frame rate.

If you’re only slowed down by one or two frames per second most users won’t even notice. However, when your frame rate drops to 20 frames/second you can bet most users will find it highly annoying. Using Pulse.io to track your frame rate keeps you ahead of your users and lets you detect slow frame rates before they are noticed by too many users.

One of the changes you made to the app was adding the label Providing Annotation View to a user action. The dashboard showed that slow frame rates were taking place in this specific user action. Pulse.io tells you exactly what your users are experiencing so you don’t have to guess whether or not smooth scrolling on older devices is something you need to handle in your app design.

Map views like the one in this app require multiple annotation views to work together to provide smooth scrolling performance. Map Kit includes a reuse API since reusing an annotation is much faster than allocating a new one every time. Your app isn’t reusing annotation views at the moment, which might explain at least some of the performance issues.

Open MapSightsViewController.m and find mapView:viewForAnnotation:. Find the following two lines that allocate new annotations:

sightAnnotationView = [[MKPinAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:kSightAnnotationIdentifier];
sightAnnotationView.canShowCallout = YES;

Replace the above lines with the following implementation:

sightAnnotationView = [mapview dequeueReusableAnnotationViewWithIdentifier:kSightAnnotationIdentifier];
if (sightAnnotationView == nil) {
  sightAnnotationView = [[MKPinAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:kSightAnnotationIdentifier];
  sightAnnotationView.canShowCallout = YES;
}

This mechanism is similar to the way table views or collection view cells get reused and should be somewhat familiar. The new implementation attempts to dequeue an existing annotation and only creates a new annotation if it fails to get one from the map view.

While this change has the least dramatic effect of all the changes made so far, you should always reuse objects whenever UIKit offers you the chance.

Now that you’ve completed all of the items on your fix list, you need to generate some more analytics in Pulse.io to see how your app performance has improved.

Build and run the app; pick several simulated locations and scroll around the map as an average user would. The question is — will the Pulse.io results show some improvement? Or has all your hard work been for naught?

Verifying Your Improvements

Here’s a look at some sample data collected after making the code improvements and playing with the app for a bit:

The dashboard shows that the results above arrived a few hours after the first batch of results. Step One in any performance improvement process is to be sure you’re looking at the right data! :]

At first glance things look like they might have improved, but you can’t really tell until you dig down into the nitty gritty details.

Verifying Network and Memory

Take a close look at the number of network requests made now that you’ve reduced the excessive image loading:

That’s a step in the right direction — you used the app for roughly the same amount of time and in approximately the same way that you did before, but the app made less than half of the network requests than before.

Drill down into Aggregate URL Response Times again and examine the queries made to flickr.com/* – are those URLs still exposing too much information?

All URLs logged now have the query part of the request stripped thanks to setURLStrippingEnabled:. You could easily share these results without exposing any details of your web API or compromising other secrets. And even if you didn’t have any secrets to hide, at least URLs in this format are a heck of a lot easier to read! :]

Verifying Spinners

Spinners were particularly worrying — no user wants to waste five seconds of their life staring at a spinner. What does Pulse.io say about the end result of your spinner improvements?

The total spinner time is now 14 seconds, and average spinner time has dropped somewhat but not as dramatically as you might first think. Does that mean your improvements had no effect on average spinner time? How should you interpret these results?

You made two huge reductions to spinner time in the code: first, the new version of the app is making requests for thumbnail (small) images at about the same rate as the first version, but deferring the fetch of the large images to when the user taps on the thumbnail.

Second, you switched the route calculation to a much more sensible next-closest algorithm and only perform it once per set of points.

So the cost of bringing up a spinner and performing an operation has dropped, on average, as you’re requesting smaller pieces of data, but the total number of spinners displayed has dropped dramatically as you’re making far fewer image requests.

What was that previous result again?

Yep – that’s a huge improvement; the app is now much more usable.

Although you’ve achieved some success with your spinner time, you really should aim to avoid any spinner time at all.

One possible way to cut down on spinner use in your app is to make the initial image request to Flickr and display the points on the map immediately. The route calculation would be performed in the background and leave the UI thread responsive so the user can interact with the map. You would then display the calculated route once the algorithm was done.

This would be a great change to attempt on your own to see the effect it has on spinner use. If you do choose to try this, please share your before and after performance results in the forum discussion below!

All that’s left to check on is the frame rate issue that you solved by re-using annotations. What did Pulse.io detect as your improved frame rate?

Verifying Frame Rate

The small change you made to reuse annotation views has resulted in some performance gains, as shown below:

The recorded low frame rate time descending from Providing Annotation Views has dropped to around four seconds. That’s not a bad improvement in the context of this tutorial, but you should be shooting for no recorded instances at all. On modern hardware, with some code tweaks appropriate to your app, this goal is well within your reach.

Where To Go From Here?

Here’s the final version of the sample project that implements the changes discussed in this tutorial. If you use this version of the project, remember to set your own Pulse.io key, Flickr key and secret!

By adding Pulse.io reporting to this sample app, you’ve learned how an app that seems to work well enough on your simulator and test devices can fail to impress your users; in fact, it can lead to a really poor user experience. With Pulse.io in your toolbox, you can gather information about user experience issues on many fronts:

• Excessive memory usage
• Spinner time
• Low frame rates
• Network issues

It’s incredibly important to gather metrics and identify fixes for you app before you start seeing these issues mentioned in the reviews of your app. Additionally, you won’t waste time improving areas that, in actual fact, aren’t causing any problems for your users.

Pulse.io is undergoing rapid development and improvement. While there’s an impressive level of detail in the product already, the team is anything but idle. The Pulse.io team recently introduced the Weekly Performance Report as shown below:

This shows you the changes in app usage from week to week. There isn’t much data here with just one user (i.e. the author) and an app still in the development stage, but you can see how useful this would be when your users number in the thousands.

Support for Swift is on the horizon, so keep an eye out for updated versions of the Pulse.io SDK and instructions on integrating Pulse.io into your Swift projects soon.

Have you used Pulse.io in your own apps and found any interesting performance issues or tuning tips? Share your experiences with us in the comments below!

Sponsored Tutorial: Improving Your App’s Performance with Pulse.io Tutorial is a post from: Ray Wenderlich

The post Sponsored Tutorial: Improving Your App’s Performance with Pulse.io Tutorial appeared first on Ray Wenderlich.

Learn how to use the create, read, update, and delete operations of SQLite.

Video Tutorial: Saving Data in iOS Part 8: Using SQLite is a post from: Ray Wenderlich

The post Video Tutorial: Saving Data in iOS Part 8: Using SQLite appeared first on Ray Wenderlich.

Are you a Swift Ninja?

Although Swift has only been out for a little while and is still in beta, many of you have been digging in already.

How far have you come so far? Have you:

• Read Apple’s Swift Programming Language book?
• Read Apple’s Using Swift with Cocoa and Objective-C book?
• Ported or written a project in Swift?
• Read at least 5 blog posts or tutorials on Swift?
• Visited the #swift-lang IRC group?
• Subscribed to the Swift language mailing list?
• Signed up for email updates when Chris Lattner posts?

If you’ve scored 3 or more on this quiz, then you might be a Swift Ninja.

Well, this 2-part series is going to help you find out for sure!

I’ll give you a series of programming challenges in Swift, that you can use to test your Swift knowledge and see if you’re a true Swift Ninja.

And if by any chance you’re not feeling so ninja, you’ll have the chance to learn the craft! No matter whether you’re already advanced or still intermediate in Swift, you’ll likely still learn a thing or two.

Get your shurikens and katana ready – the challenge begins!

The Challenge

This series is a bit different in style compared to the ones we usually post on this web site. It will present a series of problems in order of increasing complexity. Some of these problems reuse techniques from previous sections, so working through them in order is essential for your success.

Each of the problems highlight at least one feature, syntax oddity, or clever hack made possible by Swift.

Don’t worry, you’ll not be thrown to the wolves – there’s help when you need it. Each post has two levels of hints, and of course there’s always the Swift books from Apple, or your good friend Stack Overflow.

How to Approach Each Problem

Each problem is defined by stating what you need to accomplish in code, and what Swift features you can and can’t use. I recommend you use a Playground to work through the each challenge.

If you have difficulties, open up the Hints section. Though Hints won’t give you instant gratification, they offer direction.

In case you can’t muster the solution — open up the problem’s Tutorial section. There you’ll find the techniques to use and provide the code to solve the given problem. In any case, by the end of this series you’ll have the solutions to all the problems.

Oh – and remember to track your score!

• If you solve the problem without peeking at the hints or tutorial sections you get 3 shurikens:
• If you solve the problem by peeking at the hints section, you get 2 shurikens:
• If you solve the problem by peeking at the tutorial section, you get 1 shuriken:

Even if you solved the problem yourself, take a few moments to see the solution provided in the Tutorial –it’s always great to compare code!

Some challenges offer an extra shuriken if you do the solution in a certain (more difficult) way.

Keep a piece of paper or your favorite tracking app handy and keep count of how many shurikens you got for each challenge.

Don’t cheat yourself by padding your score. That’s not the way of the noble ninja. At the end of the post you’ll have broadened your mind and moved boldly into the future, even if you don’t collect every single shuriken.

The Swift Ninja challenge

Challenge #1

In the Swift book from Apple, there are several examples of a function that swaps the values of two variables. The code always uses the “classic” solution of using an extra variable for storage. But you can do better than that.

Your first challenge is to write a function that takes two variables (of any type) as parameters and swaps their values.

Requirements:

• For the function body use a single line of code

Give yourself if you don’t have to crack open the Hints or Tutorial spoilers.

var a = "Marin"
var b = "Todorov"
var myTuple = (a, b)

var name: String
var family: String
 
(name, family) = ("Marin", "Todorov")

func swap<T>(inout a:T, inout with b:T) {
    (a, b) = (b, a)
}
 
//demo code
var a = "Marin", b = "Todorov"
swap(&a, &b)
 
[a, b]

["Todorov", "Marin"]

Challenge #2

Swift functions are very flexible — they can take a variable number of arguments, return one or more values, return other functions and much more.

For this challenge you’ll test your understanding of function syntax in Swift. Write a function called flexStrings that meets the following requirements:

• The function can take precisely 0, 1 or 2 string parameters.
• Returns the function parameters concatenated as String.
• If no parameters pass to the function, it will return the string “none”.
• For an extra shuriken use one line of code for the function body.

Here’s some example usage and output of the function:

flexStrings() //--> "none"
flexStrings(s1: "One") //--> "One"
flexStrings(s1: "One", s2: "Two") //--> "OneTwo"

Take for solving the problem, and an extra shuriken for a total of 4 if you did it in one line.

func flexStrings(s1: String = "", s2: String = "") -> String {
    return s1 + s2 == "" ? "none": s1 + s2
}

Challenge #3

You’ve already mastered functions with optional parameters in the previous challenge. That was fun!

But with the approach from the previous solution, you can only have a fixed maximum number of parameters. There’s a better approach if you truly want a variable number of input values for a function.

This challenge demonstrates how to best use the built-in Array methods and switch statements. Did you pay attention when you read Apple’s Swift Programming Language book? You’re about to find out. :]

Write a function called sumAny that can take 0 or more parameters of any type. The function should meet the following requirements:

• The function will return the sum of the passed parameters as a String, following the rules below.
• If a parameter is an empty string or an Int equal to 0, add -10 to the result.
• If a parameter is an String that represents a positive number (e.g. “10″, not “-5″), add it to the result.
• If a parameter is an Int, add it to the result.
• In any other case, do not add it to the result.
• For an extra shuriken – write the function as a single return statement and don’t use any loops (i.e. no for or while).

Here’s some example calls to the function with their output, so you can check your solution:

let resultEmpty = sumAny() //--> "0"
let result1 = sumAny(Double(), 10, "-10", 2) //--> "12"
let result2 = sumAny("Marin Todorov", 2, 22, "-3", "10", "", 0, 33, -5) //--> "42"

func sumAny(anys: Any...) -> String {
  //code
}

func sumAny(anys: Any...) -> String {
  return String(anys.count)
}

anys.map({item in
  switch item {
    case "" as String, 0 as Int:
      return -10
    case let s as String where s.toInt() > 0:
      return s.toInt()!
    case is Int:
      return item as Int
    default:
      return 0
  }
})

[1,2,3].reduce(4) { result, item in
    return result + item
} //--> 10

func sumAny(anys: Any...) -> String {
    return String((anys.map({item in
        switch item {
        case "" as String, 0 as Int:
            return -10
        case let s as String where s.toInt() > 0:
            return s.toInt()!
        case is Int:
            return item as Int
        default:
            return 0
        }
        }) as [Int]).reduce(0) {
            $0 + $1
        })
}

Challenge #4

Write a function countFrom(from:Int, #to:Int) that will produce as output (eg. via print() or println()) the numbers from from to to. You can’t use any loop operators, variables, nor any built-in Array functions. Assume the value of from is less than to (eg. the input is valid).

Here’s a sample call and its output:

countFrom(1, to: 5) //--> 12345

func countFrom(from: Int, #to: Int) {
    print(from) // output to the assistant editor
    if from < to {
        countFrom(from + 1, to: to)
    }
}
 
countFrom(1, to: 5)

Where To Go From Here?

Get your revenge in part 2!

Ninjas need to take breaks, too. And if you made it this far you're doing a fantastic job -- you deserve some rest!

I'd like to take this time to reflect a bit on the problems and the solutions so far. Swift is very powerful, and is a much more expressive and safe language than Objective-C is.

With the first 4 problems in this challenge, I wanted to push you into exploring various areas of Swift. I hope working on the first few problems so far has been fun and beneficial experience.

Let's do a small recap:

• So far, none of the solutions required you to declare any variables -- you probably don't need them as much as you think!
• You didn't use any loops either. Reflect on that!
• Parameters with default values and variadic parameters make Swift functions incredibly powerful.
• It's very important to know the power of the basic built-in functions like map, reduce, sort, countElements, etc.

And if you're truly looking to take your mind off programming for a bit you watch the classic opening sequence from the game Ninja Gaiden:

Stay tuned for part 2 of the Swift Ninja programming challenge - where you can get your revenge! :]

Programming Challenge: Are You a Swift Ninja? Part 1 is a post from: Ray Wenderlich

The post Programming Challenge: Are You a Swift Ninja? Part 1 appeared first on Ray Wenderlich.