Chris Yunker developed the Y-Tiles iPhone application, a sliding puzzle game where the objective is to rearrange numbered tiles in order using an empty space. It took 2-3 months to develop and has been downloaded over 2000 times since being submitted to the App Store in March 2009. The game can be played with photo tiles taken or selected by the user and features different board sizes, sound effects, and a shake gesture to restart the puzzle. Tiles move individually based on touch input and push adjacent tiles when rearranging the board order.

1. Y-Tiles
iPhone Application
Chris Yunker
STL Mobile Dev Meeting
June 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
• I had to find a unique name so I added the first letter
of my last name

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. 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. Top Level Views
Board Tab Photo Selection Tab Settings Tab

6. Board Types
Photo With NumbersPhotoTiles

7. Photo Selector
Camera PhotoDefault Photos
• Application contains 4 default photos
• User can take a new photo or use an existing photo

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Version 2.0
• Save game state
• Improve board generation time
• iAd

21. Questions?