Fantasia Painter Released for Windows Phone 7 + Tips

Edit Dec 8, 2010: Updated tips (I was too excited the first release and missed some important info in the “how to speed load/save state tip #3)

Yes! See the 1-minute intro HD video of the drawing app below. In this version, you can add makeup to someone’s face, change eye color (or other colors). It also comes with all-new fur smudge, and color reveal/hide brushes as well as rainbow mode for all existing Fantasia brushes. Pinch to zoom and move with 2 fingers.

Click here to try or buy Fantasia Painter for your Windows Phone 7

Here is a little longer (2 minutes) video that shows some of the Fantasia Painter’s drawing capabilities in action:

Note: I forgot to mention that you can pinch to Zoom to paint small details (this allows you to draw the small details on the birdie on an actual device, not just the emulator).

Click here to buy Fantasia Painter for your Windows Phone 7 (trial mode supported as well)

Please feel free to send link to this blog to everyone, try, buy, and/or play with the app! I appreciate it!

Technical Details and Tips

The phone version also supports “painting with effect” like the desktop version. For now I have a couple of simple effects that are only exposed through brushes (such as Saturation and Tint). I also added blending modes, which allow for “lighter” and “darker” makeup. The new brushes/effects share the same code (I add reference to the same DLL) as the web Silverlight version of Fantasia and go through the same effect pipeline, which is great!

While developing Fantasia for Windows Phone 7, I noticed collected some useful tips for developers that will hopefully make your life easier. There were some nasty crashes that were hard to find.

Tip 1: Preventing crash/hangup when using TouchPanel and Touch classes

I’m using TouchPanel and Touch for the pinch-to-zoom and move with 2 fingers capabilities. Can you tell what’s wrong with this code:

public partial class MainPage : PhoneApplicationPage
{
    // Constructor

    public MainPage()
    {
        InitializeComponent();

        Touch.FrameReported += Touch_FrameReported;

If you do something like what I did above, you’ll face a very weird issue – when navigating using NavitationService.Navigate() instead of using the back button on the phone, you’ll get a seemingly-random exception for a missing element. What’s going on?

In Windows Phone 7 your page can be created/destroyed whenever it’s not visible (read about Tombstoning). What is interesting though is that if you use NavigationService.Navigate(), your page may be re-created if it was not visible for long time even if your application is still running. The old page should get garbage collected – right? Actually it’s not, since you have the static Touch class referencing a function from your page. Thus, whenever the user taps on the phone, you’ll get a function call in a page that is invalid.

To fix the above issue, override OnNavigatedTo and OnNavigatedFrom and Touch.FrameReported += Touch_FrameReported; and Touch.FrameReported -= Touch_FrameReported; This way your page will get recycled correctly

Tip 2: Use Windows Snippping Tool to get perfect 480x800 screenshots of the Windows Phone 7 emulator.

This really saved me a lot of time. In the Windows start menu search, type “snip” and open the snipping tool. Open the “New” menu and select “Window Snip”. Click on the emulator window (the emulator zoom should be at 100%). You’re done!

Tip 3: Faster state load/save using isolated storage

I noticed an interesting issue: the first time I deployed Fantasia on a real device, loading the state using IsolatedStorageSettings (8 int variables and the picture bitmap), took about 8 seconds! Way too long

Using IsolatedStorageFile to do the same thing takes <0.2 sec on my Samsung Focus.

IsolatedStorageFile storage = IsolatedStorageFile.GetUserStoreForApplication();
IsolatedStorageFileStream file = storage.OpenFile(“myfile.dat”, System.IO.FileMode.Open);
byte[] data = new byte[file.Length];
file.Read(data, 0, data.Length);
file.Close();

Tip 4: WriteableBitmap render speed

WriteableBitmap.Render() was considerably slow on the device compared to PC, to the point where a single stroke would have 0.5 seconds lag for several lines. Thus I had to completely redo the Silverlight line rendering in code, which managed to speed up the whole drawing quite a bit (somewhere between 10 and 100 times). I also improved my brush rendering by avoiding redrawing pixels when they are already drawn and by using optimizations such as drawing one pixel with opacity X*10 instead of 10 pixel with opacity X (another huge speed improvement there.)

Invalidate(): Turns out, the performance here wasn’t too bad. It’s still wise to avoid Invalidate() I could achieve noticeably faster speed by reducing the number of Invalidate() calls per second.

Tip 5: Preventing the panorama and pivots from scrolling

I needed this functionality in order to have the color pickers work as expected and not scroll the view.

This post has sample code: http://blogs.msdn.com/b/luc/archive/2010/11/22/preventing-the-pivot-or-panorama-controls-from-scrolling.aspx

Unfortunately, the above code suffers a similar crashing issue like in Tip 1 above. It’s fairly easy to fix by ensuring the events are unhooked as appropriate. I will likely post the fixed version sometime soon (unless someone else does).

I did 1 month of usability testing (let’s hope it was worth it!) Will publish more info at a later date. There are some very interesting findings such as what is a good color picker, slider, etc.

That’s all for now! Please remember to try out Fantasia Painter, if you’d like it buy it, review, send it to friends, tweet it, facebook it, etc!

I appreciate it! Please send me comments here or in the reviews on the Phone!