XNA Tutorial III: Rendering Sprites
What’s incredibly good about XNA is that it is very direct, it handles all the details like drawing surfaces but gives you pretty direct control over what’s going on. This time we learn how to render a sprite to the screen – an image that is.
First of all, to render an image you need one. Not only on your hard drive, but in your game too. First of all, you will notice in the right hand side, there is the content browser, or it should anyway. Reference the setup page if it isn’t there. Over there, there are two different folders, if you navigate to your project folder in an explorer window you will see them there. It is good practice to actually keep your files in the corresponding folder, though I have not checked if they are copied there when added through Visual Studio. In any case, you add assets to your project by dragging and dropping them into the Content folder (should be the lower one) in the panel on your right. Thus Visual Studio recognizes them. Note that you still have to do this even if the files are in the right folder, as by doing this you essentially update the project file to include these.
After having the assets in our folder, we must make our game load them. Since we are talking about images currently, we need to declare a Texture2D object to load these into. It is possible to load a different image depending on what you want it to be, however this is mostly useful if you are going to keep the texture the same for quite a while, as in the case of the easter egg in Survival Wasteland. It is also possible to create an array of Texture2D objects, mostly useful for using parallel arrays, as was done with the various items. The initial loading should be done in the GameLoad() function, which is called upon starting the game. To load the image into your Texture2D you assign it the object returned by content.Load<Texture2d>(“image_name”). Where content is your ContentManager, preferably the one generated with the code, and Load is a method which works for various types of objects, as is indicated by the < and > symbols, which you will also meet in C# lists, after all, XNA works with C#. You can later load another file into the Texture2D if it needs to change. Note that image_name, which is the name of the file in any case, goes in without the extension, so be careful with file conversions, make sure you exclude the old file from your project if you convert it to another format.
Finally, we have the matter of printing the textures. Note that .png files and their transparency are supported, I suggest you use PixelFormer to add transparency, it’s a bit weird to use so you can’t actually save the file as png, but rather you export it. Now, in the Draw() method – and try to keep it there, as was with the GDI – you use your default SpriteBatch, should be names spritebatch as a matter of fact, and calle it’s function Draw(). Draw() in it’s simplest form is defined as Draw(Texture2D, Vector2, Color), where you place your sprite as an argument, a vector with it’s coordinates (coming back to this in a minute) and a color to filter the drawing with.
Coordinates in XNA are stored as Vector2, 2 dimensional vectors. You can edit both axes individually, or just assign it entirely with it’s constructor Vector2(int, int). Keep in mind that in programming the Y axis starts at the top left corner of the screen and it’s positive is downwards. You will get used to that soon.
The filter, which you can consider an overlay, is to add effects, essentially a single color to shift towards. Color.White is the one you want if no effect should take place. Color.Black will turn it black entirely, while any other color will turn it pretty much toward it. It is most possible that you will use this to simulate night, using Color.Blue or Color.CornflowerBlue (the typical blue of windows). You can also define your own color instance, and as in Survival Wasteland, increase it’s properties to create a transition effect. The constructor is Color(int Red, int Blue, int Green), and each element is accessible directly.
So this is pretty much what you need to know to do any drawing, if you followed the setup instructions correctly your sprites should appear back to front, so render them likewise, as implementing a z-buffer in XNA is harder than in the Win32Api/GDI.
Now you practically have all you need to play around with, even if it’s not very much alive, you still can implement many projects. Try out making animation by changing the rendered image at a fast rate, experiment with the speed and frames. In the next tutorial we will add some sound effects to make our games a bit more alive, ‘till then, happy coding!