Our first SKSpriteNode class

The SKSpriteNode class https://developer.apple.com/library/ios/documentation/SpriteKit/Reference/SKSpriteNode_Ref 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:

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) {
        self.initializeMainCharacter()
    }
    
    func initializeMainCharacter() {
        // Creating the rabbit sprite using an image file and adding it to the scene
  rabbit = SKSpriteNode(imageNamed: "rabbit")
        
        addChild(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.

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.

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.