Pong: The adventure begins again, join in NOW, ADD Graphics

 

 

 

Explanation	Steps to Reproduce
“Now let’s add graphics to our game. First, I’ll create a folder called media and in it, I will now add a new ball and paddle. As you can see, the paddle and ball are the same as in the classic game.”  First let’s add a folder to hold the media material for the content pipeline. (Note: Click on the public folder in the File Module on the webblog and download the zip file with the code snippets and graphics in it)	·         Right-click on Pong project in Solution     Explorer ·         Click Add > New Folder ·         Call the folder Media
Now we will add the two media files: Ball.png and paddle.png	·         Right-click on Media folder ·         Select Add Existing Item ·         Using the Ctrl key: Select ball.png  and paddle.png from your “DevelopMental XNA Files” folder on your desktop ·         Click Add button
“Now I’m going to change the properties of the images to copy if newer.  This specifies if the image will be copied to the output directory when I’m building my solution. I want to make sure that if I decide to make changes to my graphics, that they are reflected in the build.”	·         Click on ball.png ·         Go to the Properties window ·         Select the Copy to Output Directory property ·         Set the property to  Copy if newer ·         Click on ball.png ·         Go to the Properties window ·         Select the Copy to Output Directory property ·         Set the property to  Copy if newer ·         Repeat for paddle.png

 

“Now we will create a class called Paddle. In order to do this, we’ll create a new class file called Paddle.cs. Then, we have to add the Xna namespace and our implementation code. We have two variables to set the position of the paddle, one defining the coordinates and the other defining the speed. Next, we have a constructor to set the paddles properties. ”	1. Right-click on the Pong project in     Solution Explorer 2. Click Add > New Item 3. Select a C# Class 4. Call the class Paddle.cs 5. Edit the file 6. Add using Microsoft.Xna.Framework;     namespace to the namespaces 7. Highlight the class code inside Paddle class 8. Right-click and select Insert Snippet 9. Add the Paddle code snippet, titled: Demo 2-Step 6 (Paddle Class)

 

“Then, we’ll create a class called Ball and reproduce the same steps. The difference here is that instead of a constant speed, the horizontal and vertical speed is randomized.” <<Adding the code is similar to the paddle.cs component, refer to that for instructions, this is the previous demo component.>>	1. Right-click on the Pong project in     Solution Explorer 2. Click Add > New Item 3. Select a C# Class 4. Call the class Ball.cs 5. Edit the file 6. Add using Microsoft.Xna.Framework;     namespace to the namespaces 7. Highlight the class code inside Ball class 8. Right-click and select Insert Snippet 9. Add the Ball code snippet, titled Demo 2- Step 6 (Ball Class)
“The next thing we need to do is add the variables. Let’s open the main class and add variables to initialize graphics in our game.”	1. Edit Game1.cs 2. Scroll to right after the ContentManager     variable declaration in the Game1 class 3. Right-click and select Insert Snippet 4. Add the variables code snippet, titled Demo 2- Step 7 (Variables)

 

“Next, we’ll add a ResetGame method to initialize the elements in the game.”	Scroll right after the variable declarations in the Game1 constructor Right-click and select Insert Snippet Add the ResetGame code snippet, titled Demo 2 –Step 9 (Reset Method) Go to the Intialize method and add ResetGame(); after the TODO comment.
“We need to load the textures and initialize the sprites that we are using in the game. As you can see, the textures are 2D and are referenced from our Media folder.”	1. Scroll to the LoadGraphicsContent     method 2. Right-click inside the loadAllContent     conditional block 3. Right-click and select Insert Snippet 4. Select Code Snippet 5. Insert the code to load the Textures     and initialize the SpriteBatch
“Finally, we need to add some code to our Draw method. This will draw the graphics on the screen from the SpriteBatch including the two paddles and the ball. ”	Scroll to the Draw method after the TODO comment. Right-click inside the Draw constructor Right-click and select Insert Snippet Select Code Snippet Insert the snippet titled: ·         Demo 2 – Step 11(Code for Draw Method)
“The last step is to build and launch our game. As you can see, the graphics now appear.“ (Remember the game doesn’t move, you have only loaded the graphics.)	1. Click on the F5 function key to launch     the application

Code Snippets for PONG

Technorati Tags: XNA express,XBOX 360,AI,Artificial Intelligence,Microsoft,Code Snippets

How do you create Code Snippets, and what are they?[i]

Ok, ok, the space aliens are talking to me again, oh wait a minute, I found some aluminum foil… Made a hat, grounded it to a water pipe, now I am safe.

Let’s talk about code snippets, which is easier than talking to space aliens, although someday you and I will have that discussion about how to use software to communicate with space aliens. But for now, let’s talk about how to use code, and be an efficient software architect.

To be able to understand where the code comes from, most of my critics ask me to start off by showing what Code Snippets are, since many students and hobbyists do not use code snippets.

To keep this article short and sweet, or short and sweet as I can keep it, I will talk about:

· What code snippets are

· How to create the snippets

· How to add them to your project in C# Express 2005 (the instructions are not for C# Express 2008 or any version of Visual Studio Pro or Visual Studio Team Systems)

· How to use Code Snippets in your project.

In designing games, you will constantly be typing similar code all of the time, wouldn’t it be nice to have a way to insert most of the code you need quickly and cleanly?

Well you can, using Code Snippets. I have included a file that contains code snippets, and I use them in my demonstrations, hobby work and real job.

How to Create a .snippet File[ii]

Before you can begin writing your code snippet, you must create an XML file with a .snippet file name extension. The process to create the code snippet file in Visual Studio Pro or Visual Studio Team System is will documented, however, the C# Express process is slightly different.

In C# Express, to create a .snippet file, open notepad and cut and paste the file below and save it as <Filename>.snippet, the <filename> is anything you want to call it, but remember the folder you save it to. (Note: <![CDATA[ line is correct as written.)

<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet"&gt;

<CodeSnippet Format="1.0.0">

<Header>

                <Title>

                                     ADD TITLE HERE THIS WILL APPEAR IN THE CODE SNIPPET INSERTION MENU

                         </Title>

          </Header>

         <Snippet>

                        <Code Language="CSharp">

                        <![CDATA[

                                          ADD CODE HERE, COPY AND PASTE FROM YOUR CODE

                                         ]]>

                        </Code>

           </Snippet>

</CodeSnippet>

</CodeSnippets>

 

How do you add the code snippets to your IDE?

You use the “Code Snippet Manager” under the Tools menu in the C# Express IDE (Integrated Design Environment). I know that there is some way you can use the code snippets in other environments, but I don’t know how.

Here is the illustrated step by step:

Select the Add button and then navigate to the folder that holds your snippet, this folder name will appear in the location box
When you navigate to your code snippet folder, in this case the “Happy code snippets” folder. It will appear to be empty, I don’t get it either, but remember that the snippet has an extension of snippet.
Now the folder, and if you click the little plus, you will see your code snippet folder. The file will show up as the “title” of your code snippet. If you look at the “title” of the file, you will see that it is AddPoint Code, and that the file name is “addpoint.snippet”.

 

How to use your code snippets in a coding project

To use the code snippet in your code, right click where you want to add the code snippets and select “Insert Snippet” . Then select “AddPoint Code”, if there are more snippets, then you would select the correct one. Finally note the code has been inserted.

 

Conclusion

There are other ways to use code snippets, and these are covered in the referenced articles, this article was presented to get you started in using code snippets.

---

[i] http://msdn2.microsoft.com/en-us/library/ms379562(VS.80).aspx#codesnippets_topic5

[ii] http://msdn2.microsoft.com/en-us/library/ms165392(VS.80).aspx