Touches Detection and Other Remaining Parts

1. Touches Detection and Other Remaining Parts Lecture 3

2. Organization • 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 • 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 • Touch a Single Point on the Screen Touch point on screen Screen View

5. Tapping – Double Taps and Multiple Taps • 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 Second touch point on screen First touch point on screen Screen View

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

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

8. Swipping • 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 Screen View

9. Zooming In/Out • 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 Screen View

10. Basic Touches Event Handlers • 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 fingermoves on the screen • Touches Ended Event • This method will be invoked ONCE when the finger leaves the screen

11. Basic Touches Method • 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 • 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 Finger leaves the screen Finger touches the screen TouchesEnded TouchesBegan

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

15. Information Provided by a Touch Event • 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 -(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 = [eventallTouches]; // 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 • [allTouchescount]; }

17. Example: Information of the first touch object -(void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ • NSSet * allTouches = [eventallTouches]; • UITouch* touch = [[allTouchesallObjects] objectAtIndex:0]; // Touch Point Location Information // By invoking the locationInViewmethod 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] • CGPointtouchPoint = [touchlocationInView:[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 tapCountmethod to get this information • [touchtapCount]; }

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

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

20. Simulating two touch points in iPhone Simulator • 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 • 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 manImagemove 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 • 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 • Nx = New Center Point X coordinate = Touch Point X Coordinate • Ny = New Center Point Y coordinate = Old Center Point Y Coordinate • [manImagesetCenter:CGPointMake(Nx, Ny)]; Touch Point Touch Point Center Point Old Center Point New Center Point

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

25. Confine manImage to Move Within Boundary II • 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 • 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 • 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 Radius of volcanoRock Distance between manImage and volcanoRock Radius of manImage Colliding Not Colliding

29. manImage and volcanoRock Collision Detection Algorithm • 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 • Touch the VolcanoRock will make it vanish • Hints: • Consider the touch event used • Think about how to detect the volcano rock object is touched