• Like


Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Uploaded on

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    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

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Y-TilesiPhone Application
    Chris Yunker
    STL Mobile Dev MeetingJune 24, 2010
  • 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
    • 3. I had to find a unique name so I added the first letter of my last name
  • 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. 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.
  • 5. Top Level Views
    Board Tab
    Photo Selection Tab
    Settings Tab
  • 6. Board Types
    Photo With Numbers
  • 7. Photo Selector
    Camera Photo
    Default Photos
    • Application contains 4 default photos
    • 8. User can take a new photo or use an existing photo
  • Settings
    • Board size: 3-6 rows / 3-6 columns
    • 9. Photo or numbered tiles
    • 10. Enable number tags on photo tiles
    • 11. Enable sound
    Note: Changing the photo (from the Photo Selector Tab) or the board size will trigger a restart of game
    Settings Tab
  • 12. Object Diagram
    Tab Bar Controller
    Board Controller(UIViewController)
    Photo Controller
    Settings Controller
    Tile (0-N)
    (Rows × Columns – 1) Tiles
  • 13. 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)
  • 14. Create Rounded Tile Image
    Rectangle Path
    Rounded Path
    Filled In Path
    Photo Image
    Define the fill area with a CGMutablePathRef using two concentric polygons
    • Create rectangle path with CGPathAddLineToPoint
    • 15. Create rounded path with CGPathAddLineToPoint and CGPathAddArcToPoint
    Fill in area between the two polygons with CGContextEOFillPath (Even/Odd Fill)
  • 16. Board Object
    • Extends UIView object
    • 17. 2D array contains board state with pointers to all tiles
    • 18. Emits a tick sound for each tile move
    • 19. Pauses board with a transparent overlay and setting UserInteractionEnabled:NO
  • Tile Object
    • Extends UIImageView object
    • 20. Numeric ID (Numeric Tile or Numeric Photo Tag)
    • 21. Home coordinate
    • 22. Movable State (Up/Down/Left/Right/None)
    • 23. Pointer to adjacent push tile (if applicable)
    • 24. Pointer to board object
  • Game Algorithm 1
    Iterate through all tiles in board
    Foreach Tile in Board
    Set MovableState:None
    Is Tile solved?
    Is Board solved?
  • 25. Game Algorithm 2
    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)
  • 26. Game Algorithm 3
    • The Tile class can receive touches since it extends UIImageView which extends UIResponder
    • 27. 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
  • 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.
  • 28. Accelerometer
    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)
    • 29. A valid shake is when the g-force vector delta exceeds a configured threshold in 2 of the 3 dimensions
    • 30. Shake counter is incremented for valid shake
    • 31. Shake counter is reset for invalid shake
    • 32. Restart menu is triggered when counter equals 3 shakes
    Restart Menu
  • 33. 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
  • 34. Version 2.0
    Save game state
    Improve board generation time
  • 35. Questions?