Detecting Collisions CSE 391 Fall 2012 Tony Scarlatos

Create a new project Just to do something different this time, let’s create a Utility Application. It has a built-in feature, the flipside view, that we’ll use to confirm that the collision of our 2 image objects was successfully detected. First, create a couple of images to use. As we have done before, add them to the Supporting Files folder of the Xcode Utility Application you just created.

Set up the MainViewController.h file There are 2 views in a Utility app – the main view and the flipside view. In the project folder open up the MainViewController.h file. We’ll need to declare 2 image objects and their properties. We’ll also need to create a method called checkCollision. One method is already given to us – an IB action called showInfo – which will reveal the flipside view. The code is on the following slide. When you have written the code, click the MainView.xib file to launch Interface Builder.

Create the image objects #import MainViewController : UIViewController { (nonatomic, strong) IBOutlet UIImageView (nonatomic, strong) IBOutlet UIImageView *image2; -(void)

Set up your interface In Interface Builder you’ll notice an info icon (an “i” set in a circle) in the lower right of the View window, which you can select and delete. It’s actually a built-in button that triggers the flipside view, but we’ll be using a conditional statement to do that. Change the background color of the View if you wish from the Inspector window’s Attributes tab. Drag in 2 Image Views. I scaled them to 100 X 100 using the Inspector’s View Size tab. I placed one Image View near the top of the screen and the other near the bottom. Select each Image View and load the appropriate image using the dropdown list in the Attributes tab.

Remove Flipside View button

Make connections Select File’s Owner from the Document window. In the Inspector’s Connections tab, drag a line from the image1 method’s connector to your top Image View, and drag a connection for the image2 method to the bottom Image View. Save your Main.storyboard file and return to Xcode.

Implementation In the MainViewController.m file, we will need to set up a touch event. We’ll do this right after statement. The first line sets up the touch event, the second line assigns it to an instance called myTouch, and the third line moves the image1 object to the location of the touch in the View (based on the center of the object’s bounding box). The last line calls the checkCollision method each time a touch event occurs. The code is on the following slide.

The touch event -(void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { UITouch *myTouch = [[event allTouches] anyObject]; _image1.center = [myTouch locationInView:self.view]; [self checkCollision]; }

Checking for a collision Now we’ll implement the checkCollision method. The first line is a conditional statement that looks for an overlap of the frames (bounding boxes) of the image1 and image2 objects. If the objects overlap, the methods within the curly braces will execute. The actual method, FlipsideViewController, was copied from the IBAction showInfo code block farther down in the.m file. In effect this tells the app to flip the view when a collision is detected. The last line of the code simply resets the image1 object to its original position. The code is on the following slide.

The conditional statement -(void) checkCollision { if(CGRectIntersectsRect(image1.frame, image2.frame)) { [self sender:self]; image1.frame=CGRectMake(100,20,100,100); }

Creating the Segue

Build the flipside view Click FlipsideViewController in the Interface Builder. There isn’t much you have to do here. You can give the View a title, or you delete the text in the title bar. I dragged a label into the View that says “Happy Halloween!” Click Run in Xcode.

Success!