This is the first of a series of tutorials that will help you make a sidescroller (like the old mario games) using XNA Game Studio. If you haven’t already install XNA Game Studio 2.0. If you are still using XNA 1.0 you will need to upgrade for this tutorial.

Open up XNA GSE and start a new project. Select “Windows Game” and give it any name you want. When you click OK ‘Game1.cs’ should be on your screen. It might look a little intimidating at first so I will explain what we will be using.

The LoadContent() function is where we will load all our graphics. The Update() function runs 60 times a second, and we will put everything that needs to be updated every frame in here. The Draw() function also runs 60 times a second and we will be drawing everything to the screen from here. Why can’t we just draw everything from the Update() function you may ask? If the game is running slowly Draw() will stop running everyframe because of that, but the Update() function will continue to run at 60fps.

Find the Game1() function and change it to this:

That is just so the tiles will fit in the stage window nicely.

Before we get started we are going to need some graphics. Since this game is going to be tile based we will need a few tiles and a character. I have made three 32×32 pixel tiles. A black one for the ground, a red one that will kill the character and a yellow one that will take the character to the next level. I just made the character a 32×32 square. You can make him look better if you want but try and keep it 32×32 pixels, otherwise you will have to change some of the code. Save all those images into the Content folder of your game.

Go back into Visual Studio and open the solution explorer (View > Solution explorer). Right click on Content and select ‘Add > Existing Item’. Choose the 4 images we just made to add them to the project. Now we can start coding.

At the top of Game1.cs underneath the line that says SpriteBatch spriteBatch;, add this code:

We will use these Texture2D objects to draw the images to the screen. Scroll down to the LoadContent() function and underneath the line that says spriteBatch = new SpriteBatch(GraphicsDevice); add this:

This loads each images that we just made. Change “black_tile”, “red_tile”, “yellow_tile” and “player” to whatever you called your images.

We will make the levels using an array of numbers, where 0 will be a blank tile, 1 will be a black tile, 2 will be a red tile, 3 will be a yellow tile and 4 will be the players spawn point. We will make a separate class to hold all the level data so Game1.cs doesn’t get too messy. Open the solution explorer and select your project (it should be second from the top). Right click on it and select Add > New Item. Choose ‘Class’ and name it Levels (it’s case sensitive).

The new class should appear on your screen. You can switch between Game1.cs and Levels.cs by clicking the tabs above the code area. Between the curly braces for class Levels add the line public static int level1;. This array will hold our test level. It is public so we can access it outside the class and it is static so we don’t need to make a Levels object to access it. Add a new function to the class called Initialize.

Now go back to Game1.cs and find Initialize(). Above where it says base.Initialize(); put Levels.Initialize();. Now let’s make our first map. go back to Initialize() in the Levels class and put this code inside its curly braces:

That may look a lot more confusing than it is. Every 1 represents a black tile, each 2 represents a killing (red) tile and each 3 represents a yellow tile. The 4 is the players spawn point. We will loop through each tile and check which one it is, and then draw the appropriate image to the screen. Go back to Game1 and find Draw();. Underneath where is says graphics.GraphicsDevice.Clear(Color.CornflowerBlue); add this:

We have to prepare the graphics device by putting spriteBatch.Begin(); before we draw anything, and restore the device to its previous state after we have finished drawing with spriteBatch.End();.

Between those two functions we have two for loops. One which loops through each row of tiles and another which loops through each tile in that row. Next we have three if statements checking what the value of the tile is, and draw the correct image to the screen using spriteBatch.Draw(Texture2D, Vector2, Color);. Note that the first row and first tile are at position 0, not 1. We draw the tile to the position of (j *32, i * 32). If the tile is 3rd from the left on the second row (i = 1, j = 2) it will be drawn at (64, 32).

If you press F5 or go to Debug > Start Debugging you can test out your game so far. You should see a map like this:

You might notice that you can’t see that character. That is because if we want the character to move around we can’t draw him at his spawn point every frame. We will fix that up in the next tutorial.

Click here to download the source files.

If you enjoyed this tutorial please kick it.