What do you get with Print?

Instant access to your digital eBook copy whilst your Print order is Shipped

Paperback book shipped to your preferred address

Download this book in EPUB and PDF formats

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

iOS Game Programming Cookbook

Chapter 1. iOS Game Development

Since the launch of iOS devices, game development has always attracted developers in ever-increasing numbers. There are various game engines available in the market, which allow developers to start developing their games for iOS devices.

In this chapter, we will be focusing on the following topics:

Getting started with the SpriteKit game framework
Developing a mini game using SpriteKit

Getting started with the SpriteKit game framework

With the release of iOS 7.0, Apple has introduced its own native 2D game framework called SpriteKit. SpriteKit is a great 2D game engine, which has support for sprite, animations, filters, masking, and most important is the physics engine to provide a real-world simulation for the game.

Apple provides a sample game to get started with the SpriteKit called Adventure Game. The download URL for this example project is http://bit.ly/Rqaeda.

This sample project provides a glimpse of the capability of this framework. However, the project is complicated to understand and for learning you just want to make something simple. To have a deeper understanding of SpriteKit-based games, we will be building a bunch of mini games in this book. To understand the basics of the SpriteKit game programming, we will build a mini AntKilling game in this chapter.

Getting ready

To get started with iOS game development, you have the following prerequisites for SpriteKit:

You will need the Xcode 5.x
The targeted device family should be iOS 7.0+
You should be running OS X 10.8.X or later

If all the above requisites are fulfilled, then you are ready to go with the iOS game development. So let's start with game development using iOS native game framework. We will be building a mini game in the chapter and will be taking it forward in every chapter to add more and more features and enhancements.

How to do it...

Let's start building the AntKilling game. Perform the following steps to create your new SpriteKit project:

Start your Xcode. Navigate to File | New | Project....
Then from the prompt window, navigate to iOS | Application | SpriteKit Game and click on Next.
Fill all the project details in the prompt window and provide AntKilling as the project name with your Organization Name, device as iPhone, and Class Prefix as AK. Click on Next.
Select a location on the drive to save the project and click on Create.
Then build the sample project to check the output of the sample project. Once you build and run the project with the play button, you should see the following on your device:

How it works...

The following are the observations of the starter project:

As you have seen, the sample project of SpriteKit plays a label with a background color.
SpriteKit works on the concept of scenes, which can be understood as the layers or the screens of the game. There can be multiple scenes working at the same time; for example, there can be a gameplay scene, hud scene, and the score scene running at the same time in the game.

Now we can look into the project for more detail arrangements of the starter project. The following are the observations:

In the main directory, you already have one scene created by default called AKMyScene.
Now click on AKMyScene.m to explore the code to add the label on the screen. You should see something similar to the following screenshot:
Now we will be updating this file with our code to create our AntKilling game in the next sections.
We have to fulfill a few prerequisites to get started with the code, such as locking the orientation to landscape as we want a landscape orientation game.
To change the orientation of the game, navigate to AntKilling project settings | TARGETS | General. You should see something similar to the following screenshot:
Now in the General tab, uncheck Portrait from the device orientation so that the final settings should look similar to the following screenshot:
Now build and run the project. You should be able to see the app running in landscape orientation.
The bottom-right corner of the screen shows the number of nodes with the frame rate.

Developing a mini game using SpriteKit

Now you have learned enough about SpriteKit. To explore this in more depth, let's create a mini game that will help you to understand the concepts in much more detail. We are going to create an AntKilling game. In this game, we will place an ant on the screen; the ant will animate when you click on it.

Getting ready

We will use the project we created in the previous section. To create a mini game, we will have to update the source files we have got with the starter project. Now it's time to update AKMyScene to hold our ant sprites.

Before getting into the steps to update the code, download all the resources for this chapter and check for the assets folder, which has all the images used in this project.

How to do it...

Execute the following steps sequentially to create a mini game:

Open the Resources folder and add them to your Xcode project.
While adding the resources to the Xcode, make sure that the selected target is AntKilling and Copy items into destination group's folder (if needed) is checked.
Now delete all the existing code from AKMyScene.m and make it look similar to the following screenshot:
Now, firstly, we have created a private interface to declare private variables:
```
@interface AKMyScene ()
@property (nonatomic) SKSpriteNode *ant;
@end
```
Then, in the init method, we have printed a log to print the size of the screen:
```
NSLog(@"Size: %@", NSStringFromCGSize(size));
```
Now we will change the screen background color to white using the following line of code:
```
self.backgroundColor = [SKColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0];
```
Then we will change the screen background color to white using the backgroundColor property in the following line of code.
```
self.backgroundColor = [SKColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0];
```
In the following line of code, we are creating a sprite object using the spriteNodeWithImageNamed method and passing the image name to the same. Then we have positioned it to 100, 100 of the screen, which is in the bottom-left corner of the screen. Then finally we have added it as a child.
```
self.ant = [SKSpriteNode spriteNodeWithImageNamed:@"ant.jpg"];
self.ant.position = CGPointMake(100, 100);
[self addChild:self.ant];
```

Tip

Downloading the example code

You can download the example code files from your account at http://www.packtpub.com for all the Packt Publishing books you have purchased. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

In games, we have to keep two sets of images, one for the normal display and the second for the retina display. In the preceding block of code, we have provided the name of the sprite as ant.jpg, which is going to autoreference to ant@2x.jpg for the retina devices.

Now build and run your application; you should see something similar to the following screenshot:

Now as you can see, the screen color has changed to white but there is no ant on the screen. This means something has gone wrong in the code. So, now let's check our logs, which should be printing the following:

2014-07-22 19:13:27.019 AntKilling[1437:60b] Size: {320, 568}

So the scene size is wrong. The scene should print 568 as the width and 320 as the height but it's printing the opposite. To debug this, navigate to your AKViewController.m viewDidLoad method. You can find the complete code for this function at AntKilling/AntKilling/AKViewController.m.

So, from this method, we can see that our scene is absorbing the size from the bounds of the view and this viewDidLoad method is invoked even before the view has been added to the view hierarchy. So it has not responded to the layout changes. Thus, because of the inconsistent view bounds our scene is getting started with wrong bounds.

To solve this issue, we have to move the scene startup code in the viewWillLayoutSubviews method. After removing the code from the viewDidLoad method and pasting it to viewWillLayoutSubviews, you can find the complete code for this function at AntKilling/AntKilling/AKViewController.m.

Now, once again build and run the app; you should see the following output:

How it works...

So, congrats! You have fixed the issue. Your ant has now appeared on the screen at the given location. If you observe closely, you can see that the status bar is at the top of the game, which does not look great. To remove the status bar from the screen, open your AntKilling-Info.plist file and add an UIViewControllerBasedStatusBarAppearance attribute with value NO. Your .plist file should look like the following screenshot:

Build and run your project again; you should be able to see the game without the status bar now:

This looks perfect now; our ant has been residing on the screen as expected. So now our next objective is to animate the ant when we tap on it. To accomplish this, we need to add the following code in the AKMyScene.m file, just below your initWithSize method:

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
  UITouch *touch = [touches anyObject];
  CGPoint positionInScene = [touch locationInNode:self];
  SKSpriteNode *touchedNode = (SKSpriteNode *)[self nodeAtPoint:positionInScene];
  if (touchedNode == self.ant) {
    SKAction *sequence = [SKAction sequence:@[[SKAction rotateByAngle:degreeToRadian(-3.0f) duration:0.2],
    [SKAction rotateByAngle:0.0 duration:0.1],
    [SKAction rotateByAngle:degreeToRadian(3.0f) duration:0.2]]];
    [touchedNode runAction:[SKAction repeatActionForever:sequence]];
  }
}

float degreeToRadian(float degree) {
  return degree / 180.0f * M_PI;
}

You can find the complete code for this function at AntKilling/AntKilling/AKMyScene.m.

So, now let's go line-by-line to understand what we have done so far. To begin with, we have added the - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event method to the grab all the touches on the scene.

Now in the function the first line allowed you to grab touch using CGPoint positionInScene = [touch locationInNode:self];.

In the next line, we grabbed the touch and converting it to the CGPoint positionInScene = [touch locationInNode:self]; location.

In the following line, we fetched the sprite, which has been touched:

SKSpriteNode *touchedNode = (SKSpriteNode *)[self nodeAtPoint:positionInScene];

Now, once you have the sprite object, compare and check whether the select object is the ant bug. If it's the ant bug, then animate the object by adding the following line of code:

SKAction *sequence = [SKAction sequence:@[[SKAction rotateByAngle:degreeToRadian(-3.0f) duration:0.2],[SKAction rotateByAngle:0.0 duration:0.1],[SKAction rotateByAngle:degreeToRadian(3.0f) duration:0.2]]];
[touchedNode runAction:[SKAction repeatActionForever:sequence]];

Using the SKAction class, you can execute various sequence of animations such as rotation, moveBy, moveTo, and so on. Also all the rotate methods accept the angle in radians. So to achieve the rotation, we must convert the degree to radians before passing to any rotate function.

Now, this code will animate the selected sprite. Build and run the project and you will see the ant animating on tap.

You will soon notice that on tapping the ant, it starts animating, but there is no way to stop this. So now let's add a way to stop this animation once you click anywhere on the scene. Navigate to the - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *) event method, and update it to the following code:

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
  UITouch *touch = [touches anyObject];
  CGPoint positionInScene = [touch locationInNode:self];
  SKSpriteNode *touchedNode = (SKSpriteNode *)[self nodeAtPoint:positionInScene];
  if (touchedNode == self.ant) {
    SKAction *sequence = [SKAction sequence:@[[SKAction rotateByAngle:degreeToRadian(-3.0f)duration:0.2],
    [SKAction rotateByAngle:0.0 duration:0.1],
    [SKAction rotateByAngle:degreeToRadian(3.0f) duration:0.2]]];
    [touchedNode runAction:[SKAction repeatActionForever:sequence]];
  } else {
  [self.ant removeAllActions];
  }
}

Now if you observe closely, you can see that we have added an if-else condition to check whether the touch is made on the ant, which allows it to animate; when the touch is made anywhere outside the screen, stop all the actions. To stop all the actions on the sprite, we can use the removeAllActions method on the sprite.

What do you get with Print?

Instant access to your digital eBook copy whilst your Print order is Shipped

Paperback book shipped to your preferred address

Download this book in EPUB and PDF formats

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Frequently bought together

$54.99

$54.99

$48.99

Total $ 158.97

siddharth shekar Jun 30, 2015

This is a very good book for beginners. The book goes in-depth into making sure that the concepts are explained in detail. Also apart from just explaining the technology the book also covers essential skills like AI programming, Physics and Multiplayer game development which are additionally required for game development. The book also touches on OpenGLES and covers in depth 3D texture mapping and animation for anyone trying to make the move from 2D to 3D game development. I heartily recommend this book anyone who are getting into iOS game development.

Amazon Verified review

Mahaneesh chandra Jun 10, 2015

One of the best purchase of mine so far. I had plenty of doubts before purchasing this book. But the author made it easy to read and follow. Even the complicated stuffs are explained way easier. I can say the author has put lot of efforts in bringing different flavours together here to help us explore more possibilities of using iOS game features in a step by step process. A very handy book I recommend to all.

Ess Feb 23, 2016

Beware! The code in this book is in Objective C. So, if you're just starting out with development, chances are you want a book with code written in Swift.The book seems to have some nice features to it and the authors discuss interesting topics, however I was discouraged by seeing the choice on programming language given that Swift is the new way to go.

Bo Kalvslund May 08, 2015

The book uses Objective-C to my surprice - Swift is the s***.But Good book and examples

iOS Game Programming Cookbook: Over 45 interesting game recipes that will help you create your next enthralling game

What do you get with Print?

iOS Game Programming Cookbook

Chapter 1. iOS Game Development

Introduction

Getting started with the SpriteKit game framework

Getting ready

How to do it...

How it works...

Developing a mini game using SpriteKit

Getting ready

How to do it...

Tip

How it works...

Page 1 of 4

Description

Who is this book for?

Product Details

What do you get with Print?

Product Details

Frequently bought together

Table of Contents

Recommendations for you

Customer reviews

People who bought this also bought

About the author

FAQs

iOS Game Programming Cookbook: Over 45 interesting game recipes that will help you create your next enthralling game

What do you get with Print?

Contact Details

Shipping Address

Billing Address

Description

Who is this book for?

Product Details

What do you get with Print?

Contact Details

Shipping Address

Billing Address

Product Details

Packt Subscriptions

Frequently bought together

Table of Contents

Recommendations for you

Customer reviews

People who bought this also bought

About the author

FAQs