View RSS Feed


My First Game Using XNA!

Rate this Entry
After my last blog, I decided to create a game. Well, creating a fully function game is a lot of work, if you haven't heard! So, instead of creating an entire game, I decided to make a simple little game where a ton of creepy eyes follow your cursor.

The XNA Framework
The XNA Framework is basically the guts that allows a programmer, like me, to create a game without having to create the whole engine! A basic XNA game has 6 methods by default: The Constructor, Initialize, LoadContent, UnloadContent, Update, and Draw.
The Constructor and Initialize method are kinda the same, they're just executed at different times.
The LoadContent method is executed next; it should be used to load stuff like images and sounds, so the game's performance isn't affected when you need to use them, rather than loading the images and sounds on the fly.
The Update and Draw methods are called next; this is where the meat of the game is.
UnloadContent is called when the game is closing.

Round And Round We Go
Basically, a game is an endless loop. Your update method is called - this is where you tweak information based on what the player is doing at that specific point in time. Then, your Draw method is called - this is where you "draw" the screen. Contrary to popular belief, video games are actually just a bunch of still-frames (pictures) displayed really, really fast. Each picture changes just enough to make it look like the images on the screen are actually moving. So, Draw "draws" the screen.

In my program, I "Update" the eyes by telling them where the mouse is. The eyes then get the information needed to be drawn to appear as if they are looking at the cursor. Then, I "Draw" the eyes onto the screen. Let's look at some code.

*Note: This was actually a bunch of cannons at first, but I just changed it to eyes for the sake of... being funny?*
protected override void LoadContent()
    // Create a new SpriteBatch, which can be used to draw textures.
    spriteBatch = new SpriteBatch(GraphicsDevice);

    cannon = new Cannon[200];

    Random rand = new Random();
    Texture2D cannonBase = Content.Load<Texture2D>("cannon_base");
    Texture2D cannonTurret = Content.Load<Texture2D>("cannon_turret");

    for (int i = 0; i < cannon.Length; i++)
        cannon[i] = new Cannon(
            new Rectangle(rand.Next(8, Window.ClientBounds.Width - 8), rand.Next(8, Window.ClientBounds.Height - 8), 16, 16),
            new Vector2(8, 8),
First, I create a SpriteBatch. This is the tool I use to draw the images on the screen.
Second, I create the array that will hold my cannons (eyes).
Third, I create a random number generator and then load my two images I use (the eyeball and the pupil). connects-eyeball-pngconnects-pupil-png
Last, I loop through my array and create all the eye balls. You'll see in this step I pass a reference to the texture I want to use for the "Base" and "Turret" along with some other stuff. The Rectangle is basically the square that I will draw the eye in. The first "rand(Next..." is the X-Coordinate, then the Y-Coordinate, followed by the width and height. The Vector is the pivot point I will use to rotate my images around. I placed the pivot in the middle of my 16x16 image; this makes it so the image rotates on itself, kinda like a clock and its hands. Finally, I tell it "Color.White" which means, do not apply any type of color to my eyes. If I specified "Color.Green", it would have made my eyes look green instead of white.

protected override void Update(GameTime gameTime)
    foreach (Cannon c in cannon)

In my "Cannon" class I've created an "Update" method, that simply takes the mouses position. This method actually contains a lot of math, so I won't bore you. Basically, I had to find the angle I needed to rotate the image so it looked like the pupil was following the cursor. I'll give you a hint: cos(alpha) = B^2 + C^2 - A^2 / 2BC.

protected override void Draw(GameTime gameTime)

    foreach (Cannon c in cannon)

I also create a draw method in my cannon class, however, it simply drew the eyeball picture and then the pupil. It also rotated the pupil before it drew it, so it looks like it's looking at the cursor.

What Now?
I'll probably take this code and apply some kind of idea to it. This was mostly a "testing of the waters" with the XNA framework. I tried to make the whole thing 3-D, but I couldn't find a plug-in suitable for 3ds Max that would allow me to export files a .fbx files (or rather, I couldn't figure out how to get them to work). For now, I'm going to stick to 2-D. Hopefully, I can build my portfolio now that I know what I'm doing and get a job with Valve or something... that would be freakin' cool.

Submit "My First Game Using XNA!" to Digg Submit "My First Game Using XNA!" to Submit "My First Game Using XNA!" to StumbleUpon Submit "My First Game Using XNA!" to Google



    Walkerxes's Avatar
    *coughcough* article?