1 / 41

Animation

Animation. Pre-Lab Lecture 3. Revisit. 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

lida
Download Presentation

Animation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Animation Pre-Lab Lecture 3

  2. Revisit • 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

  3. Overview of Pre-Lab 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

  4. Screen View Orientation and Coordinate Representation • 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 (320, 0) (0, 0) +x (0, 0) (480, 0) +x +y Protrait Mode +y Landscape Mode (0, 320) (480, 320) (0, 480) (320, 480)

  5. Screen View Boundary • 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 < 0 or X > 480 • Y < 0 or Y > 320

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

  7. Artificial Boundaries • 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

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

  9. Game Play Area • 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

  10. Screen View Layer Concept • 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

  11. Example on Creating UI components through Interface Builder • 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 5 4 3 2 1 0

  12. Why Layer Concept Important? • 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

  13. Example on the scenario where bullets or balloons fall on top of boundaries • Bullets and balloons are created through codes later than the Interface Builder • Weird Scenario Occurs like this: Screen View Drawing Sequence 12 11 10 9 5 4 3 2 1 0

  14. Changing the Drawing order of UI components • 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.viewinsertSubview:<your UIImageView object> belowSubview:backgroundImage];

  15. Example on the scenario where bullets or balloons change their drawing order • Now, bullets and balloons should locate underneath other UI components when they are moving out the actual play area Screen View Drawing Sequence 12 11 10 9 5 4 3 2 1 0

  16. Remove from the Screen View • 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]; Screen View Drawing Sequence 12 11 10 9 5 4 3 2 1 0

  17. Algorithms in Animation (Dynamic UI Components – Continuous Update) • 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

  18. NSTimer Class • 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=[NSTimerscheduledTimerWithTimeInterval:DEFAULT_TIMER_RATE • Schedule the timer to activate after DEFAULT_TIMER_RATE seconds target:self • The current view controller will handle the timer activation selector:@selector(progress) • The method progress will be activated when timer is activated userInfo:nil repeats:YES]; • The timer will be activated periodically

  19. Updating Position of Movable Image Objects • 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

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

  21. Next Position Calculation II • 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 )

  22. Data and Image Object • 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

  23. Bullet and Target Balloon Data Object • 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

  24. Synchronization Between Data Object and Image Object • 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 Index 0 1 2 3 4 5 targetID = 3 targetID = 0 targetID = 4 targetID = 0 targetID = 2 targetID = 1 targetDataArray

  25. Moving Out Of Boundary • 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?

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

  27. Moving Out of Boundary II • 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

  28. Moving Out of Boundary Handling Techniques • 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

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

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

  31. Lab 3 • 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

  32. Shooting Out Bullet(s) • 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

  33. Shooting Out a Bullet Algorithm • 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

  34. Shooting Out a list of bullets Algorithm • 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

  35. Screen Shot of Shooting out a list of bullets

  36. Shrinking the time left bar • 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(<origin x>, <origin y>, <width> * ratio, <height>)] Width (x, y) T = 100 Height T = 75 T = 25

  37. Shrinking the time left bar Algorithm • 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

  38. Screen Shot of Shrinking Time Left Bar

  39. Generating a list of targets balloon falling down • 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

  40. Generating a list of targets balloon falling down Algorithm • 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

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

More Related