Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From \$16.50/m

# Build Missile Command With SpriteKit: Project Setup

Difficulty:IntermediateLength:LongLanguages:

In this tutorial, you'll learn how to use Apple's SpriteKit framework to recreate a Missile Command game for the iPad. Along the way, you'll learn more about several core concepts such as, sprites, touches, physics, collisions, and explosions. The goal of the second tutorial is to add physics, collisions, and explosions. The second tutorial also expands the game experience by adding a multi-player mode.

## Memories

Do you remember Missile Command? Atari released the original game on March 8, 1981. It was an action game built for Arcade systems and became very popular around the world.

Since its release in 1981, several adaptations were made for various platforms. It's now time for you to recreate the original game using modern technologies, iOS, Objective-C, and, the iPad.

You can still play the original game. Take a look over at IGN and relive some of your childhood memories.

## Final Preview

The below screenshot gives you an idea of what the final result will look like. If you like what you see, then let's get started.

## Requirements

To complete this tutorial, you'll need Xcode 5 and the latest iOS 7 SDK. You can download Xcode 5 and the SDK from the iOS Dev Center.

At the end of each section, you'll find one or more challenges. The objective of these challenges is to help you learn the techniques and technologies used in this tutorial. Some are easy while others will be more challenging, requiring a good grasp of the SpriteKit framework. With the exception of the last challenge, remember that the challenges are not required to complete the tutorial. However, we hope you give them a try.

If you have questions about the SpriteKit framework, we suggest you take a look at our other SpriteKit tutorials on Mobiletuts+.

## 1. Project Setup

Launch Xcode 5 and create a new SpriteKit project by selecting New > Project... from the File menu. Choose the SpriteKit Game template, name your project Missile Command, and select iPad from the Devices menu.

If you have questions about this step, we encourage you to read a more detailed explanation of this step in Build an Airplane Game with SpriteKit - Project Setup.

With the project set up, add the project's resources, which you can download using the link at the top of the page. We'll start by focusing on the MyScene class. Inside MyScene.m, you'll find two methods, initWithSize: and touchesBegan:withEvent:.

In initWithSize:, remove or comment out the code that is related to the SKLabelNode instance as we don't need it in this tutorial. Take a look at the updated implementation of initWithSize: below.

In touchesBegan:withEvent:, we do something similar. For now, the method should only contain the logic for touch detection and the location of the user's touch. These changes will give you a compiler warning, but we'll get rid of that later in this tutorial.

Your next step is to create two new classes. The first class, MenuScene, will be used for the main menu and the second class, MultiScene, will be used for the multiplayer interface. Both classes are subclasses of SKScene. The MyScene class will be used to implement the single-player interface.

As we saw in the MyScene class, we need to implement an initializer for each class. For now, the initializer only sets the scene's background color as we saw in MyScene.m. The initializer of the MenuScene class also needs to set up the game title. To do that, we need to take care of a few things.

• Create a SKSpriteNode object.
• Set its zPosition.
• Set its scale.
• Set its position.
• Add the object as a child to the class.

Take a look at the implementation of initWithSize: of the MenuScene class for clarification.

You should now have a main menu and a title. It's time to update the main view controller so that it displays the menu every time the application is launched. Open ViewController.m, locate the viewDidLoad method, and replace the SKScene instance with an instance of the MenuScene class as shown below.

Don't forget to import the header file of the MenuScene class.

Great. It's time to build your project and run it to verify that everything is working correctly. You should see an interface similar to the screenshot below.

Challenge: To create a unique experience, we challenge you to do the following.

• Modify the background colors of each scene.
• Play with the properties of the MenuScene title object.

## 2. Objects, Flowers, Monsters, and Missiles

Before adding objects to the game, we need to add the ability to navigate the game. Declare two UIButton instances in the MenuScene class and a variable, sizeGlobal, of type CGSize to store the size of the screen. The latter will help us with positioning the objects on the screen. Update MenuScene.m as shown below.

Set sizeGlobal to size in the class's initializer as shown in the code snippet below.

Next, declare three methods in the MenuScene class.

• didMoveToView: to present the buttons when the game transitions to the menu view.
• moveToSinglePlayerGame which transitions the game to the MyScene scene and removes the buttons.
• moveToMultiPlayerGame which transitions the game to the MultiScene scene and also removes the buttons.

In didMoveToView:, the application verifies if the scene transition took place without issues. If no issues popped up, the application loads the resources, displays them to the user, and instantiates the buttons.

In didMoveToView:, we call moveToSinglePlayerGame and moveToMultiPlayerGame. Let's implement these methods next. In each method, we need to do the following.

• Create an instance of either MyScene or MultiScene.
• Create a scene transition.
• Present the new scene.
• Remove the buttons.

Can you implement these methods on your own? If you're unsure, take a look at their implementations below.

Don't forget to add an import statement for the header files of MyScene and MultiScene.

Build your project and run the application in the iOS Simulator or on a physical device. The game should now look similar to the screenshot below.

The main menu is finished. It's time to focus on the game's single-player interface (MyScene). The MyScene class will contain most of the game's logic. The first step is to position the bullet-shooting flowers at the bottom of the screen. We'll create three flowers, each of which will have unique properties.

You will also track the number of exploded missiles and display that value in another SKLabelNode named labelMissilesExploded. As you can see below, we'll need a number of instance variables or ivars. The purpose of each ivar will become clear when we update the initWithSize: method in MyScene.

In initWithSize:, we instantiate and configure the various SKLabelNode instances.

In initWithSize:, we also call addFlowerCommand, which we haven't covered yet. The implementation isn't difficult as you can see below. In addFlowerCommand, we instantiate three SKSpriteNode instances, one for each flower, and position them at the bottom of the screen with the help of position.

You can now build the project and run it in the iOS Simulator to see the game's single-player interface.

We've got flowers, but we still need some monsters. It's time to implement the addMonstersBetweenSpace: method. In this method, we create three monsters and position them between the flowers. The position of the monsters is determined by the spaceOrder variable. We randomly position the monsters by using getRandomNumberBetween:to:, which generates a random number between two given numbers.

The implementation of getRandomNumberBetween:to: is shown below.

We invoke addMonstersBetweenSpace: twice in the initWithSize: method of the MyScene class.

Now that we've got flowers and monsters, it's time to add the missiles. We need to do the following to accomplish this.

• Create an SKAction to invoke a method.
• Create an SKAction to repeat that action.
• Implement addMissilesFromSky:, which will randomly generate three new missiles and add them to the scene.

We'll declare the SKAction instances in initWithSize:. Take a look at the updated implementation of initWithSize: below.

The implementation of addMissilesFromSky: is shown below.

If you build and run your application, the result should look similar to the screenshot below.

Challenge: This is great, but we really need more monsters. We challenge you to do the following.

• Modify the movement of the missiles.

## 3. User Interaction

We can see some movement, but we need the key component of the game, user interaction. We add user interaction by leveraging two methods, touchesBegan:withEvent: and positionOfWhichFlowerShouldBegin:. To add user interaction we must take the following into account.

• Each flower can only shoot ten bullets.
• You must detect the location of the user's touch and use the closest flower to shoot the bullet.
• The bullet should move to the location of the user's touch.
• The bullet should explode at the location of the user's touch.

The updated implementation of touchesBegan:withEvent: is shown below.

Even though that's a lot of code to go through, it isn't that complicated. You check if there are any bullets left for each flower and detect the zone in which the user tapped by invoking positionOfWhichFlowerShouldBegin:, which we'll discuss in a moment. At the same time, we verify whether the user tapped below the flower, which prevents the flower from shooting a bullet.

The positionOfWhichFlowerShouldBegin: method returns the position that corresponds to a specific zone in which the user has tapped. Remember that you divided the screen into three parts to position the three flowers so you'll need to detect the zone in which the user has tapped and link it to one of the flowers. The flower that shoots the bullet will be the one closest to the user's tap. This is what the implementation of positionOfWhichFlowerShouldBegin: looks like.

To make the bullets move, we need to create another SKSpriteNode instance. Each bullet has a duration and an SKAction associated with it. This logic is also included in touchesBegan:withEvent:. Take a look at the updated implementation below.

If you build and run your application, the flowers should be able to shoot bullets. They don't explode yet, but we'll take care of that in the next tutorial.

Challenge: Are you up for another challenge? Take a look at these challenges.

• Create and define different bullet movements.
• Modify the duration of the movement of each bullet.

## Conclusion

If you've followed the steps in this tutorial, you should now have the foundation of the Missile Command game using the SpriteKit framework. If you have any questions or feedback, feel free to leave a comment below.