Yes it's a little early to be thinking about the Holidays, but with the final release of the Windows Phone 7 tools imminent, we can bet that shiny new WP7 devices will be in many stockings this year. My hobby hours have been consumed with getting a couple of games ready for launch, and I was able to get a loaner LG prototype for a week which provided a great sanity check. I can tell you that the emulator is really a fantastic representation of the final device, the only caveats being performance and feel of the accelerometer input (one thing I caught immediately was that I had reversed one of the Accelerometer Axes in my code!).

As I mentioned before, I am creating both a Web and WP7 version of DroppyPop, which is great because it allows people to test the game and give feedback before the release of WP7. I'd like to thank everyone for all of the feedback so far - I have incorporated many of your ideas and fixes!

DroppyPop Update

Today I released an update to DroppyPop, which for a limited time unlocks all rag dolls and power-ups! (The final release will have a Trial version which will only unlock one rag doll and disable all power-ups). There is also new game play and new power-ups to look out for in this version.

If you have a few moments of casual gaming time, then please give this new version a try - I look forward to your feedback.

If you find a bug or have an idea, please let me know by either:

• Adding a comment to this blog post
• Using the "Feedback/Bugs" link inside the Game, under Options.

Mrs. Claus, one of the new rag dolls in DroppyPop

Here is a sneak peak of another little project I'm working on for Windows Phone 7, in addition to DroppyPop:

This is the much-awaited sequel to Boss Launch, titled "Boss Launch 2: Zombie Attack" - in which you use your (normally useless) boss to take out a Zombie horde as you progress through many challenging levels. Things get interesting when you interact with vehicles (such as jumping into the back of a truck).

Unfortunately, I have no idea how this game performs on an actual device, so I may have to trim back some of the effects and number of objects in the end.

Yes, like so many other developers, I could really use a Windows Phone 7 device to test performance on!

Interested in game development for Windows Phone 7 using Silverlight? Check out these other posts:

Coding4Fun: Shuffleboard Game for WP7

Droppy Pop: A Windows Phone 7 Game

WP7 Back Button in Games

WP7 + Silverlight Performance

UPDATE 7/14/2010: The source code has been updated for Windows Phone 7 Beta Tools (July 2010)

My Coding4Fun article "Creating a Shuffleboard Game in Silverlight for Windows Phone" has been posted! 

[VIEW TUTORIAL]

[TRY THE GAME]

[DOWNLOAD SOURCE]

This tutorial includes a video walkthrough showing step-by-step creation using Visual Studio 2010 and Expression Blend 4. You'll learn about Physics Behaviors, Perspective Transforms, Gestures, and Multitargeting among other things.

Below are links to the videos for a quick reference:

Part 1: Getting Started

Part 2: Designing the Table

Part 3: Player Turns and Table Rotation

Part 4: The Game Loop + Targeting Windows Phone 7

Part 5: Sound Support

Part 6: Performance

In order to publish a Windows Phone 7 application on the Marketplace, your app must pass a list of certification requirements. One of the items in the Windows Phone 7 Certification Requirements caught my eye:

In order to conform to this requirement in a Silverlight game, we can override the OnBackKeyPress event of a PhoneApplicationPage, and if the game is playing we can present the user with a "pause menu" allowing them to resume or exit the game. Here is an example of an OnBackKeyPress override that I'm using to show an in-game menu.

protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e)

{

    if (ucMainGame1.GameState == ucMainGame.GameStates.Playing)

    {

        e.Cancel = true;

        ucMainGame1.PauseGame();

    }

}

To stop our app from closing due to the back button key press, we just set e.Cancel to true.

That's all there is to it. If your app has some deeply nested screens, for options and such, you will likely want to navigate to the screens using a NavigateUri property of a Hyperlink control. This way, the back button will take you back to previous pages and fulfill requirement 5.2.4.c.

Today I uploaded a Windows Phone 7 sample game to codeplex which demonstrates physics, gestures, perspective transforms, multitargeting, sound and GPU acceleration.

[TRY THE GAME]

[DOWNLOAD SOURCE]

This Shuffleboard game was created as the basis for a Coding4Fun tutorial, which will be available soon on the C4F Website. I don't want to spoil the fun for the official tutorial release so I won't go into much detail here, but this demo should be helpful for folks wanting to quickly create physics based games for the upcoming Windows Phone 7 devices.

When the tutorial is released, it will include a video walkthrough showing step-by-step creation using Visual Studio 2010 and Expression Blend 4. Look for updates on the release, but in the meantime here are some more resources for creating physics-based games in Silverlight:

Windows Phone 7 Developer Tools Install Info (Tim Heuer)

Physics Games in Silverlight on Windows Phone 7

Windows Phone 7/Silverlight Performance

Windows Phone 7 Developer Portal

How To: Handle Manipulation Events

Forums on Silverlight.net

Forums on WindowsPhone

ME:	I've been working on an idea for a Windows Phone 7 game and I'd really like your feedback and ideas.

ME:	How about this? Since the game is written using Silverlight, why don't I just give you a link to a Silverlight Web version of the game, which uses the same source code, and you can give that a go?

In DroppyPop, you control a rag doll which is falling through an endless sky of balloons. Pop as many balloons as you can for points while avoiding the bombs and baddies along the way.

I've been developing DroppyPop using the methods I described in a previous blog post, namely using multi-targeting to create both a Silverlight Web version and a Windows Phone 7 version using the same source code. I develop about 90% of the time in the Silverlight Web project, and then use Linked Files from a Windows Phone 7 project to build a version for WP7. This has a couple of major advantages:

• It's faster to compile and run outside of the WP7 emulator
  
• You end up with both a Windows and Web version

This method has been working great for me, and there are only a few instances where I need to use compiler directives to use different logic for the two platforms. This is possible because Microsoft did a fantastic job on the port of Silverlight for the Phone!

Your Feedback... Please!

Let me know what you think of DroppyPop. Does the concept work? Are there any bugs? Would you pay 99 cents for the full version? :)

You can leave feedback here in the comments, or inside the game under Options/Feedback.

You might be aware that when you publish a Silverlight XAP on the web, your source code is very vulnerable to prying eyes. A XAP file is in a ZIP compressed format, and the contents are .NET Assemblies and resources which can be disassembled easily using a tool like .NET Reflector . Although there is no sure-fire way to stop someone from copying your Silverlight application logic, obfuscation can at least make it a bit more difficult to hack through.

Babel Obfuscator for .NET

There are a few obfuscators out there that support Silverlight, but they can be pricey. However, Babel Obfuscator started out as a community project and still maintains a freeware edition. Additionally, it appears that the new version of Babel has corrected some issues with obfuscating Silverlight assemblies.

Here is how you can use the free edition of Babel Obfuscator to encrypt your Silverlight assemblies: (I should mention, if you do have $149 laying about, I recommend buying the Pro version of Babel which has XAP support)

1.       Download the Free edition of Babel Obfuscator.

2.       Download the Free 7-zip compression utility. We’ll need this to update the obfuscated assemblies in our Silverlight XAP file. If you are happier with a different ZIP utility, go ahead and use it instead.

3.       Inside your Silverlight solution, right-click the Silverlight project and select Properties.

4.       Go to the “Build Events” tab and add the following inside the Post-build event command line:

"C:\Program Files\Babel\babel.exe" $(TargetPath) --noildasm --nomsil --noinvalidopcodes

"C:\Program Files\7-Zip\7z.exe" a $(TargetDir)$(ProjectName).xap $(TargetDir)BabelOut\$(TargetFileName) -y -tZIP

This post-build event will run the Babel Obfuscator against your assembly, which places it into a “BabelOut” subdirectory. Then we use 7-zip to bring that updated, obfuscated assembly back into our XAP file.

Examining the Obfuscation

We can use a tool like .NET Reflector to see what the obfuscator does for us. Here is some example before-and-after code showing an example of the obfuscation.

BEFORE OBFUSCATION

    private bool IsRagDollPart(string part);
    private void LayoutRoot_KeyDown(object sender, KeyEventArgs e);
    private void LayoutRoot_KeyUp(object sender, KeyEventArgs e);
    private void MainPage_Loaded(object sender, RoutedEventArgs e);
    private void newObstacleExplode_Exploded(ucObstacle source);
    private void newObstacleExplode_Exploding(ucObstacle source);
    private void PositionBalloon(ucObstacle obstacle);
    private void PositionEnemy(FlyingEnemyBase enemy);
    private void PositionPowerUp(PowerupBase powerUp);
    public static double RadiansToDecimalDegrees(double radians);
    private void ResetLevel();
    private void ShieldActive(bool isActive);
    private void ucExplosion1_Exploded(ucExplosion source);
    private void ucMainGame_KeyDown(object sender, KeyEventArgs e);
    private void ucMainGame_KeyUp(object sender, KeyEventArgs e); 

AFTER OBFUSCATION

    private void (bool );
    private bool (string );
    private void (object );
    private void ();    
    private void (PowerupBase );
    private void (bool );
    private void (ucObstacle );
    private void (ucExplosion );
    private void ();
    private void (ucObstacle );
    private void (ucObstacle );
    private void (PowerupBase );
    private void (FlyingEnemyBase );
    private void (object , KeyEventArgs );
    private void (object , KeyEventArgs );

Thanks to everyone who attended my session at Code Camp 13 in Waltham, "Windows Phone: Silverlight for Casual Games." It's great to see so many people sharing my excitement for Windows Phone 7!

In this session, we talked about the new hardware, Silverlight support, the Emulator, GPU Acceleration, monitoring performance, Behaviors, sound support, input, and monetization of your games.

As promised, here are my slides and demos from the talk.

[DOWNLOAD SLIDES]   [DOWNLOAD DEMOS]

And here are some links to get you started with creating fun games with Silverlight for Windows Phone 7:

Install Checklist for Windows Phone Development

Windows Phone 7 Developer Portal

Physics Games in Silverlight on Windows Phone 7

Windows Phone 7/Silverlight Performance

How To: Handle Manipulation Events

Forums on Silverlight.net

Forums on WindowsPhone

If you’re creating a graphics intensive application (such as a game) for Windows Phone 7 (WP7) using Silverlight, you’re going to want to maximize performance for both the emulator and your Silverlight code. Let’s look at some ways to maximize both of these.

WP7/Silverlight Graphics Performance

WP7 devices have a separate GPU which is optimized for handling graphics operations such as displaying, scaling, rotating, and 3D. Silverlight on WP7 has the ability to use that GPU, which can greatly increase graphics performance. It does this by allowing a “snapshot” of a visual, called a Bitmap Cache, to be handed over to the GPU for manipulation.

• Storyboard Animations are Automatically GPU Accelerated.
  If you create a Storyboard animation on SL for WP7, it will automatically use the GPU when it can for displaying, scaling, rotating, and rectangular Clips.  There is nothing you need to do to enable this, it is automatic. This is kind of a “bonus feature” of Silverlight 3 on the Windows Phone (it is not available in desktop Silverlight 3 or Silverlight 4).
  
  
• Procedural Animations need a CacheMode attribute.
  If you are moving elements via code, such as for a game, they will not be automatically GPU accelerated like a Storyboard. You need to add in a CacheMode attribute like so:
  
  <Canvas x:Name="cnvShip" CacheMode="BitmapCache" …
  
  But make sure you add this only on elements that do not change visually. That is, imagine that you’re taking a snapshot of the element that is cached, and handing that over to the GPU. If anything changes inside that element’s visuals, then the cache will be invalidated and you’ll lose the advantages of caching.
  
  
• Perspective 3D Transforms can be GPU Accelerated.
  If you use a PlaneProjection in a Storyboard, it will use the GPU. You can also apply a CacheMode=”BitmapCache” attribute to a 3D Transform and it will use the GPU. This is another “bonus feature” of Silverlight 3 on the Windows Phone (it is not available in desktop Silverlight 3 but is introduced in Silverlight 4).
  
  
• Examine Graphics Metrics.
  We can get some good graphics metrics from Silverlight on WP7 by adding the following code:
  
  Application.Current.Host.Settings.EnableFrameRateCounter = true;
  
  This will show the following metrics at the top of the device window:
  
  
  A – Render Thread Framerate
  B – UI Thread Framerate
  C – Amount of Video Memory Used
  D – Total # of Textures Used
  E – Total # of Intermediate Textures Used
  
  Note that Silverlight on WP7 uses two separate threads, a Render thread for visuals, and a UI thread, to handle input and application logic. Seema Ramchandani gave a great talk detailing these counters at http://live.visitmix.com/MIX10/Sessions/CL60
  
  
• See what’s Using the GPU.
  For performance, we want as many elements to be rendered by the GPU as possible. We can see what is rendered by the GPU by using the following code:
  
  Application.Current.Host.Settings.EnableCacheVisualization = true;
  
  When this is set, any elements that are NOT cached will have a colored tint to them. If an element appears its normal color then it IS being cached and handled by the GPU.
  
  
• See What is Being Redrawn.
  For best performance, we want to minimize what is being redrawn on each frame. We can use the following setting in code:
  
  Application.Current.Host.Settings.EnableRedrawRegions = true;
  
  … which will show a ghost copy of the visual whenever it is redrawn. If you are seeing  a lot of redraws, and they are large portions of the UI, then maybe you can add some more CacheMode attributes so it is offloaded to the CPU. (Note that when something is handled by the GPU, you will NOT see any redraw regions).

Emulator Performance

Ensure the Emulator can use your Host’s GPU.
The Emulator can take advantage of the GPU on your computer to render graphics, greatly increasing its performance… but only if it meets a couple of requirements.

1.       Make sure your video card supports at least WDDM 1.1 and DirectX 10.

a.       From the Start Menu, select Run and enter dxdiag

b.      Go to the Display tab and ensure that the DDI Version and Driver Model are 10 or better and 1.1 or better, respectively.

c.       To be extra sure the Emulator will like your video card, create an XNA Windows Phone Game. This project template is a bit pickier with GPU support.

                                                               i.       Start up Visual Studio and create a new XNA Game Studio 4.0/Windows Phone Game.

                                                             ii.      Run the project. If you get the following error, then the Emulator will not support your GPU.

Deploy failed with the following error: The current display adapter does not meet the emulator requirements to run XNA Framework applications

… However, all is not lost. It could be that you just need to upgrade your video card drivers. Visit the site for your video card manufacturer and see if they have some newer bits (This one actually worked for me J)

Enable Virtualization in your BIOS

Support for Virtualization at the CPU level is provided on newer processors. This can significantly increase the speed of emulators, allowing them to talk more directly to the CPU, instead of a software layer. Because this is a CPU-level function, you need to go into your computer’s BIOS to enable it (it will normally be OFF by default, so you will need to switch it on).

1.       Reboot your computer and look for the magic BIOS key. It could be Ins, Del, a Function Key, it all depends on the BIOS version.

2.       Once inside the BIOS, look for a category named “Virtualization” or something to that effect. Switch all of those options on.

Summary

I’m sure there are some things here I missed or just didn’t know about, so please give me your comments. Here are a few links to other resources on the topics above:

Silverlight Performance on Windows Phone – Seema Ramchandani

WP7 Developer FAQ

Silverlight 3: GPU Acceleration + Bitmap Caching – My Blog

The PathListBox control is a cool new addition to the Blend 4 SDK, and allows the elements inside a ListBox to lay out along any Path control shape. You’ll need to install the Blend 4 SDK to get access to the PathListBox control, but note that this is available outside of Expression Blend 4 (you don’t need to purchase or install Blend 4).

One of the neat bonus features of the PathListBox is that you can animate the Path that it is bound to, and the items will follow the animation! This gives Silverlight functionality similar to the AnimationUsingPath class that WPF has had since .NET 3.0, and provides basic Motion Path Animation.

Let’s see how we can use PathListBox for some interesting effects.

[VIEW DEMO]  *Requires Silverlight 4*

[DOWNLOAD DEMO]

-          Open Blend 4 and expand the Asset Library. To quickly find the PathListBox control, type PathListBox into the search box.

-          Draw a PathListBox control onto the artboard, and give it a name of “pathListBox1”

-          In order for the PathListBox to determine the shape that its Items should follow, you’ll need to draw out a Path control. Select the Pen tool and draw out a shape.

-          We only want to use the Path for its shape information, so let’s hide its visual representation. Set the Fill and Stroke to “No Brush” (you can quickly do this by select “Reset” from the Advanced Property Options – that little square to the right of the brush selection).

-          Now, select the PathListBox control, and in the Properties Panel, go to the Items Layout category and click the Artboard Element Picker. Then select the Path that you created in the previous step by clicking on it in the Artboard.

-          Select the main UserControl in the Objects and Timeline Panel.

-          Go to the Events Panel in the Properties Panel and double-click the Loaded event.

-          Add a little bit of code inside the Loaded event, which fills the PathListBox with an array of characters (note that we can data bind a character array to the Items Source of a control):
private void UserControl_Loaded(object sender,
System.Windows.RoutedEventArgs e)
{
        // TODO: Add event handler implementation here.
    string data = @"This is the theme to Gary's Show, the theme to Gary's show.
                                Gary called me up and asked me if I'd write his theme song.";
    pathListBox1.ItemsSource = data.ToCharArray();
   
}

-          Run the project by hitting F5. The characters follow the Path. Weird effect, eh?

-          Let’s try animating these chars. Add a new Storyboard named sbAnimateChars.

-          Select the Storyboard (by clicking its name just above the Objects and Timeline Panel), and set its RepeatBehavior to “Forever”

-          Fast-forward the timeline for the storyboard a second or so.

-          From the toolbox, grab the Direct Selection tool and drag around the points within your Path element (Blend records changes in Path points within a Storyboard for you).

-          Add another line of code into the MainPage_Loaded event handler, to start the Storyboard up:

sbAnimateChars.Begin();

-          Run the project. You’ll see the characters animated on the Path.