By Kevin Packard                        twitter@kevinpackard

Three Straight was prototyped in three evenings, fourteen months ago.  The first two nights were spent creating artwork and organizing the project.  Everything came together the third night, with a small bit of code.  The resulting game has no turns, no rules, no bells & whistles when someone wins.  Marbles are dragged freeform around the board.  But two people can sit down and play a game, on an iPad or an iPhone or an iPod Touch.  It’s a decent prototype.


Evening One

Xcode project setup and board artwork.  I started by Googling up a hirez photo of a beautiful piece of mahogany.


I used OmniGraffle, my favorite overpriced graphing app, to bevel the edges and add the drill holes and burn marks.


I want Three Straight to run on as many iOS devices as possible.  There are three screen sizes to deal with: the iPad, the iPhone 4 & 4S (retina screen), and the iPod & older iPhones. I generated images of the board in three resolutions to match. Interestingly, the gamma of the iPad’s display is lighter than the iPhone’s gamma.  I lightened the iPhone image, so the iPhone and iPad match side-by-side.

Instead of targeting the iPad and iPhone separately, Three Straight is built as a single Universal app that runs on all iOS devices.  In Xcode, I made a Universal project containing layouts for each target device.  I need two layouts, one for the iPad and one for the iPhone & iPod.  Each layout has a single fullscreen  UIImageView  instance, containing the board image.  The resulting app shows the board image full screen, and runs on the iPad and iPhone.  No coding thus far.

I realize that the artwork is a bit rough.  It needs more polish before the game is finished.  In fact, I don’t know if I want wood grain, or some other look. Maybe metallic. Or Trontastic?!  Clearly, I’ll have to engage a graphic artist for the final artwork.  But for now, this board image has a classic look that’s guaranteed to invoke nostalgia in anyone who’s played the original wooden marble game.


Evening Two

Nearly a total waste.  I tried, and failed, to create some marble images.  Finally I gave up, and stole these solar system marble images online.  Later I’ll replace these with something better, something original.

I kind of like the solar system look, and found some other images that might work too.  But they’re owned by Dan Wiersema, and aren’t free for commercial work.

What I have is good enough for now.  I generated red & blue marble images in three resolutions.  For the eight marbles, I added eight UIImageView‘s to each of the two layouts.


By the end of that second evening, I had an application running on my iPad and iPhone, with a  board, and some marbles that didn’t move.  Still no coding.



Evening Three

Three Straight came alive with a few lines of code, to make the marbles draggable.  The board & marble images are displayed with  UIImageView  instances.  A  UIImageView  isn’t draggable by default, so I created a MarbleView class to handle dragging, by subclassing  UIImageView.

Touch event delegate methods are defined in UIResponder.h. Methods are defined for handling an object being touched, released, or dragged.  To handling marble dragging, I don’t care when the marble is touched or released, just when it’s dragged.  So I overloaded just the –touchesMoved:withEvent: method.  The code is simple:

#include MarbleView.h
@implementation MarbleView
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];
    CGPoint location = [touch locationInView:self.superview]; = location;

First, the drag code needs to extract a touch, any touch.  iOS handles multi-touch gestures, such as pinching to zoom a photo. All touch delegate methods handle multi-touch, so the delegate is passed not a single touch, but a set of touches. If the user has a single finger on the marble, the set of touches will contain just one UITouch instance. But if the user somehow manages to get two or three fingers onto the marble, the set will contain two or three UITouch‘s. Dragging is not multi-touch, so the drag code cares only about the first touch. The method -anyObject conveniently returns one UITouch instance from the set of potentially many touches.

Second, the location of the touch is extracted, in the coordinate system of the marble’s container.

Third, the marble’s position is changed to center on the touch location.

When a marble is dragged around the board, –touchesMoved:withEvent: is called repeatedly, and the marble smoothly follows the finger.  This code isn’t optimal: if you start dragging a marble from its edge, there’s an initial snap as the marble centers on the drag.  But it’s good enough for a prototype.

I was pleasantly surprised to discover that all eight marbles can be dragged at once, with eight fingers on the board.  Apple’s iPad and iPhone touch screens – at least their newer products – can handle at least eight simultaneous touches.  Impressive.

By the way, the header file for MarbleView doesn’t declare anything.  The dynamic binding of Objective-C resolves the –touchesMoved:withEvent: method at runtime.

#import <Foundation/Foundation.h>
@interface MarbleView : UIImageView {


So now a prototype exists.  It’s been in my pocket for the past year.  There are no turns, no rules, no bells & whistles when someone wins. But two people can sit down and play a game.  Pretty cool.

Ask, and I’ll give you a demo.  Even better: if you have an iPad / iPhone / iPod, I’ll put it on your device and you can watch the game grow from a prototype to a finished product.