Ninja Dino Showdown was developed by Calgary’s Wilson Leong at Binary Rebellion and Graham Baradoy (amongst others) over the past two years.  There’s been lots of momentum for launching this app on March 6, 2012 and this lean startup is getting a taste of success (and rightly so)!  Their hard work is evident as the gameplay is turbo addictive, the design works for all ages, and the amount of content (ninjas, abilities, difficulties, etc.) is quite impressive.

It’s a delight to see Wilson & Graham are listening to our suggestions for future updates directly through the app.  Since launching, the Binary Rebellion team has made a number of updates to substantially improve this game.  Ninja Dino Showdown is now optimized for Retina displays, the stage backgrounds have also been spruced up, and the difficulty of charger dinos (your soon to be worst enemy) have been adjusted to make gameplay a tad more possible.  Binary Rebellion has shown its users they are committed to making this game as awesome as can be.

If you’re looking for a new game to help you vent some steam, you won’t regret buying a copy of Ninja Dino Showdown.

But before we reveal the big news, here’s a bit of the backstory. As you may know, yycApps.com started in early 2010 as a way to help cover and promote the growing Calgary iPhone Development community. At the time there were some great events going on and lots of great success stories, but there was no vehicle to get this news out to Calgarians. So as answer to this dilemma, yycApps.com was born.

Since it’s humble beginnings in 2010, the site has grown into a great resource for Calgary developers and the community as a whole. The site has showcased some amazing success stories and provided a venue for smaller developers to garner attention. The site has also been a vehicle to bring the development community to the media, with features in Metro Calgary, Global and CBC Calgary. We’ve also used our stance to create a small but vibrant LinkedIn community. Overall, the site has been a tremendously successful vehicle for getting the Calgary iPhone development community noticed.

But since the end of last year, the growth of the site has stagnated at bit. We apologize for that, we’ve struggled to keep up with the growing list of developers and the numerous app releases. We’ve also had a difficult time keeping the content on the site fresh and relevant. So rather then let the site trail off into the sunset, we’re announcing a new and exciting partnership and a reboot of the site.

So with that I’d like to officially welcome the team at RANDOMTYPE to the yccApps.com family.

RANDOMTYPE is one of Calgary’s best kept secrets. It’s a young upstart company that has released some very impressive apps. Frequent readers to the site will be familiar with Gavin Miller, who has been helping write some of the excellent “How To” tutorials on the site. In addition, Kevin Dubienski and Erick Cardoza, have been working to cover the large back log of locally developed apps.

This new partnership, will allow Armadillo Studios and RANDOMTYPE to better share the workload of maintaining yycApps and also allow us to explore new opportunities with the site. We’re looking at making the site more interactive and committing to posting new content each week. We are also looking at undertaking a state of the Calgary iPhone Development community project for the summer, which we will start talking about in the near future.

But until then, we are looking forward to this new reboot and really taking yycApps.com to the next level.

Looking through the 4 screen shots that were linked, the MSNBC color wheel really caught my eye. From the screenshot I figured there were at least a couple of ways I could go about making a control like that, which got me wondering – How did MSNBC make that for their app?

This tutorial is going to explore how to make the Shows section of the pinwheel. I choose Shows because it’s got a set of disabled buttons which will involve writing code with two difference behaviours (enabled & disabled), whereas the Topics section could likely be done with identical code. Specifically in this post you’ll learn:

• How to find clues about how an app is built
• What type of business decisions go into building an app
• How to use arrays to simplify your code
• How to make an animation without using animations
• How to create a non-rectangular button

Looking for Clues

The first step in the process is to extract the images from the app. Download the MSNBC application on iTunes and use the appcrush script to extract the images. Instructions on using appcrush can be found here.

I have no idea how this app is being built, but I have my suspicions. My hypothesis is that each piece of the pinwheel is a separate image (including text) and that the white image that shows up on touch is also an image that they simply rotate to fit the particular angle of that pinwheel.

So from that hypothesis I’m scanning through that image directory looking for those images. I’d expect to find 12 images for the Topics pinwheel and 7 images for the Shows pinwheel, plus either 1 to 5 images for the greyed out section – that will be dependent on how good their programmers are! :P

The first image I hit is business_rest.png which confirms my suspicion that there are going to be 11 other images for each topic on the Topic pinwheel.

business_rest.png
entertainment_rest.png
health_rest.png
politics_rest.png
selectall_rest.png
sports_rest.png
techscience_rest.png
topstories_rest.png
travel_rest.png
usnews_rest.png
weather_rest.png
worldnews_rest.png

Through the first couple of images I didn’t notice the _press.png image that was paired with each topic. In fact when I saw it on business_press.png I thought it was a moon. I’ve placed it on a black background to show you what I mean:

But after going through all the images it became very clear that each of the above topic images have an associated _press.png for when the image is touched.

Moving onto the Shows pinwheel we get a list of 7 images:

dateline_rest.png
hardball_rest.png
meetthepress_rest.png
morningjoe_rest.png
nightlynews_rest.png
rachelmaddow_rest.png
todayshow_rest.png

And 5 disabled images for the bottom of the Shows pinwheel:

shows_disabled0.png
shows_disabled1.png
shows_disabled2.png
shows_disabled3.png
shows_disabled4.png

After seeing all these images, I now know that my hypothesis is correct and that I can begin to think about layering these images together to create the pinwheel.

What type of Business Decisions go into an App?

Now I made the comment earlier that the above could be a single image depending upon how good the MSNBC programmers were, and I think I need to clarify that statement.

You see when programming for clients it’s always a trade off between simple and complex. Sometimes you can go with the simple solution to a problem, and other times you have to rely on complex. In this case, there are two options:

One option (simple) is to use serperate images for each piece of the pinwheel. This allows the developers to very quickly create a working version, with little hassle. The trade off comes when the images need to change, this means a graphic designer and a programmer need to be involved. New images need to be cut and then moved into the application. Not a huge hassle but it’s there. The other potential drawback to this is that if the Shows ever change and Rachel Maddow no longer has a TV show, or they add another TV show to their line up they then have to make an app update. Now I say potential drawback because sometimes app updates are a good thing. They give you another chance to try and hook a user that isn’t engaged into your application when your update shows up in their iTunes.

The second option (complex) is to create each pinwheel item programmatically, including touch animations. The benefits of a solution like this is that any changes for the pinwheel can be done in code and if programmed correct with little time and effort to accomplish. The drawback to this scenario is that it would take a larger amount of time and effort to create such a solution.

At the intersection of those two solutions is where programmers frequently get caught. They want to go with the more programmatic approach because in the long run it is less work and also gives them something challenging to work on (I know that’s what I was hoping for when I ran through the images.) But the business side would rather take the less expensive and quicker solution because they’re able to get something working and functional out to their customers faster. Neither option is right or wrong, it largely depends upon who’s making the decisions and which trade offs are willing to be made. And in the case of this tutorial: we’ll go with option 1!

Background

Let’s start by writing code to add the background image to the view under viewDidLoad:

UIImageView *background = [[UIImageView alloc]
    initWithImage:[UIImage imageNamed:@"radial_shows_bckg.png"]];
[self.view addSubview:background];

Running the app at this point we get a shell with a background image. But ewww, what an ugly grey status bar. Changing that to black can be done in the xib or programmatically:

[[UIApplication sharedApplication]
    setStatusBarStyle:UIStatusBarStyleBlackOpaque];

And while this works in app, it doesn’t change the status bar when the app launches and so you get an ugly grey to black transition. That’s because this setting can also be added to the app’s plist:

When done within the plist, the value is going to be applied across the entire application so you don’t actually need to programmatically set the status bar colour.

Adding a pinwheel piece

The next step is adding a container to hold the pinwheel images. The container is going to be a view 306×306 pixels, based on the image size. Now obviously it’s pretty hard to position a transparent view correctly, so let’s add an image to that view so we have a point of reference:

UIView *pinWheel = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 306, 306)];

[self.view addSubview:pinWheel];

This code has to go after the background image code so that it gets layered on top of the background image.

Because the pinwheel images are not the full iphone width and height it’s easier to use the center of the view as our point of reference for positioning the view. We can set that up with the below code. The - 0.75 x-offset and + 29.5 y-offset allow the image to align the MSNBC app:

CGPoint center = CGPointMake(
    (CGRectGetWidth([self.view bounds]) / 2.0) - 0.75,
    (CGRectGetHeight([self.view bounds]) / 2.0) + 29.5
);
[pinWheel setCenter:center];

Adding many Pinwheel pieces using an Array

Let’s add the next pinwheel piece:

UIImageView *hardball = [[UIImageView alloc] initWithImage:
    [UIImage imageNamed:@"hardball_rest.png"]];
[pinWheel addSubview:hardball];

And another:

UIImageView *meetthepress = [[UIImageView alloc] initWithImage:
    [UIImage imageNamed:@"meetthepress_rest.png"]];
[pinWheel addSubview:meetthepress];

And another… Now that’s going to be a total pain to do that for 12 images. And I know I don’t want to be a copy paste coder, so let’s break that into a nice method:

- (void)addImageToView:(UIView *)view forImageName:(NSString *)name {
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    button.frame = CGRectMake(0, 0, 306, 306);
    [button setImage:[UIImage imageNamed:name]
        forState:UIControlStateNormal];
    [view addSubview:button];
}

And now we can create an array to loop through the image names and create the pinwheel for us.

NSArray *shows = [NSArray arrayWithObjects:@"dateline_rest.png", @"hardball_rest.png", @"meetthepress_rest.png", @"morningjoe_rest.png", @"nightlynews_rest.png", @"rachelmaddow_rest.png", @"shows_disabled0.png", @"shows_disabled1.png", @"shows_disabled2.png", @"shows_disabled3.png", @"shows_disabled4.png", @"todayshow_rest.png", nil];

for (NSString *show in shows) {
    [self addImageToView:pinWheel forImageName:show];
}

Responding to Touches

The next step is to respond to when a user touches an individual pinwheel. Which is where we hit a roadblock. iOS handles regularly shaped buttons really well, but irregular buttons poorly. iOS draws the button as a rectangle and to create a non-rectangle button you’d apply a transparency to the image. But the problem is that that transparency still receives touch events as if it weren’t transparent. In our case we layered all images on top of each other, so the result would be that the last image that was added is going to get the touch event regardless of where the user touches, because a user would still be touching the transparency.

Thankfully this is a solved problem. The best implementation I found was from Ole Begemann.

Follow the instructions on GitHub to import the OBShapedButton library, then update the addButtonToView method and change the instantiation from UIButton to OBShapedButton:

UIButton *button = [OBShapedButton buttonWithType:UIButtonTypeCustom];

That’s a clean code change for some major functionality. Big hat tip to Ole Begemann!

Now that we have a functioning touch event the next step is to have that touch respond like the MSNBC app. Now this app is unique in that it does a double highlight, here’s a quick video depicting that action:

The first step is to disable the highlighted image that UIButton does automatically. We can do that by setting adjustsImageWhenHighlighted = false;

Then we need to add a handler so that when our button is touched we fire the highlight code:

[button addTarget:self action:@selector(buttonTouched:)
    forControlEvents:UIControlEventTouchUpInside];

Now I don’t profess to be an expert in iOS animations so there is likely a better way to do this (post it in the comments if you know of one!), but I found that by using some delayed timers we can create the touch animation quite easily. The buttonTouched code will call a blink method twice. The first call will execute immediately, and the second call we’ll execute using a delay. That code looks like this:

[self blink:sender];
[self performSelector:@selector(blink:) withObject:sender afterDelay:0.35];

The blink method is simply a show and hide. The show method is executed immediately, and the hide method is executed after a delay:

- (void)blink:(UIButton *)sender {
    UIImageView *highlight = [self show:sender];
    [self performSelector:@selector(hide:) withObject:highlight
        afterDelay:0.20];
}

The rational for returning the highlight image in the show method is so that we can pass that same image to the hide method, allowing us to call removeFromSuperview in the hide method without more code to find an image reference. The first time I attempted this code, I used a property which did work, however if a second touch occurred before the animation was finished the highlight wouldn’t disappear.

Finally in order to make sure the proper highlight image appears on each pinwheel we’ll use setTag on the button to associate a button with an array index. We’ll then use this value to index into an array holding highlight image names. This means that the addButtonToView method has to change to accommodate an index value:

- (void)addButtonToView:(UIView *)view forImageName:(NSString *)name
    withIndex:(int)index;

And to use that we have to change to a traditional for loop to set the show pinwheel images:

NSArray *shows = [NSArray arrayWithObjects:@"dateline_rest.png", @"hardball_rest.png", @"meetthepress_rest.png", @"morningjoe_rest.png", @"nightlynews_rest.png", @"rachelmaddow_rest.png", @"todayshow_rest.png", @"shows_disabled0.png", @"shows_disabled1.png", @"shows_disabled2.png", @"shows_disabled3.png", @"shows_disabled4.png", nil];

for (int i = 0; i < [shows count]; i++) {
    NSString *show = [shows objectAtIndex:i];
    [self addButtonToView:pinWheel forImageName:show withIndex:i];
}

Disabling the Disabled Buttons

Within the Shows section there are 5 buttons that are disabled. We can code that up easily by setting userInteractionEnabled = false. This also means that we need to break up the shows array by those pinwheels that are enabled and disabled. Then we can add another parameter to the addImageToView method which will set userInteractionEnabled:

- (void)addButtonToView:(UIView *)view forImageName:(NSString *)name withIndex:(int)index setEnabledTo:(BOOL)enabled {
    // button creation & setup code

    [button setUserInteractionEnabled:enabled];
    [view addSubview:button];
}

And the enabled/disabled arrays are going to look like this:

NSArray *shows = [NSArray arrayWithObjects:@"dateline_rest.png", @"hardball_rest.png", @"meetthepress_rest.png", @"morningjoe_rest.png", @"nightlynews_rest.png", @"rachelmaddow_rest.png", @"todayshow_rest.png", nil];
for (int i = 0; i < [shows count]; i++) {
    NSString *show = [shows objectAtIndex:i];
    [self addButtonToView:pinWheel forImageName:show
        withIndex:i setEnabledTo:true];
}

NSArray *disabledButtons = [NSArray arrayWithObjects:@"shows_disabled0.png", @"shows_disabled1.png", @"shows_disabled2.png", @"shows_disabled3.png", @"shows_disabled4.png", nil];
for (NSString *disabledButton in disabledButtons) {
    [self addButtonToView:pinWheel forImageName:show
        withIndex:-1 setEnabledTo:false];
}

As we conclude, we end up with the following: a nice background, some pinwheel buttons, and some disabled buttons. As well you've likely picked up some new skills: How to figure out how an app is built, how to use arrays to simplify your code, how to make an animation without using animations, and how to create a non-rectangular button.

As always I've uploaded the sample code to GitHub so that you can play with it on your own. Leave a comment if you've got an app you'd like to see reverse engineered, or if you've got a better way to do the highlighting animation.

Baby Speak is designed as a enhanced communication tool between parents and their toddlers. The initial version of the app comes loaded with four essential words for communication with toddlers, while an in-app purchase unlocks a full spectrum of 28 essential words. When launched users are greeted with an beautiful loading screen which leads in to a simple menu screen allowing the user to display a combination of one, two, four, or all words at once. Each of the words when displayed is tied to a colourful illustration and when touched by the child, a calm voice reiterates the selection. The fundamental concept of Baby Speak is to provide a visual connection between common communication words and to help speed up the learning curve for toddlers. The real benefit for parents with Baby Speak is that it does away with carrying around a set of cumbersome image cards or other tools, and instead allows tech savvy parents to have a functional tool within their iPhone or iPad.

The app itself is simplistic and elegantly designed. It looks great on both the small screen of an iPhone or iPod Touch and also on the larger real estate of the iPad. The touch interface is easy to use and navigation is intuitive. The voice work is clear, concise, and extremely easy to understand. The mechanics of the app are superb, as there is no slow down and lag, even with multiple consecutive touches. Overal Baby Speak: For Toddlers is a concise and tightly developed app.

So if you’re a new parent or you have friends who are just stepping into the world of Toddlers, arm yourself with Baby Speak: For Toddlers – you won’t regret it.

Anthm was developed by Paul Thorsteinson from Calgary, AB and designed by Ben Myers (iamhabitat.tv), Paul Beaudry, and Tyler Johnston from Winnipeg, MB. The app is a 21st Century jukebox allowing users to create a party (aka playlist), invite friends to join this party and start sharing the task of creating a playlist. Once one or more people have been added to the playlist, everyone gets an up/down vote for each track. The songs with the most up-votes play first, and those with the most down votes play last. The concept is simple but the end result is an interactive musical experience for everyone linked into your party.

Before you can start using this app you’ll need to sign up to Rdio, which I dare say is like a YouTube of music. There’s a free trial if you don’t have an account, and monthly usage fees start at $4.99. Though $4.99 may sound a little steep, you get access to over 12 million tracks across much of North America, Europe, and a few other locations. You can also access music online and offline across desktops and smartphones.

From a design perspective Anthm is elegant and the user experience is stupid simple. Once you’ve watched the how-to video you should have the navigation and use of Anthm down pat. Jumping between the three tabs of this app is fluid and fast showing off the skill of Paul Thorsteinson’s code.

I chatted with Ben Myers from this project, asking about the future road map for Anthm. He responded with “We’re in the process of incorporating Spotify as one of the services as well as our own service that will allow venues to subscribe to a Monthly streaming service for their business.” Personally, I can’t wait to see what this app turns into and super kudos to the creators!

We here at yycApps are excited to use the future apps created by this team and encourage you to give it a try.

Catch the Princess is an addictive and gorgeous new puzzler, where users are tasked with protecting a Princess through 60 levels of intense game play. The game is already garnishing some great buzz from the gurus at TouchArcade. And if that high profile review alone doesn’t wet your appetite, check out the 60 second intro video below to see why this is one of the most buzzed about apps to come out of Calgary in quite some time.

The game looks absolutely stunning on the HD screen of the iPad. From the opening seconds of the launch, you know you are in for an incredible treat. The stunning animation and picturesque feel of each level invokes a dark and sombre aura akin to something out of The Portrait of Dorain Grey. Catch The Princess is one of the few games to really understand the importance of ambiance, mood and mystery – and it absolutely nails it. The game play and game mechanics are incredibly well done. It’s clear that a great deal of time and effort, was spent testing these elements out and it pays off in the addictive nature of the game. The sound track and effects are equally as moody and tie in nicely to the entire user experience.

Catch The Princess is out now and available on the iPhone and iPad. To celebrate the launch we’ve got a Promo Code for one lucky reader for the iPhone version of the app. (All you have to do is send us a quick tweet with “I wanna Play Catch The Princess” and we’ll DM you the code)