Animation Pre-Lab Lecture 3 1

Revisit 2  Pre-Lab 2  Create new UI components through codes  Too many UI components that are required to put on the screen  Lab 2 – Part 1A  Triggered by a certain action  Lab 2 – Part 3  Dynamic UI Components – One time update  Change the text of the UI component  To show some status information of the game (e.g., targetsLeft, targetsShot)  Lab 1 – part 3  Change the hidden status of the UI components  To show an appropriate image from a set of images locating in the same location at the appropriate time (e.g., current target window, next target window)  Lab 2 – part 1B  Change the center position of the UI component  To give a sense of one-step movement  Lab 2 – part 2

Overview of Pre-Lab 3 3  Boundary Information  View Layer Concept  Algorithms in Animation (Dynamic UI Components – Continuous Update)  Next Position Calculation Technique  Data and Image Object  Moving Out of Boundary  Overview of Lab 3

Screen View Orientation and Coordinate Representation 4 (0, 0) (480, 320) (480, 0) (0, 320) Landscape Mode (0, 0) (320, 0) (320, 480)(0, 480) Protrait Mode +y +x +y +x The Coordinate System of the screen view will be adjusted based on the its orientation Start from origin (0, 0) on the left upper corner Increases in X coordinate towards the right Increases in Y coordinate towards the bottom

Screen View Boundary 5  480 pixels * 320 pixels forms the VISIBLE AREA of the screen view in the landscape mode  320 pixels * 480 pixels for the Portrait one  Why we need to reinstate the Visible Area?  Putting the UI components to area others than the visible area is possible and is a common technique used in game development  Generating a new target balloon in the visible area will give the player a sudden shock (the new object suddenly appears)  Generating the new target balloon in other area and moving towards the visible area seems to be a more smooth technique  For Example, in Landscape Mode  X 480  Y 320

Out of Screen View Area 6 (0, 0) (480, 320) (480, 0) (0, 320) Screen View (Visible Area) Out of Screen View Region (Invisible area) y < 0 y > 320 x > 480 x < 0

Artificial Boundaries 7  In designing a shooting game, we need to find a place to display some input control, and status information  Display the scores  Display the buttons  Display the targets image window  Usually, we can assign some places to act as control panel  i.e., grey frame on the screen view and the background frame  The actual game play area is bounded by the screen view visible area minus the control panel area  The boundaries that we are referring in this whole game development are ARTIFICIAL BOUNDARIES

Artificial Boundary forming the actual game play area 8 (0, 0) (480, 320) (480, 0) (0, 320) Top Boundary Buttom Boundary Left Boundary Right Boundary Screen View (Visible Area) Actual Game Play Area

Game Play Area 9  The game play area is formed by using several UI components to act as boundary  Top and Bottom Boundary  Background Frame (UIImageView Object)  Left and Right Boundary  Grey Frames (UIImageView Objects)  Note that these items are static UI components, and so it is suitable to be created through Interface Builder  Shooter, Bullets and Target Balloons should move within these game play area only  To do so, we also need to consider the UI component display sequence issue

Screen View Layer Concept 10  Recall each UI component can be considered as a view object on the screen. (As it is extended from UIView class)  The device has to follow a certain sequence order in drawing the view objects on the screen view.  Usually, the drawing order is following the order of adding the object to the view.  For example,  object A is added to self.view  Then, object B is added to self.view  Both object A and object B overlap in some places  In this case, object B will be on top of object

Example on Creating UI components through Interface Builder 11  Consider the following interface built by Interface Builder:  Background frame (index 0) is the first component to put on the screen view. Therefore, it falls beneath every other UI components  Left Grey Frame (index 1) is put onto the screen view before left and right buttons (index 2 and 3). Therefore, left and right buttons are drawn on top of left grey frame Screen View Drawing Sequence

Why Layer Concept Important? 12  The view controller loads the components described in the interface builder file at the beginning of the program.  Those components that are created through codes are added to the screen view later than that through the Interface Builder  i.e., they must fall on top of those created through the interface builder  Therefore, the bullets and balloons image that are created through codes will be drawn on top of the grey frames and the background frame  This leads to a weird scenario when the bullets and balloons move out of the game play area

Example on the scenario where bullets or balloons fall on top of boundaries Screen View Drawing Sequence  Bullets and balloons are created through codes later than the Interface Builder  Weird Scenario Occurs like this:

Changing the Drawing order of UI components 14  Recall that the “backgroundImage” is the IBOutlet of the background frame which is the first to add onto the screen view through Interface Builder  Any UI components that are placed underneath “backgroundImage” must locate underneath all other UI components  Suppose we have created an UIImageView object, we can change the order by using the following codes: [self.view insertSubview: belowSubview:backgroundImage];

Example on the scenario where bullets or balloons change their drawing order Screen View Drawing Sequence  Now, bullets and balloons should locate underneath other UI components when they are moving out the actual play area

Remove from the Screen View Screen View Drawing Sequence  Suppose this object is to be removed:  We need to first remove the object from superview  [component removeFromSuperview];  Release the memory of the object  [component release];

Algorithms in Animation (Dynamic UI Components – Continuous Update) 17  Periodically invoking a method progress  NSTimer can be used to perform this function  In the method progress  Updating the position of any movable objects - Bullets and Target Balloons  New Position Calculation Technique  If the position of the movable objects moves out of boundary  Remove the movable object  Wrap Around

NSTimer Class 18  Allows a certain method to be activated repeatedly within a predefined period of time.  The finest scale possible is : 1/30 second  To initialize NSTimer:  timer = nil;  Reset the Timer  timer=[NSTimer scheduledTimerWithTimeInterval:DEFAULT_TIMER_RATE  Schedule the timer to activate after DEFAULT_TIMER_RATE seconds target:self  The current view controller will handle the timer activation  The method progress will be activated when timer is activated userInfo:nil repeats:YES];  The timer will be activated periodically

Updating Position of Movable Image Objects 19  To update the position of a movable image object (e.g., a target balloon)  Move the center position of the image object to a new position during each “tic”  How to calculate this new position?  This is possible when we know  The direction  The speed  Center X and Center Y of the UI components

Next Position Calculation I 20 (center x, center y) (0, 0) Screen View (480, 320) +x +y (480, 0) (0, 320) Balloon Moved Direction (angle) yn xn

Next Position Calculation II 21  Note that the distance moved by a balloon in every “tic” can be calculated by  Distance moved = balloon speed * timer rate  Distance moved in x direction = distance moved * cos(direction)  Distance moved in y direction = distance moved * sin(direction)  Therefore, in every “tic”,  New balloon center x = balloon center x + distance moved in x direction  New balloon center y = balloon center y + distance moved in y direction  (Note that whether we should add or minus the distance moved in x, y, direction depends on the quadrant that the angle falls on )

Data and Image Object 22  Note that the Bullets and Target Balloons object shown on the screen are image objects.  Recall that to calculate the next position of the movable image object, we need to get  Speed  Direction  Center X and Center Y position  However, image object can only gives us its Center X and Center Y position, but not the others  We need a data object to store some extra information for the image object

Bullet and Target Balloon Data Object 23  Bullet  Center X and Y position – Current Center X, Y Position  Direction – Moving Direction of the Image Object  Speed - Moving Speed of the Image Object  Radius – Radius of the Image Object  Target  TargetID – The type of target that the current image object is representing  Center X and Y position – Current Center X, Y Position  Direction – Moving Direction of the Image Object  Speed - Moving Speed of the Image Object  Radius – Radius of the Image Object

Synchronization Between Data Object and Image Object 24  When we create an image object, we also create a corresponding data object  Add the image object to a imageObjectArray  Add the corresponding object to a dataObjectArray  The image object should be located in the same index location as that of the corresponding data object targetImageArray targetDataArray targetID = 4 targetID = 0 targetID = 0 targetID = 3 targetID = 2 targetID = 1 Index

Moving Out Of Boundary 25  Refer back to Pre-Lab Lecture 2:  User Image should be bounded within Left and Right Boundary  However, there should have four boundaries as discussed before  Top Boundary  Bottom Boundary  Left Boundary  Right Boundary  How can we determine whether an object is Moving Out of which Boundary?

Moving Out of Boundary II 26 (0, 0) (480, 320) (480, 0) (0, 320) Right Boundary Left Boundary Top Boundary Right Point: (center x + width / 2) Bottom Point: (center y+ height/2) Left Point: (center x – width/2) Top Point: (center y– height /2)

Moving Out of Boundary II 27  Moving out of Top Boundary  Bottom Point of Rect Box: (Center Y + Height / 2)  Bottom Point of the Rect Box < Top Boundary  Moving out of Bottom Boundary  Top Point of Rect Box: (Center Y – Height/2)  Top Point of the Rect Box > Bottom Boundary  Moving out of Left Boundary  Right Point of Rect Box: (Center X + Width / 2)  Right Point of the Rect Box < Left Boundary  Moving out of Right Boundary  Left Point of Rect Box: (Center X - Width / 2)  Left Point of the Rect Box > Right Boundary

Moving Out of Boundary Handling Techniques 28  Basically, we have two handling methods 1. Remove the image object and the data object  Recall that to remove the image object, we have to  remove it from the screen view – [component removeFromSuperview][  remove it from memory – [component release];  E.g., Bullet Case 2. Wrap around the UI components  i.e., continue the movement of the UI component through opposite side of the boundary  Note that Top boundary is the opposite side of Bottom boundary  E..g, Target Balloon Case

Wrap around property 29 (0, 0) (480, 320) (480, 0) (0, 320) Right Boundary Left Boundary Bottom Boundary T = 0T = 1 T = 0 T = 1 Screen View Out of Screen View Region y < 0 y < 320 x > 480 x < 0

Overview of Lab 3 30 INPUT PROCESSOUTPUT Update UI Component Status - Continuous Dynamic UI Components, e.g., the balloon – Continuous update Tutorial 3 Part 1 Part 2 Part 3

Lab 3 31  Part 1: Shooting out a Bullet  Shooting out a list of bullets  Part 2: Shrinking the time left bar when the time counts down  Part 3: Generating a list of targets balloon falling down

Shooting Out Bullet(s) 32  Recall that in the last part of Lab 2, the bullet shot out will simply appear at the head of the shooter (without moving)  Here, we would like to implement a function such that the bullet shoots out will move up continuously until it moves out of boundary  First, we would like to implement shooting one bullet  Second, we would like to implement shooting a list of bullets

Shooting Out a Bullet Algorithm 33  In method ShootButtonPressed:  Initialize the BulletData  Initialize the BulletImage  In method progress  Update the position of the BulletData  Should move upwards by DEFAULT_BULLET_SPEED  Update the center position of the BulletImage according

Shooting Out a list of bullets Algorithm 34  In method initializeData:  Initialize BulletDataArray and BulletImageArray  In method ShootButtonPressed:  Initialize the BulletData  Add BulletData into the BulletDataArray  Initialize the BulletImage  Add BulletImage into the BulletImageArray  In method progress  For each BulletData in BulletDataArray do  Update the position of the BulletData  Should move upwards by DEFAULT_BULLET_SPEED  For each BulletImage in BulletImageArray do  Update the center position of the BulletImage according  Remove both BulletData and BulletImage if the bullet is out of Boundary

Screen Shot of Shooting out a list of bullets 35

Shrinking the time left bar 36  Basically, when the time left is diminishing, the time bar should shrink. Let’s consider the following diagram:  It is not difficult to see that, the set center method that we usually use is not appropriate for this situation.  Instead, we should reset the frame size of the image according to the proportion of the current time left to the origin time left.  [component setFrame:CGRectMake(,, * ratio, )] T = 100 T = 75 T = 25 Width Height (x, y)

Shrinking the time left bar Algorithm 37  In method initializeData:  Set timeLeft to DEFAULT_TIME_LEFT  In method progress:  // Since progress is invoked in every DEFAULT_TIMER_RATE seconds  Deduct timeLeft by DEFAULT_TIMER_RATE  Time left bar’s width should be proportional to the ratio between timeLeft and DEFAULT_TIME_Left

Screen Shot of Shrinking Time Left Bar 38

Generating a list of targets balloon falling down 39  Now, we would like to implement the function such that a list of targets balloon will be generated and moving down  In fact, this process is just similar to that of animating the bullets image except that we also need to consider how to generate a “random”target  We have to randomly generate a target’s targetID, center X, Y position, direction, and speed  For your simplicity, all these are done when you invoke the “ initiate ” method stated in target.h

Generating a list of targets balloon falling down Algorithm 40  In the method initializeTarget  Generate DEFAULT_TARGET_NUM_ON_SCREEN balloons and display their images  Put the balloons’data and balloons’image into targetDataArray and targetImageArray, respectively  Note that the targetID attribute determines which image file to be loaded onto the target image view  In the method progress  update the positions of the balloons (both Data and Image)  Note that the move method provided in the Bullet Data has handled the wrap around property already

Summary 41  Today’s Tutorial will be divided into 3 parts. Enjoy your Lab Part 2 Part 1 Part 3