Silverlight Invaders - Designing Games in Silverlight 4.0 Part I

Silverlight Invaders is based on the classic space invaders game. This article will step you through some of the techniques for creating a 2D first person shooter game using Silverlight 4.0


figure1.png

Figure 1 -
Silverlight Invaders in Action

Introduction

A long time ago I wrote an invaders application in C# that ran in a Windows Form application.  Later I wrote one for the pocket PC and about a year ago I wrote one for Silverlight.  Not that I'm obsessed with the game or anything, but it is a fun one to duplicate because it's not overly complicated but it has all the components of a real-time arcade game.  Duplicating it in Silverlight proved to be trickier than the other platforms, but that was a year ago.  I believe in the newer Silverlight 4, this would have been a lot easier.

The Design

Because it's a graphics game, the design lends itself nicely to objects.  In Silverlight invaders there is a ship, several invaders, shields, bullets, bombs, and a flying saucer.  In the design shown below, all graphical objects inherit from a Sprite class.  The Sprite class has methods for both drawing and moving the objects.  All of the graphical objects take a constructor that takes the path of the image it is describing.    All images are constructed for the game when it starts and added to the Visual Tree.  The sprite class encapsulates all the movement and creation nicely so that objects that are created for the game don't have to concern themselves with the details of Silverlight.

The game engine consists of a storyboard that keeps resetting itself.  This seems to work well because you can just handle the mechanics and updates of the game in the  Completed event of the storyboard.  Each time the Completed event is fired, ships, invaders, bombs and bullets are updated.

All graphic objects are handled with Canvases, so every object in the game is pretty much "drawn" on the screen in the Completed event handler.  All canvases are moved on the screen dynamically through Translation Render Transforms.



designa.png

Design Reverse Engineered Using WithClass 2000

 

The Code

There is too much happening with this game to describe with one article, so we will only pick a few interesting methods to talk about.  You can purchase the full  source code for the game at SilverlightGameSpace if you are interested in all aspects of the code.  Part of the purchase for the source code will go towards C# Corner to help pay authors for their generous contributions to the C# Corner community.  The source code includes the full game including sounds, graphics, and the game classes and simple storyboard engine.  It also includes all project files and is ready to build.

Generating a Sprite

In this article, we use the Canvas as a way to hold our individual bitmaps that represent game objects.  When we initialize a sprite, we can construct a canvas dynamically, add an image to it, and add it to the Visual Tree on the page.  Below is the InitializeSprite call to create a sprite in Silverlight.  It basically takes the image and places it inside a canvas container.  The sprite canvas is then attached to the main game canvas.  Finally, the sprite canvas is translated in the visual tree to its initial x, y position.

Listing 1 - Creating the Sprite Graphic  and Positioning it in the Game

     private void InitializeSprite(Canvas c, int x, int y, Image img, Canvas existingCanvas)

        {

            // set the image to stretch to fit the canvas

            img.Stretch = Stretch.Uniform;

 

            // make sure we have a canvas in the first place

            _canvas = existingCanvas;

            if (existingCanvas == null)

            {

                _canvas = new Canvas();

            }

 

            // set the canvases width and height based upon the dimensions of the image + 1

            _canvas.Width = img.Width + 1;

            _canvas.Height = img.Height + 1;

 

            _width = _canvas.Width;

            _height = _canvas.Height;

            _parentCanvas = c;

            _image = img;

            _position = new Point(x, y);

 

            // track the boundary of the  image for movement purposes.

            ImageBounds = new Rect(0, 0, _canvas.Width, _canvas.Height);

 

            // update the bounds to the position of the sprite in the game

            UpdateBounds();

 

            // add the game sprite to the canvas which is the game board

            if (existingCanvas == null)

            {

                _parentCanvas.Children.Add(_canvas);

            }

 

            // add the image to the sprite canvas

            _canvas.Children.Add(_image);

 

            // translate the canvas according to the position of the sprite

            _canvas.RenderTransform = new TranslateTransform();

            (_canvas.RenderTransform as TranslateTransform).X = x;

            (_canvas.RenderTransform as TranslateTransform).Y = y;

        }

 

 

 

All objects are placed this way initially in the construction of the game.  The high level code for doing the initialization is shown below.  One of Robert Martin's hard and fast rules(in his book Clean Code)  is to create methods whose individual code statements all have the same level of abstraction.  Although I failed to obey this rule in other places in the code,  all of the lines of code used to create the game components are at the same level of abstraction in listing 2 .  The InitializeGameComponent  is called from the constructor of the Page, so it is kicked off as soon as the Silverlight application starts.

Listing 2 - Creating the various game components.

private void InitializeGameComponents()

{

            CreateLivesIndicator();

            CreateShip();

            CreateShields();

            CreateBullet();

            CreateGameLoop();

            CreateInvaders(1);

            CreateSaucer();

            CreateScore();

            ResetAllBombCounters();

            SetFocusOnTheGame();

}

 

        public Page()

        {

            InitializeComponent();

            InitializeGameComponents();

        }

 

 

 

The Game Engine

The game engine is implemented with a Silverlight trick using the storyboard.  You can tell the story board to start itself by calling Begin.  When the storyboard's Complete event is triggered, we simply tell it to restart by calling Begin again.  In listing 3, The CreateGameLoop  method creates the storyboard and wires up the Complete event handler to the gameLoop_Completed method. It then sets the game in motion by calling Begin.  After the storyboard is created, all updates happen in the Completed event handler.  The Completed event handler calls Begin again on the storyboard so the process can start over again.  Movement all objects occur in the Completed event handler.  Some objects, such as invaders, are throttled using the mod function to control their speed.

 

Listing 3 - The Game Engine

        public void CreateGameLoop()

        {

            _gameLoop = new Storyboard();

            _gameLoop.SetValue(FrameworkElement.NameProperty, "gameloop");

            this.Resources.Add("gameloop", _gameLoop);

            _gameLoop.Completed += new EventHandler(gameLoop_Completed);

            _gameLoop.Begin();

        }

 

        long _countTimer = 0;

        void gameLoop_Completed(object sender, EventArgs e)

        {    // do your game loop processing here   

            _countTimer++;

 

            _gameLoop.Begin();

 

            if (_started)

            {

                if (GameGoing == false)

                {

                    if (_countTimer % TheSpeed == 0)

                        MoveInvadersInPlace();

                    return;

                }

 

 

                HandleSaucer();

                //react to the keyboard

                // ReactToKeyPress();

 

                // update man movement

                UpdatePlayerMovement();

 

                // Update Invader movement

                HandleInvaderMovement();

               

                // Update bullet

                UpdateBullet();

 

                TestBulletCollision();

                TestBombCollision();

 

                // test for collision

                int scoreChange = TestCollision();

 

                // update Score

                UpdateScore(scoreChange);

 

            }

 

        }

 

 

 

Testing Collisions

Collisions are tested in a similar way as any other game, by seeing if two rectangles intersect.  We can test if an invader is hit by a bullet if the invader's bounding rectangle intersects with the bullet's bounding rectangle.  In our existing design, we go through each invader in an InvaderRow object and test for a collision.  Since only one invader can get hit by a bullet at a time, we just look for the first invader in that row that intersects with the bullet.

Listing 4 - Testing for collision

              public int CollisionTest(Rect aRect)

              {

            // loop through each invader in the row

                     for (int i = 0; i < Invaders.Length; i++)

                     {

                Rect testRect = aRect;

                // if the invader rect intersects with the current bullet rect,

                // return the index of the row of the invader that was hit

                testRect.Intersect(Invaders[i].GetBounds());

                           if ((testRect  != Rect.Empty) && (!Invaders[i].BeenHit))

                                  return i;

                     }

 

                     return -1;

              }

 

 

 

Blowing up the Ship

When your ship gets hit, it explodes.  How do we simulate the explosion graphically?  One way we could do this, is by using a storyboard animation made specifically for the explosion.  Another technique is to just draw the explosion frame everytime an update is made to the game loop.  The explosion effect in Silverlight Invaders is created by drawing 50 random pixels 100 times inside the bounding area of the ship as shown in Listing 5.

 

Listing 5 - Simulating the Explosion in the Ship class

        void DrawExplosion()

        {

            // don't need to draw the explosion if the ship already died

            if (Died)

                return;

 

            // count the number of times the explosion frame was drawn

            CountExplosion++;

 

            // if it is less than 100 times, draw another explosion frame

            if (CountExplosion < 100)

            {

                // remove the previous explosion frame

                RemoveExplosion();

 

 

                // draw a new explosion frame,

                // by placing 50 random white pixels inside the ships

                // bounding canvas

                for (int i = 0; i < 50; i++)

                {

                    int xval = RandomNumber.Next((int)Width * (int)(CountExplosion * .25));

                    int yval = RandomNumber.Next((int)Height* (int)(CountExplosion * .25));

                    //xval += (int)Position.X;

                    //yval += (int)Position.Y;

                    // g.DrawLine(Pens.White, xval, yval, xval, yval+1);

                    // first get rid of any line

                    Line pixel = new Line();

                    pixel.X1 = xval;

                    pixel.Y1 = yval;

                    pixel.X2 = xval + 1;

                    pixel.Y2 = yval + 1;

                    pixel.Stroke = new SolidColorBrush(Colors.White);

                    Canvas.Children.Add(pixel);

 

                }

            }

            else

            {

                // the explosion frames were drawn 100 times, remove it.

                RemoveExplosion();

                Died = true;

            }

        }

 

 

Conclusion

This article illustrates some of the graphic techniques you can use to create a real-time 2D game in Silverlight.  In the articles to follow, we will describe other kinds of games you can create in Silverlight and we will also explore the MVVM design behind them.

The full source code for this article can be purchased and downloaded at Silverlight Game Space