1. 1 Group: IK0804 Supervisor: Prof. KING Kuo Chin, Irwin Member: Ng Hon Pan (s06679724) Wong Hung Ki(s06641853)

2. 2  Overview  Game review  Design  Implementation  Problem encountered  Demo  Further suggestion

3. 3  Develop a mini game called Monster Manager on iPhone  The idea comes from another game called Zoo Keeper

4. 4  Base on the idea, many chances for us to show our creativity  develop a comparable or even better game than Zoo Keeper  iPhone is so popular  Great iPhone SDK  gain some experience in developing game on mobile device  Share our game ideas.

5. 5  Zoo Keeper  Trism  Diamond Twister  Jewel Quest II

6. 6  http://www.yukz.com/games/html/zookeep er.html

7. 7  http://hk.youtube.com/watch?v=hy0ptZisr7 0

8. 8  http://hk.youtube.com/watch?v=DJmEVd3T 7hg

9. 9  http://hk.youtube.com/watch?v=4- 2U_XOcMiU

10. 10  Shared among the reviewed games  Inside a frame  Many objects are packed tightly  Move them and get matches  Many levels  Timer  Scoring system

11. 11  Important questions  What is the shape of the monster?  How do the monsters move?  What is the definition of a match?  How to set the timer?  Is it a must to have at least one match per move?  How to fill up the empty spaces after a match?  How to set up different levels?

12. 12  Overview  Game review  Design  Implementation  Problem encountered  Demo  Further suggestion

13. 13  Square, a circle, a triangle, etc.  Appropriate data structure  Squares, circle  2D array  Triangle  2D array + ???  avoid any overlapping  Easy to change their positions in DS  Square is the best

14. 14  There are many ways.  Swap  Pick and Push  Rotation  …

15. 15  Adopted in Zoo Keeper, Diamond Twister, and Jewel Quest II ++++++ +oooo+ +12oo+ +oo3o+ +oo4o+ ++++++ ++++++ +oooo+ +21oo+ +oo4o+ +oo3o+ ++++++

16. 16  Pros:  Simple, easy to implement  detecting matches after swapping can perform extremely fast  Cons:  Used many times  Too straight forward  Does not affect the next swap

17. 17  Designed by us  Four versions  Pick means pick a monster inside the frame  Push means push a monster back from the edges of the frame

18. 18 ++++++ +oooo+ +mxxo+ +oxxo+ +oooo+ ++++++ +s++++ +oooo+ +mxxos +oxxo+ +oooo+ +s++++ ++++++ +oooo+ +oxxo+ +oxxo+ +oooo+ ++++++

19. 19  Pros:  More variations compared to the Swap method  Direct vs. indirect  More thinking required  Cons:  ↑Computation time of checking matches & changing monsters’ positions +++++++ +ooooo+ +oeoee+ +ooooo+ +ooooo+ +++++++

20. 20 +++++++ +ooooo+ +oeoee+ +ooooo+ +ooooo+ +++++++ +++++++ +ooooo+ +oe$ee# +ooooo+ +ooooo+ +++++++

21. 21  Pros:  Same as ver. 1  Solve the last problem in ver. 1  Cons:  Have loophole  See the next page.

22. 22 +++@++++ +ooo#oo+ +oo$ooo+ +o$c$oo+ +ooaooo+ +oo#ooo+ +oobo#o+ ++++++++ +++@++++ +oo##oo+ +oooooo+ +o$$$oo+ +oocooo+ +ooaooo+ +oobo#o+ ++++++++ ++++++++ +oo##oo+ +oooooo+ +oooooo+ +oocooo+ +ooaooo+ +oobo#o+ ++++++++

23. 23 ++++++++ +nnnnnn+ oxnnnyzi +nnnnnn+ ++++++++

24. 24  Pros:  Player will no longer be able to play tricks any more.  Cons:  It seems that shifting an entire line is very straight forward.  The same problem in ver. 1 +++++++ +ooooo+ +oeoee+ +ooooo+ +ooooo+ +++++++

25. 25 ++++++++ ossssnn+ +nnnxnn+ +nnnxnn+ ++++i+++

26. 26  Pros:  lots of variations in real time.  Cons:  ↑ thinking time  becomes not exciting ++++++++ +nxnnnn+ +nnxnnn+ +nxnnnn+ ++++++++

27. 27 ++++++++ +o123oo+ +o456oo+ +o789oo+ +oooooo+ ++++++++ ++++++++ +o412oo+ +o753oo+ +o896oo+ +oooooo+ ++++++++

28. 28  Pros:  lots of variations in real time.  Cons: ++++++++ +oxoooo+ +xooooo+ +xooooo+ +oooooo+ ++++++++

29. 29  In general, two definition  At least three monsters of the same type grouped horizontally or vertically  A square with four monsters with the same type. ++++++++ +oooooo+ +ooxxoo+ +ooxo#o+ +ooo#oo+ ++++++++ ++++++++ +oooooo+ +ooo#oo+ +oxxo#o+ +ooo#oo+ ++++++++

30. 30  Global time gauge  Each monster would have a local time gauge  A set of monster images to indicate the timer of each monster

31. 31  If yes…  If no matches, move the moved monsters back to their original positions  game program must guarantee player must be able to find a match in one move  If no…  players can move the monsters that they want without any restrictions, which is bad

32. 32  Introduce life counter.  restrict player to move monsters without thinking.  If no match happens, life will decrease by one.  If life reaches zero, the game will be over.  Player is allowed to have some freedom to find a match in more than one move.

33. 33  When a match happens, the matched monsters must be removed  The empty spaces left are filled by the monsters above the empty spaces.  using the accelerometer installed in iPhone to change the direction of gravity  Simply replace the matched monster with new monsters.

34. 34  In Zoo Keeper, players need to achieve the required number of matches for each type of animal in each level  In Trism and Diamond Twister, player must get the required points in order to go to the next level.  In Jewel Quest II, once there is a match, the matched square become golden. A level is completed only if all the squares are golden.

35. 35  What is the shape of the monster?  Square  How do the monsters move?  Rotation  What is the definition of a match?  At least three monsters of the same type grouped horizontally or vertically  How to set the timer?  Global time gauge  Is it a must to have at least one match per move?  No  How to fill up the empty spaces after a match?  Simple replacement  How to set up different levels?  Score system

36. 36  Similarities:  move monsters and group them up  have timer and score systems.  A match may trigger other matches. This can keep the whole map changing periodically.

37. 37  Differences:  How to move monsters?  Swapping vs. Rotation  How to add new monsters into the frame?  Falling vs. Replacement  One move  one match?  In Zoo Keeper, no matches  move back to their original positions.  In Monster Manager, no matches  nothing happens

38. 38  Overview  Game review  Design  Implementation  Problem encountered  Demo  Further suggestion

39. 39  Board  ImageLoader  Monster  Square  MonsterManagerAppDelegate  MonsterManagerViewController  TheGame

40. 40  creates all object used in the game  handle the game logic and animations. TheGame - imageLoader : ImageLoader - board : Board - score : int - life : int - timeLeft: int - hits : int + gameInit () : id + rotationAtCenter ( monster : Monster, direction : int ) : void - rotationAnimationDidStop ( animationID : NSString, finished : NSNumber, context : void ) : void - shakeMonsters ( matchedMonsters : NSMutableArray, counter : int ) : void - shakeAnimationDidStop ( animationID : NSString, finished : NSNumber, context : void ) : void - diminishAnimationDidStop ( animationID : NSString, finished : NSNumber, context : void ) : void - magnifyAnimationDidStop: ( animationID : NSString, finished : NSNumber, context : void ) : void

41. 41  container of all the monsters.  has methods to set and get particular monster  create all monster before the game start  initialize the positions of monsters  update the timer, life and score. Board - allSquares : NSMutableArray - map : Point2D[][] - gameTimer : UILabel - gameScore : UILabel - gameLife : UILabel + initTheBoard ( g : TheGame) : id - generateMap: ( numOfPotentialMatches : int, typeMap : int[][] ) : void + getSquareWithLocation (x : int, y : int ) : id + getSquareWithMapLocation: ( x : int, y : int ) : id + getPointInMapWithLocation: ( x : int, y : int ) : Point2D + setPointInMapAtLocation: ( x : int, y : int, point : Point2D ) : void + getMonsterTypeWithMapLocation: ( x : int, y : int ) : int + updateTimer: ( t : int ) : void + updateScore: ( s : int ) : void + updateLife: ( l : int ) : void

42. 42  helps loading all the monsters’ images to memory  allows other objects to retrieve them. ImageLoader - backgroundImage : UIImage - monsterImages : NSArray + initWithAllImagesLoad () : id + getMonsterImagesWithNumber ( type : int ) : void

43. 43  inherits the class Square.  represents a monster.  It has a type attribute, and methods to change the image of monster. Monster - type : int + initMonster ( game : TheGame, type : int, mapX : int, mapY : int ) : id + changeType ( type : int) : void - touchesBegan ( touches : NSSet, event : UIEvent ) : void - touchesEnded ( touches : NSSet, event : UIEvent ) : void - clockwiseRotation : void - antiClockwiseRotation : void

44. 44  inherits the class UIImageView.  Represent a square object in game  stores its location in the game Square - locationInMap : Point2D - game : TheGame + setNewImage ( image : UIImage ) : void

45. 45  must exist in any iPhone app..  creates all the necessary objects in order to run the application. MonsterManagerAppDelegate - window : IBOutlet UIWindow - viewController : IBOutlet MonsterManagerViewController

46. 46  responsible to add the elements of the game, such as all monsters, background, labels to the game. MonsterManagerViewController - game : TheGame + setGame : void + viewDidLoad : void

47. 47 Square UIImageView 117 11 MonsterManagerAppDelegate 117 1 Monster 1 1 1 1 MonsterManagerViewController 1 TheGame 1 ImageLoader 1 Board

48. 48 1.Waiting for player single tap or double taps, iteration=1 2.Clockwise rotation around the tapped monster 3.Anti-clockwise rotation around the tapped monster 4.Update the positions of all the moved monsters 5.Check whether there is at least one match 8.The matched monsters perform shaking animation 9.Determine new types of monster for replacement, and run the replacement animation 10. CPU randomly tap a monster for another rotation as bonus. (iteration++) 7.Update the score 6.Decrease life by one Single Tap Double Tap Yes No and iteration =1 1 / 2 No and iteration > 1

49. 49  Overview  Game review  Design  Implementation  Problem encountered  Demo  Further suggestion

50. 50  Design Problems  Implementation Problems

51. 51  Monsters’ Images  Game Rules  Rotation Problem

52. 52  The image is blurred and darkened in iPhone  the color of the image is not exactly the same as the original one shown on PC  the size of pixel on iPhone is smaller than that of pixel on the LCD monitor  Solution:  enlarge images to 40x40  ↑brightness, sharpness  size of each image is around 1K – 2K

53. 53  Spent nearly half of time on designing game rules  We only focus on the uniqueness and attractiveness of the rules, and did not think about the effects of a particular set of game rule to the entire game.  the thing we imagine in mind is usually not the whole picture  E.g. using accelerometer to control direction of gravity

54. 54 +++++++ +xxxxx+ +xooox+ +xooox+ +xooox+ +xxxxx+ +++++++ ####### #xoooo# #ooooo# #ooooo# #ooooo# #ooooo# #######

55. 55  Data Structure to Store All Monsters  Initialization of Type Map  Mutable Array problem  Checking Matches Algorithm  The Animation

56. 56  Two approaches  2D array  2D linked list 5 north = 2 east = 6 south = 8 west = 4 2 north = null east = 3 south = 5 west = 1 4 north = 1 east = 5 south = 7 west = null 6 north = 3 east = null south = 9 west = 5 1 north = null east = 2 south = 4 west = null 3 north = null east = null south = 6 west = 2 7 north = 4 east = 8 south = null west = null 8 north = 5 east = 9 south = null west = 7 9 north = 6 east = null south = null west = 8

57. 57  2D array storing the types  Ensure no matches happen at the beginning  Ensure matches happen within one rotation  Two steps  Add patterns  Fill in the rest of the blanks in the type Map ooo xxo oox oox xxo ooo

58. 58 for each s in type map if s == NULL while (true) newType = random() % 8; // check north direction if match happens by considering north direction (1) continue; if match happens by considering south direction (2) continue; if match happens by considering west direction (3) continue; if match happens by considering east direction (4) continue; if match happens by considering north and south directions (5) continue; if match happens by considering east and west directions (6) continue; s = newType; break;

59. 59  Mutable array changes it size for any addition or removal of elements (1, 0)(2, 0)(1, 2) (0, 0)(0, 2)(1, 1) (2, 2)(0, 1)(2, 1) Monster 1 Monster 2 Monster 3 Monster 4 Monster 5 Monster 6 Monster 7 Monster 8 Monster 9

60. 60 matchedMonsters = {} for each moved monster m if match happens by considering north direction at m for each monster x along north direction at m if m.type == x.type && x is not in the set matchedMonsters add x to matchMonsters … Same for east, south and west directions … if match happens by considering north and south directions at m for each monster x along north direction at m if m.type == x.type && x is not in the set matchedMonsters add x to matchMonsters for each monster x along south direction at m if m.type == x.type && x is not in the set matchedMonsters add x to matchMonsters … Same for east and west direction …

61. 61  Clockwise rotation animation  Anti-clockwise rotation animation  Shaking animation  Diminishing animation  Magnifying animation  Fortunately…  iPhone SDK allow programmers to create callback functions that are called once animation completes.

62. 62  Overview  Game review  Design  Implementation  Problem encountered  Demo  Further suggestion

63. 63

64. 64  Overview  Game review  Design  Implementation  Problem encountered  Demo  Further suggestion

65. 65  Adjust colors for better look  Timer & level settings  New game mode  Sound effects  Multi-touch

66. 66  For two, three or even four players.  iPhones are connected via Wi-Fi.  Each player will own part of the types of monsters available in game.  The main target of each player is to find matches of his or her own types of monsters as much as possible.  Players will take turns to select a monster for rotation within 10 seconds.  After the time is over, the player with the highest scores is the winner.  This game mode is interesting as player not only needs to care about finding matches, but also think about how to prohibit the opposites to score.

67. 67  Background music  Sound effects together with animations  Rotation sound  Match sound  Replacement sound

68. 68