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 :

• Advancement : Time spent in the game is accruing worth and is meaningful.
• Entertainment : Story lines and new ideas excite the user’s imagination.
• Quick Fix : A moment of boredom averted by a game that can be played in a few minutes.

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.

• What will be fun and simple to understand?
  • With X’s & O’s being obvious, I decided to use colors. This created a new world for the user right away.
• How will the user play? Computer or another person?
  • I knew playing against another person is standard and the simple to implement, so I decided to push myself and create a robot.
• What happens to past games?
  • I personally enjoy seeing my history and one of my favorite parts of Treehouse’s setup is their point system. So stats and potentially showing past games were on the top of my list.

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 :

• Create a robot character & its AI
• Change between play styles
• View stats of game play
• Scroll through past games to see how they were won
• Design that is simple to use & learn as well as animate
• Highlight who won or stalemate
• Ability to start new game

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.

Architecture

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 :

• Game Collection
  • Game - Spot Choices
    • Winner
• Play State
  • Robot : Runs a decision method to chose a spot
  • Person
• Touches
  • New Game : Add a game to the game collection
  • Spot Tap : Change which player’s turn it is
  • Stats Tap : Overlay with current totals
  • Play State : Change who you are playing

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 :

• Models (can hold singletons or data objects)
• Random (filled with classes I build for all apps normally)
• Controllers
  • Views
  • TableCells
• Images (now controlled by Asset Catalogs)

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.

• CGAffineTransform : became a huge pain because the cell.transform was acting funny when the scrollview.contentOffset changed (most likely I had unaccounted for some factor).
• CATransform3D : is what I ended up using and attaching it to the cell.layer.transform, and it worked flawlessly after that.

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 :

• Check for a winning move : it looks over every possible set of three and sees if two spots are occupied by the robot
• Check for a blocking move : same as above but looking for two spots occupied by the user
• Random open spot: this is the real special sauce that creates variety for the game play (and honestly it has allowed the robot to beat me multiple times)

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.

Learn

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!

Online Training vs Support

Once word started spreading about me joining The Iron Yard to be the iOS Instructor for the Atlanta campus, the first question was :

Will you be offering an online course?

My normal response was a simple no with an explanation that you get something special from a classroom.

Research

But as a person who loves to play devil’s advocate, I chose to do some research (I was also encouraged by a very smart team member, Eric Dodds, to pursue this). So I signed up for a couple online mentoring sites, including Codementor.

The Long Wait

Whenever I signup for a program, normally I don’t get engagement for at least a few weeks to a month. I was more than surprised to see a help request the next day. I looked into the request and was intrigued by the question :

I need help understanding what this plugin is doing and build something similar from scratch.

I love building things from scratch instead of using plugins or frameworks. This should be a fun and interesting first experience of online mentoring. Also, the guy was located in London +1.

Communication & Experience

Codementor has not even launched publicly (as of March 12, 2014), yet they have a really great web app experience. Getting connected with a requester is very easy, and starting a session works great. They even have a simple code editor, and video chat built into their session window. All of that is awesome, but I needed to see his Xcode window to help walk through what he is building. To make this work we had to download screen sharing software. I have tested two different apps, and both have been laggy (could have been the other users connection) :

• TeamViewer
• ScreenHero

I probably spent an extra 5 minutes or so just trying to scroll and navigate, as the mouse and trackpad were almost unusable through screen sharing. Luckily the guy was patient as I walked him through what was needed to recreate the functionality of the plugin he was using. 90 minutes later we had rebuilt the plugin from scratch allowing him to really have control over everything in his app. We ended on a great note, and had successfully solved his problem.

Not Everything Works

I would say the service above would be called support, which is way different than teaching. A few days later, I got a request to teach a guy iOS development. Pumped from the last couple good experiences, I figured this would be a piece of cake. The session started as the others did, but it started to go down hill once I started trying to teach him Xcode through screen sharing. You need the ability to fluidly teach how to use tools, and the lag just destroyed anything I was trying to communicate with the other guy. We had to stop the session early, because it was literally a waste of both of our time.

Result

After enduring my experiences, I would state that support through online venues is totally viable. But when it comes to a new technical tool or coding language, online just is too restricted and disconnected to allow for true helpful teaching.

If you are serious about learning something new, do it in person.

Once you are knowledgable on a subject, online support will be there waiting.

Why am I a Mac?

There are so many weak opinions that fly around, just based on money, customer service, negative advertising, and more. And no one cares to find out for themself why people believe or support their opinions. You see this with any major splits that don’t have comparable features:

• Religion (each religion has different view points, and when looking from each view point you could make yourself believe it is right)
• Sports (when you play or watch a specific sport, you believe it is better than others based on things the other sports don’t have)
• Technology (whatever has the newest tech out must be the best)

So why do we force our opinion on others? Is it because we want to be heard? Or maybe we just want to have others assure us in what we believe. A lot of times we think we are providing a service by telling others what we believe. That last one is the furthest from the truth. It is never a service to force your opinion on someone else, especially if they didn’t ask for it.

The best way to help others understand why you believe what you do, is by pursuing what you believe in as proof to why you believe in it. When others see first hand why it is so great to believe what you do, they are so much more inclined to believe it as well, rather than if you were to try and force it on them by telling them what they should believe.

Ok, enough with the philosophy.

First Mac

I grew up on PCs, and I loved being able to rip apart a PC and rebuild it within a day. Computer classes were really fun in highschool. But, about 4 years after highschool I had gotten sick of viruses, blue screens, and many other issues. I had been hearing about this computer that is virusfree (no way can that be possible). I finally had to find out for my self and bought a white iBook from a coworker… man was it pretty compared to my old PC. But, holy junk, I had no idea where my windows went… and what is a “Finder”? I started to think that I made a mistake converting to Mac.

There is always a point in which you question your choice after converting from one thing to another. It is that moment when you remember what is comfortable while dealing with uncomfortable circumstances in the new environment you are trying to get the hang of. I couldn’t take it back, so I decided to try and figure it out.

A couple months later I was designing the CD cover for a friends band. This was the beginning of my love relationship with one of the few brands I will completely support. I have never had a bad moment with a Mac, never a virus or anything that wasn’t brought on by wear and tear. I just upgraded to a new Retina MacBook Pro, and my previous MBP was 4 years old (I never once had to clean it of viruses or take it in to have it fixed). I love never having to think about what is going wrong with my computer and being able to focus on what I am creating.

First iPhone

When the iPhone came out in 2007, it changed the world. 2009, the year I finally purchased my first iPhone. It was a black 3G with 8gb of storage, and it was freaking slick. I just stared at it forever playing with the swiping and other gestures you could do with this new touch screen. There was this whole new world of downloading/buying apps and it was exciting. But wait, you could build your own apps and put them on your phone or even better sell them. Seriously?

A little later when I stepped into iOS development, I started to grasp the future of technology and how mobile would become a center piece of our lives. I love the idea of using technology to enhance a person’s life.

First …

I believe that building for iOS is just the stepping stone for what is coming next. But, who says I have to wait to find out what the next technology will be. Why can’t I be the one who creates the next revolutionary tool? Why can’t you?

Liltool v2.0 : iOS App

As a tech nerd, I fell in love with the iPhone right away. I was learning design at the Creative Circus when this revolutionary device was released into this world. At that time, I had no real experience in development past playing with iWeb and Dreamweaver. I smile to myself when I think of where I started, and the journey I have been on. As I slowly found my way as a developer, I never lost my love for design. So when I chose to build iOS apps, I made a very important rule for myself.

Build apps that make the world better through beautiful UI/UX design.

When I finally decided to build my first personal app, I new it had to involve design and a simpler way of doing something already out there. I love logo design and my go to Mac app is Adobe Illustrator. But what about when I am away from my computer and have time to kill, or how about when I am meeting a client without my laptop? Well, there should be an app for that… and I didn’t like a single one of them. I remembered a simple Javascript web app, called Liltool, I had built that would allow you to draw layers, color, etc.

Learning

I had recently gone through the Big Nerd Ranch iOS Bootcamp, which Hybrid had sent me to become a better iOS developer. First off, BNR is an awesome program and it very well sparked a new fire within me to build apps. Learning from a human rather than online tutorials is a million times more effective and efficient. A week of training fixed what I had been learning wrong for the year or more before that.

Problem

My belief is that an app should have a purpose or a problem to solve. My problem was having a simple way to create vector graphics on my iPhone or iPad. I spent a good amount of time researching other apps that do this and found what I personally didn’t like and noted how they could be better.

Birth

Late at night, 3 hours at a time, for over 3 months I slowly pieced together version 1.0 of Liltool for iOS. I made my process into a game, giving myself key stages to conquer. Every time another piece of the app was completed, I felt more relaxed and more enthusiastic. Finally I was happy and submitted it to the App Store… couple weeks passed and I started to get nervous. Could I have built an awful app, are they laughing at it as they review it, will I be rejected?

Status Update, you app is being processed for the App Store. Relief flooded over me, then it hit me… my app is accepted! I am now an approved app developer. Not by some lame fart app, but by an advanced drawing tool that will help others.

Rebirth

It has been a long time coming, but I finally found time to update my Liltool App. With iOS 7 redesign, came a renewed excitement about how Liltool could look and work even better. Spent time on fixing any bad conventions from the previous version and even more time to redesign the UI/UX.

Future

There are many more features I want to add to Liltool, and I will always be working to make what I have created better. You can suggest ideas or bugs you find on Github.

Now it is my time to teach others about iOS app development. Check out my Mobile Engineering class at The Iron Yard.

Comparison

version 1.0

version 2.0

Nothing to Fear : App Creation

App development is no longer a process to fear for first time developers.

If you listen to stories of people building apps, most of the time you will hear the bad parts of what they went through. This has intimidated a lot of developers from even getting into app development.

I want to clear a few things up about what goes into app development.

Know Code

Obviously, you first need an interest in programming, a desire to learn how things are built, or have a passion to create. Without one of those app development is just going to be a painful experience. The language can be taught through online tutorials like Team Treehouse or through in class courses like Mobile Engineering. There is a huge time difference between learning from a person (my class above is 12 weeks) and learning from online tutorials (which can take 1 - 2 years).

Build

Once you know how to write basic code (c or objective-c), the build gets exponentially easier. Apple has done a great job improving Xcode (current version 5.0.2) over time. Using interface builder you can drag and drop elements like buttons, images and more to quickly layout your app. After that you might add a couple connections with code to make the interface functional. And BOOM, you are done. Yes, some apps will take more than a day (especially game apps). I just built 1337 Calc in one day last week and it does about 98% of what the portrait version of Apple’s calculator app can do.

Testing

Testing was a pain until companies like TestFlight came along and made the process very fluid. Now you send people to TestFlight, they signup & register their device, you add their device to the Apple portal, build your app through Xcode, and upload the build to Tesflight. They get an email that has a link to download the app to their device. You can now let your Grandma test the app out from 5 states away. :)

Submission

It used to be a huge hassle to submit your app, and the 2+ week* wait for you app to get reviewed was killer. Now all you have to do is, setup details about your app in iTunesConnect, then submit the app through Xcode. Then you just wait for email updates about your submission progress. I submitted the 1337 Calc app on January 17th and it was reviewed and approved on the 21st - four day submission process (this is a very simple app, so the review time could vary based on size). The queue to get your app reviewed is the longest part of the process.

*this was not always the case

Photo credit: angermann via photopin cc