Chapter 8 Canon Game App

1. Chapter 8Canon Game App • How do we move the cannon? • The cannon will move based on user moving it with hand touches • Will need to override touchesBegan and touchesMoved • (if we override touchesMoved only, then the cannon will not move if we just click somewhere)

2. Methods to code • Both touchesBegan and touchesMoved will do the same thing, move the cannon towards where the user’s finger is • So they both can call another method that will move the cannon • And we can process any touch, not all of them

3. Processing any touch • The NSSet class represents a set of objects; it allows us to get “one” by calling anyObject • We will then process that touch object [touches anyObject] • inside a new method, let’s call it processTouch (it will take one parameter, a UITouch)

4. processTouch method -void processTouch: (UITouch *) touch { // get location of the touch // calculate angle of location vs cannon’s position // calculate end point of cannon barrell // update the display }

5. Location of touch • UITouch has a method, locationInView, that returns a CGPoint, the location of the touch, within whatever view is specified as the argument CGPoint touchPoint = [touch locationInView:self];

6. Calculate the angle (Book) • The cannon is currently located at • x = 0; y = middle of view (half the height) • tangent of the angle = opposite/adjacent • Opposite = touchPoint.x – 0 = touchPoint.x • Adjacent = half view height – touchPoint.y • (opposite of that if touch is in lower half)

7. Calculate the angle (Book) • Use the atan function (from C) float angle = atan( touchPoint.x / ( self.frame.size.height / 2 – touchPoint.y ) ); • If the touch is in the lower half of the view, we should add PI (M_PI constant) to the angle

8. Calculate end point of the barrel (Book) • Calculate barrelEnd.x and barrelEnd.y (remember that barrelEnd is a CGPoint) • Length of cannon is CANNON_LENGTH barrelEnd.x = CANNON_LENGTH * sin( angle ); barrelEnd.y = -CANNON_LENGTH * cos( angle ) + self.frame.size.height / 2;

9. Calculate the angle (other) • Use the arctan function (from C) float angle = atan( ( self.frame.size.height / 2 – touchPoint.y ) / touchPoint.x ); • Upper half  angle is >= 0 • Lower half  angle is <= 0

10. Calculate end point of the barrel (Other) • Calculate barrelEnd.x and barrelEnd.y (remember that barrelEnd is a CGPoint) • Length of cannon is CANNON_LENGTH barrelEnd.x = CANNON_LENGTH * cos( angle ); barrelEnd.y = -CANNON_LENGTH * sin( angle ) + self.frame.size.height / 2;

11. Updating the screen • The setDisplaysInRect method of UIView updates a rectangle within a view • We could update the whole view [self setNeedsDisplayInRect: CGRectMake( 0, 0, self.frame.size.width, self.frame.size.height )]; • But to save CPU use and speed, all we need is to update a rectangle area enclosing the cannon

12. Rectangle area to refresh • We need to define the top left point (x and y), the width and the height; rectangle should be bigger rather than smaller • Top left x coordinate is 0 • Top left y coordinate is half the height of the view – radius of cannon – length of cannon • Width = radius + length • Height = ( radius + length ) * 2 • // width=length and height=length * 2 are enough

13. Updating a rectangle area • Create a rectangle (CGRect) [self setDisplaysInRect: CGRectMake( 0, self.frame.size.height / 2 – CANNON_BASE_RADIUS – CANNON_LENGTH, CANNON_BASE_RADIUS + CANNON_LENGTH, ( CANNON_BASE_RADIUS + CANNON_LENGTH ) * 2 )]; • This triggers an automatic call to drawRect with the argument CGRect as defined above

14. Updating a rectangle area • drawRect then redraws the cannon (which is located within the rectangle defined before) with the updated x and y values of barrelEnd