Category: Game Development

Tap to Move in SpriteKit

Many iOS games use tap to move. Tap on the screen, and the player character will move to where you tapped.

Use the SpriteKit action moveTo to add tap to move. Supply the destination location and the time interval (in seconds). When you run the action, the sprite will smoothly move to the destination over the time interval.

func touchDown(atPoint pos : CGPoint) {
    let action = SKAction.move(to: pos, duration: 1.0)
    // playerSprite is a SpriteKit sprite node.
    playerSprite.run(action)
}

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    for t in touches { touchDown(atPoint: t.location(in: self)) }
}

The speed the sprite moves depends on the distance between the sprite and the tap. The longer the distance, the faster the sprite moves.

Avoid Subclassing SKSpriteNode

When I see SpriteKit questions on Stack Overflow, I notice a common problem people make. They make every visible entity in their game, such as the player and enemies, a subclass of SKSpriteNode. They also add a property to the subclass for the sprite node.

class Player: SKSpriteNode {
    var sprite: SKSpriteNode
}

Subclassing SKSpriteNode and having a property of SKSpriteNode is redundant. If you have a property for the sprite, you don’t need to subclass SKSpriteNode. If you have a SKSpriteNode subclass, an instance of the subclass has all the components of SKSpriteNode. You don’t need the property.

In 99 percent of cases, avoid subclassing SKSpriteNode and add a property for the sprite node to your class or struct. Prefer composition to inheritance.

class Player {
    var sprite: SKSpriteNode
}

A player has a sprite node along with other properties that depend on your game (score, number of lives, health, etc.). A player is not a sprite node.

Handling Touches in a SpriteKit Game

One thing most iOS games must do is handle touch input from the player. If you use SpriteKit, handling touch input isn’t too difficult.

When you create a SpriteKit project or playground, the GameScene.swift file includes the following functions to handle touch input:

  • touchesBegan
  • touchesMoved
  • touchesEnded
  • touchesCancelled

The two functions you’ll use the most are touchesBegan and touchesMoved. You use touchesBegan to handle taps and use touchesMoved to move a sprite with your finger.

Determining What Was Touched

Use the location property to determine where the touch occurred. Call the atPoint function to determine what SpriteKit node was touched.

Once you know what SpriteKit node the player touched, you can do whatever you need to do with the node, such as move it, hide it, or highlight it.

Example Playground

I have a SpriteKit playground that lets you drag a sprite around the screen.

Adding Files to SpriteKit Playgrounds

I left one important thing out of my SpriteKit playground article: how to add files to the playground. I wanted to put that material in the article, but there was so much to mention that it warranted its own article.

Keep in mind that Swift playgrounds aren’t designed to handle tons of files. If you find yourself creating dozens of files, you’re better off creating an Xcode project for your game.

Playgrounds Have Limited Support for Creating New Files

If you look at the navigator for a playground, you will see that a playground page has a Sources folder and a Resources folder.

PlaygroundNavigator

You can add a new Swift file to the playground by control-clicking the Sources folder and choosing New File. Control-clicking the Resources folder and choosing New File creates an empty file. Those are the only options for creating a new file in a playground.

Adding New Files to the Playground

How do you add things like new scenes and image files to your playground? You must perform the following steps:

  1. Put the playground in its own folder.
  2. Add the files to the playground folder.
  3. Add the files from the playground folder to the playground.

Putting the playground in its own folder isn’t mandatory, but doing so makes organizing the files in the playground easier.

Adding Files to the Playground Folder

In Xcode choose File > New > File to create a new file. The New File Assistant opens.

NewFileAssistant

Click the iOS button at the top of the window. Select the type of file you want to create. For SpriteKit games the most common files to create are the following:

  • Asset catalog
  • Cocoa Touch class
  • SpriteKit action
  • SpriteKit particle file
  • SpriteKit scene
  • SpriteKit tile set

Click the Next button. Name the file, navigate to the playground folder, and click the Create button.

Troubleshooting

If the New File Assistant does not open and a new file appears in the playground, close the playground and reopen it. Swift playgrounds can be flaky.

Add the Created Files to the Playground

Now that you created the file, you can add it to the playground. Select the Resources folder or Sources folder (for source code files), right-click, and choose Add Files to. An Open panel opens. Navigate to the playground folder, select the file you want to add, and click the Add button.

Troubleshooting

If the file you added does not appear in the playground, close the playground and reopen it.

SpriteKit Playground Introduction

One of the easiest ways to get started making iOS games is to use Swift playgrounds in Xcode. With playgrounds you can create game prototypes, experiment with gameplay mechanics, and learn SpriteKit without worrying about annoying details like code signing, certificates, and provisioning profiles. This article introduces you to using playgrounds in iOS game development.

Creating a Playground

The first step in using a Swift playground is to create one. Launch Xcode and choose File > New > Playground. The New Playground Assistant opens.

CreatePlayground

Click iOS at the top of the window and select the Game template. Click the Next button. Name your playground and choose a location to save it. Click the Create button to finish making the playground.

Show the Game View

When you create the playground, all you see is an editor with the source code for the playground. The next step is to open the live view so you can see the game running in the playground.

The first step to opening the live view is to open the assistant editor so you can have both the source code editor and the live view visible in the playground. On the top right side of the playground window are two sets of three buttons. The first set of buttons controls the editor. Click the center button to open the assistant editor.

AssistantEditorHighlighted

When you click the button, a menu opens to let you decide how the assistant editor appears. If you choose Assistant Editors on Right, the editor and game view appear side by side. If you choose Assistant Editors on Bottom, the game view appears below the editor. Where you want the assistant editor is a matter of personal preference.

When you open the assistant editor, you’ll notice the live view is blank and not showing a game. That’s because the playground is not running so there’s nothing to show. The bottom left area of the window has two buttons. Click the right button to run the playground.

RunPlaygroundHighlighted

Now the playground is running and the live view should have a black background with a Hello, World! label showing.

HelloWorldLabel

Play with the Default Playground

Clicking in the game view shows a spinning shape. Clicking and dragging creates a series of shapes. If you drag slowly, it looks like you’re dragging a Slinky around the game view.

Removing Apple’s Boilerplate Code

Apple included code in the playground to show the label and the spinning shapes. But you’re not going to need that code in your own game projects.

Now it’s time to remove what Apple supplied in the playground so you can start prototyping your game. You’re going to remove the Hello, World! label from the scene, remove the code that uses the label, and remove the code that creates the spinning shapes.

Stop the Playground

Removing Apple’s code is going to cause errors temporarily so it makes sense to stop the playground until everything is removed. Click the Stop button at the bottom of the window to stop running the playground.

Show the Navigator

To remove the label from the scene, you must open the scene file. To open the scene file you must show the navigator in the playground window. On the top right side of the playground window are two sets of three buttons. Click the first button in the second group of buttons to open a navigator on the left side of the window.

ShowNavigatorHighlighted

Remove the Label from the Scene

Once you open the navigator, you can remove the label from the scene. Select the file GameScene.sks from the navigator to open the scene editor.

Navigator

Select the label in the scene editor.

RemoveLabel

Press the Delete key to remove the label.

Remove the Code

Now it’s time to remove Apple’s code. Let’s start by removing the following two lines of code that declare properties (variables) for the label and spinning nodes:

Next, remove the code inside the following functions:

  • didMove
  • touchDown
  • touchMoved
  • touchUp

After removing the code, the functions should look like the following:

Now when you run the playground, there will be an empty black view. It takes a surprising amount of work to get the playground in a state where you can start making a game in the playground.

Add Your Own Stuff

Now you can start making a game prototype. To finish this tutorial I’m going to add a sprite to the scene and add code to move the sprite to where the player taps on the screen.

Add a Sprite Node

Select the file GameScene.sks from the navigator to open the scene editor.

Open the object library by option-clicking the Library button at the top of the window. Option-clicking will keep the object library open so you can add items to the scene. If you don’t want the object library open the whole time, then click the Library button instead of option-clicking.

ObjectLibraryButtonHighlighted

Select Color Sprite from the object library and drag it to the scene canvas.

ObjectLibrary

Select the sprite in the canvas. Open the attributes inspector by choosing View > Inspectors > Show Attributes Inspector.

AttributesInspector

Enter a name for the sprite in the Name text field. Remember the name because you’re going to use it in your code. If you want a different color for your sprite, choose a color from the Color menu.

Add Code

The last step is to add some code to show the sprite and move it to where the player taps on the screen. There are three pieces of code to add:

  • Declare a property (variable) for the player sprite.
  • Write code to read the player sprite from the scene (.sks) file.
  • Write code to set the player sprite to the location of the tap.

To declare a property for the player sprite, add the following line of code before the didMove function:

The start of the GameScene class should look like the following code:

The code declares the playerSprite variable to be an optional of type SKSpriteNode, which is SpriteKit’s class for sprites. Making the variable an optional means that playerSprite is either an object of type SKSpriteNode or nil. The playerSprite property is initially nil. You will set it in the didMove function.

To set the playerSprite property, add the following line of code in the didMove function:

So the function looks like the following code:

The code checks for an item in the GameScene.sks file with the name playerSprite and sets the playerSprite variable to that item. The name of the sprite in the call to childNode has to match the name you gave it in the GameScene.sks file. If the names don’t match, the code won’t be able to find the sprite you added to the scene file. The playerSprite variable will still be nil, and nothing will happen when the player taps on the screen. The as? SKSpriteNode part of the code says to treat the item as a sprite node instead of a generic SpriteKit node.

The last thing to do is set the sprite’s position to where you tap in the scene. Add the following line of code in the touchDown function:

So the function looks like the following code:

The code sets the position of the sprite to the position of the touch on the screen.

Run the playground, and the sprite should appear where you click in the game view.

What engine should I use to make my iOS game?

If you go to Reddit’s game development group, you will see lots of questions from people asking what engine they should use to make their game. Since Check Sim Games is about iOS game development, I figured I should answer this question for people who want to make iOS games.

There are two engines for making iOS games that stand above the rest: Unity and SpriteKit.

Unity

Unity is a very popular engine for making 2D and 3D games. Unity has a lot going for it. It’s free until you start making $100,000(US) a year with your games. Lots of people use Unity so there are numerous books, articles, and videos to help you learn how to use Unity. Unity also has a large asset store of tools, libraries, and artwork you can buy to speed up the development of your game.

Reasons to use Unity

  • You want your game to run on Android and other non-Apple platforms.
  • You want to make a 3D game. SpriteKit is for 2D games only.
  • You want to develop your game on a Windows computer.

The last reason deserves more explanation. You need access to a Mac to install your game on an iOS device and to upload your game to the App Store. But with Unity you can develop an iOS game on a Windows computer. Unity has a Unity Remote iOS app you can install from the App Store. With Unity Remote you can play a scene from your game on an iOS device without having to install the whole game on the device.

SpriteKit

SpriteKit is Apple’s framework for making 2D games. SpriteKit is not a standalone app. Use Xcode to make your game with SpriteKit.

In Xcode choose File > New > Project to create a new project for your game. Click either the iOS or Cross-platform button at the top of the New Project Assistant. Select the Game project template.

NewProjectiOSGame

Reasons to use SpriteKit

  • You don’t care about Android. SpriteKit games run only on iOS and other Apple platforms.
  • You want to program your game in Swift. Unity uses C# as its programming language.

iOS Game Development Requirements

People new to iOS game development want to know what’s required to make an iOS game. iOS game development has the following requirements:

  • An iOS device
  • An Apple developer account
  • Access to a Mac

If you have a Mac, an iOS device, and $99(US), you can develop and ship an iOS game.

iOS Device

You’re going to need an iOS device to test your game. It doesn’t matter much the type of iOS device: iPhone, iPad, or iPod Touch. All that matters is the device is capable of running your game. Any device capable of running iOS 9 would make a good test device.

Apple Developer Account

You need an Apple developer account to submit apps to the App Store. If you own an Apple device, you probably created an Apple ID to use the device. You can use that Apple ID to create a developer account.

Go to Apple developer’s site and click the Account link at the top of the page. Sign in with your Apple ID. If you don’t have an Apple ID, click the Create yours now link to create an Apple ID.

When you start developing your game, you can stick with a free developer account. To put your app on the App Store, you must join Apple’s developer program and pay the $99(US) annual fee. But you can wait until you’re close to finishing your game to join the developer program.

Access to a Mac

You don’t need a Mac to make an iOS game. You can make an iOS game with the Unity game engine on a Windows computer. But you need access to a Mac to submit your game to the App Store.

If you’re not sure what kind of Mac to buy, make sure you get one that is capable of running the latest version of macOS. Any Mac made in the past 3–5 years should be suitable to develop iOS games.

Getting Started with ProBuilder in Unity

ProBuilder is a Unity asset that Unity bought and incorporated into the 2018 version of Unity. ProBuilder simplifies creating 3D levels. Unity’s instructions on installing ProBuilder are a little vague so I’m writing this post on how to get started with ProBuilder using Unity 2018.

Adding ProBuilder to Your Project

Start by creating a new project using the 3D template. ProBuilder works only with 3D projects.

After creating your project you must add ProBuilder to the project. Choose Window > Package Manager to open the package manager window. Click the All button in the top left portion of the window to show the available packages to install. Select ProBuilder from the list of packages.

UnityPackageManagerWindow

The right side of the window contains a description of the ProBuilder asset. Click the Install button to add ProBuilder to your project.

Using ProBuilder

To start using ProBuilder, open its window by choosing Tools > ProBuilder > ProBuilder Window.

ProBuilderWindow

The easiest way to start is to click the New Shape item in the ProBuilder window.

ProBuilderShapeToolWindow

Choose a shape from the Shape Selector menu. A plane is a good choice for your first shape. It lets you place the ground for a player character to walk on. Cubes are good for building walls.

When you choose a shape from the Shape Selector menu, the Shape Tool window provides controls to customize the shape. Most shapes have controls to set the size of the shape. Click the green Build button at the bottom of the Shape Tool window to add the shape to your scene.

Poly Shape Tool

If you want to create a shape that’s not in the Shape Selector menu, use ProBuilder’s Poly Shape tool. Click the New Poly Shape item in the ProBuilder menu.

The first step to creating a poly shape is to build the surface of the shape. Click inside the scene to create a vertex for the surface. Select a vertex and drag to change its position. Continue to click to create vertices, making sure to eventually connect them.

ProBuilderPolyShapeVerticesHighlighted

Once you connect the vertices, ProBuilder creates the surface. After ProBuilder creates the surface, move the mouse up or down to change the shape’s height.

ProBuilderPolyShapeSurface

Where to Learn More About ProBuilder

Go to Unity’s ProBuilder page to learn more about ProBuilder and watch video tutorials about it.