Y Tiles


Published on

Presentation to St. Louis Mobile Technology User Group on how I created an iPhone game.

Published in: Entertainment & Humor
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Y Tiles

  1. 1. Y-Tiles iPhone Application Chris Yunker STL Mobile Dev Meeting June 24, 2010
  2. 2. Why Y-Tiles? • Simple, enjoyable game everyone understands • Development touches a lot areas (graphics, touch screen, camera, accelerometer, etc.) Why The Name “Y-Tiles”? • When I started development, there were already over 25 implementations of this game • I had to find a unique name so I added the first letter of my last name
  3. 3. Development Details • Hardware: iPhone 3G (16G) • SDK: 2.2.1 • Development Time: 2-3 months • Submitted to App Store: March 4, 2009 • Downloads: +2000 in last 26 weeks (according to iTunes Connect App)
  4. 4. Fifteen Puzzle Game The n-puzzle is known in various versions, including the 8 puzzle, the 15 puzzle, and with various names (Gem Puzzle, Boss Puzzle, Game of Fifteen, Mystic Square and many others). It is a sliding puzzle that consists of a frame of numbered square tiles in random order with one tile missing. If the size is 3×3, the puzzle is called the 8-puzzle or 9-puzzle, and if 4×4, the puzzle is called the 15- puzzle or 16-puzzle. The object of the puzzle is to place the tiles in order (see diagram) by making sliding moves that use the empty space. http://en.wikipedia.org/wiki/Fifteen_puzzle
  5. 5. Top Level Views Board Tab Photo Selection Tab Settings Tab
  6. 6. Board Types Photo With NumbersPhotoTiles
  7. 7. Photo Selector Camera PhotoDefault Photos • Application contains 4 default photos • User can take a new photo or use an existing photo
  8. 8. Settings Settings Tab •Board size: 3-6 rows / 3-6 columns •Photo or numbered tiles •Enable number tags on photo tiles •Enable sound Note: Changing the photo (from the Photo Selector Tab) or the board size will trigger a restart of game
  9. 9. Object Diagram Board Controller (UIViewController) Photo Controller (UIViewController) Settings Controller (UIViewController) Tab Bar Controller (UITabBarController) Board (UIView) Tile (0-N) (UIImageView ) (Rows × Columns – 1) Tiles
  10. 10. Create Photo Tiles Tile frame size is calculated from number of rows/columns Foreach Row/Column Coordinate { Image = CGImageCreateWithImageInRect Create Tile object } Remove last Tile (bottom right)
  11. 11. Create Rounded Tile Image Define the fill area with a CGMutablePathRef using two concentric polygons • Create rectangle path with CGPathAddLineToPoint • Create rounded path with CGPathAddLineToPoint and CGPathAddArcToPoint Fill in area between the two polygons with CGContextEOFillPath (Even/Odd Fill) Rectangle Path Rounded Path Filled In PathPhoto Image
  12. 12. Board Object • Extends UIView object • 2D array contains board state with pointers to all tiles • Emits a tick sound for each tile move • Pauses board with a transparent overlay and setting UserInteractionEnabled:NO 1 2 3 N
  13. 13. Tile Object • Extends UIImageView object • Numeric ID (Numeric Tile or Numeric Photo Tag) • Home coordinate • Movable State (Up/Down/Left/Right/None) • Pointer to adjacent push tile (if applicable) • Pointer to board object 1
  14. 14. Game Algorithm 1 N N N N N N N N N N N N N N N Iterate through all tiles in board Foreach Tile in Board { Set MovableState:None Is Tile solved? } Is Board solved?
  15. 15. Game Algorithm 2 N D N N N D N N R L L N U N N Start at empty spot and iterate through tiles in same row and column Foreach Tile Row/Column { Set MovableState:Up/Down/Left/Right Set PushTile pointer (if applicable) }
  16. 16. Game Algorithm 3 N D N N N D N N R L L N U N N • The Tile class can receive touches since it extends UIImageView which extends UIResponder • The Tile class implements these methods to handle touches touchesBegan(NSSet *, UIEvent *) touchesMoved(NSSet *, UIEvent *) touchesEnded(NSSet *, UIEvent *) touchesCancelled(NSSet *, UIEvent *) • To prevent multiple tiles from moving, an NSLock object is used
  17. 17. Game Algorithm 4 When a Tile receives a touchesBegan event, it will respond if it’s in a movable state and can acquire the lock. The Tile will slide with the relative location provided by the touchesMoved event. Its movement will be constrained by the empty area. If the Tile is pushing another Tile, it will slide it the same distance via its PushTile pointer. When the touch is done, the Tile will receive a touchesEnded event. If the Tile has moved less than half the distance, it will snap to its original location. If it has moved more than half the distance, it will snap to the empty location. When a Tile moves, it communicates this back to the Board so it can update. 15 9 15 9
  18. 18. Accelerometer Restart Menu The Accelerometer is used so users can restart/reshuffle the board • Accelerometer provides a 3D g-force vector at a configured interval (1/30 sec) • A valid shake is when the g-force vector delta exceeds a configured threshold in 2 of the 3 dimensions • Shake counter is incremented for valid shake • Shake counter is reset for invalid shake • Restart menu is triggered when counter equals 3 shakes
  19. 19. Performance • Coded application with an “Optimize Later” philosophy • Great game performance; Tiles are very responsive • Camera Photo Selector can cause memory warnings • Board generation can take 4-8 seconds depending on size
  20. 20. Version 2.0 • Save game state • Improve board generation time • iAd
  21. 21. Questions?