Xna what is

Although XNA is not actively developed, MonoGame, which is freeware cross-platform version of the XNA programming interface, is still actively developed.

By: Justin Stoltzfus Contributor, Reviewer. By: Satish Balakrishnan. Dictionary Dictionary Term of the Day. Gorilla Glass. Techopedia Terms. Connect with us. Sign up. Term of the Day. Best of Techopedia weekly. A SpriteFont is composed of two files. The second file is a single graphic image containing each character of a font, rendered at the size you specified in the XML file. The image is loaded by MonoGame in the LoadContent method and then sliced up into individual two-dimensional images known as sprites , which can then be used to display text on screen via the DrawString method of the SpriteBatch object.

Unfortunately, because this isn't XNA and the content pipeline in MonoGame is still in development, there are a few manual steps you'll need to perform in order to create and add any SpriteFonts to your game.

Editor's note: Codeplex and its archive has been shut down as of July 21, Search GitHub instead. There's no executable release available, so you need to open and build the source code.

It's a Visual Studio project, but it will build in later versions of Visual Studio without any problems. Once you've built the content compiler, you'll need to feed it a SpriteFont definition file, which looks like the following XML snippet:. You can use the text editor of your choice to create this file, but make sure to give it a. It's a good idea to use the name and size of the font i. Once you compile the SpriteFont , you'll have an. XNB file. You add this to your MonoGame project in the Content folder.

Follow these steps for the best results:. Inside the Game1. Add the following block of code just before the call to base. Draw gameTime :. You'll also pass in the text string you want to draw, a Vector2D location expressed as X,Y coordinates , and the color of the text. Feel free to experiment with different screen coordinates and colors.

That's all you need to do to add text onscreen in your game. Hit F5 to run and you'll see a CornflowerBlue screen with your text at the location you specified, as in Figure 5. In order to move your text around, you'll create some variables to store the screen position of the text and the speed at which you wish to move it. Start by adding these lines at the class level, just under your SpriteFont declaration, since they will be used by the Update and Draw methods, and declaring them inside those methods would just cause the value to reset.

Notice the Vector2. Zero in the snippet above? That's a shorthand way of instantiating with a value of 0, 0. Next, you'll take the current position and add the speed multiplied by the game timer. This gives you a nice, smooth animation based on a consistent timer, rather than something more unpredictable like raw CPU speed.

Put this code right after the previous two lines. With those boundaries in place, you can now add the code to adjust the direction and speed of the text as it moves around the screen. Whenever your text position exceeds either the X or Y boundaries, your speed is flipped between positive and negative and your position is adjusted accordingly.

The last step is to look in the Draw method and change your DrawString method to use your new textXY variable, instead of the hardcoded 0,0 values, like so:. With that, you're done with this set of changes, and your Game class should look like Listing 1.

Hit F5 and give it a run. Adding a 2D sprite image to your game is as simple as right-clicking the Content folder in your Solution Explorer and picking Add Existing Item. Browse to the image you wish to use. For best results, grab a.

PNG file with a transparent background, such as the soccerball. After you add the image to your solution this article assumes that you'll be using the soccer ball image , add the following line of code at the class level, where you defined the SpriteFont :. A Texture2D type is used to store a two-dimensional graphic also known as a Sprite which you will pass to the Draw method of your SpriteBatch object. Now that you have a variable to hold it, load the image by adding the following line in your LoadContent method:.

This loads the image into your GPU and reloads it in the event of a device reset so it will be ready for use by your game. At this point, with the image loaded into your soccer ball variable, you're one line of code away from seeing it onscreen.

Add the following line to the Draw method, inside the spriteBatch block:. Remember that XNA draws from back to front by default, in the order the calls are made in the code. Once again, you're ready to fire up your game. Hit the F5 key and sit back, marveling at the splendor of moving text and a static soccer ball competing for screen real estate. I've barely scratched the surface of what the SpriteBatch. Draw method is capable of, but in the next section, you'll tackle some additional functionality.

The SpriteBatch. Draw method has a number of overloads for handling things like rotation, image origin, source rectangle handy for slicing up those spritesheets into animations , and a lot more. Take a look at this method signature:. It's a bit longer than the one you previously used, but there's a lot more functionality here.

The first two parameters, texture and position, should look familiar. Next is an optional parameter: sourceRectangle , which allows you to draw a specific area of a larger texture such as a single cell of animation. You've seen the color parameter before in the previous example, but what you may not know is that you can use it to tint your sprite.

Using Color. White actually means no tint at all. The next three parameters, rotation, origin, and scale, have a direct impact on how the image is rendered and will be the focus of the next enhancements to the Game project.

The effect parameter accepts a SpriteEffects enumeration that allows you to flip your sprite vertically, horizontally, or neither. You don't apply this value to the sprite unless you need to. Lastly, the depth parameter is used with sprite sorting, if you need to sort them in a manner other than back to front, in the order drawn in code. To make the soccer ball rotate, you will change the Draw method to use the signature described above, and pass in values to control the rotation and origin.

In order to rotate the image, you need to know the point you are rotating around, which is stored in the origin variable. This isn't just the rotation point though; origin dictates where to draw the image in relation to the supplied positional coordinates.

By default, this is 0,0, which means that the top left corner is drawn at the position you specify. By changing it to the middle of the image, you're drawing the image with an offset. If this seems confusing, wait until you run the code.

We haven't changed the position value, but you'll notice the soccer ball is drawn further up and left than before, because of changing the origin.

Lastly, the scale variable dictates the size to render the image in relation to the original size. A value of 1. The original image was kind of big, so I've scaled it down by half.

With those variables in place, the next step is to add this line of code to your LoadContent method. This code sets the rotation origin to the center of the image, as determined by dividing width and height by two. There are a few different ways to handle setting the origin. You can define it at the class level if you know the specific resolution of the image, but if you prefer to do it programmatically, you need to do it after loading the image, since you won't know the size until then.

To rotate the image, you'll need to add the following code to the Update method. You can put it before or after the code that moves your text, as long as it's before the call to base. Just like with moving the text, you rely on the GameTime class to provide a consistent and smooth animation.

A little bit of math to calculate the proper rotation degrees and you're done with the Update method. The last thing to do is change one line in the Draw method. Change the spriteBatch.

Draw method to look like this:. If you run the game at this point, you'll see a rotating soccer ball in the top left corner, and your text slowly gliding across the screen, just like in Figure 7. For a complete listing of how your Game class should look at this point, check out Listing 2. The final thing to cover in this article is what makes the difference between a game, and the world's most boring screensaver: the ability for your player s to provide input and see a direct effect in your game.

If you take a look at the first two lines of the Update method, you'll see that you are already checking for two forms of input: from the Game Controller via the GamePad class and the Keyboard via the Keyboard class. This piece of code checks to see if the Back button on the game controller being used by player one there's support for up to four players locally is pressed:. The Buttons collection contains a value for every button, bumper, stick and trigger on the controller.

The ButtonState enumeration contains two values: Pressed and Released. Since you can check for either state, per button, this gives you a lot of flexibility. The following piece of code gets the state of the keyboard to see what, if any, keys are pressed. In this case, you are checking for the Esc key.

Timer measures the time Update and Draw execute in a cycle. We measure a process by nano time and limit it by frames per second FPS. That includes game logic, drawing of images, playing of sounds and what ever the game requires it to. XNA Game Studio 4.

NET Framework. The XNA Framework is designed to follow. NET Framework design patterns and idioms.