in Blog, iOS

WakeUp – Behind the app

The new version of WakeUp Challenge is out and you probably have herd about it if you follow me on twitter.
Find here an overview video of the app I did with the help my girlfriend.

However, as I tend to use my blog as more technical-related stuff, I would like to talk about a few aspects of the app in a more technical way.

As promised, I still need to publish some tutorials about a couple of things I learnt while developing WakeUp 2.0, but I would like to take this opportunity to talk about all the small details you will find in the app and how I made them or what I used. This is not a tutorial, just an overview… or a behind the scenes… I want to let you know what I have used for the different parts, it might be helpful for some of you.
Let’s start!

Main menu
One of my favourites feature I have introduced in this version is the main menu with an extensive use of UIKit Dynamics, introduced in iOS 7.

mainmenu

There was not much information around about Dynamics apart from the documentation. Having said that, I found really interesting the Stanford class from the legendary iOS teacher Paul Hegarty, I strongly recommend to watch it.
I will eventually finish the tutorial of what I learnt about dynamics, however I don’t think it is a big deal, I found it very intuitive and easy to use.

Initial tutorial
Most of you will probably know where this came from.

first_tut

Yes, it is the IFTTT JazzHands framework. What can I say about it? Really easy to use and very powerful, 100% recommended.

Slide menu
This is the menu I created for editing the alarm and set up a quick nap.

slidemenu

The most difficult part was to create ‘the line’ (which I explained how to do it migueldiazrubio.com great Spanish iOS blog, check it out). Once you have the line, you just need to add a fill color (white in my case) and add a UIView with rounded corners underneath it, ready to send to the middle of the screen when the amount dragged by the user reaches a default amount. After that, using a simple UIView animation the frame of the circle-UIView changes to be equal to the screen frame, and the next ViewController is presented.

Breakout game
I have included a new game, which is basically an arkanoid.

breakout

I have enjoyed programming this game because it is the first one I have used SpriteKit. All the previous ones where done by using normal stuff (UIViews, Core Animation, etc.). Before SpriteKit, I did play a bit with Cocos2D, and I was really looking forward to start playing around with the new framework from Apple.
I was running a bit out of time for this update, so I just followed this tutorial from Ray Wenderlinch adapting the UI.

Animated background
Guys, I suffered lots of headaches for including this feature…
It is not just the animation of the gradient on the background (here is a good tutorial I used for it), that was the easy part. The difficult parts were:
1. When moving from one ViewController to another the idea was to keep the animation going. I solved this problem by creating the background layer on the delegate, and setting the background color of all ViewControllers to clear color. I know it is terrible for performance, but it works pretty good.
2. SpriteKit can’t have clear color for the background, it must be a solid color. That means, every time the user enters to the game, there is a quick animation on the background from current state to solid color. Check it, it is pretty neat.
3. Changing from one color to the next after a long press. I thought it was going to be a nightmare, but after thinking about it, the code was pretty simple. The method in charge of doing it is just a CABasicAnimation between the presentation layer and the new color layer.

General animations
I have received some good comments about the transitions and animations across the app.
Let me tell you a secret… I haven’t used AutoLayout for WakeUp (and I feel a bit bad for it). And the reason is because I started with it on iOS 6, and the AutoLayout wasn’t as good as now.
Also, I haven’t used neither the new UIView Transition framework.
However, I became pretty good at moving things around on the viewWillAppear and the viewDidDissapear.
All I did was set up my subviews on a nib, and use these methods with some basic animations to push/pull the subviews in/out from the screen (or modify the alpha value). Very easy but quite effective. The downside is the amount of lines of code I had to type… Managing 3.5inch and 4inch screens ‘by hand’ is pretty hard work.

Location and weather
One last bit I would like to talk about. On previous versions of WakeUp I did use a framework downloaded from github that was using Weatherbug for fetching the weather. For this version, I created my own framework using OpenWeather and AFNetworking. Not very complicated for most of you, but I am quite proud of myself for it :D

I guess that is all I have. All the other bits you will find in the app are pretty standard.
If you have any questions, do not hesitate to answer! You know where to find me :D

One last thing. I would like to thank @pivalue not only for all her support, but for being my ‘design manager’. Yes guys, every time I had a new feature, icon, game, control, etc. She was there to say yes or no.
Also, I want to thank all betatesters for being so helpful, and all the people contacting me with new ideas and impovements.

Thank you all, very much!

Leave a Reply