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:
Unzip the
7338_01_Resources.zip
file in the desired location.In Xcode, right-click on the InsideTheHat group on the Navigator tab, select New Group, and call it Art.
Right-click on the Art group and select Add Files to InsideTheHat….
A dialog box will open, where you need to select the
rabbit.png
image in the7338_01_Resources
folder that you just unzipped.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) { 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.
Tip
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.
Tip
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.