In this article, we’ll look at responding to user’s touches on the screen.
Set up a new project
It’s time to do the File → New → Project… dance again! Open up Xcode and create a new Game project:
When it comes time to name the project, give it an appropriate name like RespondingToTouches (that’s the name I gave my project).
Once again, we’ll set the game to that it’s landscape-only. The simplest way to restrict our app’s orientation to landscape is by checking and unchecking the appropriate Device Orientation checkboxes in the app’s properties. Make sure that:
Portrait is unchecked
Landscape Left and Landscape Right are checked
Click the screenshot to see it at full size.
You can confirm that the app is landscape-only by running it. It should look like the video below, with spinning spaceships appearing wherever you tap the screen. It shouldn’t switch to portrait mode when you rotate the phone to a portrait orientation:
Making the spaceship go to where you touch the screen
It’s time to make our own interactivity. Let’s make an app that puts the spaceship sprite in the center of the screen, and then has the spaceship sprite immediately go to wherever the user touches the screen.
Open Gamescene.swift and replace its code with this:
First task: drawing the spaceship sprite in the center of the screen. Before you look at the code, see if you can do it yourself. There’s enough information in the previous article to help you do this, or you can follow these hints:
A sprite is an instance of the SKSpriteNode class, and given the name of an image, you can instantiate one by using SKSpriteNode‘s init(imageNamed:) method.
A game scene’s didMoveToView method is called when the scene is first presented, and it’s the perfect place to do things like setting sprites in their initial locations.
A sprite’s location onscreen can be set using its position property, which is of type CGPoint, a struct that holds 2 Floats: one for the x-coordinate, and another for the y-coordinate.
The frame of a scene is the rectangle — a CGRect — that determines its bounds. You can get its width and height through the properties bearing those names.
You might want to scale down the spaceship sprite to one-third of its size. The setScale method will do that.
To display a sprite in a scene, you need to use the addChild method.
If you were to touch the screen, nothing would happen. That’s because there’s no code to respond to touches on the screen…yet! We’ll start by adding code to the touchesBegan method.
touchesBegan is called when the user puts a finger on the screen. It provides information about that touch action in its touches<c/ode> argument, a Set of touch objects, which are instances of the UITouch class. One of the properties of UITouch is locationInNode, which is a CGPoint. Given that sprites have a position property that is also a CGPoint, you've probably already guessed what we're about to code.
The default setting for multitouch in an app is “off”. We want to keep things simple for now, so we’ll just go with the default, which means that the app will register only one touch at a time, which in turn means that touchesBegan‘s touches argument will only contain a single touch object. We’ll retrieve that object from touches by using Set‘s first property.
Try coding it yourself before looking at the code below:
If you run the app, you’ll see that the spaceship jumps to wherever you put down your finger:
Making the spaceship go to where you released your finger
You’ll notice that if you hold your finger on the screen and move it about, the ship doesn’t follow your finger. It just stays where you first touched the screen and doesn’t move until you remove your finger and touch some other point.
The name touchesBegan implies that it has a counterpart method for when the user releases his/her finger from the screen. That method is called touchesEnded, and it takes the same arguments as touchesBegan.
Start typing touchesEnded into GameScene, and Xcode’s autocompletion should make it simple for you to set up a touchesEnded method. Cut the code from touchesBegan and paste it into touchesEnded, like so:
Note what happens: the spaceship doesn’t move when you touch the screen until you remove your finger. Only when you release your finger does it move, and it jumps to the location where you released your finger from the screen. Try touching the screen, moving your finger to another location on the screen, and then releasing your finger.
What if we put the same code into both the touchesBegan and touchesEnded methods, like this?
If you run the app, the spaceship now jumps to the location where you made initial contact with the screen, and again to the location where you released your finger.
Making the spaceship follow your finger as you move it
You’re probably wondering if there’s a method that responds to changes that occur between the touchesBegan and touchesEnded events, something that lets you track the movements of the user’s finger as it moves on the screen. There is, and it’s called touchesMoved. It takes the same arguments as touchesBegan and touchesEnded, which means that it should respond to the code that we put into those two methods. Copy and paste the code from either touchesBegan and touchesEnded and paste it into touchesMoved. Your code should look like the following:
You’ll find that the spaceship jumps to the location where you touched the screen and as long as you keep your finger on the screen, you can drag it around. When you release your finger from the screen, the ship stays at the location where you released your finger.
Let’s refactor the duplicate code in touchesBegan, touchesMoved, and touchesEnded into its own method, handleTouch. The code will now look like this:
You may have noticed that in the touchesEnded method, the spaceship sprite is restored to its normal scale with an action rather than by simply setting its scale using the setScale method. I found that simply setting the spaceship back to its normal scale with setScale a little too abrupt; restoreScaleAction makes the transition very smooth.
What we just covered
In this article, we covered:
A recap of:
Starting a new Game project in Xcode
Restricting an app’s orientation to landscape-only
Drawing sprites at a specified location on the screen
Responding to the event where the user touches the screen with the touchesBegan method
Responding to the event where the user stops touching the screen with the touchesEnded method
Responding to the event where the user moves his/her finger while touching the screen with the touchesMoved method
Combining actions with touch events for interesting visual effects.
In the next article in this series, we’ll look at moving player characters around the screen.
Here’s the story hidden inside that story: Like most online news outlets, Business Insider tries to squeeze a few more clicks and pageviews out of you by providing links to related stories also on their site. For this story, here are the articles they linked to:
…and here are the IDC numbers they cited. Because Business Insider is really in the clicks-for-money business and not the “informing you” business, they made do with a crappy screenshot of IDC’s table of 4Q 2015 tablet sales:
Business Insider‘s reporting on the shrinking tablet market is correct. From 2014 to 2015, tablet sales shrank by 10.1%, with Huawei as the only top 5 vendor seeing growth. As for their prediction of the iPad’s Pro’s impending doom: if this is doom, I’d like some of that action, please!
Courtesy of George Takei’s Facebook page — an ever-reliable source nerd humor — here’s a handy guide that should prove useful to people looking at software job site’s descriptions of available positions. As with many things, it’s funny because it’s true.
The 1960s Star Trek TV series wasn’t written by engineers, scientists, or mathematicians, which is why one of their tricks for showing you that Mr. Spock was an intellectual badass was having make calculations to a ridiculous degree of preciseness, a dramatic device that TV Tropes calls ludicrous precision.
You don’t want your apps to be as annoying as Spock could sometimes be, which is why rounding is an important operation. Rounding is useful for things like:
The limits of your input precision. Suppose you’re calculating the average of the daily high temperatures over the past week, each of which is accurate to the nearest degree. Because of the way an average (or more technically, the mean) is calculated, the result may contain a decimal point. However, the result you report shouldn’t be more precise than the data it’s based on, so you’ll want to round it to the nearest degree.
The limits of usefulness. If you’re displaying directions for a short trip, you probably wouldn’t want to report the total distance with more than a 1/4 mile or 1/2 kilometer precision, and you’d probably want to state the trip time rounded to the nearest minute. On the other hand, for a trip covering the width of the United States or Canada, anything more precise than rounding the total distance to the nearest 10 miles and the trip time to the nearest half-hour isn’t generally helpful.
Practical considerations. When performing financial calculations, especially when dealing with cash, you’ll want to round your result to the nearest penny. In countries like Canada, where they’ve phased out the penny, you’ll want to round cash calculations to the nearest nickel.
Swift’s built-in rounding functions
Swift comes built-in with most of the rounding functions in C’s math library. The ones you’re most likely to use are round, floor, and ceil:
Given a number n, this returns nrounded to the nearest whole number. For example:
round(2.0) returns 2.0
round(2.2) returns 2.0
round(2.5) returns 3.0
round(2.9) returns 3.0
With negative numbers, a fractional value of 0.5 or higher rounds the number down, and lower fractional values round the number up:
round(-2.0) returns –2.0
round(-2.2) returns –2.0
round(-2.5) returns –3.0
round(-2.9) returns –3.0
Given a number n, this returns nrounded down to the nearest whole number. For example:
floor(2.0) returns 2.0
floor(2.2) returns 2.0
floor(2.5) returns 2.0
floor(2.9) returns 2.0
floor(-2.0) returns -2.0
floor(-2.2) returns -3.0
floor(-2.5) returns -3.0
floor(-2.9) returns -3.0
Given a number n, this returns nrounded up to the nearest whole number (you’ve probably guessed that ceil is short for ceiling). For example:
ceil(2.0) returns 2.0
ceil(2.2) returns 3.0
ceil(2.5) returns 3.0
ceil(2.9) returns 3.0
ceil(-2.0) returns -2.0
ceil(-2.2) returns -2.0
ceil(-2.5) returns -2.0
ceil(-2.9) returns -2.0
round, floor, and ceil each come in two versions:
A version that accepts a Double argument and returns a Double result (Doubles are 64-bit numbers and have a precision of at least 15 decimal digits), and
a version that accepts a Float argument and returns a Float result (Floats are 32-bit numbers and have a precision of as little as 6 decimal digits).
Rounding n to the nearest multiple of x
round, floor, and ceil work well when you’re trying to round to nearest whole number, but they’re not as useful if you’re facing one of these rounding scenarios:
Rounding a number to the nearest 10 (as demonstrated in the “Rounding Coaster” shown above), 100, 1000, etc.
Rounding a number to the nearest .1, .01, .001, etc.
Rounding a dollar value to the nearest penny
In Canada, which has eliminated the penny (because it costs more than a penny to manufacture one), you calculate change by rounding to the nearest nickel
Rounding a number to the nearest multiple of x
For situations like the ones listed above, you’ll find these Swift functions handy:
Handy rounding functions
// Given a value to round and a factor to round to,
// round the value to the nearest multiple of that factor.
// If we put a negative number n into decimalPlaces,
// roundToPlaces rounds to the nearest multiple of
print(roundToPlaces(52.3761,decimalPlaces:-1))// 50.0 (rounding to nearest multiple of 10)
print(roundToPlaces(52.3761,decimalPlaces:-2))// 100.0 (rounding to nearest multiple of 100)
print(roundToPlaces(52.3761,decimalPlaces:-3))// 0 (rounding to nearest multiple of 1000)
Removing the fractional part of a number
“Seamus” from Family Guy is rather truncated.
Sometimes, you just want to lop off anything after the decimal point. That’s what trunc (short for truncate) is for:
Displaying rounded values
There are times when you want to store a precise value but display a rounded one. Use the String class’ init(format:arguments:) method and C’s format strings for printf to display numbers as strings representing rounded values. Here it is in action: