Transcription

1 Silverlight Invaders Step 0: general overview The purpose of this tutorial is to create a small game like space invaders. The first thing we will do is set up the canvas of design some user controls ( good guy, bad guys, bullet and an intro screen ). Next, we will add some functionality in code behind so that the game actually does something. Step 1: create a new project I use the beta 2 of Visual Studio 2008 ( codename Orcas ) and Expression Blend 2.0 August preview for this tutorial. You can download the beta2 form The trial version for Expression Blend 2.0 can be downloaded from You may also need the silverlight 1.1 runtimes and Visual Studio tools. They can be downloaded from Start Visual Studio and choose File New Project. Choose C# as language and Silverlight as project type. Give also a name and choose a location for the project. Once the project is created, we will first work with Expression blend to design the user interface. Every time we made a control, we will add some code behind with Visual Studio. Step 2: configure the main page Open the page.xaml file and go to the property panel. Set the background to a linear gradient from #FF83D7FB to #FFFFFFFF. Select the brush transform tool form the toolbox and rotate the gradient 90 so that the blue part lays on top.

2 Put a canvas under the page canvas and give it the name introcanvas. Give the canvas a width of 640px and a height of 480px. Set the left and top property to 0. Go to the project panel and add a folder Images to the project. Right click this folder and choose Add existing item Select the files goodguy.png and SilverlightLogo.png. Drag the image Silverlight.png on the stage, give it a width of 640px and a height of 480px. Set the left and top property to 0. Set the opacity to 30. Put different textblocks on the stage for the title, choosing a level and some explanation about the controls. Choose your own font, fontsize and positioning ( left and top property ). After you are done it looks a little bit like this: Put a new textblock above the title Silverlight Invaders, give it the name playagain in the property panel. Give it a font, fontsize and position it straight above the title. Set the text to empty. We will use this textblock to give a message when the game is finished. Add a new canvas to the canvas page called gamecanvas. Give the canvas a width of 640px and a height of 480px. Set the left and top property to 0. We will use this canvas to put all our elements on. Step 3: create the buttons for the different levels Near the text Choose your level, we will put 4 buttons from level one to level four. The buttons are an instance of the user control levelbutton we will create in the following steps: Right click the project in de project panel and choose Add New Item. Select the template Usercontrol and give it the same levelbutton.xaml. Give the canvas UserControl a size of 40 by 40 and choose a hand as cursor. Double click the rectangle in the toolbox so you have a rectangle that entire fills the canvas. Set the alpha value of the fill color to 0, set the stroke to #FF83D7FB and the strokethickness to 4. Add a textblock to the canvas. Set the text to 1 and make sure the textblock is put in the middle of the rectangle. Give the textblock the name txtnumber.

3 In the next step we will make a storyboard to animate the button when the mouse is over the control. In the objects and timelinepanel, click the > button and then the + to create a new storyboard Name the storyboard animatemouseover and set the checkbox Create as resource on. Select the element rectangle and click on the Record keyframe button. Move the yellow slider ( playhead ) to 0:00:300 and change the stroke color of the rectangle to #FF194CCB. Move the playhead to 0:00:600 and change the stroke color back to its original color #FF83D7FB. You will see that the keyframes will be added automatically. Click the small arrow near the element rectangle followed by the small arrow near stroke and right click on the word color. You can set the repeat count to forever by clicking the button on the right side. This is all the markup we need for the levelbutton. In the next step we will add some code behind to interact with the button. If you want to add code behind, you have to open the project in Visual Studio and open the file levelbutton.xaml.cs. The code is well documented and can be found in the rar file with the entire project. The last step is to put four buttons on the introcanvas for the different levels and start the game when one of these buttons is clicked. This code can be found in the Page.xaml.cs file. Press F5 to test the program and you should see the screen with 4 buttons. In the mouse goes over a button an animation starts, and stops when the mouse leaves the button. If you click on a button, the stage becomes empty and you are ready for the next step. Step 4: create the good guy and put him on stage We will go back to blend to create the interface and the animations for the good guy. When this is done we will write some code to interact with the good guy and put a good guy on the stage. Go to Expression Blend and add a new UserControl name goodguy.xaml. Set the size of the canvas to 50 by 50.

4 Go to the transform section of the property panel and set the center point ( fifth tab )for x and y to 0.5. Add an element Image from the asset library to the canvas with a size of 50 by 50 Use the image goodguy.png as the source and set the property Stretch to uniform. The next step is to add a storyboard to the control that will play when the good guy fires a bullet. Create a new storyboard with the name goodguyfires and save the storyboard as a resource ( just the same way you did with the levelbuttons ). Select the canvas and create a new keyframe. Put the playhead on 0:00:200 Select the canvas element and go to the transform section in the property panel. Select the second tab rotate and set the value to 45 Put the playhead on 0:00:400 and set the rotate value back to 0 The user interface for the good guy is ready. In the next steps we will add some code to interact with the good guy. He has the following functionality: he can move left, move right and shoot a bullet. Go to Visual Studio and open the file goodguy.xaml.cs. The code is pretty similar to the code of the levelbutton. The code can be found in the rar file with the entire project. In the last step we will define a good guy element in Page.xaml.cs and add a good guy in the middle of the canvas gamecanvas. After that we need two eventhandlers: one event if the user presses a key and one event is the user clicks the left mousebutton. Once again, the code can be found in the rar file with the entire project. Step 5: create the bullet and make the good guy able to shoot Create a new UserControl in Blend called bullet.xaml. Give the canvas a width of 4 and a height of 10. Double click on the ellipse element in the toolbox to fill the canvas with an ellipse. Set the stroke to none and the background to #FF194CCB The code in bullet.xaml.cs is very similar to the good guy en the levelbuttons. There is only one extra property Visible. When a bullet hits a bad guy, he must disappear. The code behind for bullet.xaml.cs can be found in the rar file. We also need to put bullets on the canvas when the left mousebutton is pressed. I work with a list of bullets List<Bullet> for that. If the good guy fires a bullet before the previous bullet has hit a target or is disappeared, it is a lot easier to control the bullets when they are in a list. You can find the code to shoot a bullet in the method Page_MouseLeftButtonUp in the code behind. I also play the animation of the good guy. The bullet isn t moving for the moment, but we will fix this later.

5 Step 6: create the bad guys and put them on the canvas Create a new user control in Blend called badguy.xaml Give the canvas a width of 30 and a height of 20. Double click on the ellipse element in the toolbox to fill the canvas with an ellipse. Set the stroke to none and make a gradient background from #FF0030A8 to #FFFFFFFF. Rotate the gradient 90 with the brush transform tool. Select the ellipse and choose Object Path Convert to path Select the white arrow ( direct selection tool ) in the toolbox and drag the lowest point of the ellipse a little bit higher. Drag 3 ellipses above this first ellipse like you see in the picture. You do 3 times the same thing o First select one of the newer ellipses o Second select the big ellipse o Go to Object Combine Subtract After the bad guy is drawn, he needs a little bit animation. He must move right and left at any time and must rotate and disappear when he is shot. Now we will create the two storyboards for that. Create a new storyboard, name it badguymoving, but don t save it as a resource. So the storyboard will start immediately. Select the canvas and insert a new keyframe. Move the playhead to 0:00:200 and set the Translate X position in the transformation section of the property panel to 10 Move the playhead to 0:00:600 and set the Translate X position to -10 Move the playhead to 0:00:800 and set the TranslateX position to 0 For the second animation: Create a new storyboard, name it badguykilled and save it as a resource ( checkbox is on ) Select the path and insert a keyframe Move the playhead to 0:00:500 and set the opacity to 0. Also rotate the path 360 in the transformation section of the property panel. That s all we have to do in Blend, from now on, everything will be done in Visual Studio. We start with putting the bad guys on the canvas. I use a list which contains a list of badguy object for this. All the code can be found in the method putbadguysonstage().

6 Step 6: use storyboards as a timer I need two timers: one timer that makes the bad guys come down and another one that makes a bullet move to the top. Silverlight has no timer component, so I used storyboards for this. I defined two storyboards in the xaml code of Page.xaml which hasn t any animation <Canvas.Resources> <Storyboard x:name="timerbullet"/> <Storyboard x:name="timerbadguycomes"/> </Canvas.Resources> In my code behind there is a method called inittimers(). In this method I set the duration of the storyboard ( read: the interval of the timer) and which method has to be executed every time the storyboard is completed. If necessary, the storyboard will be started again in this routine. In the _timerbullet_completed method, I loop through the list of bullets. If there top position can be lowered with 3px, I do this, otherwise, the bullet is removed from the list. There is also a function that detects if the bullet hits something or not. More about this function in step 7. In the _timerbadguys_completed method, I loop through the list of bad guys. If they are still visible ( not killed ), I try to higher there top position. If a bad guy is coming closer then 100px to the bottom of the stage, the game is over. More about the game over function in step 8. Step 7: detect if a bad guy is hit There is a function called detectbadguyhit which got a paremeter bullet in the code behind. This function loops through all the bad guys who are still visible. For every bad guy, the function checks first if the bullet got a left position between the left position of the bad guy and the left + width of the bad guy. If this is true there is a second check, which checks if the top position of the bullet is smaller then the top of the bad guy. If this is true, the bullet has hit a bad guy, and the bad guy is removed from the list. There is also a method checkvictory who checks that all the bad guys were killed or not. Step 8: When is the game over The game is over when all the bad guys were shot or when a bad guy came to close to the button. If the game is over, all the bad guys are cleared from the list, gamecanvas is cleared and the introcanvas is shown again with a message that indicates a win or a loss.