Page 1 of 1

XNA Basics - Part 1: Window Setup, SpriteFonts, and Textures.

#1 .Aaron  Icon User is offline

  • Rock, paper, scissors, lizard, Spock
  • member icon

Reputation: 59
  • View blog
  • Posts: 2,745
  • Joined: 04-August 09

Posted 06 July 2013 - 08:08 AM

Looking through the game dev tutorials here I noticed there wasn't anything that went over just the basic things of starting a project in XNA, aside from walk throughs of making a small game by one or two people. The goal of this is going to be more of a quick reference and place to start for anyone jumping into XNA for the first time. This is all pretty basic stuff, but I figured that it wouldn't hurt to have a compilation of it all here in DIC's tutorials, and that it would be a decent place to start for my first crack at a tutorial. This is going to be a multi-part thing, probably two or three as of now. I know a lot of people will be switching over to or starting with MonoGame now, so while I haven't used it before myself, I have downloaded it and will try and make sure I test everything in that as well. If I find any differences in the way things are done I will point it out and add whatever solutions I can find.

In this first part I'm covering:

  • Game Window Setup
  • Displaying Text
  • Changing The Background Color
  • Drawing Images To The Screen
  • Image Rotation and Transparency


Game1.cs, Basic game setup

When you create a new XNA project a number of methods are added to the Game1.cs file by default, though they are mostly empty to begin with. Any code in the Game(), Initialize(), and LoadContent(), methods is called when your game starts up. Update() and Draw() will get called every game cycle.

First we are going to do basic set up for your game window. So after creating a new XNA project, go to the Game1 file and scroll down to the Game() method where the graphics device manager and content root directory are set up:

        public Game1()
        {
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";
             
            // We are going to put more stuff here now.
        }


First we're going to set the size of the game window. So, where I've placed the comment, put these two lines, and change the numbers to whatever size you want:

graphics.PreferredBackBufferWidth = 800;
graphics.PreferredBackBufferHeight = 500;


If you want to make the game start in full screen mode, you can set the IsFullScreen variable like this:

graphics.IsFullScreen = true;

Next, set the title of the window:

window.Title = "Name of your game/whatever else you may want to put up here.";


Now by default, if you move your mouse over your game window when you run the program, it will not be visible. If you wish for the mouse to be seen over your game window then you need to set its visibility to true by adding:

IsMouseVisible = true;

If you are using MonoGame, the mouse should already be visible, and you can skip this step, unless you want to change it so it's not.


Also by default, the game window cannot be resized with the mouse while running. If you want then change it with:

window.AllowUserResizing = true;



Loading Content, SpriteFonts and Background Color

SpriteFonts represent the text that you draw in your game. To add a SpriteFont file to your game, go over to the solution explorer and right click on the content folder, [your project's name]Content(Content). Then go to Add->New Item, and select SpriteFont. I've named my file Segoe UI Mono since it's the default font for new SpriteFont files. If you open the file you can change the font as well as other properties such as size, as well as if it's bold, italic, etc., each field is described in comments in the font file.

Now if you're using MonoGame, you'll need to go about this a bit differently, as a replacement for the content pipeline hasn't been added yet (though from what I've read, it is being worked on). While I've read a few articles where people have manged to add an XNA content project back in, the easiest way I've found to get your files in is to first build them in XNA and then move them over to your MonoGame project. To go this route you need to make a new XNA project, or if you have an old one you can just use that. Add your SpriteFont file in there like I described above, and build the project. Then go into the Your Visual Studio 20XX folder, and keep entering the folders with the name of the XNA project you're using. Then go to Bin->x86->Debug->Content. Copy your SpriteFont File -it should have the extension .xnb- then go back to the MonoGame project and paste it into the Content folder in the solution explorer. Click on the file name once it appears there. Then go to the properties window, and where it says Build Action, change it from "None" to "Content". Right below that, change the Copy To Output Directory slot from "Do cot copy" to "Copy if newer". You can now use the file in your code as described below.

To use the SpriteFont we first need a variable in the code to hold it, so go back to the top of the Game1 file, just above the first method we edited, and make a variable of type SpriteFont. There should already be GraphicsDeviceManager and SpriteBatch variables up there as well. I'm just naming mine the same thing as the file/font name, minus the spaces of course. Now go back down to the LoadContent() method. The spriteBatch variable is set there, as well as a comment telling you where to start putting things. To load the new font you need this line:

SegoeUIMono = Content.Load<SpriteFont>("Segoe UI Mono");

Content.Load<>() is used to load many different file types you'll need in your game, including sound files and images. Though it's too complex to go through here, you can even write your own content pipeline extension to handle your own file types or possibly handle existing ones a bit differently. At the end you put the name of the file you are assigning the variable to between quotes, notice that you do not need to include the file extension.

Now we can use the spriteBatch variable you've seen to display the text on the screen, so go down to the drawn method. First off we need to add two lines to the method that are required in order to draw anything to the screen. First,
spriteBatch.Begin();
and then under it,
spriteBatch.End();
Every time you use the sprite batch object to draw anything it has to be inside these two lines. While you'll add them in the draw methods of components we'll add latter in this tutorial series, be careful not to have too many of them being called each game cycle as it can slow down your game's performance.

We are going to use the DrawString() method of our spriteBatch object. The first overload of this method takes four arguments, the font to be used, the text you want, the position of the text, and the color you want it to be, respectively.

spriteBatch.DrawString(SegoeUIMono, "These are not the droids you're looking for.", new Vector2(40, 60), Color.Black);

There are five more overloads to this method, and they take extra arguments that let you do things such as rotating the text and flipping it either horizontally or vertically. This works almost identically to doing the same thing with images, which I will discus below.


While we're in the draw method, you can change the currently blue background color of the screen by changing the color name in this line from CornflowerBlue to one of the other available colors:

GraphicsDevice.Clear(Color.CornflowerBlue);


Images, Rotation and Transparency

Adding an image is very similar to adding a SpriteFont. Right click on the content project and go to Add->Existing Item, choose an image from your computer, and add a variable of type Texture2D up top. Once again go to load Content and use Content.Load like before, only now we change the spot between the < >'s to Texture2D.

image_variable_name = Content.Load<Texture2D>("NAME OF YOUR IMAGE FILE");

Now, going back to the draw method we will use spriteBatch's Draw() method, once again placing it between the Begin() and End() calls.

spriteBatch.Draw(image_variable_name, new Vector2(0, 0), Color.White);

This will draw the image at the top left corner of the screen, at the image's actual size. if you want the image to be drawn a different size then use a Rectangle instead which will allow you to specify the width and height of the image. When you draw images you can add a color tint to them, the Color.White makes it so there is no added color. If you want to draw only part of the image, pass in an extra argument between the Vector2/Rectangle and the Color, another Rectangle specifying the four corners of the section of the image you want drawn:

spriteBatch.Draw(image_variable_name, new Vector2(0, 0), New Rectangle(5, 5, 20, 20), Color.White);

There is another overload of the method that, like I mentioned above with drawing text, lets you rotate and flip the image.

spriteBatch.Draw(image, new Vector2(0, 0), new Rectangle(0, 0, 40, 50), Color.White, 55, new Vector2(0, 0), 1, SpriteEffects.None, 0);

The number 55 is the amount of rotation I've chosen, in radians. The Vector2 after it is the point of the image that will be the center of the rotation. The number after that is for image scaling, 1 being normal size. With the SpriteEffects argument you can also do both
.FlipVertically
and
.FlipHorizantally
The last number is image depth, used to order how images are drawn, and is a float value that can be anywhere from 0 to 1. It can be left at zero in most cases, unless you find you need such a way to order images aside from just putting the spriteBatch.Draw() calls in the order you want.


Now for transparency. If you want to make the whole image transparent then you just need to multiply the Color.somecolor part by a float number:

spriteBatch.Draw(image, new Vector2(0, 0), Color.White * .5F);

That will make the image 50% transparent.

If you want to make just the background of your image (if it's a solid color like a white background on one of your sprite images) transparent then you need to go into the image's properties. Click on the image in the solution explorer and then in the properties tab click on the little arrow to pull down more options for the content processor section. You can then change the numbers in the color key slot, and for whatever color you put there, every pixel of the image that matches that color will be transparent. I usually use a bright purple that I know will likely never end up in the actual sprite that I want to be shown. If you're working with MonoGame, you'll want to follow these steps while in the XNA project, before building it.



And that's it for the first segment of this series of starter tutorials for XNA. Coming up: components, render targets, and dealing with inactive windows. Thanks for reading, criticism welcome, though hopefully I haven't managed to leave too many opportunities for it in a base guide like this. :rolleyes2:

Is This A Good Question/Topic? 1
  • +

Replies To: XNA Basics - Part 1: Window Setup, SpriteFonts, and Textures.

#2 sundeep007  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 19-August 13

Posted 19 August 2013 - 03:52 PM

In which software u building this game application??XNA??is it a software??
Was This Post Helpful? 0
  • +
  • -

#3 stimpy77  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 20-August 13

Posted 20 August 2013 - 02:23 PM

I'm confused about the timing and industry relevance of this article. I thought XNA is now dead, due to Microsoft's intentions with Windows 8, Windows Phone 8, and Xbox One refocusing again on C++ w/ Direct3D?
Was This Post Helpful? 0
  • +
  • -

#4 modi123_1  Icon User is offline

  • Suitor #2
  • member icon



Reputation: 8396
  • View blog
  • Posts: 31,234
  • Joined: 12-June 08

Posted 20 August 2013 - 02:30 PM

Peeps are still using it in monogame and straight up XNA. If anything there's still legacy code and concepts that can be learned.
Was This Post Helpful? 2
  • +
  • -

Page 1 of 1