• Module 1: Getting Started – Architecture / framework
• Module 2: Movement and collision detection
• Module 3: Design – Sprites, boards and dialogs
• Module 4: Animations and sound
• Module 5: Initialization and Deployment
• Module 6: Advanced concepts (Physics, Multiplayer, Optimization)

Make sure to check out the article at http://www.microsoft.com/expression/news-press/newsletter/

Code: Game.zip

• Module 1: Getting Started – Architecture / framework
• Module 2: Movement and collision detection
• Module 3: Design – Sprites, boards and dialogs
• Module 4: Animations and sound
• Module 5: Initialization and Deployment
• Module 6: Advanced concepts (Physics, Multiplayer, Optimization)

Make sure to check out the article at http://www.microsoft.com/expression/news-press/newsletter/

Code: Game.zip

• Module 1: Getting Started – Architecture / framework
• Module 2: Movement and collision detection
• Module 3: Design – Sprites, boards and dialogs
• Module 4: Animations and sound
• Module 5: Initialization and Deployment
• Module 6: Advanced concepts (Physics, Multiplayer, Optimization)

Make sure to check out the article at http://www.microsoft.com/expression/news-press/newsletter/

Code: Game.zip

• TransformGroup
  • RotateTransform – Rotates by an angle
  • ScaleTransform – Scales by a a given X and Y
  • SkewTransform – Skews an element by an X and Y angle
  • TranslateTransform – Moves and object by a specified X and Y

As an alternative, you can use the MatrixTransform as a way to manipulate a matrix directly.

What is a Matrix

In Silverlight a matrix is a 3×3 array of numbers used to define affine transformations.  Here is a great definition of a Affine transformation taken from an excellent tutorial on using matrices in Flash.

Affine transformations are transformations that preserve collinearity and relative distancing in a transformed coordinate space. This means points on a line will remain in a line after an affine transformation is applied to the coordinate space in which that line exists.

Silverlight uses row-major matrices, such that vectors are expressed as rows and not column vectors.  Here is what the matrix structure looks like.

Since Silverlight only supports affine transforms, the values in the right column are always 0,0,1.  Below is an example of a Silverlight UserControl that demonstrates how manipulating each of the matrices values, will transform a rectangle.

In my demonstration, using the appropriate TextBox  you can rotate, scale, skew, and move the rectangle. For example, if you set M12 equal to 0.5 and M21 equal to -0.5 you will rotate the rectangle 45 deg.  If you set M11 and M22 equal to 1.5 you will scale the rectangle proportionately to approximately one and half times its original size.

Procedurally, these values can be set by defining a Matrix struct and setting the appropriate property (M11, M12, M21, M22, OffsetX, OffsetY).  The matrix can be applied to an objects RenderTransform by simply setting the MatrixTransform.Matrix property.

Matrix martix = new Matrix(1.5,0.5,-0.5,1.5,0,0);
MatrixTransform transform = new MatrixTransform();
transform.Matrix = matrix;
rectangle.RenderTransform = transform;

Later in the week I will post an example that uses a MatrixTransform to demonstrate an animation that reacts to mouse movement.  Nothing crazy, but a nice example of where a Matrix can create an interesting effect with very little code.

Code: MatrixExample.zip

To reference this embedded resource within xaml, you can set the source attribute equal to the following

<Image Source="ImageSource;component/1.jpg"…>

//Image 2 - Loaded via bitmap image data
// - Build Action=Resource
// - Copy to Output Directory = Do Not Copy
BitmapImage bmpImg2 = new BitmapImage();
Uri uri2 = new Uri("2.jpg", UriKind.Relative);
bmpImg2.UriSource = uri2;
image2.Source = bmpImg2;

Image 3 – Build Action = Content – If you do not desire to embed an image within your assembly, you can set its build action to “Content” and that image will be packaged within the XAP.

//Image 3 - Load image that is included in the XAP file
// - Build action = Content
// - Copy to Output Directory = Do Not Copy
BitmapImage bmpImg3 = new BitmapImage();
Uri uri3 = new Uri("/3.jpg", UriKind.Relative);
bmpImg3.UriSource = uri3;
image3.Source = bmpImg3;

(Note: The image file name in the URI is proceeded with a front slash (/).  This is required to indicate that the image is relative to the location of the assembly.)

Image 4 – Build Action = None / Copy to Output Directory = Copy always - In the instance that you don’t want the image to be downloaded locally (packaged in XAP), you can set the “Build Action” equal to “None” and set the “Copy to Output Directory” equal to “Copy always”. 

Using the “TestPage.html” page which is automatically generated in your projects “bin” directory you can reference the image location relatively, just as you did in sample 3.

//Image 4 - Load image that is located at some relative url
// - Build action = None
// - Copy to Output Directory = Copy always 
//      (Note: I had to manually copy the image to 
//       my web projects ClientBin directory)
BitmapImage bmpImg4 = new BitmapImage();
Uri uri4 = new Uri("/4.jpg", UriKind.Relative);
bmpImg4.UriSource = uri4;
image4.Source = bmpImg4;

Code: ImageSource.zip

Please note: This sample was made into a Code Plex project and is maintained there. Please download all source from http://www.codeplex.com/sl2videoplayer/

Back in April I created a very simple Video Player in Silverlight 2 Beta 1 which Tim Heuer took to a whole new level. In his first pass he added dynamic resizing and initParams to load the video source. Then back a few weeks ago Tim brought it up to speed for Beta 2 and integrated the "VisualStateManager" to get the ToggleButton to function correctly. I love how it turned out.

One thing that I really wanted to include in my first version was control for TimelineMarkers. Unfortunately in Beta 1 I had some issues with dynamic markers, and decided to hold off until Beta 2 was released. Microsoft Expression Encoder 2 is a great tool and makes it very easy to insert markers that fire events during video playback. Markers are very simple, they define a TimeSpan of when to fire the "MarkerReached" event, and define some text that describes the marker.   In my example I will use this text as the copy for my Marker Popup.  Here is how I chose to visualize my markers in the video player.

To achieve this effect, I created a custom UserControl called "Marker.xaml". This control contains a single animation which will fade in the text, and fade it out again after a predefined amount of time.  The control is comprised of a TextBlock and a “Arrow” path that can be moved left and right within the second row of a Grid control.  This gives me the ability to control where the Arrow visualizes in relation to my Timeline Slider control.

Based on the number of markers encoded in the video an equal number of markers will be placed in the “MediaControl”.  There position on the slider time line is determined by calculating the following:

The position is not absolute, but close enough to where the “Thumb” in the slider control will exist at that moment the marker should popup.   Once I have placed a marker into the appropriate Grid on my MediaControl I store it in a generic Dictionary keyed off of the time it should be displayed. This allows me to very quickly find the UserControl when the Media.MarkerReached event fires or the player goes into fullscreen mode.   In the event that the user wants to play the video in fullscreen, I must reposition my markers relative to the new ActualWidth of the  sliderTimeline. 

Here is how it all turned out. 

Code: Code Plex

The goal of this presentation was to create a more “developer” focused exploration into a development architecture one could use for building a casual game. In this example, one which leverages pixel-based movement. As with everything in development, there is no real right or wrong architecture, just proven patterns, that have proven scalability, flexibility and efficiency.

Concept

Build a simple game where a player has to move around a box and avoid a series of randomly moving spheres. Each sphere can collide with both the bounds of the box, each other and the player. The player can only be collided with 5 times or the game is over. Player movement is controlled by hitting a combination of arrow keys which changes the vector angle of the players movement. The players speed is consistent, until that player collides with one of the spheres. The behavior of the collision will change based on the element being collided with..

Framework

Last fall Microsoft released its first version of the Model-View-Controller (MVC) framework for ASP.NET as a way to help developers implement this proven separation pattern into ASPX site design. If you have not got a chance to use I strongly recommend giving it a try.

At a very high level MVC divides an application’s implementation into three components: models, views, and controller. This “separation” is used specifically as a way to improve a developers ability to decouple the presentation layer from the business logic. In game development, MVC is an excellent way to build a foundation which simplifies a developers ability to control state such as movement and collision detection. Unfortunately a formal MVC framework does not exist for Silverlight 2, but implementing the pattern is pretty simple. The image to left illustrates how I have implemented the MCV pattern in my example project.

Exploring further you will see that I do not consider “page.xaml” a view. This is intentional. page.xaml is simply a way to get my controller instantiated. All game elements will be inserted into my “Shell.xaml” view by my controller, and this UserControl will be inserted into the page’s LayoutRoot after the page’s xaml has been loaded. My controller will get a reference to this root UIElement via constructor dependency injection, a common approach seen in MVC implementations. Here is the code found within page.xaml.cs.

public partial class Page : UserControl
{
    private Controllers.Controller _controller;
    private Views.Shell _shell = new Views.Shell();
    public Views.Shell Shell
    {
        get { return _shell; }
        set { _shell = value; }
    }
 
    public Page()
    {
        InitializeComponent();
        this.Loaded += new RoutedEventHandler(Page_Loaded);
    }
 
    void Page_Loaded(object sender, RoutedEventArgs e)
    {
        LayoutRoot.Children.Add(_shell);
        _controller = new Controllers.Controller(this);
        _controller.Initialize();
    }
}

Controller

In this game I have a single controller which acts as the central nervous system of my game. It controls the following:

• Primary game timer (tick)
  • Moves Player, Balls and checks for Collisions
• Inserts the appropriate dialogs and listens to events from each
  • Start, End, Next Level
• Listening for events from my primary model
  • Collision, NextLevel, GameOver and StopMovement
• Captures the approriate keyboard inputs
  • Left, Right, Up, Down, Left-Up, Left-Down, Right-Up, Right-Down

Game Model

The controller instantiates and holds a reference to my primary game model which will maintain the games state and expose any methods used to interact with the “Player” and “Hazards” [ball]). The model is the single places that knows how to start a level, insert the player and place each of the balls into a level. When events occur like the player collides with a ball, the model fires an event to the controller indicating what transpired. The controller decides what this means visually to the game play (updates the “Shell” to indicate a new Hit count). The model maintains state so it will be responsible for deciding when the game is over. A game is over when either time has expired (15 seconds) or five collisions have occurred. As with a collision, the model will fire an event to the controller when the game is over.

Behaviors

Part of building this sample was to build upon some of the previous work I have done on spherical collisions. Is previous posts, I have shown how to react to both an elastic and inelastic collision. In this example I refer to elastic behavior as “Deflect” and inelastic as “Bump”. The idea is that if I build an object oriented methodology of defining collision behavior, one based on inheritance, I can expand the types of hazards as I develop new behaviors. For example, the next behavior I intend to develop is one which hazards chases the player, when the hazard gets within a specified proximity of the player.

Here is the game and source.

Code: CodeCampGame.zip

I am pretty certain I am taking some liberties with accuracy of each collision, but nonetheless one can see the effect two spheres have on momentum.  Interestingly, if you allow the demo to run long enough most if not all of the balls will stop colliding. The first thing I needed to do to create my sample was to create a UserControl that would represent my sphere. Within this control I created a series of properties and two public Method: “Move()” and “Collision()”. Since each sphere will move through my container the same way, I can encapsulate this logic within the control itself. Here is that code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

public void Move(Rect bounds)
{
    //add the current vector to each X/Y 
    this.X += this.VX;
    this.Y += this.VY;
 
    //check to see if this sphere has collided with an adjacent wall
    //if so, then reverse its vector.  Since my bounding box is definable 
    //pass in a Rect struct
 
    //check the left and the right of the bound box
    if (this.X < bounds.X && this.VX < 0)
        this.VX = -this.VX;
 
    if(this.X > (bounds.Right-this.Distance) && this.VX > 0)
        this.VX = -this.VX;
 
    //check the top and the bottom
    if (this.Y < bounds.Y && this.VY < 0)
        this.VY = -this.VY;
 
    if(this.Y > (bounds.Bottom-this.Distance) && this.VY > 0)
        this.VY = -this.VY;
 
    //move this sphere to its new X,Y position
    _translate.X = this.X;
    _translate.Y = this.Y;
}

Since my container floats in the center of my Page.xaml I use a “Rect” struct to hold the X,Y, Width and Height of the UIElement that that will confine the spheres. I pass this “Rect” as an argument. Depending on the surface that the object is colliding with, I move the sphere and reverse the vector by either adding or subtracting itself from VX or VY. In addition to determining how itself moves, the sphere I also determines the effect of a collision. This method is pretty big, but is broken down into four sections. The first determines the time in which the two spheres collide where is the remaining determine the effect of each type of collision.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

public bool Collision(Sphere s)
{
    // find the time when the two spheres really collide with each other.
    double dx = (this.X + this._radius) - (s.X + s.Radius);
    double dy = (this.Y + this._radius) - (s.Y + s.Radius);
 
    //calculate the distance between two balls 
    double distance = dx * dx + dy * dy;
    double distanceSqrt = Math.Sqrt(distance);
 
    double dvx = this.VX - s.VX;
    double dvy = this.VY - s.VY;
 
    if (distanceSqrt > (this._radius + s.Radius))
        return false;
    //There are two basic kinds of collisions, elastic and inelastic:
    //if an elastic collision occurs send both spheres rebounding backwards
    //with no loss in total kinetic energy.
 
    //Note: since both of our spheres have the same mass the only way to determine 
    //which type of collision will occur is to look at velocity.
    double collision = 0.0;
    if (this.CollisionType == CollisionTypes.Elastic || 
	s.CollisionType == CollisionTypes.Elastic)
    {
        collision = dvx * dx + dvy * dy;
        if (collision > 0)
            return false;
 
        collision /= distance;
 
        double deltaVX = dx * collision;
        double deltaVY = dy * collision;
 
        //deflect this sphere
        this._vx -= deltaVX;
        this._vy -= deltaVY;
        //deflect the sphere that was part of the collision
        s.VX += deltaVX;
        s.VY += deltaVY;
    }
    //if a partial inelastic collision occurs the spheres collide and some 
    //kinetic energy is lost...both masses decelerate
    else if(this.CollisionType == CollisionTypes.Inelastic || 
	s.CollisionType == CollisionTypes.Inelastic)
    {
        collision = dvx * dx + dvy * dy;
        if (collision > 0)
            return false;
 
        collision /= distance*2;
 
        double deltaVX = dx * collision;
        double deltaVY = dy * collision;
 
        //deflect this sphere
        this._vx -= deltaVX;
        this._vy -= deltaVY;
        //deflect the sphere that was part of the collision
        s.VX += deltaVX;
        s.VY += deltaVY;
    }
    //if a magnetic collision occurs we would have a perfectly inelastic collision
    else if (this.CollisionType == CollisionTypes.Magnetic && 
	s.CollisionType == CollisionTypes.Magnetic)
    {
        //the sphere causing the collision will continue its forward momentum 
        //attaching itself to the adjacent sphere
        s.VX = this.VX;
        s.VY = this.VY;
    }
    return true;
}

Code: SphericalCollision.zip

In my example I have a total of 16 random tiles displayed from a collection of 42 different images. Any image not currently displayed is available to be randomly selected to replace an existing tile.  Here is how I achieve the effect. 

The project is comprised of a “Tile” UserControl , a class called “Media” and two generic lists (one to store references to the 16 tiles and one to store all 42 URI to the images).  The first step is to fill my page.xaml grid with 16 tiles.   Here is a snip of the code used to fill the grid.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

private void BuildCollection()
{
    int row = -1;
    int col = 0;
    for (int i = 0; i < 42; i++)
    {
        Uri imageUri = new Uri(string.Format("Images/{0}.png", 
		(i+1).ToString()), UriKind.Relative);
        if (i <= 16)
        {
            Tile tile = new Tile();
            Media media =  new Media(imageUri, true);
            tile.Media = media;
 
            if (col % 4 == 0)
            {
                row++;
                col = 0;
            }
            tile.SetValue(Grid.ColumnProperty, col.ToString());
            tile.SetValue(Grid.RowProperty, row.ToString());
            this.LayoutRoot.Children.Add(tile);
 
            col++;
            _tiles.Add(tile);
            _images.Add(media);
 
        }
        else
            _images.Add(new Media(imageUri, false));
    }
}

For those of you just getting familiar with the “Grid” control you might not be aware that it supports implicitly specifying columns and rows. In this example I leverage this to ensure my tiles form a nice 4×4 grid.  

As you can see from the code, I have chosen to store only the URI to the image and not store the image itself. I had some difficulty storing a “BitmapImage” object in my collection and retrieving it consistently when I was ready to flip a tile. The URI seems less efficient, was reliable.

Now that I have built up my grid and two collections, I can use a DispacherTimer to randomly select a tile and randomly select an image to be used as the backside of the flip. He is how that code looks.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

void _timer_Tick(object sender, EventArgs e)
{
    System.Random RandNum = new System.Random();
    int randomTile = RandNum.Next(16);
 
    bool match = false;
    while(!match)
    {
        int randomImage = RandNum.Next(42);
        if(!_images[randomImage].Displayed)
        {
            _images[randomImage].Displayed = true;
            _tiles[randomTile].Media.Displayed = false;
            _tiles[randomTile].Flip(_images[randomImage]);
            match=true;
            break;
        }
    }
}

As you can see I am using a boolean property in the “Media” object to determine if an image is already displayed. The second level of randomization is there to help ensures that I am giving each image equal chance of getting displayed.

If one were to examine the “Tile” UserControl, it looks almost exactly like the code I created for the 3D flip animation example. In  this situation instead of firing the flip based on a button click, I use the followings public method called from my main page.xaml DispatcherTimer tick.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

public void Flip(Media media)
{
    this.Media = media;
 
    if (_Front)
    {
        this.ImageBack.Source = new BitmapImage(_Media.ImageUri);
        _sb.Pause();
        _sb.AutoReverse = false;
        _sb.Begin();
        _Front = false;
    }
    else
    {
        this.ImageFront.Source = new BitmapImage(_Media.ImageUri);
        _sb.Pause();
        _sb.AutoReverse = true;
        _sb.Seek(_tsLastFrame);
        _sb.Resume();
 
        _Front = true;
    }
}

Code: LeopardSreenSaver.zip