Tutorials‎ > ‎

XNA Framework I

posted Dec 26, 2011, 10:09 PM by Reza Aggi Prasetyo   [ updated Aug 15, 2016, 11:39 PM by Surya Wang ]

Introduction

 

Introduction to XNA

                XNA is a framework from Microsoft that created to make developers easier to build games for PC, XBOX, and Zune. XNA stands for “XNA’s Not Acronymed”.

                XNA was first announced on March 24th, 2004, at the Game Developers Conference in San Jose, California. Here are some versions of XNA framework:

-          XNA Game Studio 2.0, December 2007 (Visual Studio 2005)

-          XNA Game Studio 3.0, October 2008 (Visual Studio 2008)

-          XNA Game Studio 3.1, June 2009

-          XNA Game Studio 4, September 2010

 

XNA Logo


                The orange color of the logo represents Morse code:

-          -..- = X

-          -. = N

-          .- = A

 

Benefits of XNA

-          Free

-          Portability (Our XNA program can run in every platform that supports XNA Framework)

-          Easy (XNA can handle some routine code to control multimedia and other things that are the base needs of all games)

 

XNA Installation

                XNA needs two main programs and one optional program, they are:

-          Microsoft Visual C# Express Edition 2008 : Integrated Development Environment (IDE) for XNA.

http://www.microsoft.com/express/vcsharp/

-          XNA Game Studio 3.1 : I use this version here.

http://www.microsoft.com/downloads/details.aspx?FamilyID=80782277-D584-42D2-8024-893FCD9D3E82&displaylang=en

-          Zune Extensions : This is optional to use.

http://www.microsoft.com/downloads/details.aspx?familyid=48F7BA37-8BA7-4D16-8873-0B7F83EF77F9&displaylang=en

 

After you download all of the software mentioned above, then we can install them. Here are the steps of installing them:

1.       Install the Microsoft Visual Studio 2008.

2.       After that, install the XNA Game Studio. This must be done after we have the Microsoft Visual Studio 2008 installed in our PC.


 


 


 


 

3.       If you have finished installing XNA, your Microsoft Visual Studio will have new options in its project type. Look at the picture below:


 

4.       The last step is creating a new XNA project:

a.       Click Create Project menu when you first opened the Microsoft Visual Studio program.

b.      Choose the Visual C# tab on project type tree.

c.       Choose XNA Game Studio 3.1.

d.      Because of we would like to create a PC game, then choose Windows Game (3.1).

e.      Fill your project name and define the location that you want to use to be your project directory.

f.        Press the OK button.

5.       Try to run your XNA program by pressing F5 button on keyboard and there will be a window shown like this.


 

6.       Congratulations, you have successfully created your first game using XNA.

 

 

XNA Project

                XNA in Microsoft Visual Studio is a template of project. So after you created your XNA project, there will be two code files that automatically created.

a.       Program.cs

This file contains the Main method of the game we created.


 

b.      Game1.cs

Game1.cs is a file that stores classes that will encapsulate the game we created. XNA also has generated some standard procedures.




 

Description

-          Initialize()

This method is used to initialize the game that we created. Usually it used to set the resolution, create additional class (if exists), and set the variables that needed in our game.

-          LoadContent()

This method is used to load all of the resources that we need in our game. Resources can be image, music, etc.

-          UnloadContent()

This method is used to destroy contents that are not handled anymore by ContentManager.

-          Update()

This method maintains our game state updates such as: button/joystick/mouse/gamepad event, AI of our game, model animation, collision detection, etc.

-          Draw()

This method renders models or images that used in our game.

 

First Simple Setup

                When you run our new XNA project, a blank window will be shown. If you want to change the screen size, you can use the GraphicsDeviceManager class. Add this code into the Initialize() function.


 

If you want to make your game to be a full-screen game, add the code below.


 

If you want to change your window title, add the code below.


 

If you want to change the default background color, change the parameter of GraphicsDevice.clear() in Draw() method to another color. The example is below.


 

 

2D Game Basic

 

How to Load an Image

                Here I will explain about how to import your image files and place it on your XNA program. Here are the steps:

a.       First, we have to add our image file that would be used into our Project Solution.

Right click Content in project solution tree > Add > Existing Item.


b.      Then, choose the image file that we want to use. In my project, I will use this image.


 

After you choose the image file, you can see its properties.


 

Look at one important thing, Asset Name. It is used as the name that we need to write in our code if we want to load that file. It’s better if you change the Asset Name to be more shorter and easier to remember.

 

c.       Add the container class for the image.


 

d.      Add some code to the LoadContent() method.


 

e.      If your image is stored in a folder (example: Images), then we must change the path to load it, example:


                 

f.        Add this code to UnloadContent() method for cleaning memory.


 

g.       In Draw() method, add this code below to load the image. We need SpriteBatch class that provided by XNA to show it on the screen.


 

h.      Here is the result when we run our program.


 

If you want to place the image on the center of the screen, you must change the second parameter of spriteBatch.Draw() method to be like this.


 

If you want to flip the image position, change the spriteBatch.Draw() method parameters to be like this.


 

Here is the result after the spriteBatch.Draw() method parameters have been changed.


 

 

How to Load a Sound

                Before XNA Game Studio 3.0 is published, XNA can only load a .wav sound file using XACT tools. But now, it can be done easier and supports .xap, .wav, .wma, and .mp3 format. Here is the step how to do it:

a.       First, we have to add our image file that would be used into our Project Solution.

Right click Content in project solution tree > Add > Existing Item.



 

b.      Then, choose the sound file that you want to use. If you have added it, you can see its properties.



 

c.       Add the container class for the sound.



 

d.      Add some code to the LoadContent() method.



 

e.      Add this code to UnloadContent() method for cleaning memory.



 

f.        In Update() method, add this code below to load the sound. We need MediaPlayer class that provided by XNA to play it.


 

g.       After that, when you run the program, you will hear the sound of the file that you have loaded.

 

h.      If you check the Bin folder in your project directory, you will find that XNA converts the sound file that you loaded to .wma format.