Nazeeh’s Little Corner on the Web

So this is a bug that I ran into while playing Assassin’s Creed last night. It happens towards the end of the game which makes it even more annoying. You’ll know when you find it, since you’ll start falling through the world and then spawn with a clone of Altaiir next to you. You can’t really do much from that point on since the entire level will be broken.

Solution? Turns out that it’s a bug that happens only at that part if you have a second controller plugged in. In my case, that was the drum set from Rock Band. Unplugged it, restarted from the memory block prior this one, and it all worked fine.

Video of bug, no spoiler in it of course:

Have fun! It’s an awesome game! Too bad it had that annoying bug in it.

As I have mentioned before, I tend to change the default color/fonts of Visual Studio pretty quick when I install it. Today, I found a really cool coding font that I instantly set as my default font in Visual Studio. It looks very easy on the eyes and makes my code look sweet (something needs to do that… and it ain’t the quality of it!).

You can read about it and get it from here. This is what it looks like:

Alright, I’ll be honest from the get go… this won’t really be a “game”. It won’t be interactive, and it most certainly won’t be fun. What it will be though is a game based on the XNA Game Framework and will use the graphics card and all that good stuff. Consider it the “Hello World” of gaming if you will. Let’s see how this will work!

First thing is to make sure you installed XNA Game Studio by following this post. Once you got that up and running, let’s create our “Hello World!” game.

Fire up your Visual Studio (Pro or C# Express) and click on File menu, New and then Project. You should see something like this:

Notice how we expanded the Visual C# node to reveal the XNA Game Studio node? Make sure you do that. This way you will be able to pick from the Game Studio project templates. Pick Windows Game (2.0) and hit Ok.

When the project is done creating itself, you are ready to test it out! Hit F5 and the project will build and run. If all goes well, you should see the default CornFlowerBlue window:

There you go! That’s your very first game! It’s running on the XNA Game Framework which in turn uses Microsoft DirectX.

In the next post, we’ll break down the source code to see what is going on and understand how this works. It’s pretty simple actually. To make this a true “Hello World”, we’ll even add a “Hello World” text in this game next time ;)

We are very proud to finally manage to get the beta bits of XNA Game Studio 2.0 in your hands! We are extremely excited with this version. Some of the new features include:

Visual Studio 2005 Pro and up support (as well as Express of course)

Networking! You can write games that use Xbox Live on Windows and Xbox! This feature simply ROCKS!

Content is now a project of its own vs mixed in with your other source files.

Ability to automatically convert a Windows project to a Xbox one with one click

Parameterized Processors are here! Supported by the Visual Studio IDE

No more device lost/reset in the framework. We handle it for you!

And many many more features!

Go get it! Report bugs as you find them of course.

Now that we’ve been through the basics of how a game works (Anatomy of a game series starts here), it’s time we start to actually create our own games. Before we do that though, we’ll need to put together a collection of tools that will help us along the way.

The Framework!

The primary software development kit we will be using to develop games is the XNA Game Community Platform. It’s the obvious choice for me since I work on that team ;) But really, it’s a very good and easy to use framework. With XNA Framework, you will be able to develop games that run both on Windows and your Xbox 360. How cool is that?

So how do you get started with XNA Game Studio Express (XNA GSE)? Simple, follow the Getting Started instructions prepared by the XNA Community Game Platform team. Once you install XNA GSE, do yourself a favor and create a new project and use the Spacewars starter kit. It’s a ready to run game that is quite entertaining and should wet your appetite for what you can do with the framework.

Update: XNA Game Studio 2.0 Beta has just been released. You probably want to pick this one up since that’s the version I will use for my blog. You can get it from here.

Graphics Creation Tools

Now that you have XNA GSE set up and running, you will want to fetch some basic content editing tools. By content, I mean graphical content like images, 3D models and so forth. We’ll start simple at first, so in reality, something like Microsoft Paint will do fine at first, but it won’t harm us to get a good set of tools off the bat.

Image Creation/Editing tools:

For starters, let’s get us a couple of programs that we can use to create and manipulate images:

Paint.Net

Paint.Net is a very cool image manipulation program that is written in C# and .NET. It does what we need very well and comes at a very good price: Free. You can pick up a copy from Paint.Net website. You will quickly learn to love this little program!

Gnu Image Manipulation Program (GIMP)

This is one of my favorite tools to use. If you’re familiar with Adobe Photoshop, then Gimp will make a lot of sense to you. Gimp is basically an open source alternative to Photoshop. You can do a whole lot of really cool stuff using Gimp. So when the job is bigger than Paint.Net can handle, I jump over to Gimp to get it done! Gimp is open source and runs on a lot of different Operating Systems including Linux, Windows, Mac OS X, etc. The official Gimp site is here. But you’ll probably want to download the Windows version which is provided as an installer from here.

3D Modeling

When we get to 3D graphics, we’ll want to start messing around with creating and editing 3D models. There are a lot of tools out there that we can use. The ones I am somewhat familiar with are:

SoftImage XSI Mod Tool

SoftImage XSI Mod tool is a free lite version of XSI’s bigger and professional 3D modeling package. The cool thing about this version is that it is XNA aware. SoftImage have done a lot of work to make this version work very well with XNA. Go pick up a copy from their official website.

Blender

Open source strikes again! Blender is the Gimp of 3D modeling tools pretty much. Blender is a pretty powerful, yet somewhat difficult to use, 3D modeling package that is totally free. There is a lot of documentation provided by Blender and the community to teach you how to use it. Just like Gimp, Blender runs on a variety of operating system including Windows. Blender can be downloaded from their official website.

Wings 3D

This one is a pretty cool quick and dirty modeling tool. If you want to throw together a decently looking model pretty quick (read: Programmer’s Art), then you will want to use Wings 3D. Grab a copy from their official website.

Misc Tools

Last but not least is a collection of useful to have tools.

Notepad++

Every one should have some sort of text editor that they are comfortable with. The one I am using now is Notepad++. Simple to use, has syntax highlighting, etc. There are a lot of other good editors out there, you probably already have a favorite one.

Powershell

Your toolbox is not complete without a good and solid command shell. You can always use the Windows cmd.exe shell. It works fine and will take care for *most* of your needs. But when you start looking for real power and flexibility, you want Powershell. Powershell is Microsoft’s new command shell that is based on the .Net framework. It is simply amazing and fun to use. You have full access to all the .Net framework directly from the shell or in your scripts. Scripts use a C# like syntax which is easy to pick up. There is a lot to know about powershell, you can always start with my Powershell section of my blog.

Final Thoughts

Everyone’s toolbox is very custom to their needs, you will end up with a set of tools that is much larger than the ones I listed here. Eventually, you may end up replacing all the ones I mentioned with other more powerful ones. This list is a beginning of sorts, learn to use these tools and you’re journey in game development will be that much easier. As I start talking about more topics, I will always point out some cool tools that make life easier for that specific topic.

This post will talk about Effects. Effects are probably one of the coolest aspects of graphics programming. To understand them, you first need to have some background history.

Graphics initially were entirely rendered by the CPU. This meant that all the calculations that were involved in transforming a 3D world to a 2D image were done by the CPU. It gave decent results, but performance was not very good. That’s when the first 3D accelerator cards started to show up on the market. These cards could do a lot of those calculations on a dedicated CPU that lived on the graphics card. So instead of doing all the calculations, the CPU would send the vertices to the card along with where the camera was in the world, and the graphics card would figure out what image to draw on the screen.

The problem with these cards, though, was that they had what is called a fixed-function pipeline. That means that the algorithms that were used to calculate how to render the world were fixed on the card. They did the job pretty well, and even included lighting, but they did it in a limited way. So if you wanted to have any kind of cool effect on your world, you couldn’t do that on the card.

Programmable cards came to the rescue! These cards, which are the majority now, let you tell them exactly how to perform the calculations needed to render the final image. You write small programs called shaders that run on the card and that perform the work needed to generate the final image you see on the screen. This advance has allowed game developers to come up with all kinds of awesome effects that make their games look really cool, and since they run on the fast graphics processor, they don’t drag down performance. This shader code is referred to as effects.

So what can you do with effects? At the simplest level, you need to write them to tell the graphics card how to render the final image to the screen. That involves doing some simple math (that is very well documented and known) to tell the graphics card how to render the scene to the screen. You can also include more calculations to apply lighting to the scene. When you’re done rendering the image, you can have the graphics card run yet another piece of code on the final image to give it a blur effect, for example. If you’ve ever used a package like Photoshop and played around with the filters it has, then you can get a feeling as to what you can do with shaders. You can do all kinds of cool effects on the final rendered image that happen at real time. Things such as water, reflections, blur, bloom, and so on are possible thanks to effects.

Another part of the grand illusion that game developers are creating is lighting. You can use the concept of lighting to illuminate certain parts of the world in a realistic way. Of course, there is no real light shining on anything; it’s all a simulation of how the objects will look when light is bouncing off of them.

Light in games is usually specified by a color and a direction vector. This information is used to mathematically derive the exact look of every pixel in the screen based on how the light bounces off of it, the color of the light when combined with the color of the pixel, as well as any properties of the material that this pixel is part of. In order for lighting to work, every vertex in your world needs to define what is called a normal vector. A normal vector is a vector that points in the direction that is perpendicular to the surface that the vertex is part of.

The reason you need that normal is that light calculations use it to know how much of the light bounces off a surface. By calculating the angle where the light hits the vertex normal, you can tell if that light is going to reflect or not and by how much. By calculating this information for all the vertices and using it to darken and lighten each pixel, you get the illusion of a well lit object.

In this example, the light is hitting the sphere model from the top left corner. As you can see, the light reflected relatively accurately by making the parts of the sphere that are facing towards the light brighter and the other areas darker. That’s because the normals on every vertex close to the light calculated a strong reflection angle for the light, while the other normals that are facing away from the light did not reflect much of it. It will make more sense when you actually try it.

Move on to part 5

So what are the different elements that go into making a 3D game? Let’s start by familiarizing you some terms used in 3D programming, so that when you’re working on your game, you’ll have an idea of what’s going on.

Game Camera

One of the first concepts you’ll see when working with 3D graphics is the game. Camera, you say? What is a camera doing in a game? The principle is quite simple, and is not required for 2D games. In 2D games, your “world” is bound by the X and Y axes only. So your view of the game is a top-down view of the game grid. In 3D, however, you have another axis, the Z axis. So how do you position your view of the game world? That’s what the game camera does for you.

In simplest terms, the game camera is the hypothetical camera that someone is holding and through which they are filming the action in your game. What you see on your screen is what the camera sees. So imagine you have a ball sitting on a table and someone is holding a camera and is filming that ball while moving around it. What you end up seeing on the TV later is the ball from every direction as the camera is rotating around it.

It’s the same thing in 3D graphics. A game camera has a position in the world just as anything else has a position. So in 3D graphics, the camera position is a value of x, y, and z that tells the game where your camera is positioned in the world. That means the camera can have objects behind it and you are not going to see them. The other important value that you need to specify is a position in the world for the camera to look at. If you don’t specify that value, then how is the camera going to know where to point once it’s placed in the world? So a camera can be positioned at, say, 0,0,100 and be looking at 0,0,0. This means it is positioned 100 units away from the origin of the world and is pointing toward the origin. So if you have an object that is at 0,0,50, you will see it. If there is an object at 0,0,200, you won’t see it because it’s behind the camera. You can do all kinds of cool zooming and rotation effects by moving the camera position in the world every frame! Turn your code into a director and a camera man and go wild!

The camera has other settings, such as the Up direction, the field of view, near and far planes, and so on. Once you start working with 3D graphics, all those things will be very clear and easy to understand. I just wanted to explain the purpose and need for having a camera in a 3D game.

Vertex

Since we started talking about 3D graphics, I’ve been mentioning that everything in the world has a position x,y,z. In its simplest form, a vertex is a position in the world. More specifically, a vertex is a data structure that you declare and use as the building block of your entire world. So to draw a square on the screen, for example, you would specify four vertices that define the four coordinates of that square. A vertex has a position element in it that is of type Vector3. That position element is where you store the values for the x,y, and z for a particular point in space.

A vertex can also have other information in it. In fact, you can define your own vertex structure and include as much data in it as you need. A typical simple vertex structure, though, would contain a Vector3 position (x,y,z) and a Color element. This means for every point in the world, you can specify its position and color. What does that color do exactly? Well, if you specify a different color for each of the four vertices you used to create a square, you can get an image that looks like this:

In this image, the vertices have the colors blue, green, red, and yellow. What the graphics card did for you was fade one color to the other in the way you see in the illustration. Had all vertices had the color black, the square would just be, well, all black. Pretty neat, eh? Ok…not too useful, but still neat!

DirectX and thus XNA Framework define a few popular vertex structures that have different elements besides position in them. VertexPositionColor is one that you can use to create something like the square above. The cool thing is that you can create your own if you find yourself needing something more custom. It’s pretty easy to do.

Mesh

Ok… so now that we learned what a vertex is and how it is the building block of anything in the world, it’s time we learned how we can build shapes using them. The square we talked about creating in the previous section is just a collection of four vertices that got together to create that square. If you’ve ever played “connect the dots” on paper before, you are already familiar with the idea of meshes.

A mesh is a collection of positions in the world that, when connected together, form a shape. The following diagram shows a simple cube mesh that is made up of eight distinct vertices in the 3D world:

This is a simple mesh, of course, and has only eight vertices. The more vertices you have, the more detailed and complex your mesh can be:

So as you can imagine, everything you see today in a game like Halo or Gears of War is composed of such meshes—all the characters, guns, vehicles, banners, terrain, buildings, and so on. To create such meshes—or models, as they are called —you use some drawing package such as 3D Studio Max, Maya, Softimage, and so on. These packages make it easy to draw such intricate models and export them in a format your game can load and transfer to a collection of vertices that your graphics card can render. The XNA Framework can draw meshes with the Model class, which is a group of several meshes.

Materials

So now that you have a cool model of a car or spaceship, how do you actually make it look all cool and colored? You see how uninteresting the model looks when it’s “naked” and not colored and polished. That’s where materials come into play.

Just as you might create a model out of clay and then paint it to give it color and detail, you do the same in 3D graphics. You apply a material to a model that specifies the color of that model or part of the model. Materials also include information such as how much light they reflect, whether they are plastic or wood-like in appearance, and so on—just as there are different materials in the real world that have specific properties. Plastic tends to be very shiny and reflects a lot of light; wood is not generally shiny and doesn’t reflect light as much. Leather has a very distinct look to it, and so does metal. You get the idea.

You can define a material for your model that gives it a unique look in the world. Armor on a futuristic soldier, for example, could have a material that is very reflective. To add more detail, a material can have a texture. A texture is an image that is overlaid on a model to give it more detail. Think of it like a decal that you put on a toy airplane model to give it a more realistic look. A texture can be an image of grass that you apply to your terrain to make it look more real, or an image of a suit that you put on a model of a person to give them clothes. The texture will be affected by the other properties you have on your material that affect how much light it reflects, and so on.

Materials are usually created by your graphics package along with something like Photoshop to create the textures. You map that material on your model and then export the entire model and load it in your game. The end result will be a mesh object along with its related set of materials that may or may not include textures. The Gears of War model above will look quite different when you apply materials to it:

Big difference eh? When you start messing with this aspect of game development, you really start to develop a huge appreciation for artists.

Move on to part 4

In this post, let’s talk about the difference between 2D and 3D games!

Games can be either two dimensional (2D) or three dimensional (3D). Before we continue talking about the two types and how they differ, let’s talk about how they are similar.

Remember, games are nothing but elaborate illusions. Your monitor is capable of displaying only 2D images. That’s why your resolution is something in the form of width x height (1600×1200, for example). You don’t see a monitor that is advertised as 1600×1200×800! So how does it make sense that we can have 3D games on a 2D display surface? It’s really nothing but an optical trick that artists have been using for ages. You can draw a 2D image and put depth in it by how you size things relative to each other as well as how you draw the lighting and shadows in it. It’s just an illusion. Here’s a perfect example of such an illusion:

The image looks like it’s 3D when it’s 2D but with amazing usage of lighting, perspective, shadows, etc. This is really what 3D gaming is about, how to draw such 2D images in realtime in an easy way. Lots of math!

We’ll discuss 2D games first since they are easier to understand than 3D ones. In a 2D game, you have a canvas (your screen or game window) that has a height and a width. We are going to assume that your game is running full screen at a resolution of 1600×1200. That would mean that the coordinates of the upper left corner of the screen are 0,0, and those of the lower right corner are 1600,1200. You can express any point on the screen as an x,y pair of positive values.

Programming for 2D is really pretty easy. You start by positioning your objects on the X,Y grid, and then you move them around. So you can start by putting a paddle for the game Pong at the coordinates 20,20 and then moving it around the screen by increasing and decreasing the Y value to make it go up and down. So for the first frame, you put it at 20,20, and then in the next frame, you position it at 20,21, and so on. As the game draws itself frame by frame, your paddle will appear to move down when actually it’s you who are positioning it at a slightly lower point every frame. You can do the same thing with the X value to make it move sideways.

So what do you do for 3D then? Well, in principle, it’s kind of the same at the core, but needs different considerations than 2D. The first thing is that you specify a location on the screen by three values, the 2D X and Y values and a new value called Z that we’ll use for depth.

The Z axis goes through the screen. This means that you can specify points in this 3D space that are at different depths from each other. So in essence, an object can be placed way behind another one and appear to be smaller in size because it’s further away. What happens is that you specify objects in this 3D space with different depths. Then when the graphics card draws the final image that appears on your screen, it will apply all kinds of mathematical operations to produce a 3D looking image that is really 2D. But for all intents and purposes, you are working in a 3D space and have to account for that in everything you do. That means when you want to know whether one object hits another, you have to consider that they may be at different depths (that is, one is behind the other).

Whether your space is 2D or 3D, you’ll find that a lot of the principles remain the same. You still have to specify positions of objects on the screen by giving them coordinates. Moving objects around is an act in manipulating these coordinates to position them in another place. 2D is simpler because you don’t have to worry about a whole other axis, but moving to 3D doesn’t complicate life that much once you get it.

Move on to part 3

So how does a game work? Is programming a game similar to programming a web page or an application? Well, not really. A lot of the programming concepts you already know will apply and be helpful of course. You’ll just learn how to apply those concepts to game engines versus applications. I am a big fan of learning by example, so let’s see how a game such a Pong would be developed.

I am going to take a small tangent to describe what Pong is in case you’re not familiar with it. Pong is one of the simplest games out there, and one of the first.. It’s basically a simulation of tennis using very simple graphics.

As you can see, the game has two paddles that are represented by short vertical bars, a net that is a dashed line, and ball that is a square-like shape. The game is played by two players, each moving one of the pads up and down to place it in front of the ball to hit it back to the other player. You score when the other player misses the ball. Simple enough, right? How do write such a game?

This game follows the same stages that most games use. When you create a new game in XNA Game Studio Express, these stages are actually spelled out for you in the code. How convenient! Let’s take a look at each stage and what happens in it.

Initialize

The first thing you want your game engine to do is initialize. In this stage, you place code that will run only once during the lifetime of the game. So actions such as loading user preferences, detecting some kind of hardware or user state, and so on, are best placed here. You are basically scouting and setting the stage for you game before it actually starts. For something like Pong, I can’t imagine much being loaded here beyond maybe the top high scores. This is in preparation for displaying them at the end of the game along with your current score.

Load Content

All games will probably have some kind of graphics to display. For a game as simple as Pong, the graphics may be created by the game at play time (creating a couple of vertical bars is quite easy). But for argument’s sake, let’s say Pong’s developer decided to create the game’s graphics outside of the game. So at this stage, you would probably load up pictures (or textures as they are usually called – more on that later) of the vertical bars, the net, and the ball. You can create such “graphics” very easily in an application like Paint.

You probably want to preload as many of your graphics and sounds at this stage as possible. By doing so,you don’t have to load them mid-game, which decreases the game’s performance until loading is done. Trust me on this one… I made this mistake when I was learning, and it wasn’t pretty.

Update

This stage is possibly the most important stage of all and the one that ends up harboring the majority of the code. By default, the XNA Framework’s Game will try to call update sixty times in one second. The purpose of this stage is to do the following:

• Read user input

All games need some means for the player to control what’s happening. For a game like Pong, that could be an Xbox 360 controller where we care only about the up and down directions of the left thumbstick. So at the update stage, you write code to poll each of the two connected controllers. This code asks “Hey, where’s your left thumbstick? Up, down, or middle?” Using the information the controllers return, you know which way each one is pointing. Excellent! We just read the users’ inputs! Now let’s move on and do something with them.

• Compute game state

The game state refers to the current state of the game, along with any new information we may have solicited (such as controller input). In Pong, that would mean where the ball is now on the screen as opposed to where it was last time Update was called. Where are the paddles? These are all functions of time, of course, especially for the ball since it is moving a certain distance for every unit of time. So it’s pretty useful that you always get a GameTime object in the Update method that tells you how much time has passed since the previous call to Update.

Another thing you might want to figure out here is whether the ball made contact with one of the paddles. You do this by using something called “collision detection.” The principle is self explanatory: Two things collide, and you detect it! So if the ball hits a paddle, you know that you need to update the direction it will travel from now on since it “bounced” off the paddle.

• Update game state

So now that you have computed a new game state by applying any new information you got this time to the game state of the previous time, you end up updating the game state with that new information.

Think of it this way: New game state = Old game state + new information..

• Handle game screen transitions

This is really more of a special case scenario, but it happens in every game. You know, when you start a game and you have a menu of Start, Options, and Exit? Or when you are done with a game and you are shown a high scores screen? These are all screen transitions, one of which is the actual gameplay screen. So when you start the game, the first screen is the menu screen; you pick an option, and you are transferred to the gameplay screen. If you win, or die trying, you move to the high scores screen. The game has to detect such trigger conditions in the update stage and if they occur (you won the game of Pong!), the game will move you to the next screen, which is the high scores screen.

Draw

This is the stage that your players will see all the time. The draw stage is when you actually draw the game screen and present it to the player. Drawing in a game happens frame by frame. Let’s take the example of the ball moving in Pong; as the ball is moving, what you are really seeing is a very fast sequence of the entire screen being drawn over and over but with the ball placed in a different location every frame. The concept is similar to that of a flipbook: the smaller the distance the ball is moved every frame, the smoother the animation will appear.

The draw stage usually starts with a call to clear the entire screen, so you get a new empty canvas to draw on every time. Then you start drawing static things such as your background (which in our case is just black). Once you are done with that, you want to start drawing the paddles and the ball. You know where to draw them on the screen because the game state that was computed in the update screen will tell you where they should be. After you’ve drawn everything, you tell the game engine to show the user what you’ve drawn. And that’s what the user will see.

Let me recap. Think of it as though you’re an artist who will draw a picture but won’t show the audience anything as you draw. You paint the background, then the ball, the paddles, and the score, and when you are done, you flip it around to show us what everything looks like. As we’re looking at it, you’re already drawing the next frame using information about where things have moved since the last picture. When you’re done, you flip that around, and we see the new frame. All this happens so fast that we don’t see the flipping; instead, everything looks like one picture with stuff moving on it. What happens if nothing has changed between frames? Well… the same frame gets redrawn anyway. Behold the illusion! Sneaky game developers!

The entire cycle

So to recap, the entire cycle is:

If you spend some time to let this sink in, you’ll start to see how it would work for any game. Pong is a very simple game used to illustrate this cycle, but the important point is that this cycle applies to something as complicated and big as Halo as well. Think about it…

Move on to part 2