(X) Hide this
    • Login
    • Join
      • Generate New Image
        By clicking 'Register' you accept the terms of use .

Tim Greenfield on PuzzleTouch WP7 Application

(6 votes)
Silverlight Show
Silverlight Show
Joined Nov 03, 2008
Articles:   25
Comments:   34
More Articles
0 comments   /   posted on Dec 13, 2010
Categories:   White Papers , Interviews

The next WP7 developer who we introduce to you is Tim Greenfield who will reveal some secrets behind the creation of his PuzzleTouch application. Tim also gives some advices to those of you who consider to start developing for Windows Phone 7.

Q1. Tim - please introduce yourself briefly (experience, interests, key projects, etc) and tell us more about the application you created - what are the key functionalities, major differences from other similar applications on the market, why do you think people would want to install this app on their WP7?

A. My name is Tim Greenfield, I am a software engineer working for Vertigo Software and the founder of PuzzleTouch and MyPadlock. I am also a blogger, speaker, and former Silverlight Insider. My WP7 app, PuzzleTouch Jigsaw Puzzles is a jigsaw puzzle game with very realistic looking puzzle pieces and a natural feel to moving and snapping the pieces together. Besides dozens of interesting puzzles to choose from, you can also take a picture with your camera and turn it into a jigsaw puzzle. Plus, you can email these personal puzzles to friends or post them on Facebook from within the app, allowing friends and family can play your puzzle on the web for free. PuzzleTouch Jigsaw Puzzles also has an advanced mode to add even greater challenge.


screenshot1Q2. What was the motivation behind creating this application? How did you get the idea?

A. The idea was essentially a “no-brainer”. I had invested over a year into developing the award winning website: PuzzleTouch.com (written in Silverlight), so I already had an extensive code-base that I knew I could easily leverage for the phone. Furthermore, the mobile platform is in many ways an even better venue for jigsaw puzzles. After all, you can touch the pieces like you would real with real jigsaw puzzles, the device is portable which makes it great for traveling, killing time in airports, …etc (something impossible to do with real jigsaw puzzles tethered to your dining room table :) And last, your phone has a built in puzzle maker… your phone’s camera!

Q3. Did you have any performance when you started your application on the device? What were the main challenges to make it perform fast enough?

A. I had already spent a good deal of time fine-tuning the PuzzleTouch.com website to handle various performance intensive tasks such as supporting 1000 piece jigsaw puzzles that you can easily zoom and pan as well as video jigsaw puzzles that play moving videos inside each puzzle piece. So, in many ways I was fairly far along already. However, after porting, I found I was still pushing the limits of the phone’s hardware. My main troubles were related to frame rate when dragging and rotating puzzle pieces. In the end, I did an exhaustive review of how I was using hardware acceleration and animations and fine tuned it further to boost the frame-rate during game play.

                                                      screenshot3         screenshot2

Q4. What were the challenges you faced when moving from Silverlight in/out of the browser to the phone environment?

A. Design, design, design. I wanted my app to look like a Windows Phone 7 app and not like a ported website. Starting with the PuzzleTouch.com code base got me very far very fast but I had to avoid temptation to simply rebuild a smaller version of my website for the phone. I actually ended up finishing the app for the phone and then throwing it away and starting over with the design. In the end, I moved away from having multiple pages leading up to the actual puzzle play screen and instead used the panorama control to build a succinct, user-friendly interface all on a single page to select or create your jigsaw puzzle.

Q5. Did you have to drop some features from your Web-based version to make it work fast?

A. Yes. As mentioned, PuzzleTouch.com supported up to 1000 pieces as well as video jigsaw puzzles. 1000 piece puzzles would not make sense on such a small screen nor would it perform reasonably well. And Silverlight for WP7 doesn’t support VideoBrush (the only way to build video jigsaw puzzles). Both features had to be dropped but it actually allowed me to clean up my UI by not presenting the user with so many choices. I honed in on what the best number of pieces would be on the phone and tweaked the app to make the experience as good as possible instead of trying to build a one size fits all app as the website tries to do.

Q6. Could you reveal some tip, some solution you used to work around a specific problem faced during the development of your application?

A. WP7 doesn’t support pixel shaders yet, and drop shadows were paramount to the realistic look and feel of the puzzle pieces. Fortunately, I came up with an alternative by creating a duplicate set of translucent black puzzle pieces and placing them behind the real puzzle pieces at a small offset. I was able to animate their position when the pieces were rotated to give the effect of a fixed light source while rotating the pieces and expand them when the piece was touched to give the appearance of the puzzle piece being lifted ever so slightly off the screen for a little 3D realism. In the end, it performed great and looked 100 times better than without any kind of drop shadow. Sometimes these little details make all the difference and it was well worth the time to get it right.

                                                         screenshot7         screenshot8

Q7. Have you faced any performance challenges with PuzzleTouch? Was it hard to optimize your app so it may run smooth on the device?

A. As mentioned, the underlying PuzzleTouch technology was already fairly well tuned and made great use of hardware acceleration so most of the work was already done. However, I did spend a fair amount of time looking at the performance readouts on the phone and made minor adjustments until I was happy. Fortunately, most of the same performance considerations in Silverlight for the web apply to the phone so in the end, I was actually able to roll some of my WP7 changes into the web version to improve it as well. All of this really demonstrates the power of code-sharing and why it is strategically important for Microsoft to develop Silverlight web/desktop with Silverlight for WP7.

Q8. How do you see the future of WP7, and applications for WP7?

A. WP7 is very appealing from a consumer perspective; in my opinion it competes on just about every level with Android and iPhone. It has some serious catch up to do to compete as a brand, but the platform’s quality and feature set is surprisingly on par and in some ways better than the competition. The handful of features it is missing will almost certainly show up in vNext, and because the phone carriers have limited control over the updates, users won’t be stuck with an outdated OS like they are with Android.

From the developer’s perspective, I actually see the developer’s story as possibly one of the greatest benefits to the platform. Microsoft has arguably the best programming stack available today and by leveraging Silverlight and XNA, developers won’t have to learn anything new and can even re-use vast amounts of code and external libraries to make development even faster. Furthermore, because the specifications are more tightly controlled and the phone carriers can’t meddle with the OS, app compatibility across different devices is practically irrelevant (the opposite from Android). In the end, these advantages are huge and we are sure to benefit from an amazing marketplace in both the number and the quality of apps available.

Q9. What considerations a Silverlight developer should make before starting to develop for WP7?

A. #1: If you’re porting an app, expect to redesign it. Not just for limited real-estate and touch support, but for the entire UX. #2: If you’re starting from scratch or porting, teach yourself what good design on a Windows Phone 7 looks like. Go out to the marketplace and look at the other apps. What do and don’t you like and why? #3: Familiarize yourself with some of the WP7 basics. Spend an hour on each of the following topics by building a quick proof of concept app to test the waters with: hardware acceleration, panorama and pivot controls, navigation, tombstoning, & touch. Once you have these basics under your belt, you’ll be far less likely to paint yourself into a corner down the road. #4: People are going to hate me for saying this, but don’t go overboard worrying about performance right from the start. Build POCs for the areas you suspect may have performance issues but don’t be afraid to rely on refactoring too. I’ve read blogs stating to stay away from binding and to stick to code-behind. While it is definitely true that this will result in better performance, sometimes you just don’t always need better performance and I’d say in most cases: bind away and tweak later. Don’t sacrifice clarity for performance if you don’t need to.


Q10. What other ideas for next WP7 applications do you have?

A. I actually just released my second WP7 app called BobbleHead that allows you to make bobblehead dolls on your phone. You can take pictures of friends, and put their face on some pretty funny bobblehead bodies then shake, poke and push the head to make it bobble like a real bobble head doll. A free trial is included and it was a ton of fun to build. Additionally, I’m also working a new version of PuzzleTouch for Kids (PuzzleTouch Jr.) and a more difficult version of PuzzleTouch (PuzzleTouch Extreme). Coming soon!

Q11. What is your opinion about Silverlight 5 and the new features announced at FireStarter?

A. I think this might actually be the most impressive Silverlight release since v2. There are a lot of great improvements for performance as well as productivity that Silverlight developers will be able to leverage to make Silverlight even more powerful than it already is. Silverlight is quickly becoming the premium platform for desktop and web development and I’m constantly impressed by the pace and level of innovation we’re seeing. Presumably, most of these great improvements will also find their way into the WP7 platform soon as well.

Thanks, Tim! Hope we talk to you again soon and discuss your BobbleHead App!



No comments

Add Comment

Login to comment:
  *      *