Silverlight Game Design Tutorial
| < previous page |
In this tutorial I'll show you how to position an image on the screen and move it around.
By the end of this tutorial you will have created a project that looks like this:
Positioning Image within a Canvas
By default, a silverlight project starts up with a Grid layout. A Grid behaves like a table with rows and columns and it's good for making an application with forms and displaying information. But to create a game we need to position images with precise coordinates, which is why we use a Canvas instead of a Grid.
1. First of all you should make a new Silverlight porject. (How?)
2. Next you have to add a Canvas. Simply type in the following lines:
public partial class Page : UserControl
{
Canvas drawingCanvas = new Canvas();
public Page()
{
InitializeComponent();
LayoutRoot.Children.Add(drawingCanvas);
}
}As you can see from above we just created a Canvas and added it to the LayoutRoot.
3. Next, you need to find a picture that you want to display on the screen.
4. Click project -> Add existing item, then select the image you want. In this example, I selected the file "hello.png". You'll see this file added in the solution explorer.
5. Simply type these codes into your "Page.xaml.cs" file
using System.Windows.Media.Imaging; namespace GameExample { public partial class Page : UserControl { Image img1 = new Image(); Canvas drawingCanvas = new Canvas(); public Page() { InitializeComponent(); LayoutRoot.Children.Add(drawingCanvas); BitmapImage bmpImg = new BitmapImage(); bmpImg.UriSource = new Uri("hello.png", UriKind.Relative); img1.Source = bmpImg; img1.SetValue(Canvas.LeftProperty, 200d); img1.SetValue(Canvas.TopProperty, 100d); drawingCanvas.Children.Add(img1); } } }
Now you see the use of Canvas: it lets us specify the LeftProperty and TopProperty of the image. On the above example we just made the image 200 pixels away from the left edge and 100 pixels away from the top edge, essentially setting the coordinates of the image to (200, 100).
6. Hit F5 to see the result
Move image around the Canvas
To animate the image around the Canvas, we need to update its position every frame. This is when we use a game loop (Learn about game loops).
1. Type in the following code:
using System.Windows.Media.Imaging; namespace GameExample { public partial class Page : UserControl { private Storyboard gameLoop; Image img1 = new Image(); Canvas drawingCanvas = new Canvas(); double pos = 0; public Page() { InitializeComponent(); gameLoop = new Storyboard(); gameLoop.Completed += new EventHandler(gameLoop_Completed); gameLoop.Duration = TimeSpan.FromMilliseconds(30); this.Resources.Add("gameloop", gameLoop); this.Loaded += new RoutedEventHandler(Page_Loaded); LayoutRoot.Children.Add(drawingCanvas); BitmapImage bmpImg = new BitmapImage(); bmpImg.UriSource = new Uri("hello.png", UriKind.Relative); img1.Source = bmpImg; drawingCanvas.Children.Add(img1); } protected void Page_Loaded(object sender, RoutedEventArgs e) { gameLoop.Begin(); } protected void gameLoop_Completed(object sender, EventArgs e) { pos = (pos + 1)%100; img1.SetValue(Canvas.TopProperty, pos); img1.SetValue(Canvas.LeftProperty, pos); gameLoop.Begin(); } } }
Nothing is new here: we have a gameLoop that repeats every 0.030 seconds, and during each loop we increment the variable pos and then set the coordinates of our image to pos. This makes the image move diagonally from top left to bottom right.
2. Now hit F5 and see your image move on the screen.
| < previous page |
Comments:
2009-08-12 16:48:04 Pharmk112 wrote:
Very nice site! |
