Creating Games with Silverlight: A Simple Shooter

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.

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.

• BlueRoseGames.com
• Farseer Games
• Cameron Albert
• Mike Snow

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:

C#

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);
    }
}

VB

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:

C#

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);
    }
}

VB

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:

C#

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;
    }
}

VB

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:

C#

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");
    }
}

VB

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>

C#

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

VB

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:

C#

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);
}

VB

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:

C#

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);
    }
}

VB

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:

C#

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);
    }
}

VB

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:

C#

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;
    }
}

VB

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:

C#

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;
    }
}

VB

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:

C#

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;
    }
}

VB

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:

C#

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();
    }
}

VB

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:

C#

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

VB

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.

C#

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; }
}

VB

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:

C#

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();
    }
}

VB

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.