Creating a Textured Box in XNA

Microsoft has undoubtedly made some top notch developer tools over the years. Besides Visual Studio, .Net Languages, and the new Sliverlight, Microsoft has also jumped into gaming. We all know and love the Halo series, but what is slightly lesser known are the XNA code libraries. Microsoft has made some pretty sweet games, but with the still fresh XNA you have the chance to grab the reins and make your own games.

The XNA libraries make creating games a snap by providing functions to load content and render it, with support functions to help you do anything from calculate view matrices to applying textures onto 3-Dimensional meshes. The best thing about XNA is that it allows you to develop games and content for the XBox 360, while at the same time developing in and for a Windows environment. But you must start at the basics, and so we will.

Most of the code we are writing today requires you to have the XNA library, which can be found here. Once you get XNA installed and set up, the first thing we need to do is start a new XNA project. Go to file, then new, finally click on project. Next you need to navigate to C# in the project types pane. Find XNA Game Studio under that node. Then select Windows game (for now we will stick to the Windows platform). I named my project "BoxTutorial", but you can name yours whatever you like.

Creating a Project in Visual Studio

When you click ok, it will create a basic game class for you, which looks something like this:

Notice all the new XNA using statements? Those frameworks will be the heart and soul of our project. Now that we have our shiny new game project, let's go ahead and do something worthwhile. The first step is to create a "BasicShape" class, which will contain all the attributes and methods needed to draw and manipulate a cube.

Go ahead and create a new class. For the uninitiated, you can do this by right clicking the solution in the explorer. Go to add, then new item. Class will be the first choice, and it is most likely already chosen for you. Name this class "BasicShape" and then press ok.

Before we start filling in the class, look take at the using statements at the top:

I don't see any of the XNA frameworks, do you? We need to copy and paste the using statements from our Game1.cs so we can take advantage of the XNA frameworks in our new class. Simple enough, but without the XNA frameworks, you wont get very far. So go ahead and copy the using statements for the Game1.cs file. Now your BasicShape class file should look like this:

So we have our new class ready for some cool new XNA code. Every shape in 3D space needs 3 things to work properly, and I am not talking about the 3 dimensions. Every shape, no matter how simple or complex, needs a position, a size, and a set of vertices. With those three things you can make any shape imaginable anywhere needed. At the top of our class, lets add some variables that we will need:

Now I mentioned 3 things, but I have 6 variables here. Well, in order to put something on the screen you need to know how many triangles you have, and you need a VertexBuffer to hold the vertices you want to display. We will also be texturing the box later on, so it easier for us to add the Texture variable now. So, now what about the top 3? Well you can see 2 Vector3s and a VertexPositionNormalTexture array. What the heck are those? A Vector3 is simply just a position is 3D space or even more simply a 3 number array. Vector3s are used a lot in XNA, for everything from position to color values. Now our VertexPositionNormalTexture array is an array made up of Vertex objects that expects to have 3 values: a physical position, a normal position, and a texture position. Now that we have some of the variables we need, it's time to build a class constructor:

Yup, that is it. All we need to do in our constructor is take in a size and a position, then set the corresponding variables. Now we use a Vector3 for size because you can multiply Vector3s together and with that we can control the size along each axis. Technically you can make a rectangle out of our box just by making one of the size numbers larger than the others. So what will we do with all these variables we have? Well, we are going to make a method called "BuildShape", which will set all these values so we can use them to draw a box. The BuildShape Method looks something like this:

There is a lot here, but it is mostly very repetitive. Let me start from the top. We need to set the number of triangles we have, which can really be done at any point in the method, but we will go ahead and set it at the top. Next we set our VertexPositionNormalTexture array with 36 objects, because in order to draw this cube correctly we will need 36 unique vertices. Then there is a block of declaring and setting values that will only be used in this method. The first block sets 8 values that correspond to the shape's points in 3D space. Now we actually take the shape's position and build around that point. This way the center of the cube is the position of the cube. Then we take each point and size it according to our shapeSize variable.

Next we have our normal positions, which helps the graphics device determine how to handle light on the cube's surfaces. We don't need to calculate the normals relation to the center, but we do need to scale them with the rest of the shape. Each surface needs it's own normal, so we have 6 of them. The last bit in this block is texture positioning information. We only need 4 variables here, one for each corner of any given side. Now each vertex in our shape has a unique combination of all of these variables, so we are forced to set each vertex by hand, one by one. It is easier just to split up the declarations into blocks according to which side we are setting, so that is what we do. Now we have all 36 vertices ready for rendering......kind of.

Technically we have all the information set for our cube, but right now we have no way of displaying that information on the screen. The last part of our BasicShape class is a "RenderShape" method that will take these variables, put them into a buffer, and barf them on the screen for us. The RenderShape method looks something like this:

The first thing we need to do is build the shape of course, so that is what we do. Next, without getting into a long rant of how a Vertex Buffer works, I will just say that the next 2 lines are preparing the vertices to be drawn. Then they are put into a buffer. The last three lines takes the information we have set, such as the number of triangles and our vertex buffer, and renders them on the screen. In order to do this, the graphics device needs to know the size of all the information given, a vertex buffer, and it needs to know how many triangles it is expected to draw. Once it has all this information, it draws all of triangles, one vertex at a time, one line at a time. This method is the last one in our BasicShape class, and just for review purposes, it our whole class should look something like:

So we have a nice BasicShape class that will do everything we need. But how do we use this class to display a cube? Well, the answer is not that easy, so let me go over what must be done. First we need to define a world and a way to view it. Then we must define a very basic effect, without which XNA would not know how to display anything. Finally we need to initialize and use our BasicShape class. Lets get started with defining a world, which we will do with a InitializeWorld method. Before we do this though, we need to add the following declarations to the top of our Game1.cs file. Right below the 'SpriteBatch spriteBatch' declaration, so it looks something like:

So,you have some Matrices and a floating point number. The Matrices are used for exactly what they seem, the world's boundries, the camera, and the camera's projection angles. The floating point number angle will help us rotate our cube when we get ready to display it. Lastly, we declare a variable to hold a BasicEffect object, which allows us to modify our shape, world, camera, and even add some light. These variables will help us get the 3-Dimension world up and running. Lets move on to our InitializeWorld world method, which not surprisingly uses the variables we just declared. We add this method right below the Draw method at the bottom, and it will look something like so:

Let's go over what exactly this method does for us. First off we fill our camera, projection, and world matrices with suitable values for each. The cameraMatrix sets the position of the camera and points it at a specific point. Our projectionMatrix sets the viewing angles of the camera, and how far the camera can see. Finally we create a worldMatrix that defines the dimensions of our world, and we tilt the entire world with a temporary variable called tilt of course. Next we take all this information and use our BasicEffect object to hold it. We also set our BasicEffect to accept texture information. And that is what we need to set up a basic 3-Dimensional world.

Now we have to call our new method. Believe it or not, XNA creates the perfect place to do this, an Initialize method. We are going to call the InitializeWorld method in the Initialize Method, right below the base.Initialize() call. The Initialize method will end up like so:

Now that our world is built and our camera is ready to look at our shape, we need to finally declare our cube variable. We are going to make this declaration right below our BasicEffect declaration, so it will we get:

Notice that we are creating an instance of our BasicShape class. Remember our construction method? We have to pass any new instance of our class a size and a position, which we set to twice the size of the base shape and we set the position to the origin of our 3-Dimensional space. Ok, so we have our cube, but how do we use our world and camera to get it on the screen? The first step we must take is loading in a texture, then setting our shapes texture variable to the newly loaded texture. In order to do this we must load an image from a file. You really can use any image you like, and the size doesn't matter at this point either.

You will notice in your solution explorer that you have, right below references, a place called Content.

The Content Container in Visual Studio

Right click on this content holder and select add, then folder. Name the new folder 'Textures'. Right click on this new Textures folder and go to add, then existing item. Browse to whatever image you want, just make sure it is either a BMP, JPEG, or PNG. Again the size doesn't matter, and the shape would be better as a square, but that really doesn't matter either. This will add an image to the folder, AKA our texture.

Now we need to get this image into our BasicShape object. How? Well, again, XNA has created the perfect place to do this. There is a method called LoadContent, which is conveniently right below the Initialize method. This is where we will declare our texture, kind of like so:

Now there is no need to pay attention to the SpriteBatch object because it is actually generated by XNA when you create a new project, plus we don't use it in this tutorial. But we do use the Content.Load method, which is used when you want to load something from the Content container in the project. With the Content.Load method, you can load anything from 3D models to simple images, which is the case here. As we load the image we make it a Texture2D object, which is a 2-Dimensional image that is used to texture a 3-Dimensional object.

So let's do a quick review. We have built a world, set up a camera, declared a BasicShape object, and given it a texture. Now what? Well, there is one last thing. Remember that floating point number, angle? We are going to use it to rotate the whole world, and in effect the cube we make. But in order to do this we need to update the variable every time the world is rendered. We do this by using the, once again conveniently created, Update method. This method is called every time a frame is rendered on the screen, a cozy spot to update our angle variable. With this simple addition our Update method looks like this:

Of course you are welcome to experiment with different values, the bigger the number the faster the rotation will be. Really the angle update is the only thing we adding here, the rest is generated on project creation. We can move on to the final and most important pre-built method, the Draw method. The Draw method is the heart of an XNA project. It is where everything is actually drawn in the 3D world and where that world is rendered to the screen. Without this method your project would be about as interesting as a blank monitor. Inside this method we will call the functions needed to finally put something on the screen. Our final filled Draw method will be:

Our final code doesn't actually do a lot on its own, rather it takes all the stuff we have been doing and connects it. First we begin to run through our BasicEffect object, which can be filled with multiple effects, if that makes any since. Then we set the angle of the X and Y axis to our angle variable, giving it the effect that the cube is spinning. Next we loop through all the effects in our BasicEffect object, which is just one in this case. For each pass we have to start and end the pass, and during the pass we set the effect texture then render the cube. The cube is given the texture we set because we set the effect texture to the cube's texture. If we didn't set the texture here, there would be no texture on the cube. Finally we stop the loop, then stop the run through the BasicEffect.

The final result, a nicely textured box.

If you use and want a Visual Studio solution , it can be found here

It takes a lot more than you would think at first to make a cube on the screen. In XNA there are better ways to do so, but it is always good practice to try and make one rather than import one. Basic geometic shapes in a 3-Dimensional space can get pretty complex, but XNA makes things slightly easier, and the power of XNA is more than just shapes. But now that you have a cube, you can try to manipulate it and add more effects. So go ahead and try it yourself, you can start by changing the size and position, then move on from there. Hope you enjoyed the tutorial and keep Switching on the Code.