iOS SpriteKit Game Development

iOS SpriteKit Game Development

Introduction

SpriteKit empowers the developer to build fully featured, high quality games using Objective-C for iOS as well as, OS X. SpriteKit renders 2D frames at very high frame rates using the device’s (iPhone, iPad, Macbook Pro, etc.) graphics processor. A developer will have a lot of fun creating games with this framework. It is very easy to create a game that builds for both iOS and OS X platforms. It also supports cool special effects like videos, filters, and masking, an integrated physics library, and a lot more. In this blog, we will learn how to create a simple and fun 2D game for iPhone, from start to finish.

Note: Before getting started let’s make sure to install the latest version of Xcode (5.X) which contains support for SpriteKit and iOS 7.

Solution

Follow the steps given below in SpriteKit code and use it in Xcode (5.X).

Step 1:

Start Xcode and Select File > New > Project from the main menu.

Start xcode

Step 2: 

iOS > Application > SpriteKit Game template and click “Next”.

Sprite kit game template

Step 3: 

Enter the game name in the product Name, choose iPhone for devices and leave the Class Prefix blank and click “Next”.

enter product name

Step 4:

On device orientation Deselect “Landscape – Left & Right”.

deselect landscape

Step 5:

In Xcode toolbar, select the iPhone (4-inch with iOS 7) Simulator and click run button.

select iphone simulator

Step 6:

We will see a single label that says “Hello World!” and when we click anywhere on the screen, a sample image will appear.

Hello world

Step 7:

Before we could further develop the game we need to architecture the game artists and scene images. If we have a good designing knowledge we can design our favourite character otherwise, select from the images given below and reuse it in the development.

Picture 7:

Car character

Picture 8:background image

Step 8:

Add the main character of the game as shown in picture 7, and also add scrolling background as shown in picture 8.

Step 9:

Add the main character in MyScene.m file. We can observe that there are many code blocks inside MyScene.m file to display, move and rotate the main character. For now delete everything in Myscene.m and replace it with the code given below:

Step 10:

Let’s go over the code line by line. Declare a Variable for the main character. We shall use actionMoveUp and actionMoveDown in the later stage of the code. initWithSize: is the method that gets called when the scene is first created.

Step 11:

Add the below lines after importing MyScene.h file.

Step 12: 

This code will setup two categories we will need at the latter part of the game development. Now we are going to add the Car to the screen. Add this method after intiWithSize method.

 Step 13:

Change initWithSize method and add [self addCar] after setting background color or background image instead of whiteColor.

Step 14:

Lets go over addCar method step-by-step.

Step 14.1: 

This creates a new SKSpriteNode with Car image and reduces the size of the image half. After that we rotate this car in such a away, it points in the right direction.

Step 14.2: 

Before we move further we need to replace MyScene.h with the following:

Step 14.3: 

Remove all the methods from ViewController and replace it with the following code:

Step 14.4:

We are now creating the scene from viewWillLayoutSubviews method instead of viewDidLoad. When viewDidLoad is called it is not aware of the layout changes, hence it will not set the bounds of the scene correctly.

Step 14.5:

Now we are going to add capability to move the car on its y axis based on where we have touched on the screen. In MyScene.m add the following method.

Step 15:

Add the code given below to activate static vector math method.

Step 17:

Next we will add the method in  MyScene.m to move the background.

Step 18:

This bag img name moves it to the left according to the touch velocity.

Step 19:

Run the project. We will get an output as shown below.

output

Conclusion

In this blog, we have discussed about iOS SpriteKit game development with latest Xcode (5.x). Using Xcode we can change and create the game character. Using this blog as a base we can develop many more games in future to suit the needs of the younger generation.

Reference

3929 Views 2 Views Today