This chapter: 1. Prepare the Silverlight 3 game development environment
2. Understanding digital art resources
3. Prepare digital resources for a new 2D game
4. Understand 2D game development tools
5. Learn how to process, preview, and scale digital resources
6. Use digital resources to create and run the first graphic application Program Developing 3D games with UFO intrusion requires us to make full use of our creativity. Game development requires a variety of techniques, but the most important thing is creativity. Alas, this is what I lack.
We already know how to use C # Programming Language To develop some applications. However, Ria provides an exciting way to develop games, because they provide users with a rich user experience without installing software on their own computers, silverlight is a good Ria platform.
First, we need to install the latest tools to start our 2D game development. Then we will use Silverlight 3 to develop 3D games.
The only basic requirement for developing 3D games using Silverlight is to understand C # programming language and XAML. Code And Visual Studio IDE. Prepare the development environment: first install Visual Studio 2008 and its service pack1 or Visual Studio 2010.
You also need the following tools: expression design, inkscape, Silverlight 3 tools for Visual Studio, Silverlight 3 offline document Chinese edition,. Net Ria services, and Silverlight toolkit. You need to download and install the above tools. Create a grating image resource. 1. Download the code file in this chapter.
2. The original Raster image resources are in the "game_pngs" folder. 3. Use tools such as Adobe Photoshop to process these images (the main difference is that the shadow part of these images is completely transparent background ).
4. The processed Raster image resources are stored in the "game_pngs_resized" folder.
Game development requires a lot of resources, and this is not a programming task. In creating our Silverlight 3D game, we will use many common graphic image processing tools. Because many tools are very expensive, we will use some open-source and free replacement tools to complete the vast majority of tasks.
For the basic elements and processes of game development, refer:
Next, you need to download and install some files that help convert the existing scalable vector image to the most appropriate file format used in Silverlight 3:
1. Download and install expression design and inkscape.
2. Once the inkscape tool is installed, you can load and edit many vector resources in different file formats, as shown in: why do we need to install so many tools to create a simple vector resource used in Silverlight 3? This is because Silverlight 3 uses XAML and the best way to load Scalable Vector content is to define these objects in XAML. However, many tools that provide exported XAML content do not work as expected. They are incompatible with Silverlight 3. In addition, many conversion tools are still in alpha (TEST) version, and there are some problems when we need to convert Complex Vector resources.
Therefore, to avoid these problems, we intend to perform additional steps. You can find some freely available WMF-format vector resources in Microsoft Office clipboard when defining Scalable Vector resources in XAML. WMF is a Scalable Vector file format.
Remarks : WMF is an old, scalable vector format. Silverlight 3 does not directly support WMF graphics, so we must convert WMF graphics. The following steps allow us to convert any vector formats supported by inkscape to SVG (Scalable Vector Graphics), AI (Adobe Illustrator), and PDF (Adobe PDF) and EMF (enhanced primitive files.
1. The original WMF file is saved in the "game_wmfs" folder.
2. Repeat the following steps for each WMF file (Steps 2 to 12)
3. Open a vector graphics file in inkscape
4. Select File | save...
5. Remove the file extension.
6. Select the saved format as PDF, and click Save.
7. Change the extension of the new pdf file from PDF to AI.
8. Open the aifile in Microsoft Expression design.
9. Select a file | export ....
10. Select the export format as XAML Silverlight canvas 11 and save the exported XAML file under the "game_xaml" directory.
12. You can preview the XAML file in IE, as shown in: preview and scale the XAML vector image. In the Silverlight 3 Application, The XAML vector image can be scaled and the image quality remains unchanged, in fact, all vector graphics are in this format. Scaling vector graphics is not a problem because they have no pixel problems. However, they need more processing time than raster images to be displayed on the screen.
Xamlpad is a very interesting tool that helps us create XAML and XAML vector graphics. Xamlpad is part of the wpf sdk. After Visual Studio is installed, you can find it in the following folder: Program Files \ microsoft sdks \ windows \ v6.0a \ bin.
Now we will use xamlpad to test how the XAML vector graphics are scaled:
1. Use notepad to open any XAML vector image exported by expression design.
2. Copy all the content in the notepad to the clipboard.
3. Run xamlpad.
4. paste the content in the clipboard into the xamlpad. You will see something similar to the following: 5. Change the scaling ratio. You will see no image distortion problems. Preparing a game framework Silverlight 3 does not provide a game framework. However, it has an excellent graphic rendering function combined with truly useful time management features. Therefore, we must write some code to complete a framework to simplify game development.
First, you must create a Silverlight application and see how it works on a Web browser:
1. Use the "Silverlight application" template in Visual Studio to create a new C # project. Set the project name to silverlightmonster. The options in the dialog box are as follows: 2. Click "OK"
3. In Solution Explorer, right-click silverlightmonster and choose add | existing item from the context menu ".
4. Select the target folder (, silverlight3d \ invaders \ game_xaml) where the previously generated XAML file is located, select a XAML file, and click "add ".
5. In Solution Explorer, right-click the newly added item and choose open in expression blend from the shortcut menu. The following results are displayed:
6. In the "object and timeline" window, right-click "layer_3" and choose "create usercontrol..." from the context menu ...", This opens a dialog box.
7. Name the user control "ghost", save it, and return to Visual Studio.
8. Now you can see the rendering effect of the image in Visual Studio (it is inconvenient to see the preview effect in Visual Studio 2008, it is said that Visual Studio 2010 has greatly improved), as shown in:
Create and run the Silverlight application. Now, we will make the ghost on the screen move with the mouse position. To do this, we must add the necessary code to display the ghost and move it. We will add the following XAML and C # code:
1. Open the XAML code of mainpage. XAML in the silverlightmonster project and replace it with the following code: < Usercontrol X: Class = "Silverlightmonster. mainpage"
Xmlns = "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Xmlns: x = "Http://schemas.microsoft.com/winfx/2006/xaml"
Cursor = "NONE"
Width = "1366" Height = "768" Mousemove = "Ghost_mousemove"
Xmlns: silverlightmonster = "CLR-namespace: silverlightmonster" >
< Canvas X: Name = "Cnvmovementtest" Width = "1366" Height = "768" Background = "Bisque" >
< Silverlightmonster: Ghost Canvas. Left = "10" Canvas. Top = "10" X: Name = "Ghost" />
</ Canvas >
</ Usercontrol > 2. You will see that the ghost is displayed in the upper left corner of the view designer (you need to re-compile the project ).
3. Open the "mainpage. XAML. cs" file in Solution Explorer.
4. Add the following event handler code to the mainpage class: Private Void Ghost_mousemove ( Object Sender, mouseeventargs E)
{
// Get the mouse Current Position
Point point = E. getposition (cnvmovementtest );
// Set the canvas left property to the mouse X position
Ghost. setvalue (canvas. leftproperty, point. X );
// Set the canvas top property to the mouse y position
Ghost. setvalue (canvas. topproperty, point. y );
} 5. Compile and run the solution. Run the following code: Create an xbap WPF application. Silverlight is a subset of WPF. A significant advantage of the Silverlight application is that it can run in a web browser only by installing a plug-in. But sometimes we need to develop games that are more powerful than Silverlight. In these cases, we can create an xbap (XAML browser application) WPF application. Source code Make a few changes. Here, xbap is similar to Java applet.
1. Create a new C # project based on the "WPF Browser Application" template. The project name is "silverlightmonsterxbap ".
2. Right-click the silverlightmonsterxbap project and select "add | existing item ...".
3. Add "alien_01_01.xaml" to the project.
4. Double-click the file and you will be able to see its graphic effect on the IDE screen.
5. Select "project | Add User Control..." from the main menu ...".
6. Name the user control "ghost" and click "OK.
7. Open the XAML code of the "alien_01_01.xaml" file and copy "<canvas X: Name =" layer_3 "width =" 193.333 "Height =" 128 "canvas. left = "0" canvas. all content between top = "0"> "and" </canvas>.
8. Open the XAML code of the "ghost. XAML" file and remove the following content:
Height = "300" width = "300"
9. paste the code copied to the clipboard between <grid> and </GRID>.
10. Now, you can see the interface effect of the user control in Visual Studio: Compile and run the xbap WPF Application 1. Open the XAML code of the "page1.xaml" file, replace the original code with the following content: < Page X: Class = "Silverlightmonsterxbap. page1"
Xmlns = "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Xmlns: x = "Http://schemas.microsoft.com/winfx/2006/xaml" Title = "Page1" Cursor = "NONE" >
< Canvas Width = "1366" Height = "768" Mousemove = "Ghost_mousemove"
Xmlns: silverlightmonsterxbap = "CLR-namespace: silverlightmonsterxbap" >
< Canvas X: Name = "Cnvmovementtest" Width = "1366" Height = "768" Background = "Bisque" >
< Silverlightmonsterxbap: Ghost Canvas. Left = "10" Canvas. Top = "10" X: Name = "Ghost" />
</ Canvas >
</ Canvas >
</ Page > 2. Open the "page1.xaml. cs" file in Solution Explorer and add the required code for the "page1" class to the same mousemove event handler as the applications of the previous Silverlight version.
3. Compile and run the solution as follows:
Download Code:Source code of this Chapter
The next chapter describes how to create 2D cartoon characters, manage resolutions and frames in a 2D game.
