Silverlight Game: Let’s get started, simply

Article
06/07/2010

Mobile games can be a challenge. Developing games that can take can operate on many platforms is even more difficult.

That is, unless you are using Silverlight and Expression 4!

WOW! Oh, wait a minute, does Silverlight work with the “current’ Internet Mobile Browser (the one in the Win Phone Emulator), I have been told: No.

So, how does Silverlight work in the current Win Phone Emulator? Ummmm? As an out of browser experience.

Out of browser? Wow, is that like out of body? Sort of.

But no matter lets have some fun with Silverlight on the Mobile devices. (Click images to enlarge.)

Let’s create a rotating triangle, in this simple example (which will take a couple of blog posts to cover), we will draw a triangle using a process that will allow you to use as many of these triangles as the memory will support on the Windows Phone.

First, open Visual Studio 2010 that has the Win Phone tools, I am using the Visual Studio 2010 Express for Windows Phone, which is a completely free download for all! Name your project Geometry to track with this blog

Add a new item and then select the

Windows Phone User Control
Give the control a name like Triangle.xaml

Do this by right clicking on the Solution (in this case Geometry, but might be different for your project/solution)

Once you are done, click Add and then a xaml and class will be built.

This is the User Control type of xaml.

First of all you will see that there are two files:

mainpage.xaml
mainpage.xaml.cs

Usually it is a good practice to change the names to reflect your project, especially usually you will be living with the name for a long time.

This is what your MainPage.xaml will look like when you start Visual Studio 2010 Express for Windows Phone

There are variations if you are using one of the other Visual Studio 2010 versions.

(Click to enlarge image and Don’t worry, the code will be in a manner that you can copy

In the triangle.xaml file, replace the code built by default with the code shown in the next cell This xaml sets up your triangle for rotation If you looked at the default code, you will see that we have switched from Grid to Canvas. Think of Canvas for games and art Grid for data and tables

<--- Paste this code into triangle.xaml --->

</UserControl>

Select and delete the default code in the file triangle.cs

using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes;

namespace Geometry { public partial class Triangle : UserControl { public Triangle() { InitializeComponent(); }

public double RotationAngle { get { return rotateTransform.Angle; } set { rotateTransform.Angle = value; } }

} }

In the MainPage.CS Delete the default code and copy the code in the following cell:

namespace Geometry { public partial class MainPage : PhoneApplicationPage { Storyboard loopGame;

public MainPage() { InitializeComponent();

loopGame = new Storyboard();

loopGame.SetValue(FrameworkElement.NameProperty, "loopgame");

this.Resources.Add("loopgame", loopGame);

loopGame.Completed += new EventHandler(loopGame_Completed);

loopGame.Begin();

SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape;

}

void loopGame_Completed(object sender, EventArgs e) { Update();

loopGame.Begin(); }

void Update() { Triangle.RotationAngle = Triangle.RotationAngle + 15;

} } }

In the MainPage.xaml Delete the default code and paste the code in next cell into MainPage.xaml

<phoneNavigation:PhoneApplicationPage x:Class="Geometry.MainPage" xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" xmlns:phoneNavigation="clr- namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation" xmlns:d="https://schemas.microsoft.com/expression/blend/2008" xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:geometry ="clr-namespace:Geometry" mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}"> <Grid x:Name="LayoutRoot" Background="Honeydew"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions>  <Grid x:Name="TitleGrid" Grid.Row="0"> <TextBlock Text="Big Phat Triangle" x:Name="textBlockPageTitle" Style="{StaticResource PhoneTextPageTitle1Style}"/> <TextBlock Text="Rotating Triangle" x:Name="textBlockListTitle" Style="{StaticResource PhoneTextPageTitle2Style}"/> </Grid>  <Grid x:Name="ContentGrid" Grid.Row="1"> <Canvas x:Name="gameSurface"> <geometry:Triangle x:Name="Triangle" Canvas.Left="200" Canvas.Top="220"/> </Canvas> </Grid> </Grid> </phoneNavigation:PhoneApplicationPage>

Run the code and you will see a triangle rotating on the page If you get errors, check that you deleted and added the correct code.

What did we learn here?

That it is easy to create a reusable user control, in this case we made a triangle.
Connect XAML and C# code (it could be Visual Basic)
Rotate an object around a point

I will use this example over the next few blog entries so if you put it together, make sure to keep it!

What’s next? Review of the code.

Silverlight Game: Let’s get started, simply

Additional resources