Games for Windows Phone 7 Resources: Reducing Load Times, RPG Kit; Other

Dec 11, 2010

Microsoft released the new games education pack including a multi-platform tutorial, RPG starter kit ported to Windows Phone 7.

I really like the comparisons of the isostore reads in MB/sec in the “reducing load times paper”, and the game samples that’s why blogging it.

Here’s the pack:

http://create.msdn.com/en-US/home/news/new_education_dec_2010

 

Kind of off topic: I got few asks “how do you make the mouse cursor in your videos?”

I created my own mouse cursor (just a circle .PNG, then convert to .cur) and I set the OS system default cursor to it. You can download the cursor here: http://nokola.com/sources/circle.cur

I use Windows Movie Maker for the video editing – does someone have better (free/cheap) suggestions? What do you use?

    

Fantasia Painter Released for Windows Phone 7 + Tips

Dec 5, 2010

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! Smile

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 Smile

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!

    

Tips/Tricks: Short Sounds, Fireworks and BitmapCache Speed

Jan 4, 2010

This blog post is a follow-up of the previous one dedicated to the Shock improvements.

I'll just list all tips or other interesting findings/updates in no particular order:

Playing Short Sounds in Silverlight (Improved)

You probably know by now that Silverlight (2,3) has an annoying issue with short sounds - sometimes the sound is not played correctly. The simple workaround is here

If you happen to play too many sounds/sec, the above workaround can cause your memory usage to grow more than you want to for short time. The easiest way to avoid the surge in mem usage is to cache the streams that contain the .mp3 sounds, like this:

private static Dictionary<string, Stream> _streams = new Dictionary<string, Stream>();

public static void PlayShortSound(string embeddedSoundName, double volume)
{
    Stream stream;
    if (!_streams.TryGetValue(embeddedSoundName, out stream))
    {
        stream = Application.GetResourceStream(new Uri(String.Format("/Shock;component/Sounds/{0}", embeddedSoundName), UriKind.Relative)).Stream;
        _streams[embeddedSoundName] = stream;
    }
    MediaElement media = new MediaElement();
    _soundContainer.Children.Add(media);
    media.MediaFailed += media_MediaFailed;
    media.MediaEnded += media_MediaEnded;
    media.Volume = volume;
    media.AutoPlay = true;
    media.Position = TimeSpan.FromMilliseconds(0);
    media.SetSource(stream);
}

Then, just call the function like this example: PlayShortSound("explosion.mp3"). You can use this trick, because multiple sounds using the same stream don't cause issues with each other, which is nice.

"Shatter" Effect

In my previous blog post I mentioned the "shatter" brick effect, which is based on this one:  http://www.shinedraw.com/animation-effect/flash-vs-silverlight-colorful-fireworks/

I changed the effect and made it self-recycling: removes itself from the parent after a given time period. It will also display "fireworks" in an area, not  a dot. All of these are really small modifications, but help make the effect "run and forget", and easy to use for "shattering" stuff like bricks.

Here's an usage sample:

public static TimeSpan ShatterEffectTimeSpan = TimeSpan.FromSeconds(0.3);              

Fireworks fireworks = new Fireworks(TimeSpan.FromSeconds(0.3), (int)width, (int)height, brickAppearance == BrickAppearance.Ice);
Canvas.SetLeft(fireworks, centerX);
Canvas.SetTop(fireworks, centerY);
Globals.BoomContaier.Children.Add(fireworks);
fireworks.Start();

And here's the source code. Note: get the complete sample from the shinedraw.com link above and then change the 2 files below. The code won't compile, but you just have to call your own Random() function, and maybe fix few other basic things.

Fireworks.xaml.cs (4.98 kb)  MagicDot.cs (2.89 kb)

I want to call out something very interesting in the above effect (not made by me originally) - each MagicDot is created within its own container. I believe it will cause less layout work than putting all dots within the same container (this is a gut-feeling unverified speculation)

If you want to see the shatter effect in action, break the ice bricks on level 2 of Shock: http://nokola.com/shock

When (Not) To Use BitmapCache, Even For Images That Don't Move

I found out that if I use CacheMode="BitmapCache" for each brick (100+ per level), the performance suffers. This is very interesting, and is something to keep in mind when using bitmap cache.

Seems like the larger the image, the better.

More On Speed

Some blogs (don't remember where) mention that images with Opacity=0 still render and take valuable CPU/GPU time - I tested it and it seems that in Silverlight 4 Beta this is not the case.

I observed no noticeable speed change when a UserControl (the highscore) had Opacity=0 vs Visibility=Invisible. Note, however that Opacity=0 means you get hit testing, so there is some speed difference - don't just blindly overuse Opacity=0 instead of Visibility=Invisible.

 

      

nokola.com | Terms | Log in

Recent

About the author

Happy & enjoying life. Software enthusiast.
The opinions I express here and on nokola.com are mine and not my employeer's (Microsoft).
This is the official blog of nokola.com. You can find Silverlight samples, coding stuff, and hopefully other interesting things here.