This is the second installment of our new series of case studies on what it’s really like to design and develop Apple Watch apps.
The Idea
Growing up, I remember my favorite hand-held game was Simon. It’s amazing the endless hours of fun and frustration that were provided by such a classic and simple game.
When Apple announced the Apple Watch, we knew instantly that we had to create a similar version of Simon purely from the standpoint that it fits into the Watch’s form factor and can be played within a few minutes.
The result is Clover Clover, our new game designed specifically for Apple Watch.
How It Works
Clover Clover is a simple memory game of observing a sequence and repeating it back. The game gets progressively harder and faster as the number of sequences increases.
There are four game modes:
1) Classic Mode
Repeat the sequence in the same order. Challenge Level: Easy
2) Monochrome Mode
Repeat the sequence in the same order but all clover leaves are the same color. Challenge Level: Medium
3) Reverse Mode
Repeat the sequence in the reverse order. Challenge Level: Hard
4) Opposite Mode
Repeat the sequence in the same order but on the opposite sides. For example, if red, then yellow and so forth. Challenge Level: Expert
What’s In a Name?
The name “Clover Clover” was inspired by my daughter Emma’s love for butterflies. When we were designing the User Interface (UI), she said to make it look like a butterfly.
After many, many revisions, we came up with a symmetric shape that turned out more like clover leaves than a butterfly, but thankfully it still earned Emma’s approval.
Kicking Things Up a Notch
Each clover leaf is an actionable item in the game, and this design opened up a whole new creative possibility.
We had to make a decision whether to just make a simple tap game that was static or to make something that was truly great. We knew anyone could create this game easily, but we wanted it to be differentiated by the experience delivered through animations and game play.
We had a vision of making the animation more organic and natural feeling, as if the clover was blooming. So we brainstormed on how to achieve it on the Apple Watch within the limitations of the WatchKit SDK.
The methods we chose were very, very tedious, and all animation was a series of images, similar to an animated GIF.
So we set on an ambitious plan to achieve something that might not be possible on the Apple Watch due to the dependence on the processing power being offloaded to the iPhone through Bluetooth. Little did we know that this game would take three times longer than planned.
At a Crossroads
Upon completing our first version, we were pretty satisfied with the app after testing it on the Xcode Simulator (since we were not fortunate enough to have access to an actual Apple Watch device).
But with Apple’s strict approval process of rejecting apps for reasons such as poor performance of animations and the lag of communication across Bluetooth between iPhone and the Watch, we knew our game would be rejected due to our heavy usage of animations.
We were at a crossroads and had to decide whether to submit with the existing state of the game or just do a static and simple one without any animations.
Collectively as a group, we declared that we would keep the animation but would need to re-architect the event handling and animation of the game. Basically, this involved re-creating our game from scratch.
We were behind on our deliverable plans already, but we knew that it was worth taking the additional time because we were onto something great.
Take Two
This was where we encountered our biggest challenge: how to re-create a game that had too many extra features that pushed the envelope on the device it was to be played upon.
What was our new approach?
First, we started with the basics and compressed every graphical element in the entire game. Instead of creating it as a standard “PNG24” image, we had to change it to “PNG9 Perceptual, Non-transparent (black background color), 32 Colors.”
We decreased the size of the graphics by 3x, and, with them being non-transparent, it’s more efficient in rendering the graphics to the screen.
Secondly, we redid all animation to be in the compressed format as well as consolidated the animation altogether.
Originally, we had up to six elements on the screen animating individually at the same time. But that would take too much processing power to kick them off all at once. So, we consolidated all animation to be on one image, further reducing our need for processing power.
Finally, in terms of the code, the biggest change was the event handling.
The concern was that, when a user does a tap event to the screen, it’s sent to the iPhone for processing and then relayed back. Well, if the user taps quickly on multiple items, the game must know how to handle that.
So we came up with a state machine algorithm to queue all event requests and handle the valid ones and disregard the invalid ones. This state machine was the driving force between what gets handled and what animation it kicks off. That was our biggest saving grace.
The Sweet Taste of Victory
When we submitted to Apple for approval, we contacted the review team and stated our design approach and how we would handle every scenario.
After being in review for three days, Apple informed us that everything worked great on the device with no performance issues. What a relief!
Ironically, a simple game that I played as a kid that provided enjoyment but also frustration has come back into my life as an adult, with a similar mix of frustration and pleasure.
We hope everyone will enjoy our Clover Clover game and see the passion that we put into every line of code and every pixel of artwork.
Your app could be perfect for the Apple Watch and we’d love to help you build it. Reach out to our Apple Watch team at ThinkApps and get started today.
