When it comes to game development, most people have the fear that it’s challenging to create a simple game. In the past developers relied on low-level languages such as C or C++ to move a character across the screen. Now that mobile development has taken a big chunk of the gaming world there’s another alternative called SpriteKit. SpriteKit is a simple, yet powerful 2D game framework that is fully supported by Apple and is easy to get into. In SpriteKit you’re able to build simple games such as Flappy Bird, Super Mario, Squashy, Spacequest and much more. Your games can also be built on iOS, MacOS, tvOS, and WatchOS. To get a full understanding of how SpriteKit works, I think it’s best to develop a game throughout this article, hypothetically speaking. Let’s dive into Xcode and design a game where our car tries to avoid objects in the street.
How to get started with SpriteKit:
To begin let’s open Xcode, select file, new project, choose iOS Application, game, and select next.
Next, go ahead and download the attached files so we can import them into our project. Drag and drop the assets into the assets folder on the left-hand side, in the folder tab.
After that, let’s create a mockup of our game. We are going to begin with the GameScene.sks. In this file, you will design the layout of your car game using sprites. A sprite is just a small computer graphic; that can be used to display a 2D image. Once arriving, you will see a black background; with a “hello world” in the middle. If it is present, remove the hello world title by clicking on it and pressing delete. Once you change the background color to grey by clicking on the Scene in the left-hand column and opening the attribute inspector, you’re now able to change the color of the background. Go ahead and drag in a color sprite. Change the color of the sprite to green (hex: 6AB04C) and give it an appropriate size to build out our grass. Remember to grab another color sprite to build out the grass on the other side. Grab a few more sprites to build out our yellow (hex: F9CA24) lines and white lines to finish out our road. Lastly, drag two more sprites for the kid and our blue car. Give them a name inside the attributes inspector, because we will reference them inside our code. Also, be sure to change the image of both using the texture drop-down menu. It could look something like this:
To ensure everything is struggling, run the app and test it out.
Now that we have the basics of our game going lets’ get started with writing some code to get our car moving on the screen. Jump over to the GameScene.swift file.
To start off, remove any code that’s inside any of the existing methods below in our GameScene class. Next, create two SKSpriteNodes, one will be for the car, another for the kid, and also add a float center point property. These SKSpriteNodes are in reference to our car and kid sprite we created in our GameScene.sks. To give a precise definition of sprites and SKSpriteNodes, here’s an overview from Apple. “Sprites are the basic building blocks used to create the majority of your scene’s content, so understanding sprites is useful before moving on to other node classes in SpriteKit. Sprites are represented by SKSpriteNode objects. A SKSpriteNode object can be drawn either as a rectangle with a texture mapped onto it or as a colored, untextured rectangle. Textured sprites are more common because they represent the primary way that you bring custom artwork into a scene. This custom artwork might represent characters in your game, background elements, or even user interface elements, but the basic strategy is the same. An artist creates the images, and your game or app SKSpriteNode loads them as textures. Then you create sprites with those textures and add them to the scene.”
Our centerPoint property is going to be the reference point for the center of the screen. Create two new helper methods for creating the car and kid. One method can be named blueCarSetup, and the other kidSetup.
In these methods, we are customizing each SKSpriteNode. In the blueCarSetup method, we want it to have physics simulation for the car to have a realistic effect in the game. We also need to add physics to our car so that we can move it on the screen. We’re going to set the isDynamic property to true in order to move the vehicle. We also need to add an impulse with a positive Y value so that the car will move upward in the Y direction; if it were negative, it would run in a downward direction. For those who are not familiar with physics, true gravity is -9.8m/s^2, but we need our car to move in an upward direction so it must be positive. The restitution has to do with the bounciness of our physics body, and the linearDamping is concerning the physics body linear velocity that’s being reduced. The linearDamping value can only be between 0.0 & 0.1. In our kidSetup method, we are going to do the same thing but make a few adjustments. In this method, we want the kid to remain stationary, so we set the isDynamic property to false and leave out the impulse since he’s not going to be moving.
Let’s go ahead and create two new methods to set up our blueCar and kid. These methods will be called blueCarSetup and kidSetup. We will also need to set up the gravity for the scene and give our center point a value.
Now add the setup method to the didMove method. This method is very similar to viewDidLoad in iOS app development. This method becomes fired after the scene has presented to the view.
Next, in the touchBegan method, let’s add in some logic to toggle which direction the car should move. This method will be called whenever the user taps the screen. Also, add a can move property to indicate whether the car should move. Each of these properties outside this method are initially set to false.
We need to create our last method moveCar to handle the small logic for the car moving and updating. The x position values are some testable values that can change based on how far you want the car to move in the right or left direction. The CarMinimum property value is set to -100.0 and the carMaximum is set to 100.0. Each of these values are CGFloats.
Finally, let’s add the necessary logic to our update method to indicate when the car should move. This method is called once per frame as long as the scene is not in a pause state.
Now that we have all of our code in place try and run the app.
Congratulations on building your first game!
We could have added a couple of things into our game like collisions, game levels, a game menu, a moving street, and much more, but I will leave those things up to you to build and explore.
Pros & Cons of SpriteKit
Using SpriteKit comes with a few pros and cons. The most significant advantage is that this platform can make it very easy to get started with building a game, even if you have little to no experience in game development. With SpriteKit, you can build out specific features more easily than in other frameworks, like treating videos as sprites or applying neat image effects and masks.
If you’re going to be building for multiple platforms or looking into 3D gaming, then you may want to go with an alternative framework or gaming engines such as Unity or Unreal. If you wish to gain more knowledge about SpriteKit, Unity, or Unreal, I would suggest checking out Ray Wenderlich, Dev Slopes, Udemy, or Jared on Youtube. Each of these resources should get you going in the right direction to build out your new and upcoming game. Good luck!
Below are some excellent sources to learn more about SpriteKit would be: