Drawing a Sprite
June 9, 2008 Updated for Silverlight 2 Beta 2
Source code for this completed tutorial: http://silverlightrocks.com/cs/files/folders/silverlight_2_tutorials_source_code/entry315.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:
1: <UserControl x:Class="SpaceRocks.Ship"
2: xmlns="http://schemas.microsoft.com/client/2007"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: Width="26" Height="40">
5: <Canvas x:Name="LayoutRoot">
6: <Path Data="M0,38 L12,0,24,38,18,32,7,32z" Stroke="#FFFFFFFF" StrokeThickness="2"/>
7: </Canvas>
8: </UserControl>
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.
Notice that the default Grid layout panel has been replaced with a Canvas. Layout panels are one of the key concepts of Silverlight development, and you should get a good understanding of the different layout panels that are available so that you can choose the right one for your situation. A Canvas is typically better suited to games, since games usually require precise manual positioning of the visual elements. A Grid is better at organizing elements in rows and columns, and to allow automatic positioning and resizing of elements in the panel.
So now to add the ship sprite to the game surface. There are two main ways you can put a child object in a layout panel. 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. First we'll add a Canvas to our root Grid in the Page.xaml that will be our game surface which we'll place all of our sprites into. This Canvas will stretch to the size of the Grid panel automatically, so we don't need to specfiy a width or height of the Canvas.
Change the page.xaml file to look like this:
1: <UserControl x:Class="SpaceRocks.Page"
2: xmlns="http://schemas.microsoft.com/client/2007"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: Width="640" Height="480" xmlns:SpaceRocks="clr-namespace:SpaceRocks">
5: <Grid x:Name="LayoutRoot" Background="Black">
6: <Canvas x:Name="gameSurface">
7: <SpaceRocks:Ship x:Name="ship" Canvas.Left="305" Canvas.Top="220"/>
8: </Canvas>
9: </Grid>
10: </UserControl>
Note the addition of the following namespace declaration:
xmlns:SpaceRocks="clr-namespace:SpaceRocks"
This tells Silverlight that if XAML elements are preceded by "SpaceRocks", like our SpaceRocks:Ship element, it should look in the SpaceRocks namespace to find that element, in this case it's a UserControl. It could have just as easily been
xmlns:my="clr-namespace:SpaceRocks"
and then our Ship element would have been
<my:Ship x:Name="ship" Canvas.Left="305" Canvas.Top="220"/>
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. These are what is called attached properties. Attached properties are properties that are inherited from the parent of the element. Since the parent Canvas is designed to allow for absolute positioning of its elements, it provides a Canvas.Left and Canvas.Top attached property to its children. For comparison, the Grid panel provides a Grid.Row and Grid.Column attached property (among others) to its children.
The Canvas.Left and Canvas.Top attached properties will become more important as we start animating the ship. We'll start getting into that in the next tutorial.