Wednesday, March 4, 2009

Six Days from Idea to App

I really love working on iPhone Applications. The speed with which Mike & I can crank out new products is amazing. This one amazed even me!

This is the story of how Heads Up: Hold'em came into existence.

The story begins with another one of our apps, iCatchall.
We had just added a Dice mini-app to the program. (At the time of this writing, the dice mini-app has not yet been released.)

Mike and I were very happy with how the dice mini-app had turned out. It looked good.

I started thinking about card-based mini-apps for iCatchall. I came up with essentially a video poker machine. My idea for iCatchall was that the video poker game wouldn't even keep score. It would just deal 5 cards. Let you hold any of them you want. Then draw new ones and show you the hand. I presume that mini-app or something similar WILL be included in iCatchall soon.

I then pictured two people using this mini-app to play a version of 5-card draw against each other on two separate iPhones. (The 'version' being that the two iPhones would be playing with separate decks, so it would be possible for the same card to appear in each hand.)

I then thought that Mike certainly had the networking know-how to devise a client-server system so that each player could be playing from the same deck. I then pictured multiple iPhones connected over a WiFi playing Hold'em. But that all started to sound incredibly complicated... Incredibly COOL, yes. But also incredibly complicated...

I then thought that a 2-player 'heads up' game could be played pretty easily on a singe iPhone. AHA!!! My mind began to race and I began (literally) to run in circles through the house thinking as fast as I could.

I then took some inspiration from both a chessboard and the old 'cocktail arcade cabinets.' Players would sit on opposite sides of a table, facing each other, and see the game from opposite sides. Just as they would if playing chess on a real board or poker with real cards. One player would view the board/table/screen upside down, but that was OK because playing cards are already designed to be viewed upside down. Each player would shield the screen with his or her hand when looking at their own cards--just as would be done with real cards. Or the iPhone could be picked up to block the opponent's view...

I scrambled onto istockphoto.com and grabbed proofs of some playing-card artwork. Jumped into photoshop and made up a 'concept screen' to show to Mike. Here is that screen:

Concept-1

The above image is timestamped as being created at 3:40pm on Feb. 26, 2009.
Here is my exact email sent with this image to Mike:

from
to
Peter Burford
Michael Burford
dateThu, Feb 26, 2009 at 3:47 PM
subjectPoker game concept...

OK.... I'm kind of excited about this...

Gambling, keeping turns, etc would be done using real chips on the side. Possibly have Dealer button that bounces back and forth each hand.

Imagine the iphone placed between two players (like a chessboard). Each player holds one hand in the center to block the other view then slides their finger across their cards will reveal them.

The cards flip back instantly when your finger is removed.

If a player folds (maybe a double-click to prevent bumping) Then a new hand is dealt.

Both players must 'highlight' their Deal buttons to deal the next round.

After the River, "Deal" changes to "SHOW" (And would only show that player's cards)

The game doesn't even need to tell who wins. That's up to the players.

An Omaha option would just deal 4 cards to each player instead of 2.

I think this could be cool....!!!!!!!!



Concept-2
was created at 8:45pm that same night.

Most of the changes from concept-1 involved my attempts to make the community cards legible. The first working-draft used the cards shown as A and 3 of spades (with the numbers on the reverse corner, of course). When face card pictures replaced the suit in the center, it was found that the side-pips were too small to be seen easily. But I'm getting ahead of myself...


What could be called concept-2a only exists in a sample splash screen I made to 9:08pm the same day. At this point I had added the 'chip-slide' idea for peeking at cards, but still hadn't figured out that the buttons were unnecessary.
I was already aware of the unique and unusual aspect that the 'game' we were making was not a stand-alone game, but rather, it was one piece of a larger game played outside the iPhone. Throughout the tutorials and the website we have pictures of poker chips sitting next to an iPhone to convey this concept.

Concept-3
Nailed it!

Time stamped 11:16pm, Feb 26, 2009.
This was the last image I saved that night.

At this point, the pieces were pretty much in place conceptually. It just needed some polish. Oh, and to be programmed!

Concept-4
7:59am the following morning (Feb 27).
We now recognized that 'Interface tips' would be needed to get people going. As you can see, we hadn't quite gotten the gestures right yet...


Concept-4a
8:11am. Just 12 minutes after Concept-4.
A better version of the tips, and we'd pretty much gotten things figured out. Except that you fold 'cards' not a 'chip' but we'd get there.
This got us to the notion that the Usage tips should be "ICON--ARROW--WORD." And they still are for everything except for "Next Hand" which needed two words.

This is the last 'Concept' image that I made.

At this point, everything was in place. It just took some polishing.
On the evening of Saturday, Feb 28, just TWO DAYS after the initial concept was thought up. My poker group had a game and we showed off a working prototype.

Before the 'real' tournament began, Mike and I played a somewhat-ceremonial "first match" against each other. We put up $1 each and I won. I probably should have taken a screen shot of my winning hand, but I didn't.

For the normal tournament (It was an 8-player Sit-and-go with $10 buyin and $5 rebuys/addon.) when it got down to heads up, Mike and I each pitched another $5 into the prize pool for our friends to finish the game using our software. It was between Dan & Marilyn.

This testing gave us some valuable real-world information.
  • The community card suits were difficult to read on that version of the graphics. In part because the players were at a large table and so were viewing the community cards from more distance than normal for an iPhone. (fixed)
  • It was difficult for players to activate their cards under the chip to fold or show. (fixed)
  • Using a hand to 'shield' while looking at cards could mess up the touch screen. (fixed)
  • Both players doing things simultaneously could mess things up. (fixed)
  • If people began a game using real cards, they were going to finish it with real cards. What could sell this game is the ability to play poker easily and quickly when you were NOT at a normal poker night. (learned)
  • For some reason, people have a harder time remembering virtual cards than real ones. (this one we could not address in our software.)
These were all addressed and fixed before submission to Apple. We joked that Mike and I could write off the $5 each as a business expense. In reality, that was a very well spent $10 which produced a much stronger initial release.

Polish
The community cards went through 3 (actually 4) versions before settling on the two options available on the software. The version shown here with the smallest side-pips was the initial version and too difficult to determine the suit of face cards between Clubs and Spades. The other two versions shown here are both available in the finished software, and either one can be selected by the players. The "Asymmetrical" one was the 2nd attempt in which I moved the face to one side and increased the single PIP to fill the empty space. This gave more space for the face picture. Some people we showed this to liked it a lot, and others didn't think it looked like 'normal' playing cards.
The third option with the narrowly cropped face image and the bigger side-pips ended up being the 'default' version in the software. This 3rd card also does less anti-aliasing around the edges so I could cram as many usable pixels as possible into the 60px width that was necessary to fit 5 cards on the screen.

Touch Screen
These improvements were all Mike. I don't know what he did, but holding your cards out with one hand and frantically tapping the screen with the other now causes no problems.

Animation
Again, all Mike. Look closely to see some nice subtle touches.
  • For starters, the whole ballet of movement when a new hand is dealt--gathering cards, sliding the deck to the opposite corner, getting the chips out of the way, dealing, capping the cards to get the chips back into place. Beautiful. All Mike.
  • The fade & shrink when cards are folded.
  • Even just sliding the 'deal' card in various directions and it going from wherever that is to the board when it goes.
  • Also notice that the board is dealt from the point of view of the current dealer. In both direction (left-to-right) and card orientation.

Sound
The sound effects were added last--going in the day before (and a few day-of) submitting the program to Apple. Last-minute does not, however, mean rushed. I think the sounds are simple but effective. I hope other people agree. (they are, after all, just shuffling and simple card sounds.)

The Icon
I'm also very proud of the icon.
The finished icon (shown here from the splash screen) is pretty much the idea I had in mind from the start. I called it "Face-off Jacks." When I came up with the Idea I didn't actually know it would be the one-eyed-jacks which would be perfect for the image. I just wanted two face-cards in a face-off. Jack vs. King, whatever.

This image didn't appear out of nowhere. Below are some rejected versions...










The king one was more of a joke than anything else. I knew the jacks were right pretty much as soon as I looked through the card graphics. It just took me a couple tries to get it.



And that's it.
The first version of the program was submitted to Apple on March 4, 2009. Six days after I made the first concept drawing.
I think the program is very cool and will be fun to play poker on airplanes, coffee shops, and other strange places when opportunities present themselves. The program itself is really quite simple--it's just a virtual deck of cards which are dealt and flipped as indicated. But that's all a real deck of cards is. The game is whatever you make of the deck of cards.

I hope people who use this software will understand that. We were not trying to create an online poker client for the iPhone--we were trying to create a virtual deck of cards so people can challenge each other to a new type of hybrid-poker: part virtual, part real.

Enjoy our virtual deck of cards!

-Pete

UPDATE: A minor bug was found. (Involving one player's ability to show his cards after the other player had folded--it would not have effected the outcomes of hands. Just a player's ability to rub it in when he won.) So we pulled the submission and resubmitted a day later. So it was 7 days. Whatever...

UPDATE2: Another bug was found to push back the approval process. This one would have never effected 'real' play but if a player used the 'undo' button repeatedly (30 or more times) on a single hand then strange things could happen. The bug would only have ever come up when re-dealing to yourself over and over to make a royal flush or 4 of a kind. We both fixed the bug and limited players to 2 "undos" per hand.

No comments: