Game Creation

A little over a week ago, Team Treehouse presented a contest to build a Tic Tac Toe iOS app. What most people do not know about me is that I am a gamer. And one of my habits is to constantly download (sometimes buy) games or apps on my iPhone & iPad that I believe will have good user experiences and/or great story lines.

To be a game developer, you must play games to understand what a gamer gets out of playing them.

Now that games are more presentable to the main stream audience through mobile apps, it is easier to discover what users get from playing them.

A few of the ones that are special to me are :

As I thought about the contest, I decided this app will easily be a “Quick Fix”… but I also wanted it to show past games and overall stats to give a feel of worth. And the designer side of me wanted the game to be playful and pleasing to the eye.

Next steps?

Design & Story

All of my ideas start with design, and I thrive on having a good vision of the end product before I move on to development. I tend to consistently question my ideas to expand on them, but also filter out bad any ideas.

Since we only had a week to build the app, I chose not to build a story for it. Instead, I figured I could play up the robot as a character rather than a computer program.

ToDo :

For the design, I was thinking about the circles from the keypad on the lock screen from iOS 7. You can’t get any closer to making something understandable than using key elements from the core design. I almost went with red and blue as a color theme, but again this is another obvious choice. Seeing that red and green are compliments, I just needed to pick some tints that were playful.

![Game Play](/public/content/images/ttt_gameplay.png) ![Win](/public/content/images/ttt_win.png) ![Stats](/public/content/images/ttt_stats.png)


Why do you design before architecting the code?

One of my skills as a hybrid (designer / developer) is the ability to imagine an app in a visual way. So most of my design is created by understanding the structure of how an app can be built.

First draft outline of needs :

Many of my apps are built from code only, without touching Interface Builder (which baffles lots of people). But to me Interface Builder does one thing great, gives a visual experience to someone who can’t visualize the app through code.

Next I like to build out the Xcode environment for me to easily navigate my classes and resources. I like to group things as they are contained within other elements, allowing me to go deeper as I need.

Below is an example of how I tend to layout my groups :

Code & Discovery

Never go into building an app believing you know every angle.

You will quickly find things that collide or could be done better, and sometimes you might even discover new features you want to implement.

Once I have an idea of my structure, I will start building top level classes that will manage most of my elements. For this project I built a singleton to manage my games, allowing me to have access to the games anywhere in the app.

For simplicity and speed I made the game model a mutable dictionary with the spots set to empty :

NSMutableDicitionary *game = [@{@1:@2,etc} mutableCopy];

// the key @1 is the spot position
// the value @2 defines it to be empty (as a user selects a spot it will become @0 for red and @1 for green)
// once the game is won a new key @"winner" will be added with a @0 or @1 depending on who won

This could be so much more advanced by creating a specific class for the game model and having properties to set the winner and spots (thinking about it now, I might upgrade this later). Once I decided upon all of the other pieces like how to save whose turn it is, I moved on to the view portion.

I had a vision of a vertical cover flow animation to swipe through past games. Personally I like controlling every aspect of an app that I can, so instead of trying to find a plugin to make this work, I broke it apart and built parts of it as I went. The UITableView is basically setup for what I was wanting where each cell could be a game. I set the cell to the screen height and enabled pagination, which took care of the main factors. The tricky part came with trying to animate the games in a cover flow fashion. I ran into a few bumps with the animation of the cells based on the scroll position.

Don’t give up if something does not work the way you expect it to. There will be cases where something that worked in one instance does not work this time. I have never removed a feature from being unable to make it work.

With animations working and the tableview filling with game cells, next I needed to deal with touching spots and starting a new game. There wil be times when you need a child object to speak to its parent. The best and most structured way of doing this is through delegates and protocols. Think of this as a contract between objects that specifies what can be communicated between them. I have used this method for sending data, calling events, handling callbacks, and more. For this setup, I have it handling the turns played and game won.

Artificial Intelligence

You created an intelligent robot?

No, not really. It is funny how ominous AI can sound, and make you look really cool when you build one. But really AI is just code and clockwork with a little bit of random thrown in.

The main functions of my AI :

So are AIs hard to build? Nah. Just need to break them apart like any other puzzle and start on one piece at a time. In this case, I didn’t realize how great it would turn out until I started playing against it.


I learned that building a game app is no different than any other type of app. It just has a little extra flare, some goals, and a story thrown in. Don’t be scared to build a game, because they are currently the most profitable apps in the App Store.

What kind of game would you build?

Maybe you should first ask yourself, what kind of games would you play?

Good luck!