WP7

First Windows Phone 7 Application

Duck’n’Cow

My first Windows Phone 7 application is available in the marketplace, Duck’n’Cow. Feel free to download and play with it (and rate it of course Winking smile).

background1

I build the application to try some of the features of the Windows Phone. In this application I focused mainly on the accelerometers.

The application shows a Duck and a Cow, hidden in a circle. When you shake the phone the duck pops up and you hear it quack. When you turn the phone upside down, you’ll see the cow pop up.

Screenshot4Screenshot5

Idea

I wanted to create a funny looking application that could be used to express your feelings about something when attending a presentation. A positive, cheering and green, action when you like something and a negative, red, action when disliking what is being told. But with a wink. Just a simple thumbs up or down wasn’t fun enough. So I decided to go for a moo and a quack, which automatically led to duck and a cow.

Gestures

The application uses to gestures, shaking and turning upside down. The turning upside down reminds of the nostalgic cow-in-a-box toys. But the gesture also resembles turning your thumb down to express dislikeness. The shaking motion is inspired by cheering and applauding.

I started off by reading the accelerometer data myself. By calculating the change of the accelerometers in X,Y and Z directions I was able to detect a shaking motion. By reading the Y accelerometer I was able to tell if the phone was turned upside down. Very soon I ran into issues whit this method, because the raw data returned by the accelerometers was too course (?!). I needed some kind of filtering to smooth things out a little. When looking around to find the best approach I came across the ShakeGesture library, which is build on the AccelerometerHelper library. Both these libraries helped my abstracting out the raw accelerometer data and use filtered events to get the data right.

Graphics and Xaml

As soon as I knew I was going to use the concept of a duck and a cow I started sketching. Below is the original sketch.

Sketch

I’ve digitized the sketch in Adobe Illustrator to be able to scale it to any size so I could use the same image for all the places where tiles were needed, like the live-tile or the tile in the marketplace.

The first version of the application only contained this image. I’ve added it as .png in expression blend. A couple of people I’ve showed the app to told me they’d rather see some animation. So I took the image apart and separated into a circle, the duck and the cow. And added the animations in Expression Blend.

Screenshot3

I’ve created a UserControl to make the switching between states a little more convenient. The control contains 4 states, duck, cow, both and none.

Wrap-up

That’s it about the app for now. If you’ve got a windows phone yourself, feel free to try the app. You can download it through here.

To stay up-to-date about the application you can follow the app on twitter: @DuckAndCow . For comments, bug or feature requests, send me an email at DuckAndCow[at]hotmail[dot]nl.

To be informed about anything else that’s going on my blog, follow me on twitter (@sorskoot) or subscribe to the RSS feed.

One comment

Leave a Reply

Seo wordpress plugin by www.seowizard.org.
%d bloggers like this: