On NinetyNine

It's been less then a week since NinetyNine finally made it to the iTunes AppStore. Whew, what a journey. In the last post I promised to reveal some details on the creation process so …

… Here we go

The app started with a rough sketch made in Xcode using Storyboards by a drunk Sven in a late December night. (That's what he told me!) The concept was set, it was quite entertaining, but it was missing a proper design so Sven decided to call me a few days later and I started Sketch and updated his rough idea into the UI you see today.

Since our timeframe was limited – we wanted to make it to the store before the Christmas block – I jumped in and helped Sven with coding, too. It was quite a nice experience to go back to Xcode and Objective-C after quite a long time.

I really enjoy some of the newer features that were introduced in iOS 6, so I thought this post might be a good place to tell you about them.

The launch screen transition

Since this is a game and the UI itself is quite minimal, the first impression when you launch it had to be a special thing.

The new(ish) animation blocks available in UIView make it very easy to create a chain of directed animations which allows me to work pretty similar to a keyframe based animation tool.

[UIView animateWithDuration:(NSTimeInterval) animations:^(void)animations completion:(BOOL finished)completion]

The transition starts with a dark background, fades to the final color and then moves the logo up with a slight bounce before it lands in it's final place. This behavior is used for many animations in the game and makes the motions more interesting.

Thanks to the blocks it's also pretty simple to implement, just animate to the anticpating value in the first block and use a second block in the completion block of the first to animate to the final value shortly after.

The buttons

The buttons used in the menu and in the game itself started out as simple rectangles. We tried quite a few hover states and I started playing with the available transforms and soon we found a match with a simple set of 3D transforms. It was quite static and didn't feel right when you touched the wrong side of the button, so Sven suggested using the touch point on the button to adjust the transforms.

It turned out to be quite simple. I just added a simple UILongPressGestureRecognizer to the button and used it's action to map the point inside the view to rewlative coordinates and used those as a scaling factor for the x and y coordinates of a simple perspective transformation.

The next step was to add a slight gradient to the buttons. Since we wanted to add basic theming support, I had to generate the gradient colors from a base value. In Sketch, I just used a gradient from black to white with soft light and a low opacity.

Which was exactly what I wanted to use in code only to get me lost in finding a way to do it. In the end I found the formula for Soft Lighting on Wikipedia and implemented it myself.

If anyone cares, the code looks like this:

// a is the bottom value, b is the top value
// call this function for the r,g,b channels.

CGFloat calculateSoftlight(CGFloat a, CGFloat b) {
    // via http://en.wikipedia.org/wiki/Blend_modes#Soft_Light
    CGFloat f;
    if ( b <= 0.5 ) {
        f = a - (1 - 2 * b) * a * (1 - a);
    } else {
        CGFloat g;
        if (a <= 0.25) {
            g = ((16 * a - 12) * a + 4) * a;
        } else {
            g = sqrt(a);
        }
        f = a + (2 * b - 1) * (g - a);
    }
    return f;
}

Upcoming features

We had some plans which didn't make it into the first release. Some of them are already implemented and just missing a proper interface, others didn't feel right or still need some work.

The first update will most likely add color themes and maybe also some new additional game modes.

To support theming, every color in the game comes from a singleton class which stores them and allows us to chose from a different set of colors on the fly. For now this makes it easier for us to create new themes, but it also gives us the option to provide a theme editor inside the game, which is quite unlikely to happen in NinetyNine, but it's still a nice concept.

Source Code

To color the icons inside the app on the fly we used MGImageUtilities from Matt Gemmell, which inspired me to follow his steps and release some parts of the code to the public. This will not happen right now, as we still have to pick a proper license and discuss on the how and when, but it's likely to happen soon after the next update is available.

Even more Shameless self-promotion

I plan to talk about the game in German in the next episode of Bring it on, the podcast I started with Daniel.

So long.