Silverlight Games 101

Drawing a Sprite

Source code for this completed tutorial: http://silverlightrocks.com/Community/files/folders/slg101_tutorials/entry10.aspx

In game programming, 2D elements that are drawn to the screen are commonly called sprites. Sprites are the building block upon which most 2D games are based, and so it makes sense that we cover it first. Unless you're doing a completely vector-based game, you'll have to deal with sprites at some point during your game development.

For this game, we need a Ship sprite. So add a new item to the SpaceRocks project of type "Silverlight User Control" and name it "Ship". Then replace the contents of Ship.xaml with the following:

<Canvas xmlns="http://schemas.microsoft.com/client/2007" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        Width="25"
        Height="40"
        >
  <Path Data="M0,38 L12,0,24,38,18,32,7,32z" Stroke="#FFFFFFFF" StrokeThickness="2"/>
</Canvas>

The Path element allows you to draw vector graphics using a concise format. It allows for lines and curves (bezier and arcs), and can optionally be filled. You can specify a brush for the stroke and the fill. More information on the format of the Data attribute here:

http://msdn2.microsoft.com/en-us/library/ms752293.aspx

In this example, the M command moves the current drawing position to (0,38) then the L command specifies a polyline to (12,0),(24,38),(18,32),(7,32), and then the "z" connects the polyline back to the original point of (0,38).

The Stroke attribute consists of 4 bytes of data, the first being the alpha channel for transparency and the other 3 bytes being red, green, and blue values respectively. In this case, we will be drawing fully opaque with a white solid brush. The StrokeThickness attribute specifies that the lines will have a thickness of 2 pixels.

So now to add the ship sprite to the game surface. There are two main ways you can put a child object in a canvas. You can either declare it in the XAML for the parent object, or you can create it in code and add it to the game surface. Creating the objects in code and dynamically adding them to the game surface is very useful when your game needs to add and remove sprites from the game surface on the fly, or if you don't know how many objects of a certain type you are going to have ahead of time. In a future tutorial we will create some objects in code dynamically. In this case, since this game will need one and only one ship, we can add it to the XAML.

Change the page.xaml file to look like this:

<Canvas
        xmlns="http://schemas.microsoft.com/client/2007" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:SpaceRocks="clr-namespace:SpaceRocks;assembly=ClientBin/SpaceRocks.dll"
        x:Name="parentCanvas" 
        Loaded="Page_Loaded"
        x:Class="SpaceRocks.Page;assembly=ClientBin/SpaceRocks.dll"
        Width="640"
        Height="480"
        Background="Black"
        >
  <SpaceRocks:Ship x:Name="ship" Width="30" Height="40" Canvas.Left="305" Canvas.Top="220"/>
</Canvas>

Now if you go ahead an run the program, you should get a good idea of what game we're creating here.

Notice the Canvas.Left and Canvas.Top attributes. This is how absolute positioning is done in XAML. These attributes will become important as we start animating the ship. We'll start getting into that in the next tutorial.