Coding4Fun : Silverlight

bugs on your screen?

Coding4Fun — Mon, 07 Dec 2009 18:13:00 GMT

Adam Kinney created a fun example squishing bugs to show off Silverlight 4.0’s webcam support. He created simple motion detection using a diff calculation on multiple threads to figure out where his finger was to smooth the bugs! Here is a video showing off the project.

If you want to check out the source code for BugCamSmash, Adam has that along with a few other helpful hints at his blog post.

In addition, Adam is posting articles on how he created the application as well.

Creating a Pinball Game in Silverlight: Using the Physics Helper Library + Farseer Physics

Coding4Fun — Mon, 30 Nov 2009 22:20:00 GMT

In this tutorial, we'll create a Silverlight pinball game using Behaviors, a new addition to Expression Blend 3 & Silverlight that allows you to create interactivity with little or no coding.

Below you'll find a video and step-by-step walkthrough.

Andy Beaulieu
http://www.andybeaulieu.com/

Run It: View The Demo
Code It: Download the Source

Difficulty: Intermediate
Time Required: 4 Hour
Cost: Free!
Software Needed: Microsoft Expression Blend 3 (Free Trial), Microsoft Visual Studio 2008 or Visual C# Express, Visual Studio Tools for Silverlight, Physics Helper Library. To help get setup quicker, try Web Platform Installer.

Open the video player in a new window/tab

Setup and Prerequisites

First you have to setup Physics Helper controls into Expression Blend. Follow these steps:

Download the Physics Helper ZIP file from http://physicshelper.codeplex.com/Release/ProjectReleases.aspx
Extract the ZIP file contents and dump them into a folder.
Run install.bat. (Note: this copies a few required assemblies to a folder in Blend 3.)

Getting Started & Making the Ball

Next, you create the controller and the pinball. Here's how.

Open Expression Blend 3 and create a new “Silverlight 3 Application + Website” named PinballGame.
Change your default layout container to a Canvas. You can do this in the Objects and Timeline panel by right-clicking LayoutRoot and selecting Change Layout Type/Canvas. Canvas layout containers are better for games because they allow for positioning of elements at absolute (x,y) coordinates.
Give the application a bigger default size. Select the UserControl element in the Objects and Timeline panel. Then, in the Properties panel, change the Width to 800 and the Height to 600.
Add a Physics Controller Behavior to our main game Canvas. From the Asset Panel, find the PhysicsController Behavior and drag it to the Objects and Timeline Panel. Then, drop it on the LayoutRoot Canvas.
Change a few of the PhysicsController's properties, to make it easier to use. In the Objects and Timeline Panel, select the PhysicsControllerBehavior assigned to LayoutRoot. Then, set the highlighted properties as follows in the Properties Window:
1.) Decrease the vertical gravity to 250
2.) Increase the iterations to 200. This will help with collision detection in a fast-action game.
3.) Set MousePickEnabled to true. This will allow us to manipulate objects with the mouse during development and testing.
Create a "playing field" for the pinball. To do this, draw out a Rectangle onto the artboard, just off the bottom of the user control bounds. Set the properties of the Rectangle as follows:

Name: rectPlatform
Fill: select a color of your choosing (light blue is selected below).
To make “rectPlatform” a physics element, we need to add a PhysicsObjectBehavior to it. Find the PhysicsObjectBehavior in the Assets panel and drag/drop it onto rectPlatform on the Artboard.
In the Objects and Timeline Panel, select the PhysicsObjectBehavior belonging to rectPlatform. Then in the Properties Panel, set the IsStatic property to True so that the platform will stay in place.
Next we’ll create the ball. Draw out an Ellipse near the very top of the UserControl and set the following properties:

Name: ellBall
Height: 50
Width: 50
Fill: A color of your choosing.
To make the ball a Physics Object, we need to add a PhysicsObjectBehavior to it. From the Asset Library, drag and drop a PhysicsObjectBehavior onto ellBall.
Run the project by clicking F5. The ball should fall and hit the platform. Use the mouse to manipulate the ball.

Making the Flippers

In a pinball game, the Flippers are controlled by the player and are used to move the ball up the playfield. Standard pinball games have one right and one left flipper, but many games have three or more flippers located in various locations on the playfield. We’ll create two user controls to represent the flippers – a right flipper and a left flipper – that way we can easily add as many flippers as we want to our main playfield.

In the Projects Panel, right-click the PinballGame (Silverlight) project and select Add New Item. Select UserControl and name the control LeftFlipper.xaml.
In the Objects and Timeline Panel, right-click LayoutRoot and select Change Layout Type/Canvas. This is required for the Physics Helper to work with nested User Controls.
In the Objects and Timeline Panel, select the UserControl element and set its Width and Height to 200 x 200 pixels in the Properties Panel.
Draw out a Rectangle that is about 200 x 50 pixels big, centered in the user control. Round the corners of the Rectangle.
From the main Blend menu, select Object/Path/Convert to Path. This will create a new Path element from the Rectangle primitive. Then select the Direct Selection tool from the Toolbox, which will allow you to manipulate the individual points on the Path.
Select the top, left two points on the Path and move them down so that you end up with a more “flipper like” shape:
In the Toolbox, select the Selection arrow and rotate the flipper 45 degrees so that it looks similar to this (be sure the flipper is still within the bounds of the user control):
Right-click the flipper Path and select Group Into/Canvas. Name the Canvas cnvLeftFlipper and resize it so that it surrounds the entire flipper Path. Note that you could “embellish” the cnvLeftFlipper with additional elements if you wish.
Next we’ll create a Joint so that the Flipper can rotate on an axis. We’ll need something to anchor the joint to, so first let’s add a small Static object to hold the Joint in place. Draw out a Rectangle at the upper left of the flipper and name the Rectangle rectHolder.
To add a Joint, we will need a UI element to visually represent where we want the joint created. You can use any element you want for this, but an Ellipse works pretty well. Draw out an Ellipse on top of the rectHolder.
Now we can add all of the required Physics Behaviors to the User Control.
1. From the Asset Library, drag a PhysicsObjectBehavior to the rectHolder Rectangle. Set its IsStatic property to True. Since we don’t really want to see the rectHolder in our UI, just send it to the back of the elements (Right-click, then select Order/Send to Back).
2. Drag a PhysicsObjectBehavior to the cnvLeftFlipper Canvas. Set the RestitutionCoefficent property to “0.1”. (This makes the flipper a bit more “bouncy” on collisions)
3. Drag a PhysicsJointBehavior to the Ellipse. Set the Body1 property to “cnvLeftFlipper” and the Body2 property to “rectHolder”. Set the CollisionGroup to “1” and the AngleLimitLower and AngleLimitUpper to 0 and 50 respectively. Also enable the AngleSpring:
4. Drag a PhysicsApplyTorqueBehavior to cnvLeftFlipper. We want to apply Torque when the user presses the Left arrow key, so we’ll create a Trigger for this. Select the Behavior and in the Properties Panel, click the New Trigger button.
  
  Select the PhysicsKeyTrigger type from the popup.
  
  Set the Key property for the Trigger to “Left” and the TorqueValue to -100000
Build the Project so that the LeftFlipper user control is available.
Open MainPage.xaml and drag an instance of LeftFlipper from the Asset Library onto the Artboard. Position it near the bottom of the user control and slightly to the Left.
Run the project and try the flipper with the Left arrow key.
In this step, we’ll create a copy of “LeftFlipper” to make a “RightFlipper”. In the Projects Panel, right-click LeftFlipper.xaml and select Copy. Then right-click the PinBallGame Project and select Paste.
You now have a new User Control named “Copy of LeftFlipper.xaml”. Rename this to RightFlipper.xaml. Then in the code-behind file, make sure the Class and Constructor are also renamed to “RightFlipper”.
Change to XAML view for RightFlipper.xaml and change the x:Class attribute so that it inherits from RightFlipper:
```
<UserControl 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
mc:Ignorable="d" 
xmlns:i=&amp;quotclr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 
    xmlns:pb="clr-namespace:Spritehand.PhysicsBehaviors;assembly=Spritehand.PhysicsBehaviors" 
x:Class="PinballGame.RightFlipper" 
d:DesignWidth="640" d:DesignHeight="480" Height="200" Width="200">
```
Open RightFlipper.xaml and find the pathLeftFlipper element. Rename this to pathRightFlipper. Then, rename “cnvLeftFlipper” to “cnvRightFlipper”. Rename “rectHolder” to “rectRightHolder” and position the rectHolder and joint ellipse so that they are in the correct location for the flipper:

Modify the PhysicsJointBehavior for the joint in the Objects and Timeline Panel. Change BodyOne to “cnvRightFlipper”, BodyTwo to “rectRightHolder” and change the Angle limits so they are appropriate for the opposite flipper:

Select the PhysicsApplyTorqueBehavior for cnvRightFlipper in the Objects and Timeline Panel. Change the Key property for the trigger to “Right” so that it will initiate on the Right Arrow key down. Also change the TorqueValue so that it will apply torque clockwise:
Add an instance of RightFlipper onto the MainPage.xaml and position it to the right of LeftFlipper.
Test the project by clicking F5. You can now click left and right arrows keys to manipulate the paddles.

Creating the Playfield + Scrolling

Now let’s create more of a playfield for our Pinball game and add a Camera control so that the game will scroll and always follow the pinball. Feel free to tweak the design as you wish.

Open MainPage.xaml in Expression Blend and zoom out by using Ctrl plus minus (Ctrl -).
Draw out a Path using the Pen tool for the right border. Note that you can extend above the upper bounds of the User Control. Group this into a Canvas named “cnvLeftBorder” (right click the Path and select Group Into/Canvas).
Drag a PhysicsObjectBehavior from the Asset Library onto cnvLeftBorder and set the IsStatic property to True. Also set the CollisionGroup property to “1” so that collisions will not occur between the border and the Flippers.
Repeat Steps 2 and 3 above for the right border, naming that cnvRightBorder. You should have something similar to the following:
Continue adding border controls and applying physics behaviors until you are happy with your playfield. Make the playfield completely closed in so that the ball cannot escape (except by the bottom trap of course!)
You can also add more LeftFlipper and RightFlipper controls so that the player can more easily move the ball up the playfield. Here is one example playfield design:
To enable scrolling, we can add a Camera Controller to the ball, causing the camera to follow the ball around the screen. Drag a PhysicsCameraBehavior from the Asset Library onto the ellBall element.

Creating a Kicking Target

Pinball games have lots of different types of targets – some are simple sensors which give points on contact, others are little toys that gobble up the ball for a few seconds. In this step, we’ll create a Kicking Target, which gives points when hit by the ball but also kicks the ball back in the opposite direction.

Create a new User Control named KickingTarget.
Change the LayoutRoot container to a Canvas by right-clicking and selecting Change Layout Type/Canvas.
Select the [UserControl] in the Objects and Timeline Panel and set its Width and Height to 100 x 100.
Draw out an Ellipse that is 90x90 pixels, and positioned at Left, Top 5,5 (so that it is centered in the control).
Draw out a second Ellipse that is 70x70 pixels and positioned and Left, Top 15, 15.
Group the two Ellipses into a Canvas by selecting them both in the Objects and Timeline Panel and selecting Group Into/Canvas. Name the Canvas “cnvKicker”.
Drag a PhysicsObjectBehavior from the Asset Library onto cnvKicker. Set the IsStatic and RestitutionCoefficient properties as shown below. Setting the RestitutionCoefficient above a value of 1 will make the object “kick” things back.
Build the project so that the new user control is available. Then open MainPage.xaml and add a few instance of “KickingTarget” to the page.
Run the project and try out the Kicking Targets.

Optimizing Performance

Our pinball game is looking up, but the performance could be a lot better. The startup time for the game is taking quite awhile because the Physics Helper Library is determining the outline of all of the shapes. Also, the frame rate is too low.

By default, Silverlight has a target frame rate of 60 frames per second. This is great for a lot of casual games, but Pinball requires a bit more speed. Additionally, Silverlight 3 introduces GPU Acceleration which can greatly increase the performance of our game by offloading graphics operations to the Video Card.

Open the Default.html page in the website project. This page hosts the Silverlight control and exposes the plugin parameters. Add the following parameters to the plug in to increase the default frame rate and enable GPU Acceleration for our game.

<object data="data:application/x-silverlight," type="application/x-silverlight-2" width="800" height="600"> 
<param name="source" value="ClientBin/PinballGame.xap"/> 
<param name="onerror" value="onSilverlightError" /> 
<param name="background" value="#010141" /> 
<param name="minRuntimeVersion" value="3.0.40624.0" /> 
<param name="MaxFrameRate" value="160" /> 
<param name="EnableGPUAcceleration" value="true" /> 
<param name="EnableCacheVisualization" value="false" /> 
<param name="autoUpgrade" value="true" /> 
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&ampv=3.0.40624.0" style="text-decoration: none;"> 
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/> 
</a> 
</object>

Apply the CacheMode attribute to all elements in the game that are static. Since our pinball game’s elements are not animated, we can apply the CacheMode to each of them. (If the objects contained animations within them, then the Cache would be invalidated during animation).
```
<Rectangle x:Name="rectPlatform" CacheMode="BitmapCache" Fill="#FF8AD0C9" Height="70" Width="800" Canvas.Left="-14" Canvas.Top="2172" Opacity="0"> 
<i:Interaction.Behaviors> 
<pb:PhysicsObjectBehavior IsStatic="True"/> 
</i:Interaction.Behaviors> 
</Rectangle>
```
Now we’ll speed up the startup time by adding in a pre-calculated Point Cache. The Physics Helper Library echoes out the calculated points at runtime. Open the project in Visual Studio, and run with debugging on. In the Output Window, Find the ReadBoundaryCache method that was echoed out and Copy the entire method.
Note that the copied code can contain multiple rows of the same points. You can trim out any rows that are duplicated, for example cnvRightFlipper_1 is a copy of cnvRightFlipper, so you can remove that from the list of points.

In order to load the list of boundary outlines into the Physics Controller, we need to get a reference to the controller through code. Open up MainPage.xaml.cs and add the highlighted code:

public partial class MainPage : UserControl 
{ 
    PhysicsControllerMain _physicsController; 
    public MainPage() 
    { 
        // Required to initialize variables 
        InitializeComponent(); 
        this.Loaded += new RoutedEventHandler(MainPage_Loaded); 
    } 
    void MainPage_Loaded(object sender, RoutedEventArgs e) 
    { 
        _physicsController = LayoutRoot.GetValue( PhysicsControllerMain.PhysicsControllerProperty) as PhysicsControllerMain; 
        BoundaryCache.ReadBoundaryCache(_physicsController); 
    } 
}

Run the project and test the performance. Note that items that have a tint applied to them (Red, Blue, etc.) are NOT being cached and GPU accelerated.

Scoring

In this section, we’ll embellish our game with a Score.

We’ll create a Canvas that overlays our main Canvas to contain a High Score TextBlock. This is so that the Score TextBlock will not scroll with the rest of the Playfield. Open MainPage.xaml and the select LayoutRoot in the Objects and Timeline Panel. Right-click LayoutRoot and select Group Into/Canvas.
Add a new StackPanel into this outside Canvas that contains two TextBlock aligned Horizontally. The first TextBlock should contain the Text “Score:” and the second TextBlock should contain the Text “0”. Set the Font Size to a larger value, around 12 pt. Position the TextBlock at the Top, Left portion of the Canvas.

Next we’ll handle the Collision event for the Physics Controller so we can add to the score. Open MainPage.xaml.cs and add in a Property wrapper for the current score:

public int Score 
{ 
    get 
    { 
        return Convert.ToInt32(txtScore.Text); 
    } 
    set 
    { 
        txtScore.Text = value.ToString(); 
    } 
}

Handle the Collision event for the Physics Controller and increment the Score.

void MainPage_Loaded(object sender, RoutedEventArgs e) 
{ 
    _physicsController = LayoutRoot.GetValue(PhysicsControllerMain.PhysicsControllerProperty) as PhysicsControllerMain; 
    BoundaryCache.ReadBoundaryCache(_physicsController); 
        _physicsController.Collision += new PhysicsControllerMain.CollisionHandler(_physicsController_Collision); 
} 

void _physicsController_Collision(string sprite1, string sprite2) 
{ 
    if (sprite1 == "ellBall" && sprite2.StartsWith("ellKicker")) 
        Score += 10; 
}

Tracking Lives

When the ball collides with the “rectPlatform” obstacle at the bottom, the ball has been lost and we should launch a new ball.

Add a new ChildWindow to the project named “LostTheBall.xaml”.
Set the “Cancel” button’s Visibility to Collapsed.
Add a TextBlock and set its Text to a message for the user stating the ball was lost.

Add code in MainPage.xaml.cs to display the dialog and reset the ball.
LostTheBall _lostTheBall;

void _physicsController_Collision(string sprite1, string sprite2) 
{ 
    if (sprite1 == "ellBall" && sprite2.StartsWith("cnvKicker")) 
    { 
        Score += 10; 
    } 

    if (_lostTheBall == null &&ampsprite1 == "ellBall" && sprite2 == "rectPlatform") 
    { 
        _lostTheBall = new LostTheBall(); 
        _lostTheBall.Closed += new EventHandler(dialog_Closed); 
        _lostTheBall.Show(); 
    } 
} 

void dialog_Closed(object sender, EventArgs e) 
{ 
    _lostTheBall = null; 
    PhysicsSprite ball = _physicsController.PhysicsObjects["ellBall"]; 
    ball.BodyObject.Position = new Vector2(460, 430); 
    }

Adding Sound Effects

We can easily add buffered sound effects using the PhysicsSoundBehavior.

In Visual Studio, Import two sound files into the project, score.wma and click.wma. Set their Build Action to Content.
Open MainPage.xaml in Expression Blend. Drag a PhysicsSoundBehavior to the LayoutRoot Canvas. Set the TriggerType to PhysicsCollisionTrigger and set the following properties:
Drag another PhysicsSoundBehavior to the LayoutRoot Canvas. Set the TriggerType to PhysicsCollisionTrigger and set the following properties:
Drag another PhysicsSoundBehavior to the LayoutRoot Canvas. Set the TriggerType to PhysicsCollisionTrigger and set the following properties:
Run the project.

About the Author

Andy Beaulieu is a software developer and trainer who is well versed in many Microsoft technologies including Silverlight, ASP.NET, ADO.NET and WindowsForms. Visit Andy's Blog for more fun and games with Silverlight.

Silverlight Development

Coding4Fun — Wed, 18 Nov 2009 23:00:00 GMT

With Silverlight 4.0 just announced, here are some great posts / helpful tips on getting started with Silverlight in general.

Channel9 has a training course.
Tim Heuer has a 7-part series “Getting Started with Silverlight”.
Shine Draw is an awesome “Flash vs Silverlight” repository that can show you how to do an event in either technology.
Silverlight.net has an abundance of information. They also have Community Samples as well.

Facebook SDK

Coding4Fun — Wed, 11 Nov 2009 18:26:14 GMT

Microsoft just released a Facebo ok client library to help make it easier for everyone to create some interesting applications. The SDK is broken into a few core DLLs, each serving a core purpose. You can download the SDK from Download the SDK.

Facebook.dll: This is the main assembly that will be used by all applications. This has all the logic to handle communication with the Facebook application. This assembly also has specific support of XAML applications (Silverlight and WPF) to enhance the Facebook platform to make databinding and data caching easier.
Facebook.Silverlight.dll: This is the Silverlight version of the main assembly that will be used by all Silverlight applications. This has all the logic to handle communication with the Facebook application. This assembly also has specific support of XAML applications to enhance the Facebook platform to make databinding and data caching easier. The REST API in this assembly is Asynchronous only.
Facebook.Web.dll: This assembly should be used by Canvas applications. The main functionality supported in this assembly is to encapsulate the handshake between the Facebook application and a canvas application (both FBML and IFrame)
Facebook.Web.Mvc.dll: Provide a support building canvas applications using ASP.NET MVC. Separated from Facebook.Web.dll to avoid all developers from needing to install the MVC bits.
Facebook.Winforms.dll: This assembly provides support for writing Facebook applications using Winform technology. This provides a Component that wraps the API to make it easier to use from Winforms. This also contains some user controls to help display Facebook data easily.

If you want some helpful starting points, the Facebook Developer Wiki has some help too.

Fluids and edge detection in Silverlight

Coding4Fun — Wed, 30 Sep 2009 20:37:00 GMT

Rick Barraza has 3 amazing examples in Silverlight.

Writable Bitmaps
This example shows how to use pixel shader displacement with line drawing to create some amazing effects.
Fluid Dynamics
Rick talks about how to do dynamic visuals, why they matter.
Vector Fields
This example shows how to gray scale an image, do edge detection then use that information to draw vectors on the image for additional effects.

If you want additional information with Rick, Brian Peek did an interview with him regarding Silverlight advance rendering techniques as well.

Coding4Fun Show – Episode 3 with Rick Barraza

Coding4Fun — Mon, 21 Sep 2009 12:16:00 GMT

Brian Peek interviews Rick Barraza for the Coding4Fun Show on Coding4Fun TV! In this episode, Brian chats with Rick about advanced rendering techniques in Silverlight 3. Great stuff!

Silverlight 3 File Transfer Application

Coding4Fun — Fri, 04 Sep 2009 09:43:00 GMT

Author: Giovanni Montrone
Difficulty: Intermediate
Time Required: 5-10 hours
Cost: Free
Software: Visual Web Developer Express SP1 (or Visual Studio 2008 SP1), Silverlight 3 SDK, Silverlight 3 Tools for VS, Silverlight Toolkit
Hardware: None
Use it Now: Run the Application
Source Download: CodePlex

Introduction

Every once in a while I will run into a situation where I need to send a file to someone, but struggle to find an easy way of doing it. Instant messenger programs usually work until you run into a situation where someone just cannot send or receive a file from chat client whether it’s due to firewalls, differing client versions, or multi-IM incompatibilities. Other times, I will try to send the file via email just to find out that the person’s email server blocks specific extensions. This quick application will allow two users to quickly and easily connect to a Silverlight 3 client and send each other files.

Overview

In this application, a user will connect to the Silverlight application and choose to either host or join a session. If a user decides to host a session, he or she will be given a random eight character session key, and he or she will be in a waiting status until another user connects. When a user wishes to connect to the host, he or she can supply the host’s session key which will establish a connection between the two users. Once connected, the users will be able to send files to one another, and will also be able to chat with each other via simple text messages.

Polling Duplex

Sending a file from one client application to another requires a common central point in order to properly route the message from one user to another. Since it is easy to host a Silverlight application in an ASP.NET page, we will use an ASP.NET back end to manage all communications between all connected users. In order to do this, we must be able to host a service that is able to accept incoming messages from the Silverlight client, and perform a push back out to the intended recipient. This is accomplished by using the WCF Polling Duplex (System.ServiceModel.PollingDuplex.dll) channel. Silverlight 3 allows us to directly add a service reference to a service of this type, and handles all of the complexities for us. I began by using the DuplexService.cs file from a sample application from MIX09 when Silverlight 3 beta was released. The code starts us out with a couple of base abstract classes, and interfaces that we must inherit from in order to create our own service.

FileSendService

The two main things we need to do in order to create our own service is to define custom message types that will be used for communication, and override the base DuplexService class to properly handle these messages. We will create our custom message types by using DuplexMessage (defined in DuplexService.cs) as our base class. Our message classes must be defined with the [DataContract] attribute, and the the member variables must be public and contain the [DataMember] attribute. This will allow our Silverlight client project to share these definitions using a service reference. Additionally, the Duplex message class must have the [KnownType] attribute for each descendant message created.

[KnownType(typeof(HostSessionMessage))]
[KnownType(typeof(JoinSessionMessage))]
[KnownType(typeof(FileBeginUploadMessage))]
[KnownType(typeof(FileTransferBytesMessage))]
public class DuplexMessage { }

[DataContract]
public class HostSessionMessage : DuplexMessage
{
    [DataMember]
    public string Username;
}

[DataContract]
public class JoinSessionMessage : DuplexMessage
{
    [DataMember]
    public string Username;
    [DataMember]
    public string SessionKey;
}

[DataContract]
public class FileBeginUploadMessage : DuplexMessage
{
    [DataMember]
    public string FileName;
    [DataMember]
    public long TotalBytes;
}

[DataContract]
public class FileTransferBytesMessage : DuplexMessage
{
    [DataMember]
    public long StartByte;
    [DataMember]
    public long PacketSize;
    [DataMember]
    public byte[] Bytes;
    [DataMember]
    public bool EndFile;
}

<DataContract(Namespace := "http://samples.microsoft.com/silverlight2/duplex"), 
KnownType(GetType(HostSessionMessage)), KnownType(GetType(JoinSessionMessage)), KnownType(GetType(FileBeginUploadMessage)), KnownType(GetType(FileTransferBytesMessage))> _
Public Class DuplexMessage
End Class

<DataContract()> _
Public Class HostSessionMessage
    Inherits DuplexMessage
    <DataMember()> Public Username As String
End Class

<DataContract()> _
Public Class JoinSessionMessage
    Inherits DuplexMessage
    <DataMember()> Public Username As String
    <DataMember()> Public SessionKey As String
End Class

<DataContract()> _
Public Class FileTransferBytesMessage
    Inherits DuplexMessage
    <DataMember()> Public StartByte As Long
    <DataMember()> Public PacketSize As Long
    <DataMember()> Public Bytes() As Byte
    <DataMember()> Public EndFile As Boolean
End Class

<DataContract()> _
Public Class FileBeginUploadMessage
    Inherits DuplexMessage
    <DataMember()> Public FileName As String
    <DataMember()> Public TotalBytes As Long
End Class

The next step is to create our FileSendService class which descends from the DuplexService class as described above. We override the OnMessage method so that we can do custom processing based on the type of message sent as shown below.

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class FileSendService : DuplexService
{
    private List<SessionConnectionInfo> sessionConnections = new List<SessionConnectionInfo>();

    {...}

    protected override void OnMessage(string sessionId, DuplexMessage data)
    {
        if (data is HostSessionMessage)
            CreateHostSession(data as HostSessionMessage);
        else if (data is JoinSessionMessage)
            JoinSession(data as JoinSessionMessage);
        else if (data is FileBeginUploadMessage)
            StartSendFile(data as FileBeginUploadMessage);
        else
            SendMessage(data);
    }
    
}


        else if (data is JoinSessionMessage)
            JoinSession(data as JoinSessionMessage);
        else if (data is FileBeginUploadMessage)
            StartSendFile(data as FileBeginUploadMessage);
        else
            SendMessage(data);
    }
    
}


    }
    
}

Public Class FileSenderServiceFactory
    Inherits DuplexServiceFactory(Of FileSendService)
End Class

<AspNetCompatibilityRequirements(RequirementsMode := AspNetCompatibilityRequirementsMode.Allowed)> _
Public Class FileSendService
    Inherits DuplexService
    Private sessionConnections As New List(Of SessionConnectionInfo)()

    ...

    Protected Overrides Sub OnMessage(ByVal sessionId As String, ByVal data As DuplexMessage)
        If TypeOf data Is HostSessionMessage Then
            CreateHostSession(TryCast(data, HostSessionMessage))
        ElseIf TypeOf data Is JoinSessionMessage Then
            JoinSession(TryCast(data, JoinSessionMessage))
        ElseIf TypeOf data Is FileBeginUploadMessage Then
            StartSendFile(TryCast(data, FileBeginUploadMessage))
        Else
            SendMessage(data)
        End If
    End Sub

End Class

Since we are going to have to keep track of each host and user connected to that host, we will create a class, SessionConnectionInfo, to manage the relevant data. When a user decides to host a session, our OnMessage method will receive a HostSessionMessage which will scan our List<SessionConnectionInfo> to see if there is another host with the same username. If not found, a new SessionConnectionInfo object is created along with a randomly generated session key. When a user attempts to join a session, the OnMessage method will receive a JoinSessionMessage containing a session key and the name of the user joining the session. The service will search for a SessionConnectionInfo object containing that session key, and if found, establishes a connection between the two users.

public class SessionConnectionInfo
{
    public string HostUserName { get; set; }
    public string ConnectedUsername { get; private set; }
    public string SessionKey { get; set; }

    public string ConnectedUserInternalSession { get; private set; }
    public string HostInternalSession { get; set; }

    public bool UserConnected
    {
        get { return ConnectedUserInternalSession != string.Empty; }
    }

    public SessionConnectionInfo()
    {
        ConnectedUserInternalSession = string.Empty;
        ConnectedUsername = string.Empty;
    }

    ....
}

Public Class SessionConnectionInfo
    Private privateHostUserName As String
    Public Property HostUserName() As String
        Get
            Return privateHostUserName
        End Get
        Set(ByVal value As String)
            privateHostUserName = value
        End Set
    End Property
    Private privateConnectedUsername As String
    Public Property ConnectedUsername() As String
        Get
            Return privateConnectedUsername
        End Get
        Private Set(ByVal value As String)
            privateConnectedUsername = value
        End Set
    End Property
    Private privateSessionKey As String
    Public Property SessionKey() As String
        Get
            Return privateSessionKey
        End Get
        Set(ByVal value As String)
            privateSessionKey = value
        End Set
    End Property

    Private privateConnectedUserInternalSession As String
    Public Property ConnectedUserInternalSession() As String
        Get
            Return privateConnectedUserInternalSession
        End Get
        Private Set(ByVal value As String)
            privateConnectedUserInternalSession = value
        End Set
    End Property
    Private privateHostInternalSession As String
    Public Property HostInternalSession() As String
        Get
            Return privateHostInternalSession
        End Get
        Set(ByVal value As String)
            privateHostInternalSession = value
        End Set
    End Property

    Public ReadOnly Property UserConnected() As Boolean
        Get
            Return ConnectedUserInternalSession <> String.Empty
        End Get
    End Property

    Public Sub New()
        ConnectedUserInternalSession = String.Empty
        ConnectedUsername = String.Empty
    End Sub


End Class

Client Side

Now that we have the basic server side complete, we can add a service reference, and create the necessary service reference. Our service is hosted within ASP.NET via a simple xml file (see FileSendService.svc), which allows our Silverlight project to see it.

Be sure to mark the checkbox “Always generate message contracts”. Note that your web portion of the project must be compiled before you will be able to “Discover” the service.

We will now have access to the DuplexServiceClient class which will allow us to send and receive messages to the server. We instantiate the service as shown below. In order to do this, you must manually add a reference to System.ServiceModel.PollingDuplex assembly.

private DuplexServiceClient fileDuplexService;

private CustomBinding binding = new CustomBinding(
    new PollingDuplexBindingElement(),
    new BinaryMessageEncodingBindingElement(),
    new HttpTransportBindingElement());

public MainPage()
{
    InitializeComponent();
    fileDuplexService = new DuplexServiceClient(binding, new EndpointAddress("http://localhost:9797/FileSendService.svc"));
    ...
}

Private fileDuplexService As DuplexServiceClient

Private binding As New CustomBinding(New PollingDuplexBindingElement(), New BinaryMessageEncodingBindingElement(), New HttpTransportBindingElement())
    
Public Sub New()
    InitializeComponent()
    fileDuplexService = New DuplexServiceClient(binding, New EndpointAddress("http://localhost:9797/FileSendService.svc"))
End Sub

Note that at the time of this writing, adding the service reference does not properly create the ServiceReferences.ClientConfig file. This is the reason the above is done using code.

Now that our service is setup, we need to set it up to handle sending and receiving of messages. In order to send a message, we must first create a DupexMessage (or a descendant), and use the SendToServiceAsync method. This requires a SendToService object which will contain the message, and an optional userState object which we can use to tag the request. In this case, we will pass an enum value which represents the status of our upload. In the example below, when the user clicks on the send file button, after choosing the file, we open our file, and send a FileBeginUpload message which contains the file name and its size. Note that the server is set to deny any file that is greater than 20 million bytes.

private void btnSendFile_Click(object sender, RoutedEventArgs e)
 {
     OpenFileDialog openFileDialog = new OpenFileDialog();
     openFileDialog.Multiselect = false;
     openFileDialog.ShowDialog();
     if (openFileDialog.File != null)
     {
         fileToSend = openFileDialog.File.OpenRead();

         FileBeginUploadMessage fsm = new FileBeginUploadMessage();
         fsm.FileName = openFileDialog.File.Name;
         fsm.TotalBytes = openFileDialog.File.Length;
         fileDuplexService.SendToServiceAsync(new SendToService(fsm), FileSendState.FileStart);
         ....
     }
 }

Private Sub btnSendFile_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    Dim openFileDialog As New OpenFileDialog()
    openFileDialog.Multiselect = False
    openFileDialog.ShowDialog()
    If openFileDialog.File IsNot Nothing Then
        fileToSend = openFileDialog.File.OpenRead()
        Dim fsm As New FileBeginUploadMessage()
        fsm.FileName = openFileDialog.File.Name
        fsm.TotalBytes = openFileDialog.File.Length
        totalBytesSent = 0
        fileDuplexService.SendToServiceAsync(New SendToService(fsm), FileSendState.FileStart)
        ....
    End If
End Sub

The service object fires two main events that need to be handled: SendToServiceCompleted and SendToClientReceived. SendToServiceCompleted is the event which is fired after the server acknowledges that it has received and processed a message that the client has sent. Once the server receives and processes the FileBeginUploadMessage, the event handler below will receive the results. In this case, if there isn’t an error, and the value of userState is FileSendState.FileStart, the method will send a FileTransferBytesMessage which will send the bytes from the file.

private void FileDuplexServiceSendToServiceCompleted(object sender, System.ComponentModel.AsyncCompletedEventArgs e)
{
    if (e.Error == null)
    {
        {...}
        if ((FileSendState)e.UserState == FileSendState.FileEnd)
        {
            fileToSend.Close();
            fileProgress.Value = 100;
            return;
        }
        if ((FileSendState)e.UserState == FileSendState.FileStart || (FileSendState)e.UserState == FileSendState.FileContinue)
        {

            ...
            FileTransferBytesMessage fileMessage = new FileTransferBytesMessage();
            fileMessage.StartByte = totalBytesSent;
            fileMessage.EndFile = false;
            fileMessage.PacketSize = CHUNK;

            ...

            byte[] bytes = new byte[numBytesToRead];
            fileToSend.Read(bytes, 0, numBytesToRead);
            totalBytesSent += numBytesToRead;
            fileMessage.Bytes = bytes;

            if (fileMessage.EndFile)
                fileDuplexService.SendToServiceAsync(new SendToService(fileMessage), FileSendState.FileEnd);
            else
                fileDuplexService.SendToServiceAsync(new SendToService(fileMessage), FileSendState.FileContinue);
        }
    }
}

Private Sub FileDuplexServiceSendToServiceCompleted(ByVal sender As Object, ByVal e As System.ComponentModel.AsyncCompletedEventArgs)
    If e.Error Is Nothing Then
        If e.UserState Is Nothing Then
            Return
        End If
        If CType(e.UserState, FileSendState) = FileSendState.FileEnd Then
            fileToSend.Close()
            fileProgress.Value = 100
            Return
        End If
        If CType(e.UserState, FileSendState) = FileSendState.FileStart OrElse CType(e.UserState, FileSendState) = FileSendState.FileContinue Then
            ...
            Dim fileMessage As New FileTransferBytesMessage()
            fileMessage.StartByte = totalBytesSent
            fileMessage.EndFile = False
            fileMessage.PacketSize = CHUNK
            ...
            Dim bytes(numBytesToRead - 1) As Byte
            fileToSend.Read(bytes, 0, numBytesToRead)
            totalBytesSent += numBytesToRead
            fileMessage.Bytes = bytes

            If fileMessage.EndFile Then
                fileDuplexService.SendToServiceAsync(New SendToService(fileMessage), FileSendState.FileEnd)
            Else
                fileDuplexService.SendToServiceAsync(New SendToService(fileMessage), FileSendState.FileContinue)
            End If
        End If
    End If
End Sub

The SendToClientReceived event is fired when a message has been sent from the service. In this case, the client will check to see which message was received and process it accordingly. The method below shows that when a FileBeginUpload message is received, the user is prompted to accept or deny the file. If the user does not accept the file, a FileDenyMessage will be sent which will notify the sender to stop sending bytes. If accepted, file bytes are added to a buffer.

private void FileDuplexServiceSendToClientReceived(object sender, SendToClientReceivedEventArgs e)
{
    if (e.Error == null)
    {
        if (e.request.msg is ClientConnectedMessage)
        {
            ClientConnectedMessage msg = (ClientConnectedMessage)e.request.msg;
            AddMsgToListbox(msg.Username + " has just connected.");
            connectedTo = msg.Username;
            UIState = UIState.Chat;
        }

        else if (e.request.msg is HostSessionServerMessage)
        {
            HostSessionServerMessage hssm = e.request.msg as HostSessionServerMessage;
            if (hssm.Failed) {...}
            SessionCreated(hssm);

        }
        else if (e.request.msg is JoinSessionServerMessage)
        {
            JoinSessionServerMessage jssm = e.request.msg as JoinSessionServerMessage;
            if (jssm.Failed) {....}
            SessionJoined(jssm);
        }
        else if (e.request.msg is FileBeginUploadMessage )
        {
            FileBeginUploadMessage fsm = (FileBeginUploadMessage)e.request.msg;

            int sizeInKB = (int)fsm.TotalBytes / 1024;
            totalRevd = 0;
            if (MessageBox.Show(connectedTo + " would like to send you the file: " + fsm.FileName + ", Size: " + sizeInKB + ".  Would you like to receive this file?", "File Upload", MessageBoxButton.OKCancel) == MessageBoxResult.OK)
            {
                bytesReceived = new List<byte>((int)fsm.TotalBytes);
                fileNameReceiving = fsm.FileName;
                ....
            }
            else
            {
                fileDuplexService.SendToServiceAsync(new SendToService(new FileDenyMessage()));
            }
        }
        else if (e.request.msg is FileTransferBytesMessage)
        {
            if (bytesReceived == null)
                return;
            FileTransferBytesMessage fm = (FileTransferBytesMessage)e.request.msg;
            bytesReceived.AddRange(fm.Bytes);
            ....
        }
        else {....}

    }
}

Private Sub FileDuplexServiceSendToClientReceived(ByVal sender As Object, ByVal e As SendToClientReceivedEventArgs)
    If e.Error Is Nothing Then
        If TypeOf e.request.msg Is ClientConnectedMessage Then
            Dim msg As ClientConnectedMessage = CType(e.request.msg, ClientConnectedMessage)
            AddMsgToListbox(msg.Username & " has just connected.")
            connectedTo = msg.Username
            UIState = UIState.Chat

        ElseIf TypeOf e.request.msg Is HostSessionServerMessage Then
            Dim hssm As HostSessionServerMessage = TryCast(e.request.msg, HostSessionServerMessage)
            If hssm.Failed Then ...

            SessionCreated(hssm)

        ElseIf TypeOf e.request.msg Is JoinSessionServerMessage Then
            Dim jssm As JoinSessionServerMessage = TryCast(e.request.msg, JoinSessionServerMessage)
            If jssm.Failed Then ...

            SessionJoined(jssm)
        ElseIf TypeOf e.request.msg Is FileBeginUploadMessage Then
            Dim fsm As FileBeginUploadMessage = CType(e.request.msg, FileBeginUploadMessage)

            Dim sizeInKB As Integer = CInt(Fix(fsm.TotalBytes)) / 1024
            totalRevd = 0
            If MessageBox.Show(connectedTo & " would like to send you the file: " & fsm.FileName & ", Size: " & sizeInKB & " KB.  Would you like to receive this file?", "File Upload", MessageBoxButton.OKCancel) = MessageBoxResult.OK Then
                bytesReceived = New List(Of Byte)(CInt(Fix(fsm.TotalBytes)))
                fileNameReceiving = fsm.FileName
                ...
            Else
                fileDuplexService.SendToServiceAsync(New SendToService(New FileDenyMessage()))
            End If
        ElseIf TypeOf e.request.msg Is FileTransferBytesMessage Then
            If bytesReceived Is Nothing Then
                Return
            End If
            Dim fm As FileTransferBytesMessage = CType(e.request.msg, FileTransferBytesMessage)
            bytesReceived.AddRange(fm.Bytes)
            ...
        ElseIf 
          ...

    End If
End Sub

When the file is complete, the user will be presented with two buttons. One button will allow the user to save, and the other will allow the user to discard/ignore the file. If the user chooses to save, a SaveFileDialog is created, and we use the filename to assign the default extension and filter so that when the user saves the file, no extension needs to be typed in. Once the dialog appears and the user enters the file name, the bytes will be written to disk. Finally we send a message back to the server which will notify the sender that user has done something with the file. During file send operations, the Send File button is disabled, and becomes re-enabled once a file has been received, cancelled, or denied.

private void btnSaveFile_Click(object sender, RoutedEventArgs e)
{
    SaveFileDialog sfd = new SaveFileDialog();
    string extension = GetExtension(fileNameReceiving);
    sfd.DefaultExt = extension;
    sfd.Filter = extension +  " Files|" + extension;

    if (sfd.ShowDialog() == true)
    {
        using (Stream fsx = sfd.OpenFile())
        {
            byte[] fBytes = bytesReceived.ToArray();
            fsx.Write(fBytes, 0, fBytes.Length);
            fsx.Close();
        }

        fileDuplexService.SendToServiceAsync(new SendToService(new FileReceivedMessage()));
        UIState = UIState.Chat;
        btnSendFile.IsEnabled = true;
    }
}

Private Sub btnSaveFile_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    Dim sfd As New SaveFileDialog()
    Dim extension As String = GetExtension(fileNameReceiving)
    sfd.DefaultExt = extension
    sfd.Filter = extension & " Files|" & extension

    If sfd.ShowDialog() = True Then
        Using fsx As Stream = sfd.OpenFile()
            Dim fBytes() As Byte = bytesReceived.ToArray()
            fsx.Write(fBytes, 0, fBytes.Length)
            fsx.Close()
        End Using

        fileDuplexService.SendToServiceAsync(New SendToService(New FileReceivedMessage()))
        UIState = UIState.Chat
        btnSendFile.IsEnabled = True
    End If
End Sub

Conclusion

Overall, the application does what I set out for it to. It allows a user to send a file to another user and even does basic chat. There is definitely a lot of room for improvement, and some general additions that can make this more robust. Right now we keep a list of connections, but never do basic pinging to see if the clients are still there. The only way to know if a client has disconnected is when a message fails, or when the user decides to hit the disconnect button. Better maintenance of this list is needed. The file bytes are basically being stored in memory, which is why i set a file size limit, but I’m sure with things like Silverlight local storage, we can increase the limit.

Thanks

I would like to thank Brian Peek for taking the time to review my article and test the code.

Additional Notes

The ASP.NET project requires a file called System.ServiceModel.PollingDuplex.dll to be added as a reference. Somewhere between Silverlight 3 Beta and Silverlight 3 RTW, the file was no longer available via the basic add .NET reference link. In order to add the file, I had to browse for it in %Program Files%\Microsoft SDKs\Silverlight\v3.0\Libraries\Server. For 64 bit users, it will be the Program Files (x86) folder.

For ease of use, I used a static port (9797) for this project. When deploying to a server, you must rename all references of http://localhost:9797 in the Silverlight project. This will remain true until the config file is supported.

The user interface uses the Silverlight Toolkit TwilightBlue theme. For more information about this, see http://www.codeplex.com/Silverlight

Creating Games with Silverlight: A Simple Shooter

Coding4Fun — Tue, 21 Jul 2009 20:19:00 GMT

This article will take you through some of the steps to creating the basics for writing games with Silverlight. This is a simple shooter style game that contains some of the building blocks for games that require abilities such as vectors, collision detection, a game loop, movement, and keyboard input. Please refer to the full source code for this project for any areas of the code that are not covered in detail in this article.

Source Code: http://simpleshooter.codeplex.com/
Difficulty: Beginner/Intermediate
Time Required: 3 hours
Cost: $0
Software Needed:
- Visual Basic or Visual C# Express
- Expression Blend (optional)

Inspiration

There are a number of examples and tutorials out there to help get started creating games. You will find the basics of this game to be very similar to a Visual C# Coding4Fun article here. This article will show you how to create a shooter style game in Silverlight. My first Silverlight game experience was playing with a Asteroids style game by Bill Reiss. My usage of vectors and how to do a game loop came from great examples like his and others. There are a number of sites and blogs where you can get good info on game development with Silverlight. Here are just a few.

Basic Layout

To begin, Open Visual Studio and create a new Silverlight Application in either C# or VB.net. First, we will start with the layout of the screen. First, I added a canvas to the grid inside the Page.xaml that is created for you. I set it's background to black, and named it 'gameRoot'.

<UserControl x:Class="SimpleShooter.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
   <Grid x:Name="LayoutRoot">
        <Canvas x:Name="gameRoot" Width="500" Height="400" Background="Black" >
        </Canvas>
    </Grid>
</UserControl>

Next we will start adding controls to our project for things like game entities, and information displays. In this example. To complete layout of the game, add user controls to the progect called: Info, LivesRemaining, Score, and WaveInfo. In those controls, To begin I added basic TextBlocks to display information on the state of the game. Please note there are better ways to arrange things in a user control, beyond what I show here. I am keeping to a simple canvas and direct positioning to introduce the concept of Canvas.Top and Canvas.Left. I have now placed these controls on Page.xaml and assigned an x:Name to each. At this point, the controls have only a TextBlock in them.

<UserControl x:Class="SimpleShooter.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:SimpleShooter="clr-namespace:SimpleShooter"
    Width="500" Height="400">
    <Grid x:Name="LayoutRoot">
        <Canvas x:Name="gameRoot" Width="500" Height="400" Background="Black">
            <SimpleShooter:RemainingLives x:Name="ctlLives" Canvas.Top="380" Canvas.Left="10" />
            <SimpleShooter:Score x:Name="ctlScore" Canvas.Top="10" Canvas.Left="10" />
            <SimpleShooter:WaveInfo x:Name="ctlWaveInfo" Canvas.Left="440" Canvas.Top="10" />
            <SimpleShooter:Info x:Name="ctlInfo" Canvas.Top="10"/>
        </Canvas>
    </Grid>
</UserControl>

To finish our layout lets add a star field. To do this, we will write function to generate random numbers, and another that will randomly distribute ellipses on our base canvas. We will need to inherit from System.Security.Cryptography for this:

public partial class Page : UserControl
{
    public Page()
    {
        InitializeComponent();

        GenerateStarField(350);
    }

    void GenerateStarField(int numberOfStars)
    {

        for (int i = 0; i < numberOfStars; i++)
        {

            Ellipse star = new Ellipse();
            double size = GetRandInt(10, 800) * .01;
            star.Width = size;
            star.Height = size;
            star.Opacity = GetRandInt(1, 5) * .1;
            star.Fill = new SolidColorBrush(Colors.White);
            int x = GetRandInt(0, (int)Math.Round(gameRoot.Height, 0));
            int y = GetRandInt(0, (int)Math.Round(gameRoot.Width, 0));
            star.SetValue(Canvas.TopProperty, (double)x);
            star.SetValue(Canvas.LeftProperty, (double)y);
            gameRoot.Children.Add(star);
        }
    }

    public int GetRandInt(int min, int max)
    {
        Byte[] rndBytes = new Byte[10];
        RNGCryptoServiceProvider rndC = new RNGCryptoServiceProvider();
        rndC.GetBytes(rndBytes);
        int seed = BitConverter.ToInt32(rndBytes, 0);
        Random rand = new Random(seed);
        return rand.Next(min, max);
    }
}

Partial Public Class Page
    Inherits UserControl

    Public Sub New()
        InitializeComponent()
        GenerateStarField(350)
    End Sub

    Private Sub GenerateStarField(ByVal numberOfStars As Integer)

        For i As Integer = 0 To numberOfStars - 1

            Dim star As New Ellipse()
            Dim size As Double = GetRandInt(10, 800) * 0.01
            star.Width = size
            star.Height = size
            star.Opacity = GetRandInt(1, 5) * 0.1
            star.Fill = New SolidColorBrush(Colors.White)
            Dim x As Integer = GetRandInt(0, CInt(Math.Round(gameRoot.Height, 0)))
            Dim y As Integer = GetRandInt(0, CInt(Math.Round(gameRoot.Width, 0)))
            star.SetValue(Canvas.TopProperty, CDbl(x))
            star.SetValue(Canvas.LeftProperty, CDbl(y))
            gameRoot.Children.Add(star)
        Next
    End Sub

    Public Function GetRandInt(ByVal min As Integer, ByVal max As Integer) As Integer
        Dim rndBytes As [Byte]() = New [Byte](9) {}
        Dim rndC As New RNGCryptoServiceProvider()
        rndC.GetBytes(rndBytes)
        Dim seed As Integer = BitConverter.ToInt32(rndBytes, 0)
        Dim rand As New Random(seed)
        Return rand.[Next](min, max)
    End Function
End Class

We now have a function called GenerateStarField. Note that it is adding each ellipse to the 'Children' of our base gameRoot canvas, and how the Top and Left properties determine the positions of those ellipses. Now we have a basic layout of our game and a background.

Sprites and Vectors

I am not going to go in to great detail on sprites or vectors. There are a number of great resources (see other articles linked to in this post), as well as another good Coding4Fun article on this topic. We are however, going to add a class to represent a sprite and a vector to our code:

public abstract class Sprite
{
    public double Width { get; set; }
    public double Height { get; set; }
    public Vector Velocity { get; set; }
    public Canvas SpriteCanvas { get; set; }
    private Point _position;
    public Point Position
    {
        get
        {
            return _position;
        }
        set
        {
            _position = value;
            SpriteCanvas.SetValue(Canvas.TopProperty, _position.Y - (Height / 2));
            SpriteCanvas.SetValue(Canvas.LeftProperty, _position.X - (Width / 2));
        }
    }

    public Sprite(Double width, Double height, Point position)
    {
        Width = width;
        Height = height;

        SpriteCanvas = RenderSpriteCanvas();

        SpriteCanvas.Width = width;
        SpriteCanvas.Height = height;
        //NOTE: because the setter for Position uses both Height and Width, it is important this comes after they are set.
        Position = position;
    }

    public abstract Canvas RenderSpriteCanvas();

    public Canvas LoadSpriteCanvas(string xamlPath)
    {
        System.IO.Stream s = this.GetType().Assembly.GetManifestResourceStream(xamlPath);
        return (Canvas)XamlReader.Load(new System.IO.StreamReader(s).ReadToEnd());
    }

    public virtual void Update(TimeSpan elapsedTime)
    {
        Position = (Position + Velocity * elapsedTime.TotalSeconds);
    }
}

Public MustInherit Class Sprite
    Private _Width As Double
    Public Property Width() As Double
        Get
            Return _Width
        End Get
        Set(ByVal value As Double)
            _Width = value
        End Set
    End Property
    Private _Height As Double
    Public Property Height() As Double
        Get
            Return _Height
        End Get
        Set(ByVal value As Double)
            _Height = value
        End Set
    End Property
    Private _Velocity As Vector
    Public Property Velocity() As Vector
        Get
            Return _Velocity
        End Get
        Set(ByVal value As Vector)
            _Velocity = value
        End Set
    End Property
    Private _SpriteCanvas As Canvas
    Public Property SpriteCanvas() As Canvas
        Get
            Return _SpriteCanvas
        End Get
        Set(ByVal value As Canvas)
            _SpriteCanvas = value
        End Set
    End Property
    Private _position As Point
    Public Property Position() As Point
        Get
            Return _position
        End Get
        Set(ByVal value As Point)
            _position = value
            SpriteCanvas.SetValue(Canvas.TopProperty, _position.Y - (Height / 2))
            SpriteCanvas.SetValue(Canvas.LeftProperty, _position.X - (Width / 2))
        End Set
    End Property

    Public Sub New(ByVal initialWidth As [Double], ByVal initialHeight As [Double], ByVal initialPosition As Point)
        Width = initialWidth
        Height = initialHeight

        SpriteCanvas = RenderSpriteCanvas()

        SpriteCanvas.Width = Width
        SpriteCanvas.Height = Height
        'NOTE: because the setter for Position uses both Height and Width, it is important this comes after they are set. 
        Position = initialPosition
    End Sub

    Public MustOverride Function RenderSpriteCanvas() As Canvas

    Public Function LoadSpriteCanvas(ByVal xamlPath As String) As Canvas
        Dim s As System.IO.Stream = Me.[GetType]().Assembly.GetManifestResourceStream(xamlPath)
        Return DirectCast(XamlReader.Load(New System.IO.StreamReader(s).ReadToEnd()), Canvas)
    End Function

    Public Overridable Sub Update(ByVal elapsedTime As TimeSpan)
        Position = (Position + Velocity * elapsedTime.TotalSeconds)
    End Sub
End Class

This Sprite class will give us the basis for entities in the game such as a ship, aliens, and projectiles. For all these items, we need to know the location of the item, the site, and what it looks like. We will take advantage of Point to track our position, and a property of type Canvas to display the XAML for each of these items. The constructor sets these initial parameters, and calls a RenderSpriteCanvas method to be implemented by each class that inherits from it. This method allows the inheriting class to set the contents of the canvas and therefore as control of the way the sprite looks.

Next we have our vector class that will help us control movement of our sprite. Again, I will not go into detail on vectors as this code is borrowed and adapted from many other readily available sources:

public struct Vector
{
    public double X;
    public double Y;

    public Vector(double x, double y)
    {
        X = x;
        Y = y;
    }

    public double Length
    {
        get
        {
            return Math.Sqrt(LengthSquared);
        }
    }

    public double LengthSquared
    {
        get
        {
            return X * X + Y * Y;
        }
    }

    public void Normalize()
    {
        double length = Length;
        X /= length;
        Y /= length;
    }

    public static Vector operator -(Vector vector)
    {
        return new Vector(-vector.X, -vector.Y);
    }

    public static Vector operator *(Vector vector, double scalar)
    {
        return new Vector(scalar * vector.X, scalar * vector.Y);
    }

    public static Point operator +(Point point, Vector vector)
    {
        return new Point(point.X + vector.X, point.Y + vector.Y);
    }

    static public Vector CreateVectorFromAngle(double angleInDegrees, double length)
    {
        double x = Math.Sin(DegreesToRadians(180 - angleInDegrees)) * length;
        double y = Math.Cos(DegreesToRadians(180 - angleInDegrees)) * length;
        return new Vector(x, y);
    }

    static public double DegreesToRadians(double degrees)
    {
        double radians = ((degrees / 360) * 2 * Math.PI);
        return radians;
    }
}

Public Structure Vector
    Public X As Double
    Public Y As Double

    Public Sub New(ByVal x__1 As Double, ByVal y__2 As Double)
        X = x__1
        Y = y__2
    End Sub

    Public ReadOnly Property Length() As Double
        Get
            Return Math.Sqrt(LengthSquared)
        End Get
    End Property

    Public ReadOnly Property LengthSquared() As Double
        Get
            Return X * X + Y * Y
        End Get
    End Property

    Public Sub Normalize()
        Dim length__1 As Double = Length
        X /= length__1
        Y /= length__1
    End Sub

    Public Shared Operator -(ByVal vector As Vector) As Vector
        Return New Vector(-vector.X, -vector.Y)
    End Operator

    Public Shared Operator *(ByVal vector As Vector, ByVal scalar As Double) As Vector
        Return New Vector(scalar * vector.X, scalar * vector.Y)
    End Operator

    Public Shared Operator +(ByVal point As Point, ByVal vector As Vector) As Point
        Return New Point(point.X + vector.X, point.Y + vector.Y)
    End Operator


    Public Shared Function CreateVectorFromAngle(ByVal angleInDegrees As Double, ByVal length As Double) As Vector
        Dim x As Double = Math.Sin(DegreesToRadians(180 - angleInDegrees)) * length
        Dim y As Double = Math.Cos(DegreesToRadians(180 - angleInDegrees)) * length
        Return New Vector(x, y)
    End Function

    Public Shared Function DegreesToRadians(ByVal degrees As Double) As Double
        Dim radians As Double = ((degrees / 360) * 2 * Math.PI)
        Return radians
    End Function
End Structure

Now we can implement Sprite with a new Ship class. Add a class called Ship, and a file called Ship.xaml to your project. Be sure to set the properties of Ship.xaml to 'Embedded Resource'. We now need to inherit from our Sprite class:

public class Ship : Sprite
{
    public Ship(double width, double height, Point firstPosition)
        : base(width, height, firstPosition)
    {

    }

    public override Canvas RenderSpriteCanvas()
    {
        return LoadSpriteCanvas("SimpleShooter.Sprites.Ship.xaml");
    }
}

Public Class Ship
    Inherits Sprite
    Public Sub New(ByVal width As Double, ByVal height As Double, ByVal firstPosition As Point)
        MyBase.New(width, height, firstPosition)

    End Sub

    Public Overloads Overrides Function RenderSpriteCanvas() As Canvas
        Return LoadSpriteCanvas("SimpleShooter.Ship.xaml")
    End Function
End Class

When Ship is instantiated, it calls the constructor of it's base, Sprite. It also implements the RenderSpriteCanvas method and specifies the XAML (a simple white square) to load into the sprite's canvas. Now we are ready to add a sprite to our main page. In this simple game, we will have only one ship (the others will be aliens), so lets add a property to our page, and a function that will instantiate our ship:

<Canvas x:Name="LayoutRoot" Width="30" Height="30" 
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
    <Rectangle Height="30" Width="30" Fill="White" />
</Canvas>

void InitializeGame()
{
    PlayerShip = new Ship(10, 10, new Point(100, 300));
    gameRoot.Children.Add(PlayerShip.SpriteCanvas);
}

Private Sub InitializeGame()
    PlayerShip = New Ship(10, 10, New Point(100, 300))
    gameRoot.Children.Add(PlayerShip.SpriteCanvas)
End Sub

We can now call this method from our page constructor and when we run the project, we get a white square (our ship) at the bottom left of our Page. Taking a closer look, we set our page size to 500 x 400, and the InitializeGame method places our Ship at a point 100 pixels from the left of the gameRoot canvas, and 300pixels from the top.

Keyboard Input and the Game Loop

Now we are ready to make some things move. To start, we need choose keys on the keyboard to allow movement, and act on those events. We then need to capture those key presses and act on them if they are relevant to our game loop. Once again, may examples of key handlers and game loops are readily available, so I won't go into detail. The keyboard handler captures all key up and down events. We can therefore ask our instance of the handler if a key is pressed at any given time. The game loop is just that, a constant loop. It consists of a storyboard that has the start called on it and it immediately ends. The class raises an event, and starts the storyboard again. Subscribers to Update event are provided a value that reports the number of milliseconds since the last update. That value can be applied to vectors to apply smooth movement to sprites. To take advantage of these classes, we need to add an instance of both a KeyHandler and GameLoop to our Page. To do this, we update the InitializeGame and Page constructor, and add a handler for the GameLoop:

public Page()
{
    InitializeComponent();
    keyHandler = new KeyHandler(this);
    GenerateStarField(350);
    InitializeGame();
}

void InitializeGame()
{
    gameLoop = new GameLoop(this);
    gameLoop.Update += new GameLoop.UpdateHandler(gameLoop_Update);

    PlayerShip = new Ship(10, 10, new Point(100, 360));
    gameRoot.Children.Add(PlayerShip.SpriteCanvas);

    gameLoop.Start();
}

void gameLoop_Update(TimeSpan elapsed)
{
    //clear the current vector so the sprite is not moving unless a keys is pressed
    PlayerShip.Velocity = new Vector(0, 0);
    if (keyHandler.IsKeyPressed(Key.Left))
    {
        PlayerShip.Velocity = Vector.CreateVectorFromAngle(270, 125);
    }
    if (keyHandler.IsKeyPressed(Key.Right))
    {
        PlayerShip.Velocity = Vector.CreateVectorFromAngle(90, 125);
    }
    PlayerShip.Update(elapsed);
}

Public Sub New()
    InitializeComponent()
    keyHandler = New KeyHandler(Me)
    GenerateStarField(350)
    InitializeGame()
End Sub

Private Sub InitializeGame()
    gameLoop = New GameLoop(Me)
    AddHandler gameLoop.Update, AddressOf gameLoop_Update

    PlayerShip = New Ship(10, 10, New Point(100, 360))
    gameRoot.Children.Add(PlayerShip.SpriteCanvas)

    gameLoop.Start()
End Sub

Private Sub gameLoop_Update(ByVal elapsed As TimeSpan)
    'clear the current vector so the sprite is not moving unless a keys is pressed 
    PlayerShip.Velocity = New Vector(0, 0)
    If keyHandler.IsKeyPressed(Key.Left) Then
        PlayerShip.Velocity = Vector.CreateVectorFromAngle(270, 125)
    End If
    If keyHandler.IsKeyPressed(Key.Right) Then
        PlayerShip.Velocity = Vector.CreateVectorFromAngle(90, 125)
    End If

    PlayerShip.Update(elapsed)
End Sub

Now we have a functioning game loop. Launch the app, click on the Silverlight control to give it focus, and you can now use the arrow keys to move our ship right and left. One problem however is that you are able to take the ship completely off the screen. To prevent this, we can add MinX and MaxX properties to our ship class and override the Update method it inherits from Sprite. Be sure to also add those min and max values after the Ship is instantiated in InitializeGame of our Page:

public class Ship : Sprite
{
    public double MaxX { get; set; }
    public double MinX { get; set; }

    public Ship(double width, double height, Point firstPosition)
        : base(width, height, firstPosition)
    {

    }

    public override Canvas RenderSpriteCanvas()
    {
        return LoadSpriteCanvas("SimpleShooter.Sprites.Ship.xaml");
    }

    public override void Update(System.TimeSpan elapsedTime)
    {
        //verify that this is a position we can move to
        if (Position.X > MaxX)
        {
            Position = new Point(MaxX, Position.Y);
            Velocity = new Vector(0, 0);
        }
        if (Position.X < MinX)
        {
            Position = new Point(MinX, Position.Y);
            Velocity = new Vector(0, 0);
        }
        base.Update(elapsedTime);
    }
}

Public Class Ship
    Inherits Sprite
    Private _MaxX As Double
    Public Property MaxX() As Double
        Get
            Return _MaxX
        End Get
        Set(ByVal value As Double)
            _MaxX = value
        End Set
    End Property
    Private _MinX As Double
    Public Property MinX() As Double
        Get
            Return _MinX
        End Get
        Set(ByVal value As Double)
            _MinX = value
        End Set
    End Property

    Public Sub New(ByVal width As Double, ByVal height As Double, ByVal firstPosition As Point)
        MyBase.New(width, height, firstPosition)

    End Sub

    Public Overloads Overrides Function RenderSpriteCanvas() As Canvas
        Return LoadSpriteCanvas("SimpleShooter.Ship.xaml")
    End Function

    Public Overloads Overrides Sub Update(ByVal elapsedTime As System.TimeSpan)
        'verify that this is a position we can move to 
        If Position.X > MaxX Then
            Position = New Point(MaxX, Position.Y)
            Velocity = New Vector(0, 0)
        End If
        If Position.X < MinX Then
            Position = New Point(MinX, Position.Y)
            Velocity = New Vector(0, 0)
        End If
        MyBase.Update(elapsedTime)
    End Sub
End Class

Prepare to Fire!

We now have all the basic plumbing to add additional sprites such as aliens or projectiles. To begin, we will add additional classes inheriting from Sprite: Alien, Missle, and Bomb, along with Alien.xaml, Missle.xaml, and Bomb.xaml (these new .xaml files need to be set as Embedded Resources). These xaml files are just like our Ship.xaml with different sizes and colors. Make the Aliens and their bombs red, and shrink the bomb and missile height and width to 5. The xaml is very similar, but the classes themselves are going to have a few differing capabilities. Bomb and Missile are very similar. They only need to load their corresponding xaml. Here is our Bomb class for example:

public class Bomb : Sprite
{
    public double MaxX { get; set; }
    public double MinX { get; set; }

    public Bomb(double width, double height, Point firstPosition)
        : base(width, height, firstPosition)
    {

    }

    public override Canvas RenderSpriteCanvas()
    {
        return LoadSpriteCanvas("SimpleShooter.Sprites.Bomb.xaml");
    }

    public override void Update(System.TimeSpan elapsedTime)
    {
        base.Update(elapsedTime);
    }
}

Public Class Bomb
    Inherits Sprite
    Private _MaxX As Double
    Public Property MaxX() As Double
        Get
            Return _MaxX
        End Get
        Set(ByVal value As Double)
            _MaxX = value
        End Set
    End Property
    Private _MinX As Double
    Public Property MinX() As Double
        Get
            Return _MinX
        End Get
        Set(ByVal value As Double)
            _MinX = value
        End Set
    End Property

    Public Sub New(ByVal width As Double, ByVal height As Double, ByVal firstPosition As Point)
        MyBase.New(width, height, firstPosition)

    End Sub

    Public Overloads Overrides Function RenderSpriteCanvas() As Canvas
        Return LoadSpriteCanvas("SimpleShooter.Sprites.Bomb.xaml")
    End Function

    Public Overloads Overrides Sub Update(ByVal elapsedTime As System.TimeSpan)
        MyBase.Update(elapsedTime)
    End Sub
End Class

We now need to add an Alien class similar to our Ship class. These will both need a bit more capability. For one, we are going to have them both fire at each other. In the case of the Alien, it will be firing down, and it's monition of choice will be a bomb:

public class Alien : Sprite
{
    public double fireRateMilliseconds = 2000;
    public double fireVelocity = 250;
    public double wayPointMin;
    public double wayPointMax;
    public double speed = 100;
    public bool spawnWait;
    public DateTime spawnComplete;
    public double MaxX { get; set; }
    public double MinX { get; set; }

    public Alien(double width, double height, Point firstPosition)
        : base(width, height, firstPosition)
    {

    }

    public void CheckDirection()
    {
        if (Position.X > wayPointMax)
        {
            Velocity = Vector.CreateVectorFromAngle(270, speed);
        }
        if (Position.X < wayPointMin)
        {
            Velocity = Vector.CreateVectorFromAngle(90, speed);
        }
    }

    public override Canvas RenderSpriteCanvas()
    {
        return LoadSpriteCanvas("SimpleShooter.Sprites.Alien.xaml");
    }

    public override void Update(TimeSpan elapsedTime)
    {
        CheckDirection();
        base.Update(elapsedTime);
    }

    public Bomb Fire()
    {
        Bomb bomb = new Bomb(5, 5, Position);
        bomb.Velocity = Vector.CreateVectorFromAngle(180, fireVelocity);
        return bomb;
    }
}

Public Class Alien
    Inherits Sprite
    Public fireRateMilliseconds As Double = 2000
    Public fireVelocity As Double = 250
    Public wayPointMin As Double
    Public wayPointMax As Double
    Public speed As Double = 100
    Public spawnWait As Boolean
    Public spawnComplete As DateTime
    Private _MaxX As Double
    Public Property MaxX() As Double
        Get
            Return _MaxX
        End Get
        Set(ByVal value As Double)
            _MaxX = value
        End Set
    End Property
    Private _MinX As Double
    Public Property MinX() As Double
        Get
            Return _MinX
        End Get
        Set(ByVal value As Double)
            _MinX = value
        End Set
    End Property

    Public Sub New(ByVal width As Double, ByVal height As Double, ByVal firstPosition As Point)
        MyBase.New(width, height, firstPosition)

    End Sub

    Public Sub CheckDirection()
        If Position.X > wayPointMax Then
            Velocity = Vector.CreateVectorFromAngle(270, speed)
        End If
        If Position.X < wayPointMin Then
            Velocity = Vector.CreateVectorFromAngle(90, speed)
        End If
    End Sub

    Public Overloads Overrides Function RenderSpriteCanvas() As Canvas
        Return LoadSpriteCanvas("SimpleShooter.Alien.xaml")
    End Function

    Public Overloads Overrides Sub Update(ByVal elapsedTime As TimeSpan)
        CheckDirection()
        MyBase.Update(elapsedTime)
    End Sub

    Public Function Fire() As Bomb
        Dim bomb As New Bomb(5, 5, Position)
        bomb.Velocity = Vector.CreateVectorFromAngle(180, fireVelocity)
        Return bomb
    End Function
End Class

Now that we are going to add munitions to the game, we need to be able to know when these munitions collide with other sprites. To do this, we are going to add a collision detection method to our sprite class. As a form of simple collision detection, we will give each sprite a CollisionRadius from its center point. To keep it simple we will make the radius one half the width of our sprites. A vector created from these two points can then detect if the sum of those two radius is greater than the length of our vector. If it is, they have collided:

public static bool Collides(Sprite s1, Sprite s2)
{
    Vector v = new Vector((s1.Position.X) - (s2.Position.X), (s1.Position.Y) - (s2.Position.Y));
    if (s1.CollisionRadius + s2.CollisionRadius > v.Length)
    {
        return true;
    }
    else
    {
        return false;
    }
}

Public Shared Function Collides(ByVal s1 As Sprite, ByVal s2 As Sprite) As Boolean
    Dim v As New Vector((s1.Position.X) - (s2.Position.X), (s1.Position.Y) - (s2.Position.Y))
    If s1.CollisionRadius + s2.CollisionRadius > v.Length Then
        Return True
    Else
        Return False
    End If
End Function

We are now ready to extend our game loop of our Page to do more than track the movement of our Ship. We begin by taking action on more than just the arrow keys. We will wire up the space bar for shooting. Lets add an enumeration to track the state of our game. We will also add a supporting class that will handle the firing of munitions and adding those to our game. We will keep this simple for now, but it is an obvious place to being extending this code to take advantage of things like partial classes that could contain functionality like our 'Fire' method:

public enum GameState
{
    Ready = 0,
    Running = 1,
    Paused = 2,
    BetweenWaves = 3,
    GameOver = 4
}

if (keyHandler.IsKeyPressed(Key.Space))
{
    switch (status)
    {
        case GameState.Ready:
            break;
        case GameState.Running:
            EntityFired(PlayerShip);
            break;
        case GameState.Paused:
            break;
        case GameState.BetweenWaves:
            status = GameState.Running;
            ctlInfo.GameInfo = "";
            StartWave();
            break;
        case GameState.GameOver:
            break;
        default:
            break;
    }
}

void EntityFired(Sprite shooter)
{
    Debug.WriteLine(shooter);
    switch (shooter.ToString())
    {
        case "SimpleShooter.Ship":
            if (missles.Count == 0)
            {
                Missle missle = ((Ship)shooter).Fire();
                missles.Add(missle);
                gameRoot.Children.Add(missle.SpriteCanvas);

            }
            break;
        case "SimpleShooter.Alien":
            Bomb bomb = ((Alien)shooter).Fire();
            bombs.Add(bomb);
            gameRoot.Children.Add(bomb.SpriteCanvas);
            break;
        default:
            break;
    }
}

Public Enum GameState
    Ready = 0
    Running = 1
    Paused = 2
    BetweenWaves = 3
    GameOver = 4
End Enum

If keyHandler.IsKeyPressed(Key.Space) Then
    Select Case status
        Case GameState.Ready
            Exit Select
        Case GameState.Running
            EntityFired(PlayerShip)
            Exit Select
        Case GameState.Paused
            Exit Select
        Case GameState.BetweenWaves
            status = GameState.Running
            ctlInfo.GameInfo = ""
            StartWave()
            Exit Select
        Case GameState.GameOver
            Exit Select
        Case Else
            Exit Select
    End Select
End If

Private Sub EntityFired(ByVal shooter As Sprite)
    Debug.WriteLine(shooter)
    Select Case shooter.ToString()
        Case "SimpleShooter.Ship"
            If missles.Count = 0 Then
                Dim missle As Missle = DirectCast(shooter, Ship).Fire()
                missles.Add(missle)

                gameRoot.Children.Add(missle.SpriteCanvas)
            End If
            Exit Select
        Case "SimpleShooter.Alien"
            Dim bomb As Bomb = DirectCast(shooter, Alien).Fire()
            bombs.Add(bomb)
            gameRoot.Children.Add(bomb.SpriteCanvas)
            Exit Select
        Case Else
            Exit Select
    End Select
End Sub

To make it easier to track the state of our game, let's add public properties to our controls and let them be the keepers of those game states. For instance, give the ReamainingLives control a Lives property, and have the setter of that property also update the TextBlock on the control to show the user how many lives are left. Perform a similar task for the other three controls:

public partial class RemainingLives : UserControl
{
    private int _lives;
    public int Lives
    {
        get { return _lives; }
        set
        {
            _lives = value;
            string livesString = string.Empty;
            for (int i = 0; i < _lives - 1; i++)
            {
                livesString = string.Format("{0}{1}", livesString, "A");
            }
            txtRemainingLives.Text = livesString;
        }
    }

    public RemainingLives()
    {
        InitializeComponent();
    }
}

Partial Public Class RemainingLives
    Inherits UserControl
    Private _lives As Integer
    Public Property Lives() As Integer
        Get
            Return _lives
        End Get
        Set(ByVal value As Integer)
            _lives = value
            Dim livesString As String = String.Empty
            For i As Integer = 0 To _lives - 2
                livesString = String.Format("{0}{1}", livesString, "A")
            Next
            txtRemainingLives.Text = livesString
        End Set
    End Property

    Public Sub New()
        InitializeComponent()
    End Sub
End Class

Now we have a number of other things to add to our page class. We are going to have lots of entities to deal with in our game loop. We will have a ship, x number of Aliens, x number of Bombs, and at some points we will have our Missiles, though we restricted that to one at a time in our EntityFired method. We need to, in each game loop check if any missile hits any alien or leaves the game map, if any bomb hits our ship or leaves the game map, and if it is time for a Alien to fire at the ship. Our Page already has a property for our Ship, but the Aliens, Bombs, Missiles need to be collections. When we begin to loop through our Bombs for instance, we will want to remove a bomb if it strikes a Ship or leaves the game map. Since we are going to be iterating these collections, we cannot subtract from those collections as we are looping through them. There are a number of approaches for this, but to keep it simple, we will add a corresponding collection for each of our Bomb, Alien, and Missile collections to track the ones that need to be removed and removed from our game canvas. With this approach, our game loop can add to the "remove these" collection, and then take action on them when we leave the main loop for the parent collection:

List<Alien> aliens;
List<Alien> aliensRemove;
List<Alien> alienShooters;
List<Bomb> bombs;
List<Bomb> bombsRemove;
List<Missle> missles;
List<Missle> misslesRemove;

Private aliens As List(Of Alien)
Private aliensRemove As List(Of Alien)
Private alienShooters As List(Of Alien)
Private bombs As List(Of Bomb)
Private bombsRemove As List(Of Bomb)
Private missles As List(Of Missle)
Private misslesRemove As List(Of Missle)

We also want to add a class to our page that can track the waves of aliens we are going to send one at a time. In addition, we can add a collection to hold these waves. Each wave will track the number of aliens that spawn at once, the total number of aliens faced in the wave, how many aliens get to drop bombs, and how frequently they can fire.

public class WaveData
{
    public WaveData(int count, double fireRate, int atOnce, int fireatonce)
    {
        EnemyCount = count;
        fireRateMilliseconds = fireRate;
        enemiesAtOnce = atOnce;
        fireAtOnce = fireatonce;
        waveEmpty = false;
    }
    public int EnemyCount { get; set; }
    public double fireRateMilliseconds { get; set; }
    public int enemiesAtOnce { get; set; }
    public int fireAtOnce { get; set; }
    public bool waveEmpty { get; set; }
}

Public Class WaveData
    Public Sub New(ByVal count As Integer, ByVal fireRate As Double, ByVal atOnce As Integer, ByVal fireatonce__1 As Integer)
        EnemyCount = count
        fireRateMilliseconds = fireRate
        enemiesAtOnce = atOnce
        fireAtOnce = fireatonce__1
        waveEmpty = False
    End Sub
    Private _EnemyCount As Integer
    Public Property EnemyCount() As Integer
        Get
            Return _EnemyCount
        End Get
        Set(ByVal value As Integer)
            _EnemyCount = value
        End Set
    End Property
    Private _fireRateMilliseconds As Double
    Public Property fireRateMilliseconds() As Double
        Get
            Return _fireRateMilliseconds
        End Get
        Set(ByVal value As Double)
            _fireRateMilliseconds = value
        End Set
    End Property
    Private _enemiesAtOnce As Integer
    Public Property enemiesAtOnce() As Integer
        Get
            Return _enemiesAtOnce
        End Get
        Set(ByVal value As Integer)
            _enemiesAtOnce = value
        End Set
    End Property
    Private _fireAtOnce As Integer
    Public Property fireAtOnce() As Integer
        Get
            Return _fireAtOnce
        End Get
        Set(ByVal value As Integer)
            _fireAtOnce = value
        End Set
    End Property
    Private _waveEmpty As Boolean
    Public Property waveEmpty() As Boolean
        Get
            Return _waveEmpty
        End Get
        Set(ByVal value As Boolean)
            _waveEmpty = value
        End Set
    End Property
End Class

We will need to setup an initialization method for our game, to setup all our collections for sprites, and add progressively difficult waves to our game. The meat of it all now lies in our game loop. For each collection of sprites we call methods that will iterate over its contents and make decisions based on collisions, locations of the sprites. After a loop on each main collection, we can use the 'remove us' collection to clear items from the main collection, remove their canvas from our game canvas, and delete them from the main collection. Finally, we check to see if enough time has elapsed to let the aliens drop another bomb:

void gameLoop_Update(TimeSpan elapsed)
{
    //clear the current Vector so the sprite is not moving unless a keys is pressed
    PlayerShip.Velocity = new Vector(0, 0);
    if (keyHandler.IsKeyPressed(Key.Left))
    {
        PlayerShip.Velocity = Vector.CreateVectorFromAngle(270, 125);
    }
    if (keyHandler.IsKeyPressed(Key.Right))
    {
        PlayerShip.Velocity = Vector.CreateVectorFromAngle(90, 125);
    }
    if (keyHandler.IsKeyPressed(Key.Space))
    {
        switch (status)
        {
            case GameState.Ready:
                break;
            case GameState.Running:
                EntityFired(PlayerShip);
                break;
            case GameState.Paused:
                break;
            case GameState.BetweenWaves:
                status = GameState.Running;
                ctlInfo.GameInfo = "";
                StartWave();
                break;
            case GameState.GameOver:
                break;
            default:
                break;
        }
    }
    PlayerShip.Update(elapsed);

    BombLoop(elapsed);
    MissleLoop(elapsed);
    AlienLoop(elapsed);

    foreach (Alien alien in aliensRemove)
    {
        aliens.Remove(alien);
        gameRoot.Children.Remove(alien.SpriteCanvas);
        AlienShot(alien);
    }
    aliensRemove.Clear();

    foreach (Missle missle in misslesRemove)
    {
        missles.Remove(missle);
        gameRoot.Children.Remove(missle.SpriteCanvas);
    }
    misslesRemove.Clear();

    if (nextShot <= DateTime.Now)
    {
        nextShot = DateTime.Now.AddMilliseconds(enemyShootMilliseonds).AddMilliseconds(elapsed.Milliseconds * -1);

        shotsThisPass = shotsAtOnce;
        if (shotsThisPass > aliens.Count)
        {
            shotsThisPass = aliens.Count;
        }

        if (aliens.Count > 0)
        {
            foreach (Alien alien in aliens)
            {
                alienShooters.Add(alien);
            }
        }

        while (alienShooters.Count > shotsThisPass)
        {
            alienShooters.RemoveAt(GetRandInt(0, alienShooters.Count - 1));
        }

        foreach (Alien alien in alienShooters)
        {
            EntityFired(alien);
        }

        alienShooters.Clear();
    }
}

Private Sub gameLoop_Update(ByVal elapsed As TimeSpan)
    'clear the current Vector so the sprite is not moving unless a keys is pressed 
    PlayerShip.Velocity = New Vector(0, 0)
    If keyHandler.IsKeyPressed(Key.Left) Then
        PlayerShip.Velocity = Vector.CreateVectorFromAngle(270, 125)
    End If
    If keyHandler.IsKeyPressed(Key.Right) Then
        PlayerShip.Velocity = Vector.CreateVectorFromAngle(90, 125)
    End If
    If keyHandler.IsKeyPressed(Key.Space) Then
        Select Case status
            Case GameState.Ready
                Exit Select
            Case GameState.Running
                EntityFired(PlayerShip)
                Exit Select
            Case GameState.Paused
                Exit Select
            Case GameState.BetweenWaves
                status = GameState.Running
                ctlInfo.GameInfo = ""
                StartWave()
                Exit Select
            Case GameState.GameOver
                Exit Select
            Case Else
                Exit Select
        End Select
    End If
    PlayerShip.Update(elapsed)

    BombLoop(elapsed)
    MissleLoop(elapsed)
    AlienLoop(elapsed)

    For Each alien As Alien In aliensRemove
        aliens.Remove(alien)
        gameRoot.Children.Remove(alien.SpriteCanvas)
        AlienShot(alien)
    Next
    aliensRemove.Clear()

    For Each missle As Missle In misslesRemove
        missles.Remove(missle)
        gameRoot.Children.Remove(missle.SpriteCanvas)
    Next
    misslesRemove.Clear()

    If nextShot <= DateTime.Now Then
        nextShot = DateTime.Now.AddMilliseconds(enemyShootMilliseonds).AddMilliseconds(elapsed.Milliseconds * -1)

        shotsThisPass = shotsAtOnce
        If shotsThisPass > aliens.Count Then
            shotsThisPass = aliens.Count
        End If

        If aliens.Count > 0 Then
            For Each alien As Alien In aliens
                alienShooters.Add(alien)
            Next
        End If

        While alienShooters.Count > shotsThisPass
            alienShooters.RemoveAt(GetRandInt(0, alienShooters.Count - 1))
        End While

        For Each alien As Alien In alienShooters
            EntityFired(alien)
        Next

        alienShooters.Clear()
    End If
End Sub

Now we can almost call it a game:

Taking it one step further, I jumped into Expression Blend to create a bit more interesting XAML that our sprites are loading into their SpriteCanvas. This XAML can be found in the full download of the source code. The results make our game just a tad bit more interesting:

Conclusion

Silverlight provides a number of capabilities to enable robust game development. It should be noted that in this game, we are only scratching the surface. The core of this example used a game loop to position sprites on a canvas. Additional capabilities within Silverlight such as animations, styling, templating, and visual states provide even more ways to push the limits of browser based games. If you are at all like me, dabbling with game development is a great way to get your feet wet with Silverlight and learn some basics. Happy coding!

If you want to try this out, the download link for the source code is at the top of the article!

About The Author

Roger Guess is the Director of IT for The Wedge Group where he works with technologies such as Silverlight and WPF. He writes games in his spare time, and blogs at SilverlightAddict.com. He can be reached via email at email@rogerguess.net.

Robozzle

Coding4Fun — Wed, 03 Jun 2009 04:02:03 GMT

Robozzle is a Silverlight game that helps teach players the art of programming logic through a series of fun and challenging community-created puzzles. What's more, the game is "community sourced" meaning not only can you contribute new levels - but actually help expand the game and shape it's future. (http://robozzle.codeplex.com/).

[via Tim Farley]

Blu-ray/DVD Comparison Utility

Coding4Fun — Sat, 28 Mar 2009 10:30:00 GMT

In this article, Giovanni Montrone will provide an overview on how to create an image comparison application for DVD and Blu-ray screen captures.
Giovanni Montrone ASPSOFT, Inc. Difficulty: Beginner Time Required: 2-3 hours Cost: Free Software: Visual Web Developer Express SP1 (or Visual Studio 2008 SP1), Silverlight 2 Tools Hardware: None Application: Run the application Source Download: Download the source

Introduction

As a fan of High Definition movies and television, I often find it difficult to explain the benefits of upgrading from DVD to blu-ray to family and friends. Many people believe that DVDs look good enough and/or that you need a really big television to notice the difference, and, even then, feel the improvement is not good enough to justify the upgrade. The best way to convince someone is to show him/her the same movie playing side by side on blu-ray and dvd using the same sized screens. Since it's difficult to do, the next best thing is to look at still images from both the DVD and the blu-ray and compare them. The images should be from the exact same scene. Fortunately there are places on the web such as AVSForum where members take the time to do this. They usually do this to help people determine what kind of an upgrade they can expect when viewing the blu-ray compared to the DVD. Sometimes the differences are easy to see, and other times they are not as clear. I built this comparison tool as a way to see what differences exist, and provided a few ways to make those differences easier to see.

This utility will allow the user to compare two different images using 3 different modes: dual view, swap view, and Rectangle View. Dual view will allow a side by side comparison where you see part of the first image, and the remaining part of the second image. Moving the mouse left or right will show more of one image, and less of the other. The swap mode will allow the user to see one image in its entirety, and then, when placing the mouse over the image, the application will swap the first image with the second one. The last mode will allow the user to specify a region that he or she wishes to compare. They can draw a rectangle using the mouse, and the application will show the first image with a chunk cut out, replacing the rectangle area with the equivalent area on the second image. The image below shows an example of the rectangle view.

Notes

The application is set to handle images that are 1920x1080 in resolution (the standard resolution of blu-ray movies). DVDs have a resolution of 720x480, but are typically up-converted to 1920x1080 in order to do a direct comparison. This upconversion is similar to what happens when you play a DVD on a 1080p high definition television. While it wouldn't be too difficult to handle other image sizes, to keep things simple, the application assumes the user will be providing images at the proper resolution. Using different images with different resolutions will result in incorrect behavior.

At the time of this writing, Silverlight 3 beta has just recently been released, but has not been tested with this application.

Setup

Before beginning, you must have Visual Studio 2008 SP1 or Visual Web Developer Express SP1. Be sure to install Silverlight 2 Tools in order to create and run the project. Once you have that, start a new Silverlight Application and call it BlurayDVDCompare, or whatever you desire. As shown in figure 1, choose the option to host Silverlight with an ASP.NET web application. This will create a web project and a separate Silverlight project.

Creating the UI

Since we will be displaying HD images (1920x1080), our next step is to ensure that the browser adds scrollbars so that the entire Silverlight control can be seen. To do this, we need to open and edit the hosting web page (BlurayDVDCompareTestPage.aspx) and set the Width and Height properties of the Silverlight control to 1920 x 1200 as shown below. The 1200 is extra room for other controls that we will add.

<asp:Silverlight ID="Xaml1" runat="server"
Source="~/ClientBin/BlurayDVDCompare.xap"
MinimumVersion="2.0.31005.0" Width="1920" Height="1200" />

Our UI will be pretty simple. We will have a couple of textboxes which will be used so that a user can specify a URLs to images they wish to compare. We will also add a couple of progress indicators so that we can show progress when the images are being loaded. We will also have three radio buttons to allow the user to select which comparison mode they wish to use.

The main part of our UI, will be the canvas that holds the two images that we are comparing. Each image has a clip region which will be used to display parts of each image or to hide/show an image. For example, in DualView mode, we want to display part of one image, and the remaining part of the second image. If no clip regions were set, the default behavior would force the second image to cover the first. The final thing we add is a border which we will be used to draw a line as a separator between the two images in DualView. In Rectangle view, the border is used to draw the rectangle.

<StackPanel>
    <Canvas x:Name="canvas" Background="White" Width="1920" Height="1080" Margin="0,5,0,0">    
        <Image x:Name="img1" Stretch="None" >        
            <Image.Clip>
                <RectangleGeometry  Rect="0,0,960,1080" x:Name="rcImg1" />
            </Image.Clip>
        </Image>

        <Image x:Name="img2" Stretch="None" >
            <Image.Clip >
                <RectangleGeometry Rect="960,0,1920,1080" x:Name="rcImg2"  />
            </Image.Clip>
        </Image>    
            
        <Border x:Name="border" Width="2" Height="1920" Margin="0,0,0,0" BorderBrush="Bisque" BorderThickness="0" />
    </Canvas>
</StackPanel>

Implementation

Since we want to allow the application to load images from the web, we define the LoadImages() method which accepts two URLs. In order to do this, we create new BitmapImage objects with the given URLs. This will load the images asynchronously and we will assign them as the image Source property for the two UIElements. Once loading has finished, they will automatically appear in the canvas.

private void LoadImages(string s1, string s2)
{
    brLoading.Visibility = Visibility.Visible;
    spLoadingError.Visibility = Visibility.Collapsed;

    if (string.IsNullOrEmpty(s1) || string.IsNullOrEmpty(s2))
    {
        txtLoadingError.Text = "Invalid image location given";
        brLoading.Visibility = Visibility.Collapsed;
        spLoadingError.Visibility = Visibility.Visible;
        return;
    }

    prgLoading1.Value = 0;
    prgLoading2.Value = 0;
    
    _bmi1 = new BitmapImage();
    _bmi2 = new BitmapImage();
    _bmi1.DownloadProgress += new EventHandler<DownloadProgressEventArgs>(bmi1_DownloadProgress);
    _bmi2.DownloadProgress += new EventHandler<DownloadProgressEventArgs>(bmi2_DownloadProgress);

    _bmi1.UriSource = new Uri(s1, UriKind.Absolute);
    _bmi2.UriSource = new Uri(s2, UriKind.Absolute);

    img1.Source = _bmi1;
    img2.Source = _bmi2;           
}

Private Sub LoadImages(ByVal s1 As String, ByVal s2 As String)
    brLoading.Visibility = Visibility.Visible
    spLoadingError.Visibility = Visibility.Collapsed

    If String.IsNullOrEmpty(s1) OrElse String.IsNullOrEmpty(s2) Then
        txtLoadingError.Text = "Invalid image location given"
        brLoading.Visibility = Visibility.Collapsed
        spLoadingError.Visibility = Visibility.Visible
        Return
    End If

    prgLoading1.Value = 0
    prgLoading2.Value = 0

    _bmi1 = New BitmapImage()
    _bmi2 = New BitmapImage()
    AddHandler _bmi1.DownloadProgress, AddressOf bmi1_DownloadProgress
    AddHandler _bmi2.DownloadProgress, AddressOf bmi2_DownloadProgress

    _bmi1.UriSource = New Uri(s1, UriKind.Absolute)
    _bmi2.UriSource = New Uri(s2, UriKind.Absolute)

    img1.Source = _bmi1
    img2.Source = _bmi2
End Sub

Now that we have a way to load images, the next step is to handle the different type of comparison modes. We will start with the dual view since that will be our default mode. As mentioned earlier, the dual view basically shows both images side by side in such a way where both images are presented as one. The first image is partially shown, and the second is shown as a continuation of the first. In order to do this, we track the mouse movement when it is inside of the canvas by setting up a MouseMove event handler. Every time the mouse moves, we grab the new x,y coordinates. Since dual view is only concerned with left/right movement, we only pass in the x coordinate.

void canvas_MouseMove(object sender, MouseEventArgs e)
{
    double x = e.GetPosition(canvas).X;
    double y = e.GetPosition(canvas).Y;
    
    if (_comparisonMode == ComparisonMode.DualView)
        DisplayDualView(x);
    else if (_comparisonMode == ComparisonMode.Rectangle)
    {
        // ...
    }
}

Private Sub canvas_MouseMove(ByVal sender As Object, ByVal e As MouseEventArgs)
    Dim x As Double = e.GetPosition(canvas).X
    Dim y As Double = e.GetPosition(canvas).Y

    If _comparisonMode = ComparisonMode.DualView Then
        DisplayDualView(x)
    ElseIf _comparisonMode = ComparisonMode.Rectangle Then            ' .....
    End If
End Sub

private void DisplayDualView(double x)
{
    rcImg1.Rect = new Rect(0, 0, x, IMGHEIGHT);         // Show the first half (left side), up to xCoord
    rcImg2.Rect = new Rect(x, 0, IMGWIDTH, IMGHEIGHT);  // Show the second-half (right side), starting from xCoord

    Canvas.SetLeft(border, x);                          // make the separator start at x
    Canvas.SetTop(border, 0);                           // set the separator to the top
}

Private Sub DisplayDualView(ByVal x As Double)
    rcImg1.Rect = New Rect(0, 0, x, IMGHEIGHT)         ' Show the first half (left side), up to xCoord
    rcImg2.Rect = New Rect(x, 0, IMGWIDTH, IMGHEIGHT)  ' Show the second-half (right side), starting from xCoord

    Canvas.SetLeft(border, x) ' make the separator start at x
    Canvas.SetTop(border, 0)  ' set the separator to the top
End Sub

The DisplayDualView() method sets the image clip region of the first image to be a rectangle starting from pixel 0 to pixel x, then sets the clip region of the second image to be the remaining pixels. It uses our border to represent a break in the two images so that it is clear where our mouse is. Note that the border is defined as having a width of 2 and a height of 1080 in order to display as a single line separating the two images. The border size is defined when the comparison mode is selected.

For the next comparison, we will focus on is the swap view mode. This is the easiest one to implement. In this, we show the first image in its entirety until the user places the mouse inside the canvas. When that happens, the second image is displayed until the user moves the mouse outside of the canvas.

private void DisplaySwapView(bool mouseOver)
{
    if (!mouseOver)
    {
        rcImg1.Rect = new Rect(0, 0, IMGWIDTH, IMGHEIGHT);
        rcImg2.Rect = new Rect(0, 0, 0, 0);
    }
    else
    {
        rcImg1.Rect = new Rect(0, 0, 0, 0);
        rcImg2.Rect = new Rect(0, 0, IMGWIDTH, IMGHEIGHT);
    }
}

Private Sub DisplaySwapView(ByVal mouseOver As Boolean)
    If (Not mouseOver) Then
        rcImg1.Rect = New Rect(0, 0, IMGWIDTH, IMGHEIGHT)
        rcImg2.Rect = New Rect(0, 0, 0, 0)
    Else
        rcImg1.Rect = New Rect(0, 0, 0, 0)
        rcImg2.Rect = New Rect(0, 0, IMGWIDTH, IMGHEIGHT)
    End If
End Sub

Our DisplaySwapView() method is very basic in that it basically uses the clip region to show an entire image, or to show none of the image depending on the value of the passed in bool, mouseOver. When mouseOver is false, we show the first image, when true we show the second image. While we could have used the Visibility property to show/hide the images, we use clipping in order to be consistent with our other modes.

The rectangle view is the last and most involved. Since the user will be drawing a rectangle with the mouse, we must keep track of mouse movement, the state of the mouse button, and the coordinates for the rectangle. We also need to display the rectangle as the user is drawing it and update clipped area of the image in real time in. In order to make this easier, we create a class called MouseRectangle will contain the important information about the mouse state and rectangle size and location.

public class MouseRectangle
{
    public bool MouseLeftButtonDown { get; set;}
    private Rect _rtg;

    private double? _startX;
    private double? _startY;

    public bool RectangleIsDrawn { get; set; }
    public Rect Rectangle { get { return _rtg;} }

    public MouseRectangle()
    {
        RectangleIsDrawn = false;
    }

    public void Reset()
    {
        _startX = null;
        _startY = null;
        RectangleIsDrawn = false;
    }

    public void CalculateRectangle(double x, double y)
    {
        if (_startX == null)
            _startX = x;
        if (_startY == null)
            _startY = y;

        // pick the smaller of the two
        double left = Math.Min(_startX.Value, x);
        double top = Math.Min(_startY.Value, y);

        _rtg = new Rect(left, top, Math.Abs(_startX.Value - x), Math.Abs(_startY.Value - y));             
    }

    public bool InBoundsOfRect(double x, double y)
    {
        if (x > _rtg.Left && x < _rtg.Right &&
            y > _rtg.Top && y < _rtg.Bottom)
            return true;
        return false;
    }

}

Public Class MouseRectangle
    Private privateMouseLeftButtonDown As Boolean
    Public Property MouseLeftButtonDown() As Boolean
        Get
            Return privateMouseLeftButtonDown
        End Get
        Set(ByVal value As Boolean)
            privateMouseLeftButtonDown = value
        End Set
    End Property
    Private _rtg As Rect

    Private _startX? As Double
    Private _startY? As Double

    Private privateRectangleIsDrawn As Boolean
    Public Property RectangleIsDrawn() As Boolean
        Get
            Return privateRectangleIsDrawn
        End Get
        Set(ByVal value As Boolean)
            privateRectangleIsDrawn = value
        End Set
    End Property
    Public ReadOnly Property Rectangle() As Rect
        Get
            Return _rtg
        End Get
    End Property

    Public Sub New()
        RectangleIsDrawn = False
    End Sub

    Public Sub Reset()
        _startX = Nothing
        _startY = Nothing
        RectangleIsDrawn = False
    End Sub

    Public Sub CalculateRectangle(ByVal x As Double, ByVal y As Double)
        If Not _startX.HasValue Then
            _startX = x
        End If
        If Not _startY.HasValue Then
            _startY = y
        End If

        ' pick the smaller of the two
        Dim left As Double = Math.Min(_startX.Value, x)
        Dim top As Double = Math.Min(_startY.Value, y)

        _rtg = New Rect(left, top, Math.Abs(_startX.Value - x), Math.Abs(_startY.Value - y))
    End Sub

    Public Function InBoundsOfRect(ByVal x As Double, ByVal y As Double) As Boolean
        If x > _rtg.Left AndAlso x < _rtg.Right AndAlso y > _rtg.Top AndAlso y < _rtg.Bottom Then
            Return True
        End If
        Return False
    End Function

End Class

The MouseLeftButtonDown property keeps track of whether the left button is currently being held down. There is also a Rect (_rtg) object which contains the location and dimension of the rectangle that has been drawn. The _startX and _startY member variables are nullable doubles used to keep track of the initial location where the mouse button was pressed.

Our CalculateRectangle() method is what we use to create the dimensions and location of the rectangle. We start by looking at the inital x,y coordinates, and if they are not set, it means the rectangle hasn't been drawn. In that case, a 0 pixel rectangle will be created. If those values are already set, we create the rectangle based on the x and y values passed in.

The InBoundsOfRect() method is a simple helper function that will tell us whether or not an x,y coordinate is within the bounds of the rectangle.

When in rectangle mode, the rectangle drawing begins when the mouse's left button is pressed down, and when the mouse is de-pressed, the drawing ends, and we consider the rectangle complete.

void canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    _mouseRectangle.Reset();
    _mouseRectangle.MouseLeftButtonDown = true;
}

void canvas_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    _mouseRectangle.MouseLeftButtonDown = false;
    _mouseRectangle.RectangleIsDrawn = true;
}

Private Sub canvas_MouseLeftButtonDown(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
    _mouseRectangle.Reset()
    _mouseRectangle.MouseLeftButtonDown = True
End Sub

Private Sub canvas_MouseLeftButtonUp(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
    _mouseRectangle.MouseLeftButtonDown = False
    _mouseRectangle.RectangleIsDrawn = True
End Sub

While in rectangle mode, when the mouse moves over the canvas, there are two different states. If the mouse button is pressed, it means the user is drawing, and our goal is to update the rectangle to match the location where the user's mouse is in relation to the canvas.

...
else if (_comparisonMode == ComparisonMode.Rectangle)
{
    if (_mouseRectangle.MouseLeftButtonDown)
        DrawRectangle(x,y);
    else if (_mouseRectangle.RectangleIsDrawn)
        DisplayRectangleView(x,y);
}
...

...
ElseIf _comparisonMode = ComparisonMode.Rectangle Then
    If _mouseRectangle.MouseLeftButtonDown Then
        DrawRectangle(x,y)
    ElseIf _mouseRectangle.RectangleIsDrawn Then
        DisplayRectangleView(x,y)
    End If
End If
...

The DrawRectangle() method starts out by calculating the rectangle based on the current x,y coordinates. We then set the border to represent our rectangle outline by sitting its location based on the _mouseRectangle's Rectangle property. Finally we draw the first image in its entirety, and the second image will only display the portion of the image based on the rectangle's location and width/height information. This will result in seeing the the first image with the rectangular portion showing the corresponding 2nd image.

private void DrawRectangle(double x, double y)
{
    _mouseRectangle.CalculateRectangle(x,y);

    Canvas.SetLeft(border, _mouseRectangle.Rectangle.Left);
    Canvas.SetTop(border, _mouseRectangle.Rectangle.Top);
    border.Width = _mouseRectangle.Rectangle.Width;
    border.Height = _mouseRectangle.Rectangle.Height;

    rcImg1.Rect = new Rect(0, 0, IMGWIDTH, IMGHEIGHT);
    rcImg2.Rect = _mouseRectangle.Rectangle;
}

Private Sub DrawRectangle(ByVal x As Double, ByVal y As Double)
    _mouseRectangle.CalculateRectangle(x, y)

    Canvas.SetLeft(border, _mouseRectangle.Rectangle.Left)
    Canvas.SetTop(border, _mouseRectangle.Rectangle.Top)
    border.Width = _mouseRectangle.Rectangle.Width
    border.Height = _mouseRectangle.Rectangle.Height

    rcImg1.Rect = New Rect(0, 0, IMGWIDTH, IMGHEIGHT)
    rcImg2.Rect = _mouseRectangle.Rectangle
End Sub

When the mouse button has been de-pressed, and the rectangle has been completed, we add the ability to do a mouse over effect for the rectangular region. While the mouse is located outside of the drawn rectangle, we leave it as is. If the user moves the mouse within the rectangle, we want them to see what the original looked like, so we display only the first image.

private void DisplayRectangleView(double x, double y)
{
    rcImg1.Rect = new Rect(0, 0, IMGWIDTH, IMGHEIGHT);

    if (_mouseRectangle.InBoundsOfRect(x,y))
        rcImg2.Rect = new Rect(0, 0, 0, 0);
    else
        rcImg2.Rect = _mouseRectangle.Rectangle;

}

Private Sub DisplayRectangleView(ByVal x As Double, ByVal y As Double)
    rcImg1.Rect = New Rect(0, 0, IMGWIDTH, IMGHEIGHT)

    If _mouseRectangle.InBoundsOfRect(x, y) Then
        rcImg2.Rect = New Rect(0, 0, 0, 0)
    Else
        rcImg2.Rect = _mouseRectangle.Rectangle
    End If

End Sub

Conclusion & Future Work

Overall, the blu-ray DVD comparison utility is a pretty straight-forward Silverlight application that you can use to see the differences between two images. These images don't even need to be from blu-ray or DVD sources, but as long as they are the right dimension, a user can use it to see subtle differences between the two by allowing three different comparison modes. For blu-ray purchases when you already own the DVD, I think it helps to see what kind of benefit you will get by moving to blu-ray. It has been my experience that almost every blu-ray offers some type of picture upgrade over its DVD counterpart (and sound upgrade as well). Sometimes the differences are subtle, sometimes they are incredibly better. There are a lot of factors involved, but

Some future work that can be done to this is adding the ability to zoom in and out on the images in order to be able to see differences in a closer view. Soon there will be more movies which will be re-released on blu-ray and you can use the tool to compare the old release to the new one. This will require zooming to see some of the more finer differences. Other work can be done by creating a database to hold links, and have a control that allows a user to navigate to different movies and view different comparisons. I have started doing both of these, but they were not ready for this article.

One definite area that needs work is the UI. I am not good at laying out user interfaces or creating new xaml styles, so I left them default.

What would be really useful is a full motion comparison where you can use similar modes to see how two movies compare while in motion, but the biggest problem would be finding or creating the comparison material. Playback would be limiting as well since it requires higher end CPUs/video cards.

Comparisons

Here are a few URLs you can use to play with the comparison utility:

	URL of Standard Def image (DVD) / HD (Blu-ray)
Prince Caspian	http://gmontrone.com/BDCompare/imgs/pc_1_sd.png http://gmontrone.com/BDCompare/imgs/pc_1_hd.png
Prince Caspian	http://gmontrone.com/BDCompare/imgs/pc_2_sd.png http://gmontrone.com/BDCompare/imgs/pc_2_hd.png
Iron Man	http://gmontrone.com/BDCompare/imgs/im_1_sd.png http://gmontrone.com/BDCompare/imgs/im_1_hd.png
Iron Man	http://gmontrone.com/BDCompare/imgs/im_2_sd.png http://gmontrone.com/BDCompare/imgs/im_2_hd.png
Entrapment	http://gmontrone.com/BDCompare/imgs/Ent_4_SD.png http://gmontrone.com/BDCompare/imgs/Ent_4_HD.png

Note: Images were copied from the blu-ray threads of A/V Science Forum: www.avsforum.com .

Thanks

I would like to thank Brian Peek for introducing me to Coding4Fun, and taking the time to review my article and test the code.

Silverlight Dynamic Video Puzzle

Coding4Fun — Tue, 22 Jan 2008 22:02:00 GMT

My blog title says it all, Monkey see, Monkey Build. I saw Microsoft Surface's video puzzle and I needed to build it. I took this opportunity to play with Microsoft's new technology, Silverlight and build my own puzzle game. I couldn't find anything out on the Internet regarding dynamic video creation with Silverlight so I took it upon myself to do this. The screen shots in this demo will be in c#, however, everything should hold true for VB.

Clint Rutkas - Academic Developer Evangelist - Microsoft
Monkey see, Monkey Build

Difficulty: Intermediate
Time Required: 6-10 hours
Cost: Free
Software: Visual Studio Express, Silverlight SDK and Runtime for ~~1.1~~ 2.0 beta2
Download: ~~Download c#~~ - ~~Download VB~~ Updated to Silverlight 2.0 Beta - Download c#

Updates:

Fixed the Silverlight.Js, used the new version that is included with the 1.1 Refresh SDK so the proper installer will prompt now. Downloads are corrected also too.
6/20/2008 - Verified the solution works with Silverlight 2.0beta2.

Spec's, Requirements and headaches

So I had a few mental requirements for the application to "entertain" myself.

Be able to rotate the video blocks
Be able to translate
Be able to increase the difficulty of the puzzle on the fly.
Zero interaction with the keyboard

Simple, right? You want to see a demo too see some awesomeness? No problem, head over to my site and see it in person.

Microsoft Surface Video Puzzle

Clint's Silverlight Video Puzzle

To the Internet Batman!

To help save time building this, I first when out and attempting to see if anything has been done anything close to this before. I found

Also I need 2 small controls which I found out are in the Silverlight SDK. I needed horizontal slider controls for this app. While I know a text box control would have worked just as well, see requirement 4.

On the Silverlight community site, there is also a very nice demo showing the photo application in Surface with source code. This is where I learned the majority of what I needed. This application was very close to where I needed to go with mine. However, while it was close, it wasn't perfect. Parts of the photo application code are pretty much copied. This isn't the best way of doing this, but it is one way of doing it.

Toolbelt: check, Keyboard: check, Band-aids: check

So on to building it. I first started off with a new project and some XAML.

After clicking "OK", I get a very nice blank project.

We'll want to add an additional XAML object for the video blocks. Go to "Project -> Add New Item", select Silverlight Page, name it "VideoBlock.xaml" and click "OK".

So now we have everything we need for the most part, grab any video you have, if you don't have one, go to a site like TeamXbox and grab one from there. I used Windows Movie Maker and grabbed a snippet from The Office (best show ever).

In addition to all these files, we need to add in a reference to the Silverlight SDK to get a hold of the Slider controls. Go to "Project -> Add Reference", and add in the Silverlight.Samples.Controls.dll.

While we have a reference in the application, we still need the XAML to know about this also. So we'll add a line to link this in. It is the xmlns line that I bolded, XML name space, real clever, eh? We'll also change the background color to a gray so we can see it more easy.

<Canvas x:Name="parentCanvas"
        xmlns="http://schemas.microsoft.com/client/2007" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        Loaded="Page_Loaded" 
        x:Class="c4f_SilverlightVideoDemo.VideoBlock;assembly=ClientBin/c4f_SilverlightVideoDemo.dll"
        xmlns:uicontrol="clr-namespace:Silverlight.Samples.Controls;assembly=ClientBin/Silverlight.Samples.Controls.dll"
        Background="#CCCCCC" Width="640" Height="480">
</Canvas>

Silverlight 101

So in Silverlight, you have brushes which can "painted" onto objects. One of these brushes is called the VideoBrush which I'll talk about later on. For playing videos, one would use the MediaElement. Lets add this to our canvas.

<MediaElement x:Name="media" Source="theOffice.wmv" />

Now if we run the application at this point, we'll get the video playing. Lets sit back with some popcorn and enjoy this victory for a second or two. Now that we have this, lets hide it since this isn't what we want. We do that by adding in an XML attribute Opacity and setting it to 0.

On top of that element, lets add on some TextBlock elements and the sliders.

<Canvas x:Name="parentCanvas"
        xmlns="http://schemas.microsoft.com/client/2007" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        Loaded="Page_Loaded" 
        x:Class="VideoCreatedObjectTest.Page;assembly=ClientBin/VideoCreatedObjectTest.dll"
        xmlns:uicontrol="clr-namespace:Silverlight.Samples.Controls;assembly=ClientBin/Silverlight.Samples.Controls.dll" 
        Background="#CCCCCC" >
    <MediaElement x:Name="media" Source="theOffice.wmv" Opacity="0" />
    
    <TextBlock x:Name="sliderX" Canvas.Top="5" Canvas.Left="5" Text="X (01):" />
    <TextBlock x:Name="sliderY"  Canvas.Top="21" Canvas.Left="5" Text="Y (01):" />
    
    <uicontrol:Slider x:Name="hSliderX" Canvas.Top="8" Canvas.Left="55" />
    <uicontrol:Slider x:Name="hSliderY" Canvas.Top="25" Canvas.Left="55" />
</Canvas>

So now when we run the application, we get a blank screen but we can hear the audio from the video.

Super exciting I know. Now if you resize the browser, you'll notice also the canvas isn't resizing automatically. Lets fix that.

So in the code behind lets add in a new event on the BrowserHost object with the Resize event. We'll attach the Browser_Resize event to it.

private void BrowserHost_Resize(object sender, EventArgs e)
{
    // Set size to host size
    Width = BrowserHost.ActualWidth;
    Height = BrowserHost.ActualHeight;
}

VB.Net

Private Sub BrowserHost_Resize(ByVal sender As Object, ByVal e As EventArgs)
    ' Set size to host size
    Width = BrowserHost.ActualWidth
    Height = BrowserHost.ActualHeight
End Sub

Video as Paint?

So now that we have that small part done, lets get into more of the nitty gritty with video. As I said earlier, you'll use a VideoBrush to paint on the video.

We'll use the brush as the Fill for the rectangle we'll be using to show off the clip of the video we want.

Still not moving? Try explosives?

While doing this project, I discovered an interesting thing when using the VideoBrush and dynamically appending items on. Having items in the XAML rather than programmatically creating everything caused it not to work properly. Nothing would appear.

Throwback to how UI's use to be done

The XAML for this is a simplified version of the Surface demo Photo.XAML. You have a 3 Rectangles, 1 for the video, 1 for translation and 1 for rotation. Simple, no? Doing all this by hand gets a bit annoying since you need to nest everything properly.

Here is the more interesting VideoBrush code. You need the name from the MediaElement along with the how much of an offset you want the video. Since your moving the "camera" in, this value needs to be negative.

public delegate void SetActiveVideo(VideoBlock videoBlock, ActionType actionType, Point photoCenter, Point lastPosition);
public VideoBlock(string mediaName, int offsetX, int offsetY, int rectWidth, int rectHeight, SetActiveVideo functionPointer)
{
    // additional code here
    Rectangle video = new Rectangle();
    VideoBrush vb = new VideoBrush();
    TranslateTransform videoTransform = new TranslateTransform();
    videoTransform.X = -1 * offsetX;
    videoTransform.Y = -1 * offsetY;

    vb.SourceName = mediaName;
    vb.Transform = videoTransform;
    vb.Stretch = Stretch.None;
    vb.AlignmentX = AlignmentX.Left;
    vb.AlignmentY = AlignmentY.Top;

    video.Width = Width;
    video.Height = Height;
    video.Fill = vb;
    // additional code here
}

VB.Net

Public Delegate Sub SetActiveVideo(ByVal videoBlock As VideoBlock, ByVal actionType As ActionType, ByVal photoCenter As Point, ByVal lastPosition As Point)
Public Sub VideoBlock(ByVal mediaName As String, ByVal offsetX As Integer, ByVal offsetY As Integer, ByVal rectWidth As Integer, ByVal rectHeight As Integer, ByVal functionPointer As SetActiveVideo)
      ' additional code here
      Dim video As Rectangle = New Rectangle
      Dim vb As VideoBrush = New VideoBrush
      Dim videoTransform As TranslateTransform = New TranslateTransform
      videoTransform.X = ((1 * offsetX)  * -1)
      videoTransform.Y = ((1 * offsetY)  * -1)
      vb.SourceName = mediaName
      vb.Transform = videoTransform
      vb.Stretch = Stretch.None
      vb.AlignmentX = AlignmentX.Left
      vb.AlignmentY = AlignmentY.Top
      video.Width = Width
      video.Height = Height
      video.Fill = vb
      ' additional code here
End Sub

There is a mouse on my object!

So now we have our video block element prepped and ready. There are additional events added in, but they are fairly boiler plate. When looking at this code, you see I pass in a delegate, a function pointer if you will. Why do I do this? This is how the mouse position is calculated. I bet this could be redone better, but this is how I did it. The parent element, the canvas, has the mouse position I need to calculate proper translation and rotation, however, mouse events on the VideoBlock object will give me the mouse position only on that element. So I may be at point 150, 150 on the screen, on the VideoBlock object, I'm actually at 10,15.

Additionally, this approach allows me to move the VideoBlock to the top of the objects. Once again, this could be done other ways, this is how I chose to do it.

So on all my mouse related all boils down to doing the exact same function. Since events are bubbled, a mouse movement on a VideoBlock is also a mouse movement on the root canvas.

private void root_MouseLeftButtonDown(object sender, MouseEventArgs e)
{
    HandleMouseLeftButtonDown(ActionType.Selecting, e);
}

private void translateControls_MouseLeftButtonDown(object sender, MouseEventArgs e)
{
    HandleMouseLeftButtonDown(ActionType.Moving, e);
}

private void rotateScaleControls_MouseLeftButtonDown(object sender, MouseEventArgs e)
{
    HandleMouseLeftButtonDown(ActionType.RotatingScaling, e);
}

private void HandleMouseLeftButtonDown(ActionType actionType, MouseEventArgs e)
{
    if (functionPointer != null)
        functionPointer(this, actionType,
            new Point(translateTransform.X + rotateTransform.CenterX,
                  translateTransform.Y + rotateTransform.CenterY), e.GetPosition(null));
}

VB.Net

    Private Sub root_MouseLeftButtonDown(ByVal sender As Object, ByVal e As MouseEventArgs)
        HandleMouseLeftButtonDown(ActionType.Selecting, e)
    End Sub
    
    Private Sub translateControls_MouseLeftButtonDown(ByVal sender As Object, ByVal e As MouseEventArgs)
        HandleMouseLeftButtonDown(ActionType.Moving, e)
    End Sub
    
    Private Sub rotateScaleControls_MouseLeftButtonDown(ByVal sender As Object, ByVal e As MouseEventArgs)
        HandleMouseLeftButtonDown(ActionType.RotatingScaling, e)
    End Sub
    
    Private Sub HandleMouseLeftButtonDown(ByVal actionType As ActionType, ByVal e As MouseEventArgs)
        If (Not (functionPointer) Is Nothing) Then
            functionPointer(Me, actionType, New Point((translateTransform.X + rotateTransform.CenterX), 
              (translateTransform.Y + rotateTransform.CenterY)), e.GetPosition(Nothing))
        End If
    End Sub

You built a car out of all these parts?

So we move back from VideoBlock.xaml.cs to Page.xaml.cs

We've created our primary object for painting video, lets populate it. First, how do we know how big the media file is? With the MediaOpened event! And we'll restart the video with the MediaEnded event.

So here is the full Page_Load event from Page.xaml.cs

public void Page_Loaded(object o, EventArgs e)
{
    // Required to initialize variables
    InitializeComponent();

    BrowserHost.Resize +=new EventHandler(BrowserHost_Resize);
    media.MediaOpened += new EventHandler(media_MediaOpened);
    media.MediaEnded += new EventHandler(media_MediaEnded);
    MouseLeftButtonUp += Page_MouseLeftButtonUpOrLeave;
    MouseLeave += Page_MouseLeftButtonUpOrLeave;
    MouseMove += Page_MouseMove;

    hSliderX.Range = new ValueRange(1, 20);
    hSliderY.Range = new ValueRange(1, 20);
    hSliderX.ValueChanged += new EventHandler(slider_ValueChanged);
    hSliderY.ValueChanged += new EventHandler(slider_ValueChanged);

    hSliderX.SetValue(ZIndexProperty, 500);
    hSliderY.SetValue(ZIndexProperty, 500);
    sliderX.SetValue(ZIndexProperty, 500);
    sliderY.SetValue(ZIndexProperty, 500);
}

VB.Net

    Public Sub Page_Loaded(ByVal o As Object, ByVal e As EventArgs)
        ' Required to initialize variables
        InitializeComponent
        AddHandler BrowserHost.Resize, AddressOf Me.BrowserHost_Resize
        AddHandler media.MediaOpened, AddressOf Me.media_MediaOpened
        AddHandler media.MediaEnded, AddressOf Me.media_MediaEnded
        MouseLeftButtonUp = (MouseLeftButtonUp + Page_MouseLeftButtonUpOrLeave)
        MouseLeave = (MouseLeave + Page_MouseLeftButtonUpOrLeave)
        MouseMove = (MouseMove + Page_MouseMove)
        hSliderX.Range = New ValueRange(1, 20)
        hSliderY.Range = New ValueRange(1, 20)
        AddHandler hSliderX.ValueChanged, AddressOf Me.slider_ValueChanged
        AddHandler hSliderY.ValueChanged, AddressOf Me.slider_ValueChanged
        hSliderX.SetValue(ZIndexProperty, 500)
        hSliderY.SetValue(ZIndexProperty, 500)
        sliderX.SetValue(ZIndexProperty, 500)
        sliderY.SetValue(ZIndexProperty, 500)
    End Sub

So now that we have the media loaded, we can use the media.NaturalVideoWidth and media.NaturalVideoHeight properties to find out exactly how big the video is! I have a function that is fired off when the page is first loaded or a slider value has changed. This is how we chop it up.

private void prepVideoObjects()
{
    int totalPhotosX = (int)hSliderX.Value;
    int totalPhotosY = (int)hSliderY.Value;

    if (lastX != totalPhotosX || lastY != totalPhotosY)
    {
        lastX = totalPhotosX;
        lastY = totalPhotosY;

        sliderX.Text = string.Format("X ({0}):", totalPhotosX.ToString("D2"));
        sliderY.Text = string.Format("Y ({0}):", totalPhotosY.ToString("D2"));

        int rectWidth = (int)Math.Floor(media.NaturalVideoWidth / totalPhotosX);
        int rectHeight = (int)Math.Floor(media.NaturalVideoHeight / totalPhotosY);
        Random random = new Random();

        // remove all old videoblocks
        for (int i = Children.Count - 1; i > 0; i--)
        {
            if (Children[i].GetType() == typeof(VideoBlock))
                Children.RemoveAt(i);
        }

        for (int x = 0; x < totalPhotosX; x++)
        {
            for (int y = 0; y < totalPhotosY; y++)
            {
                VideoBlock vb = new VideoBlock(media.Name, x * rectWidth, y * rectHeight, rectWidth, rectHeight, SetActivePhoto);
                shuffle(vb, random);
                Children.Add(vb);
            }
        }
    }
}

VB.Net

Private Sub prepVideoObjects()
        Dim totalPhotosX As Integer = CType(hSliderX.Value,Integer)
        Dim totalPhotosY As Integer = CType(hSliderY.Value,Integer)
        If ((lastX <> totalPhotosX)  _
                    OrElse (lastY <> totalPhotosY)) Then
            lastX = totalPhotosX
            lastY = totalPhotosY
            sliderX.Text = String.Format("X ({0}):", totalPhotosX.ToString("D2"))
            sliderY.Text = String.Format("Y ({0}):", totalPhotosY.ToString("D2"))
            Dim rectWidth As Integer = CType(Math.Floor((media.NaturalVideoWidth / totalPhotosX)),Integer)
            Dim rectHeight As Integer = CType(Math.Floor((media.NaturalVideoHeight / totalPhotosY)),Integer)
            Dim random As Random = New Random
            ' remove all old videoblocks
            Dim i As Integer = (Children.Count - 1)
            Do While (i > 0)
                If (Children(i).GetType = GetType(VideoBlock)) Then
                    Children.RemoveAt(i)
                End If
                i = (i - 1)
            Loop
            Dim x As Integer = 0
            Do While (x < totalPhotosX)
                Dim y As Integer = 0
                Do While (y < totalPhotosY)
                    Dim vb As VideoBlock = New VideoBlock(media.Name, (x * rectWidth), (y * rectHeight), rectWidth, rectHeight, SetActivePhoto)
                    shuffle(vb, random)
                    Children.Add(vb)
                    y = (y + 1)
                Loop
                x = (x + 1)
            Loop
        End If
    End Sub

Last but not least, lets see how the mouse movements are handled on the page.

private void Page_MouseMove(object sender, MouseEventArgs e)
{
    if (null != activeVideoBlock)
    {
        // Perform the appropriate transform on the active photo
        Point position = e.GetPosition(null);
        switch (currentActionType)
        {
            case VideoBlock.ActionType.Moving:
                // Move it by the amount of the mouse move
                activeVideoBlock.Translate(position.X - currentLastPosition.X, position.Y - currentLastPosition.Y);
                break;
            case VideoBlock.ActionType.RotatingScaling:
                // Rotate it according to the angle the mouse moved around the photo's center
                double radiansToDegrees = 360 / (2 * Math.PI);
                double lastAngle = Math.Atan2(currentLastPosition.Y - currentVideoCenter.Y, currentLastPosition.X - currentVideoCenter.X) * radiansToDegrees;
                double currentAngle = Math.Atan2(position.Y - currentVideoCenter.Y, position.X - currentVideoCenter.X) * radiansToDegrees;
                activeVideoBlock.Rotate(currentAngle - lastAngle);

                break;
        }
        currentLastPosition = position;
    }
}

VB.Net

    Private Sub Page_MouseMove(ByVal sender As Object, ByVal e As MouseEventArgs)
        If (Not (activeVideoBlock) Is Nothing) Then
            ' Perform the appropriate transform on the active photo
            Dim position As Point = e.GetPosition(Nothing)
            Select Case (currentActionType)
                Case VideoBlock.ActionType.Moving
                    ' Move it by the amount of the mouse move
                    activeVideoBlock.Translate((position.X - currentLastPosition.X), (position.Y - currentLastPosition.Y))
                Case VideoBlock.ActionType.RotatingScaling
                    ' Rotate it according to the angle the mouse moved around the photo's center
                    Dim radiansToDegrees As Double = (360 / (2 * Math.PI))
                    Dim lastAngle As Double = (Math.Atan2((currentLastPosition.Y - currentVideoCenter.Y), (currentLastPosition.X - currentVideoCenter.X)) * radiansToDegrees)
                    Dim currentAngle As Double = (Math.Atan2((position.Y - currentVideoCenter.Y), (position.X - currentVideoCenter.X)) * radiansToDegrees)
                    activeVideoBlock.Rotate((currentAngle - lastAngle))
            End Select
            currentLastPosition = position
        End If
    End Sub

Wrapping it up

So as you can see, Silverlight is pretty powerful once you figure out how to tame it. I used example base code and modified it to suit my own needs to dynamically alter a video in real time. There are a few code tweaks that could happen to improve this code and I'm betting with some additional effort, one could remove the delegate. In addition, you could add in edge detection code and a timer to make this into a true video puzzle game. This was a pet project I worked on while I was at the airport. This demo can be downgraded to Silverlight 1.0 also. I don't believe anything I did was really Silverlight 1.1 (now 2.0) only.

Clint's Bio:

Clint is an academic developer evangelist for Microsoft. His two primary development languages are C# and JavaScript. He has built a Disco Dance Floor too! In his off time, he whips up other random weird projects and does twenty something activities with his friends. His next two big projects are an automated bartender and a skateboard segway. Clint’s blog is betterthaneveryone.com and can be emailed at crutkas@microsoft.com if you have any question.