XNA Tutorial – Your First Sprite

In my previous article I went through the simple process of putting together a Base Application, in this Article I will be building on that and taking you through the process of drawing your first sprite.

Start off by going through the first Tutorial and build your base application, for the purpose of this article call your application “FirstSprite”.

Once you have your base application running we are going to need to add a texture to the application. This Texture is going to be the sprite that we are going to display one the screen. For the purpose of this article this image could be anything, but I have put together a small logo (This Asset and the code can be downloaded by following this link).

To add the Texture go to the content project in your solution and highlight the textures folder, from there right click and select ad existing. Then browse to where you have your artwork and add the texture. One of the important tasks now is to make sure that you know what the Asset Name is. This can be gathered by selecting the properties on the Asset or Texture in this case and looking at the Asset Name. In the next section this will be an important key as to how you reference the texture inside the application.

The first step in displaying the sprite is to set up the variables that will hold the Sprites Texture.

Just under this section of code..

[code language="C#"]

GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;

[/code]

Add this line of code..

[code language="C#"]

Texture2D logoTexture;

[/code]

Next we need to call the Content pipeline and load the texture into the application.

You will find a Call in the application to a LoadContent Procedure, to load the texture into the application using the content pipeline add the following code just under the TODO Statement.

[code language="C#"]

this.logoTexture = this.Content.Load<Texture2D>(@"Textures\<AssetName>");

[/code]

Once Added you will see that I have put a reference in the above statement for <AssetName>, this is the asset name for the Asset you would like to load. When adding this you will not need to add the file extension as the content pipeline will handle that for you. If you do not like the name that the pipeline has automatically set for you you can change it by changing the value inside the properties for the asset.

Now with all that done we have now loaded the content and need to draw the sprite on the screen.

When you draw sprites inside XNA you need to use a SpriteBatch. The good thing about the sprite batch is that depending on the order you call you draw methods will determine the order that the items are drawn on the Device. For example the items you call first will be drawn first and items called last will be drawn last. With this you are able to draw background and foreground objects within the same sprite batch.

To setup the sprite batch add the following lines of code to the Base Applications Draw method.

[code language="C#"]

// TODO: Add your drawing code here
this.spriteBatch.Begin();

this.spriteBatch.End();

[/code]

The above call will start the Sprite Batch call and then the end will end the processing.

The last thing that we need to do is to actually draw the image on the screen, to do this we are going to use the SpriteBatch.Draw call.

Add the following line of code between the Begin and End calls for the Sprite Batch.

[code language="C#"]

this.spriteBatch.Draw(this.logoTexture, new Vector2(100, 100), Color.White);

[/code]

The above line of code will use the logoTexture and position it on the screen at a position of (100,100) with a shade color of white. When using the sprite batch you will find that there are lots of different ways that you can call it, the above method is the most simple.

When you run the code you will see a small logo positioned at (100,100). This example is one of the most basic functions you can perform using the XNA System and the Sprite Batch, over time I will attempt to show you other examples that you will be able to use inside your applications.

Technorati Tags: ,


Cross Post from www.virtualrealm.com.au

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>