(For more resources related to this topic, see here.)
Using user input and touch events
A touch event occurs each time a user touches the screen, drags, or releases the screen, and also during an interruption. Touch events begin with a user touching the screen. The touches are all handled by the UIResponder class, which then causes a UIEvent object to be generated, which then passes your code to a UITouch object for each finger touching the screen. For most of the code you work on, you will be concerned about the basic information. Where did the user start to touch the screen? Did they drag their finger across the screen? And, where did they let go? You will also want to know if the touch event got interrupted or canceled by another event. All of these situations can be handled in your view controller code using the following four methods (You can probably figure out what each one does.):
-(void)touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event -(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event -(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event -(void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event
These methods are structured pretty simply, and we will show you how to implement these a little later in the article. When a touch event occurs on an object, let’s say a button, that object will maintain the touch event until it has ended. So, if you touch a button and drag your finger outside the button, the touch-ended event is sent to the button as a touch up outside event. This is very important to know when you are setting up touches for your code. If you have a set of touch events associated with your background and another set associated with a button in the foreground, you need to understand that if touchesBegan begins on the button and touchesEnded ends on the background, touchesEnded is still passed to your button.
In this article, we will be creating a simple Mini Golf game. We start with the ball in a standard start position on the screen. The user can touch anywhere on the screen and drag their finger in any direction and release. The ball will move in the direction the player dragged their finger, and the longer the distance from their original position, the more powerful the shot will be. In the Mini Golf game, we put the touch events on the background and not the ball for one simple reason. When the user’s ball stops close to the edge of the screen, we still want them to be able to drag a long distance for more power.
Using gestures in iOS apps
There are special types of touch events known as gestures. Gestures are used all over in iOS apps, but most notable is their use in maps. The simplest gesture would be tap, which is used for selecting items; however, gestures such as pinch and rotate are used for scaling and, well, rotating.
The most common gestures have been put together in the Gesture Recognizer classes from Apple, and they work on all iOS devices. These gestures are tap, pinch, rotate, swipe, pan, and long press. You will see all of the following items listed in your Object Library:
-
Tap: This is an simple touch and release on the screen. A tap may also include multiple taps.
-
Pinch: This is a gesture involving a two-finger touch and dragging of your fingers together or apart.
-
Rotate: This is a gesture involving a two finger-touch and rotation of your fingers in a circle.
-
Swipe: This gesture involves holding a touch down and then dragging to a release point.
-
Pan: This gesture involves holding a touch and dragging. A pan does not have an end point like the swipe but instead recognizes direction.
-
Long press: This gesture involves a simple touch and hold for a prespecified minimum amount of time.
The following screenshot displays the Object Library:
Let’s get started on our new game as we show you how to integrate a gesture into your game:
-
We’ll start by making our standard Single View Application project. Let’s call this one MiniGolf and save it to a new directory, as shown in the following screenshot:
-
Once your project has been created, select it and uncheck Landscape Left and Landscape Right in your Deployment Info.
-
Create a new Objective-C class file for our game view controller with a subclass of UIViewController, which we will call MiniGolfViewController so that we don’t confuse it with our other game view controllers:
-
Next, you will need to drag it into the Resources folder for the Mini Golf game:
-
Select your Main.storyboard, and let’s get our initial menu set up.
-
Drag in a new View Controller object from your Objects Library. We are only going to be working with two screens for this game.
-
For the new View Controller object, let’s set the custom class to your new MiniGolfViewController:
-
Let’s add in a background and a button to segue into our new Mini Golf View Controller scene.
-
Drag out an Image View object from our Object Library and set it to full screen.
-
Drag out a Button object and name it Play Game.
-
Press control, click on the Play Game button, and drag over to the Mini Golf View Controller scene to create a modal segue, as shown in the next screenshot. We wouldn’t normally do this with a game, but let’s use gestures to create a segue from the main menu to start the game.
-
In the ViewController.m file, add in your unwind code:
- (IBAction)unwindToThisView:(UIStoryboardSegue *)unwindSegue { }
In your ViewController.h file, add in the corresponding action declaration:
- (IBAction)unwindToThisView:(UIStoryboardSegue *)unwindSegue;
-
In the Mini Golf View Controller, let’s drag out an Image View object, set it to full screen, and set the image to gameBackground.png.
-
Drag out a Button object and call it Exit Game and a Label object and set Strokes to 0 in the text area. It should look similar to the following screenshot:
-
Press control and click-and-drag your Exit Game button to the Exit unwind segue button, as shown in the following screenshot:
If you are planning on running this game in multiple screen sizes, you should pin your images and buttons in place. If you are just running your code in the iPhone 4 simulator, you should be fine.
That should just about do it for the usual prep work. Now, let’s get into some gestures. If you run your game right now, you should be able to go into your game area and exit back out. But what if we wanted to set it up so that when you touch the screen and swipe right, you would use a different segue to enter the gameplay area? The actions performed on the gestures are as follows:
-
Select your view and drag out Swipe Gesture Recognizer from your Objects Library onto your view:
-
Press control and drag your Swipe Gesture Recognizer to your Mini Golf View Controller just like you did with your Play Game button.
-
Choose a modal segue and you are done.
For each of the different types of gestures that are offered in the Object Library, there are unique settings in the attributes inspector. For the swipe gesture, you can choose the swipe direction and the number of touches required to run. For example, you could set up a two-finger left swipe just by changing a few settings, as shown in the following screenshot:
You could just as easily press control and click-and-drag from your Swipe Gesture Recognizer to your header file to add IBAction associated with your swipe; this way, you can control what happens when you swipe. You will need to set Type to UISwipeGestureRecognizer:
Once you have done this, a new IBAction function will be added to both your header file and your implementation file:
- (IBAction)SwipeDetected:(UISwipeGestureRecognizer *)sender; and - (IBAction)SwipeDetected:(UISwipeGestureRecognizer *)sender { //Code for when a user swipes }
This works the same way for each of the gestures in the Object Library.