Book Image

Getting Started with SpriteKit

By : Jorge Jordán
Book Image

Getting Started with SpriteKit

By: Jorge Jordán

Overview of this book

SpriteKit is Apple’s game engine to develop native iOS games. Strongly boosted by the Apple Inc., Cupertino, it has increased in popularity since its first release. This book shows you the solutions provided by SpriteKit to help you create any 2D game you can imagine and apply them to create animations that will highlight your existing apps. This book will give you the knowledge you need to apply SpriteKit to your existing apps or create your own games from scratch. Throughout the book, you will develop a complete game. The beautiful designs implemented in the game in this book will easily lead you to learn the basis of 2D game development, including creating and moving sprites, and adding them to a game scene. You will also discover how to apply advanced techniques such as collision detection, action execution, playing music, or running animations to give a more professional aspect to the game. You will finish your first game by learning how to add a main menu and a tutorial, as well as saving and loading data from and to the player’s device. Finally, you will find out how to apply some mobile games techniques such as accelerometer use or touch detection.
Table of Contents (13 chapters)
Getting Started with SpriteKit
About the Author
About the Reviewer

Our first SKSpriteNode class

The SKSpriteNode class is the one that we are going to use in order to load the sprites that will be a part of our game.

The SKSpriteNode class is a subclass of SKNode, and it's used to represent visual elements called sprites on the screen by using images. As you are going to need an image to create a sprite (an instance of SKSpriteNode class), perform the following steps to add it to the project:

  1. Unzip the file in the desired location.

  2. In Xcode, right-click on the InsideTheHat group on the Navigator tab, select New Group, and call it Art.

  3. Right-click on the Art group and select Add Files to InsideTheHat….

  4. A dialog box will open, where you need to select the rabbit.png image in the 7338_01_Resources folder that you just unzipped.

  5. Ensure that Copy items if needed is selected and click on Add.

Now that the image has been added, we will need a variable to manage the main character. Therefore, on GameScene.swift, add the following line just after class GameScene:SKScene {:

   private var rabbit: SKSpriteNode!

Note that we have declared the variable as a var because its value will change throughout the game's life.

Now that the sprite variable has been declared, modify the didMoveToView method by:

 override func didMoveToView(view: SKView) {
    func initializeMainCharacter() {
        // Creating the rabbit sprite using an image file and adding it to the scene
  rabbit = SKSpriteNode(imageNamed: "rabbit")

As soon as the scene is loaded, we call a new method named self.initializeMainCharacter that we created just to keep the code as clean as we can. We will use the self object because we are referencing a method in the current class. If you look at the method, you will see that it initializes the sprite with the init(imageNamed:) method, which takes the image that we have just added to the project to provide the sprite's visual content.


Note that you don't need to specify the extension of the filename, as it will load a .png, .jpg, .jpeg, .tiff, .tif, .gif, .bmp, .BMPf, .ico, .cur, or .xbm file.

Thanks to this init method, the sprite's size property (and its frame) is automatically set to the dimensions of the image and the color to white (1.0, 1.0, 1.0).

Once the sprite has been initialized, we add it to the scene by using the addChild method, which adds a new child to the specified container (GameScene in this case), and this is how we add new nodes to the scene.

If you run the game now, you will see something similar to what's shown in the following screenshot:

The sprite has been placed at the bottom left corner of the screen (the (0,0) coordinate), which corresponds to the scene's anchor point. You may be wondering why the rabbit is not fully visible.

The answer is that the default value of the anchorPoint on an SKSpriteNode is the center of the texture at (0.5, 0.5), while the anchorPoint of the scene is at (0,0). As soon as the sprite is added to the scene, their anchor points get aligned.

For our game, we want the rabbit to be placed at the center of the screen and near at the bottom of the screen. Therefore, add the following lines of code to initializeMainCharacter just before addChild(rabbit):

 // Positioning the rabbit centered
    rabbit.position = CGPoint(x:(view!.bounds.size.width/2), y: rabbit.size.height)

With the preceding line of code, we created a CGPoint class, which is a commonly used class that is utilized to represent a point in a two-dimensional coordinate system that accepts a CGFloat value for both the x and y axes. At the bottom-center of the screen, we are setting this point as the position of the rabbit.

Also note how we are getting the center of the screen's width. We get the width property from the size method of the bounds property of the current view (passed as an input argument when the scene is loaded), which is the rectangle that contains all the visual elements. As we want our sprite to be centered on the x axis, we just need to divide it by 2, and we have the desired value.


As there are several devices that support iOS and each of them has its own specific resolution and screen sizes, it's very important to always work with relative positions. This way, you don't need to worry about an element's position.

If you look at the code, you will realize that we are setting the sprite's position before adding it to the scene, but you can place it just after the addChild method, and the result won't vary. Now, if you run the game, the rabbit will be placed in the correct position, as shown in the following screenshot:

At this moment, there is nothing that represents that the rabbit is trying to escape from somewhere. Therefore, we need to add context to the game, which is the same as adding a background.