1. Touches Detection and Other Remaining Parts Lecture 3 1

2. Organization 2  Part 2 – Touches Detection  2.1 Touches Events and Simple Touch Actions  2.2 Dragging the manImage  Part 3 – Remaining Parts  3.1 Collision Detection  3.2 Update Information  3.3 Game End Condition

3. Touches Actions and Gestures 3  Touches Actions and Gestures  Tapping  Single Tap – touch a single point of the screen once  Double Tap – touch a single point of the screen twice  Multitouch  Touch several points on the screen simultaneously  Dragging  Touch on a certain UI component and move the center of the UI component  Swipping  Move on the screen to the right or left to represent next/prev page  Zooming In or Out  Move two fingers towards or outwards to represent zoom out or zoom in gesture

4. Tapping – Single Tap 4 Screen View Touch point on screen Touch a Single Point on the Screen

5. Tapping – Double Taps and Multiple Taps 5 Screen View First touch point on screen Second touch point on screen Double Taps: Touch a single point on the screen twice within a short period of time Multiple Taps: Tap more than twice are possible to be detected

6. MultiTouches 6 Screen View Touch point 1 MultiTouches: It is possible to detect more than one touch on the screen simultaneously Touch point 2

7. Dragging 7 Screen View Dragging: Touch on a certain UI component (cannot apply action type) and move to other place on the screen together with the UI component

8. Swipping 8 Screen View Swipping: Touch on a certain point on the screen and move to other place Usually, moving right is used to represent the gesture of next page, and moving left is used to represent the gesture of previous page

9. Zooming In/Out 9 Screen View Zooming out: Two fingers touch on the screen simultaneously and move towards each other. This is to represent the gesture that we would like to zoom out to look less detail on the image Zooming in: Two fingers touch on the screen simultaneously and move outwards

10. Basic Touches Event Handlers 10  Traditionally, iPhone SDK does not provide any method for interpreting the touches actions and gestures  They only provide three basic methods for handling three different stages of touches events  Touches Began Event  This method will be invoked ONCE when the finger first touches on the screen every time  Touches Moved Event  This method will be invoked CONTINUOUSLY when the finger moves on the screen  Touches Ended Event  This method will be invoked ONCE when the finger leaves the screen

11. Basic Touches Method 11  Your iPhone app can handle the three mentioned basic touch events by implementing the following methods inside the view controller.m file, i.e., no need declare the methods in.h file // Touches Began Method -(void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ NSLog(@”Touches Began”); } // Touches Moved Method -(void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{ NSLog(@”Touches Moved”); } // Touches Ended Method -(void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{ NSLog(@”Touches Ended”); }

12. Part 2.1 – Simple Touch Actions Test 12  You may wonder the relationship between the touch events and touch actions  We will then discuss how to interpret several common touches actions from these touches events  Single Tap on Screen  Moving on the Screen  Double Taps on the Screen  Two Touches on the Screen

13. Situation 1 – Single Tap on Screen 13 TouchesBegan TouchesEnded Finger touches the screen Finger leaves the screen

14. Situation 2 – Moving on the Screen 14 TouchesBegan TouchesEnded Finger touches the screen Finger leaves the screen TouchesMoved Finger moves on the screen

15. Information Provided by a Touch Event 15  Within each touch event method, you can request to give you some more detailed information  How many touches currently identified on the screen  The touch point of each touch on the screen  How many times a certain point is touch consecutively

16. Example: Number of touches 16 -(void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ // By invoking the allTouches method of event, which is provided as the input parameters of the touches method (i.e., touches began method in this case), a set of touches will be returned. // Note that the return type is NSSet, and it is just a convention of using allTouches as a variable to hold the set. You can definitely use our variable name.  NSSet * allTouches = [event allTouches]; // Number of touches simultaneously on screen // Recall that allTouches is the variable holding the set of touches on the screen. // We can ask for how many touches occur on the screen by asking for its size directly  [allTouches count]; }

17. Example: Information of the first touch object 17 -(void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{  NSSet * allTouches = [event allTouches];  UITouch * touch = [[allTouches allObjects] objectAtIndex:0]; // Touch Point Location Information // By invoking the locationInView method of the UITouch, we can get the actual touch point location of this touch on our current screen view by using our current screen view as the input parameter, i.e., [self view]  CGPoint touchPoint = [touch locationInView:[self view]]; // Number of Consecutive Touches on a single point // Recall that touch is a variable referring to a specific touch information on the screen // We can invoke its tapCount method to get this information  [touch tapCount]; }

18. Situation 3 – Double Taps or Multi Taps 18  NSSet * allTouches = [event allTouches];  UITouch * touch = [[allTouches allObjects] objectAtIndex:0];  switch ([touch tapCount]){  case 2:{  NSLog(@”Touch a point 2 times on screen”);  CGPoint touchPoint = [touch locationInView:[self view]];  NSLog(@”x: %f, y: %f”, touchPoint.x, touchPoint.y);  } }

19.  NSSet * allTouches = [event allTouches];  switch([allTouches count]){  case 2:{  NSLog(@”touch 2 points on screen”);  UITouch * touch1 = [[allTouches allObjects] objectAtIndex:0];  CGPoint touchPoint1 = [touch1 locationInView:[self view]];  NSLog(@”x: %f, y: %f”, touchPoint1.x, touchPoint1.y);  UITouch * touch2 = [[allTouches allObjects] objectAtIndex:1];  CGPoint touchPoint2 = [touch2 locationInView:[self view]];  NSLog(@”x: %f, y: %f”, touchPoint2.x, touchPoint2.y);  } Situation 4 – Two or More Touches on Screen 19

20. Simulating two touch points in iPhone Simulator 20  In iPhone simulator, single touch point is used by default.  To simulate two points, you can press the OPTION key when you move the mouse pointer on the screen view

21. Part 2.2 – Touch Moved and Dragging Practice 21  Objective:  Allow the manImage to be dragged horizontally when the user touches on the image.  Algorithm:  Detect the touch move position on screen  Check whether the touch falls on the image or not  If true  Handle the manImage move situation  Problem:  Why do we implement the function in touchesMoved?  How to distinguish whether your finger falls on the image or not?

22. Image Touch Detection Technique 22  Recall that to detect the touch location on the screen view  UITouch * touch = [[allTouches allObjects] objectAtIndex:0];  CGPoint touchPT = [touch locationInView:[self view]];  To check whether your finger touch falls on the image  touchPT.x > x1 and touchPT.x < x2  touchPT.y > y1 and touchPT.y <y2  Note that: x2 = x1+width, y2 = y1+height (x1, y1)(x2, y1) (x1, y2) (x2, y2)

23. manImage Move Situation 23  Nx = New Center Point X coordinate = Touch Point X Coordinate  Ny = New Center Point Y coordinate = Old Center Point Y Coordinate  [manImage setCenter:CGPointMake(Nx, Ny)]; Center Point Touch Point Old Center Point Touch Point New Center Point

24. Confine manImage to Move Within Boundary I 24 (0, 0) (480, 320) (480, 0) (0, 320) Right Boundary Left Boundary Right Point: (Nx + width / 2, Ny) Left Point: (Nx – width/2, Ny)

25. Confine manImage to Move Within Boundary II 25  Allow Movement if  Moving within Left Boundary  X coordinate of New Left Point of manImage: (Nx - Width / 2)  X coordinate of New Left Point of manImage > Left Boundary  Moving within Right Boundary  X coordinate of New Right Point of manImage: (Nx + Width / 2)  X coordinate of New Right Point of manImage < Right Boundary  Not Allow Movement Otherwise

26. Part 3 Missing Parts of the Game 26  Part 3.1 Collision Detection  This is necessary to detect whether various animating images collide with each other  Part 3.2 Game Information Update  Determine scores and allow the game to progress  Part 3.3 Game End Condition  This is necessary to determine when the game should end  Part 3.4 Reset Game States  Part 3.5 Game Cheat (Challenge of today)

27. Common Collision Technique I 27  Each image object is treated as a circle with a radius on the screen  The radius can be approximated by width/2 or height/2  If the sum of the radius of two objects is less than the distance between their center positions  Then, the two objects are considered to be collided.  To simplify your work, you can add the following method to the view controller to check whether two objects collide  -(bool) collide : (float) x1 : (float) y1 : (float) r1 : (float) x2 : (float) y2 : (float) r2 { float centerDistance = sqrt(pow((x1-x2),2) + pow((y1-y2),2)); return (centerDistance < (r1 + r2)); }

28. Collision Detection Technique II 28 Radius of volcanoRock Distance between manImage and volcanoRock Radius of manImage Not Colliding Colliding

29. manImage and volcanoRock Collision Detection Algorithm 29  For each volcanoRock, check whether it collides with manImage  If yes,  Remove the volcanoRock from superview  Remove the volcanoRock from volcanoRockArray

30. Game Cheat - Challenge of Today 30  Touch the VolcanoRock will make it vanish  Hints:  Consider the touch event used  Think about how to detect the volcano rock object is touched