Silverlight provides a <Grid> control that makes it very easy to plan and layout the user interface for your game. This control also supports imbedding grids within grids similar to how you would have tables within tables in MSWord.
Before we start to create the interface for our game "Fireball", let's take a look at the end result:
The user interface for your game is stored in your Page.xaml file. The first thing you will want to do before adding the <Grid> control is set the Width and Height of your Silverlight control. In our case, we are going with 800x728. You can set this by adding a Width and Height attribute to the UserControl in Page.Xaml
<UserControl x:Class="Fireball.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="800" Height="728">
We will be using the following <Grid> attributes:
- Background - The background color of the control. Set this to "black".
- ShowGridLines - This is intended to be used for layout planning purposes only. Thus, you can only have dotted lines. For now, you can set this to "True", but when you are done don't forget to set this to "False" or you will have some ugly lines on your interface.
In our case, we are going to have 3 columns. In the second column, we will imbed another <Grid> control with 3 rows.
Column 1: This is the left border bar.
Column 2: This has another <Grid> control with three rows:
Row 1: Banner that says "Silverlight Fireball".
Row 2: Game Map area.
Row 3: Chat Window and other buttons.
Column 3: This is the right border bar.
To create the 3 columns we will add the following XAML to Page.xaml:
<Grid Background="Black" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="12"/>
<ColumnDefinition Width="776"/>
<ColumnDefinition Width="12"/>
</Grid.ColumnDefinitions>
</Grid>
We are setting the first and last columns Width="12" since this is just a narrow border bar. Set the second column to Width="776" since this is the primary space for the banner, game map and chat window.
If you look at the preview window, you will now see this:
Now, let's imbed another Grid in the second column of the first grid so that we have the 3 rows we specified above. To do this, for this second Grid specify Grid.Column=1 (Zero index based). This tells Silverlight to put this grid control in the 2nd column of the first grid.
<Grid Background="Black" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="12"/>
<ColumnDefinition Width="776"/>
<ColumnDefinition Width="12"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="62"></RowDefinition>
<RowDefinition Height="538"></RowDefinition>
<RowDefinition Height="128"></RowDefinition>
</Grid.RowDefinitions>
</Grid>
</Grid>
Set the first row Height = 62, this is the height of our banner.
Set the second row Height=538, this is the height of our map.
Set the third row Height=128, this is the height of our chat window.
Voila:
Now, let's add some graphics!
Step 1: In the solution explorer, right click on your Fireball project node and select Create New Folder. Create a folder called images.
Step 2: Right click on the following images below, choose Save Target As and save the images to your new folder images.
Step 3: Right click on your newly created folder images, choose Add | Existing Item. Add all the images in that folder to the project, otherwise they will not be loaded and displayed. That is, it's not enough to just have the file in the folder, you have to specifically add it to the project or it would know it's there.
Step 4: Adding the graphics to your grid. For each of these graphical elements, we will declare an <Image> control. All controls in Silverlight allow you to specify what row and what column you want that control displayed in. The Canvas.ZIndex specifies the drawing order, since we always want the border on top I chose the value "1001". For our left and right border bars we declare:
<Image Canvas.ZIndex="1001" Grid.Column="0" Source="images/column.png"/>
<Image Canvas.ZIndex="1001" Grid.Column="2" Source="images/column.png"/>
This will put the border bar in the 1st and 3rd columns of the first <Grid>
The top panel and the Silverlight Fireball banner are grouped in a Canvas objects and placed in the first row of the second Grid and declared as. You can position the "Silverlight Fireball" image using Canvas.Left and Canvas.Top attributes. By default, these attributes are Zero if they are not set.
<Canvas Canvas.ZIndex="1001" Background="Black" x:Name="LogoCanvas" Canvas.Top="0" Grid.Row="0">
<Image Source="images/toppanel.png"/>
<Image Canvas.Top="5" Canvas.Left="0" Source="images/silverlightfireball.png"/>
</Canvas>
The chat window is composed of various parts and are declared as:
<Canvas Canvas.ZIndex="1001" Background="Black" Canvas.Top="0" Grid.Row="2" Grid.Column="0">
<Image Source="images/panel.png"/>
<Image Canvas.Top="20" Canvas.Left="170" Source="images/chatwindow.png"/>
<Button Canvas.Top="30" Canvas.Left="720" Width="50" Background="Brown" Content="Send" ></Button>
</Canvas>
To conclude, the complete XAML in Page.xaml should like something like this:
<UserControl x:Class="Fireball.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="800" Height="728">
<Grid Background="Black" ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="12"/>
<ColumnDefinition Width="776"/>
<ColumnDefinition Width="12"/>
</Grid.ColumnDefinitions>
<Image Canvas.ZIndex="1001" Grid.Column="0" Source="images/column.png"/>
<Grid Grid.Column="1" ShowGridLines="False">
<Grid.RowDefinitions>
<RowDefinition Height="62"></RowDefinition>
<RowDefinition Height="538"></RowDefinition>
<RowDefinition Height="128"></RowDefinition>
</Grid.RowDefinitions>
<Canvas Canvas.ZIndex="1001" Background="Black" x:Name="LogoCanvas" Canvas.Top="0" Grid.Row="0">
<Image Source="images/toppanel.png"/>
<Image Canvas.Top="5" Canvas.Left="0" Source="images/silverlightfireball.png"/>
</Canvas>
<Canvas x:Name="MapCanvas" Canvas.Top="0" Grid.Column="1">
</Canvas>
<Canvas Canvas.ZIndex="1001" Background="Black" Canvas.Top="0" Grid.Row="2" Grid.Column="0">
<Image Source="images/panel.png"/>
<Image Canvas.Top="20" Canvas.Left="170" Source="images/chatwindow.png"/>
<Button Canvas.Top="30" Canvas.Left="720" Width="50" Background="Brown" Content="Send" ></Button>
</Canvas>
</Grid>
<Image Canvas.ZIndex="1001" Grid.Column="2" Source="images/column.png"/>
</Grid>
</UserControl>
Thank you,
--Mike Snow
Subscribe in a reader
While exploring techniques for game programming with Silverlight I came across some hurdles and discovered some workarounds. I plan to use this blog to track these issues for the purposing of hopefully saving you time from having to do similar research.
What Silverlight Supports
- JPG and PNG file formats.
- Transparency through PNG files.
- Keyboard and mouse input
- Sound
- Game UI layout through Grid elements.
- Timers (animating, game loop, etc.)
- Texture blending through Opacity.
- Socket/TCP programming for multi-player networking support
- Events (clicking, etc.)
- Animation - WPF model that uses timers instead of frames.
- Great debugging support through Visual Studio.
What Silverlight Currently Does Not Support
Work around: Use PNG (or JPG) files.
- Creating images from subsets of larger images.
Work around: You have two options:
- Set a clipping region for the image such that you only show the part of the image you want displayed.
- Put each image in its own file. Unfortunately, for such work as animated sprites, this means a lot of individual files. Hard to manage.
- Saving files locally - Due to security concerns, Silverlight 2.0 does not support saving. There is talk to support the SaveFileDialog in the future and I will track this progress closely letting you know what I learn. I need this feature myself (for my map editor)!
Work around: Save to a web server. See Michael Sync's blog here: http://michaelsync.net/category/silverlight under "Uploading with Silveright 2 Beta 1 and WCF"
- Floating point values for positioning - if you tile images together to form a map, them scroll the map's X and Y position by a decimal value, you will see lines forming between the tiles.
Work around: Use rounded values.
- Per pixel bitmap editing, bitmap filters (color matrix, etc) and effects (blur, glow, etc).
Work around: Through opacity you can do some pretty cool effects such as texture blending to smoothly blend transitions between map tiles. See this tutorial for an example.
Work around: There are engines and demos out there that simulate 3D that work fairly well. Examples”
- http://www.markdawson.org/kit3d/
- http://www.codeplex.com/Balder
- Sharing of resources is not allowed. For example, sharing a SolidColorBrush between rectangles. If you have 1000 rectangles, they will all need a separate brush for each rectangle.
- Alignment for text in Textboxes.
Work around: You will have to programmatically center it.
If you discover any more, please send them my way and I will post them! Thanks!
Thank you,
--Mike Snow
Subscribe in a reader
To start, let's create a new Silverlight Application in Visual Studio 2008.
To do this, from the menu select File | New | Project. If you wish to program in C# select Visual C#. If you wish to program in VB select the Other Languages | Visual Basic. Once you do this, choose Silverlight under Project types, then Silverlight Applications under the Templates window. Finally, set the Name, Location and Solution Name and click OK to finish.
In order to run a Silverlight application it must be hosted in a web page. The next dialog gives you two options:
- Add a new Web to the solution for hosting the control. The first option allows you to have a web site auto-generated that is pre-configured to work with the Silverlight application. For these tutorials, this is the option we will be going with.
- Generate an HTML test page to host Silverlight within this project. The second option creates only a Silverlight Application. An HTML test page is dynamically created when you run the project for the purpose of testing the application.
Voila, you now have a Silverlight Application! Let's review the different windows to get a full understanding of what you see:
The Solution Explorer Contents
In the upper right corner of VS is the solution explorer. The solution explorer lists all the files involved with the newly created Web and Silverlight application project.
The first project, in our case Fireball_Web, contains the web site that is linked to your Silverlight Application project.
A brief description for each of these files:
- Default.aspx - This is an empty ASPX page. You can delete it if you do not need it.
- SilverlightApplication6TestPage.aspx - The ASPX version of a web page that hosts your Silverlight application.
- SilverlightApplication6TestPage.html - The HTML version of a web page that hosts your Silverlight application
- web.config - Settings and configurations for your web application.
Right click on either FireballTestPage.aspx or FireballTestPage.html and choose "Set As Start Page". This allows you to choose which file you want launched on start up.
Other files:
- App.xaml - The class inherits from the Application class and is a required component that is part of the entry point for Silverlight applications. This file is mostly used to store application resources (such as styles) that can be used throughout your application. In its code-behind file there are three events pre-configured for your use:
- Application_Startup - Put any initialization you need to perform before your application starts up.
- Application_Exit - Allows you to perform any action when the application is closed.
- Application_UnhandledException - This event allow you to intercept any unhandled exception in your application.
- Page.xaml - This is where you declare the UI and other objects for your application.
Thank you,
--Mike Snow
Subscribe in a reader
Install Silverlight Tools Beta 2. This link will take you to the Microsoft Download center where you can download Silverlight Tools Beta 2. This setup program will install the following components:
- Silverlight 2 Beta 2.
- Silverlight 2 SDK Beta 2.
- KB950630 for Visual Studio 2008.
- Silverlight Tools Beta 2 for Visual Studio 2008.
It also includes:
- Visual Basic and C# Project templates.
- Intellisense and code generators for XAML.
- Debugging of Silverlight applications.
- Web reference support.
- Integration with Expression Blend.
Before proceeding, verify you have the following requirements:
- Windows Server 2003, Windows Vista or Windows XP.
- Microsoft Visual Studio 2008 Standard or above.
- Optional - Microsoft Expression Blend.
Once the file downloads open the file and click the "Run" button to continue through installation.
![image_thumb[1]](http://silverlight.net/blogs/msnow/WindowsLiveWriter/PARTISETUPANDINSTALLATION_AC50/image_thumb%5B1%5D_thumb.png)
Problems? Hopefully all will go well. However, if you encounter any problems during installation visit BradleyB's blog on potential setup issues by clicking here.
Thank you,
--Mike Snow
Subscribe in a reader
About Silverlight
Silverlight 2 is a phenomenal framework for developing rich applications for the web. It includes a cross-platform, cross browser version of the .NET Framework. While it excels at displaying high-definition video files, it is very versatile and can be used for a wide range of Internet applications including, as we will explorer here, computer games. Silverlight applications are delivered to a browser through a markup language called XAML. For the most part, XAML is where you will define your UI elements as well as do your data binding and event handling. Your programmatic logic is separated in code-behind files that you can choose to write in either C# or VB.
About Silverlight Tools
Silverlight Tools is an add-on available for Visual Studio 2008 Standard version or above. It enables you to create, build, debug, publish and run Silverlight Applications through Visual Studio. It also supports interaction with Microsoft Expression Blend.
About me and these blogs:
Let me introduce myself. I am a Senior SDET Lead on the Web Tools team at Microsoft. One of my primary focuses is Silverlight Tools. I have a great passion for game programming and have discovered Silverlight to be a very quick and powerful way to deliver high quality games to customers. Thus most, but not all, of my blogs will be game centric.
My goal is to post blogs weekly, if not daily, that will walk you through specific scenarios for Silverlight.