3D Game Development with Microsoft Silverlight 3: Beginner's Guide

We installed Silverlight 3 Tools for Visual Studio, Expression Blend 3 for Silverlight 3, .NET RIA Services, and Silverlight Toolkit.

Now, we have everything we need to begin creating and testing amazing 2D games using Silverlight 3 and C#.

Looking at the TI Invaders scene picture, we can recognize the following digital art assets:

These assets are organized as shown in the following picture:

The aliens are organized in five rows and eleven columns. There are four tents and just one ship to challenge all these aggressive invaders.

We created raster digital content for the game optimized for a 1680X1050 pixels screen. We downloaded some images, and manipulated them to remove the shadows and prepare them for the game's main scene. We used a naming convention for the images as we want to keep everything well organized for the game.

The game will look nice using these modern raster digital art assets.

The Digital Content Creation tools (DCC) are very important partners for game designers and developers. They allow digital artists and graphic designers to concentrate on the creation of different kinds of digital art assets, which are then used in the applications.

It is very easy to understand their purpose using an example. If you want to show a sky with stars as an application's background, the easiest way to do it is by loading a bitmap (PNG, BMP, JPG, and so on) using the procedures or controls provided by the programming language.

A digital artist will create and manipulate the sky bitmap using an image manipulation tool such as GIMP, Photoshop, or Picasa.

Developing games requires the usage of a great number of resources; it is not just programming tasks. We are going to use many popular DCC tools during our journey to create Silverlight 3D games. As many of these tools are very expensive, we will use some open source and free alternatives to carry out the most important tasks.

A good practice before beginning 2D and 3D game development is to research the tools used to create the 2D and 3D digital content. This way, we will have a better idea of how to create the different scenes and the most common techniques. Later, we will learn the programming techniques used to give life to these graphics-related operations. We will be able to provide great real-time interaction to all these digital content assets, as shown in the following diagram:

A modern 2D and/or 3D real-time game uses the basic elements shown in the previous diagram. Let's go through them in the following list:

Many specialized DCC tools help in creating the basic elements explained in the aforementioned list. For example, using GIMP you can see the alpha channel for the ship's PNG image, as shown in the following picture:

We do not have to write lines of code dedicated to creating an image. Instead, modern game programming focuses on the following tasks:

Programming games requires more knowledge about the underlying hardware on which the game will be run. We must establish performance baselines and minimum requisites to achieve a desirable performance for the game. Besides, we must specify the recommended input devices to take full advantage of the game. These tasks could seem pretty trivial, but they are very important because some games are very complex and demand many difficult optimizations to be able to run on the mainstream hardware available.

This is a simple summary of a game's programming responsibilities. We will work through them all throughout this book.

We installed Expression Design and Inkscape. Now we have the necessary tools to convert the existing vector clipart to the most appropriate formats to use in Silverlight 3.

Why do we need to install so many tools to create a simple vector asset to use in Silverlight 3? It's because Silverlight 3 uses XAML (eXtensible Application Markup Language), and the best way to add scalable vector content is using objects defined in XAML. However, many tools that offer functions to export to XAML do not work as expected and are not compatible with Silverlight 3. Besides, many converters are still in alpha versions and have problems when we need to convert complex vector art.

The game must be finished on or before the due date. Therefore, to avoid problems related to XAML vector assets, we are going to perform additional steps. But we will be sure that the resulting XAML will work fine with Silverlight 3.

We created scalable vector graphics and converted them to an XAML format, which is compatible with Silverlight 3. We downloaded some images and used a process to convert them to a format that Microsoft Expression Design can read. As this tool does not work with WMF files, we needed to provide an AI-compatible format.

We converted the files to a PDF format, which is compatible with the newest AI formats. Expression Design can read this format, but it requires the files to have the .ai extension. That is why we needed to rename the files exported from Inkscape as PDF.

We used Inkscape because it is free, open source, and compatible with the most popular scalable vector graphics formats. However, we did not export to XAML from Inkscape because there are some incompatibilities in that conversion. The most secure way to export to XAML these days is using Expression Design.

This scalable vector content for the game could be optimized for any resolution. We used the same naming convention previously employed by the raster graphics, as we want to keep everything well organized for the two versions of the game. One will show raster aliens and the other, scalable Halloween monsters.

The game will look nice on XHD monitors using these scalable vector art assets.

The XAML vector graphics can scale while keeping their quality intact when they are used in Silverlight 3 applications. This is not new; this happened with all the vector graphics formats. Scaling the vector graphics is not a problem because they do not have pixelation problems. However, they require more processing time than raster graphics to be shown on a screen.

If you scale one of the Halloween monsters to use it in a higher resolution, it will look really great as shown in the following picture:

A very interesting hidden tool that can help us when working with XAML and XAML vector graphics is XamlPad.

XamlPad is a part of the WPF (Windows Presentation Foundation) SDK. Once Visual Studio is installed, it is available in the following folder: Program Files\Microsoft SDKs\Windows\v6.0A\bin. You must create a manual shortcut to XamlPad.exe in that folder because it is not available in a menu shortcut.

We used a very simple yet handy tool called XamlPad to preview XAML-scalable vector illustrations. Now, we are sure that the scalable clipart for the game is going to work fine in different resolutions. We can include these vector illustrations in Silverlight 3 applications.

Expression Design is a very useful tool if we need to create special effects with 2D XAML vector graphics. Using this tool, a digital artist can create and manipulate vector graphics. Also, this tool can define a name for each shape. Thus, we can later add some code to change some of the properties of these shapes by using the names to identify them.

For example, we can change an eye's color. However, we need 2D XAML vector graphics that use nice names to identify each shape. The following picture shows Expression Design editing our well-known Halloween monster to provide nice names for the shapes that define the eye's background and background border:

Using expression design, we can also add effects to many shapes and layers. Hence, if we are going to work hard with Silverlight 3, it is a very important tool for the digital artists involved in the project.

You have to win the game contest. As you know, there is no restriction on the number of games per participant. What about preparing another completely different game to participate in this contest?

Take a classic game that is based one screen and does not have scrolling capabilities, similar to the Invaders game. Prepare scalable vector graphics in an XAML format to represent its characters. However, this time, prepare some additional animation frames for each character. We will use them in the following chapter to prepare that game using a new framework.

You can do it. If you are not a good artist, you can download free clipart from the Web and then use the techniques and tools previously explained to create vector graphics in XAML format that are ready for use in Silverlight 3 games.

You created your first Silverlight application showing the ghost that will be a part of your game. It required too many steps, and you had to combine two tools: Visual Studio or Visual C#, and Expression Blend. It seems complex, but once you get used to working with graphic manipulation tools and development environments to create Silverlight games, it is going to be easier.

We created a new web site to host our Silverlight application because that is going to allow us to change many advanced parameters related to Silverlight's runtime that are very useful to improve the performance of our games.

We created a UserControl from an existing XAML-scalable vector illustration. A UserControl has its XAML representation and provides its own logic.

The ghost appeared in the web browser and it moved through the bisque rectangle as if it were a mouse pointer. You created and ran your first Silverlight application in the web browser.

First, we changed the XAML code for MainPage.xaml. We made some changes to do the following:

Then, we added a Canvas named cnvMovementTest (with a 1366X768 pixels width and height), a bisque background, and an instance of Ghost (SilverlightMonster:Ghost) named ghost located in the point (10, 10) taking into account both the Canvas and its upper-left corner:

<Canvas x:Name="cnvMovementTest" Width="1366" Height="768"
Background="Bisque">
<SilverlightMonster:Ghost Canvas.Left="10" Canvas.Top="10"
x:Name="ghost"/>
</Canvas>

Once the ghost was shown using XAML code, we had to program code for the event handler, which is triggered when the mouse moves on the main page's UserControl. We had indicated the MouseMove event handler as Ghost_MouseMove. For this reason, we defined a private void method with that name in the C# class MainPage, associated with the previously explained XAML.

As mentioned earlier, we defined the cnvMovementTest Canvas in the XAML section. The code in the event is very simple. However, it interacts with some elements defined in the XAML code.

The following line retrieves the mouse's current position as an instance of Point—a 2D vector, with two coordinates (X and Y):

Point point = e.GetPosition(cnvMovementTest);

Now we call the SetValue method for ghost (the instance of Ghost is already defined in the XAML section). We assign the values of the X and Y coordinates of the 2D vector to the Left and Top properties of the canvas containing the ghost illustration:

ghost.SetValue(Canvas.LeftProperty, point.X);
ghost.SetValue(Canvas.TopProperty, point.Y);

You created your first XBAP WPF application showing the ghost that will be a part of your future game. It required some steps that were different from those you learned to create this same application for Silverlight.

We created a WPF UserControl from an existing XAML scalable vector illustration. Once we create the UserControl, the steps and the code required are very similar to the ones explained for the Silverlight version. However, it is very interesting to understand the whole development process.

The ghost appeared in the web browser and moved through the bisque rectangle as if it were a mouse pointer. The application looked very similar to its Silverlight version. However, in this case, you have access to most of the WPF features and controls. You created and ran an XBAP WPF application in the web browser.

First, we changed the XAML code for Page1.xaml. We made some changes to do the following:

Next, we added a Canvas named cnvMovementTest with a resolution of 1366X768 pixels (width and height), a bisque background, and showed an instance of Ghost (SilverlightMonster:Ghost) named ghost located on the point (10, 10) by taking into account both the Canvas and its upper-left corner:

<Canvas x:Name="cnvMovementTest" Width="1366" Height="768" Background="Bisque">
<SilverlightMonsterXBAP:Ghost Canvas.Left="10" Canvas.Top="10"
x:Name="ghost"/>
</Canvas>

Once the ghost is shown using XAML code, we had to program the code for the event handler that triggered when the mouse moved on the main page's UserControl. We followed the same procedure previously explained in the Silverlight version of this application.

You receive an email from the game contest. They require each participant to send a Silverlight prototype of the first scene of the game without movement—a still snapshot.

Using the scalable vector graphics in an XAML format prepared for the Invader game, create a new Silverlight application that reproduces the first screen of the game with the aliens organized in five rows and eleven columns, the four tents, and the ship.

You can do it creating one UserControl for each vector graphics as we did for the ghost. Now, you can organize a nice Silverlight prototype by defining a Canvas for each alien and tent, and then for the ship using 2D coordinates.