We have everything installed to start creating our video game, it’s time to open Visual Studio and create a MonoGame project.

You will notice that you have installed several MonoGame templates, this way it will be easier to start developing games, for now, we will use the desktop as we will create a game that we can use on our computer. Choose the template of your platform so that we can start from there.

 

Then we select Next, we choose the name, I put,ShooterAdvance then we save our project and after that, Visual Studio presents us a screen with files, for now, the most important is Game1.cs since it is where the main logic of MonoGame is present.

A look to MonoGame template

Now we are going to give a small revision to the code generated by the MonoGame template (I have removed comments) to make it easier to concentrate on the code.

These are the basic libraries when we want to do something with MonoGame since they bring us utilities that we can use to manage resources, paint sprites on the screen and manage player inputs. A funny thing is that they have the namespace of Microsoft.Xna, this is so because of the compatibility with XNA.

Depending on the name and platform you have chosen, your namespace may be different, although usually, you can always change it.

Then we have the start of our main class

Game1 is the name of the main class where all the logic goes, I like to change it for something more descriptive like MainGame or something similar, but for now let’s leave it that way. This class inherits from Game that provides us with all the essential methods for our game (like Load / Unload Content, Update, Draw, etc). We usually have one Game per project.

Then we are presented with two instance variables

By default, MonoGame creates these two variables, it helps us to manage the graphics of our game, which we will use later.

Then, MonoGame creates us a constructor

This constructor helps us to initialize the variables. In this case we are creating a GraphicsDeviceManager for our game, with which we will be able to handle the graphics, and we also indicate to MonoGame where it will find the content that we will be adding, in this case in the Content folder

Now we have to see the Initialize() Method. This method is called after the constructor but before the game’s Loop (Update / Draw).

In general, here we initialize the variables that will serve us for the logic of the game and those things that are not graphics stuffs since for that we have a special method.

In this method, we load all the graphic content of the game and initialize it. This method is only called once per game, it happens after the Initialize method but before the main loop (Update / Draw).

Since we have initialized everything we are going to occupy, now we can call our main loop, which is divided into two parts for better management of resources.

This method is called multiple times per second, this is where we update all the logic of the game such as collisions, user input, audio, etc. It is the main heart of MonoGame. One thing to keep in mind is that in this method we do not update the graphics, for that function we have another method.

The methodDraw is also called several times per second, here we update everything related to the graphics aspect, such as the position of the sprite, colors, etc. Within this method we have,graphics.GraphicsDevice.Clear (Color.CornflowerBlue) ; which gives us a nice blue background.

Now that we know a bit about the code that MonoGame generates, it’s time to run the project for the first time. When running this template without modifications we should leave this

Exciting! We have a ready screen to start our video game with the background indicated in the Draw method.

The life cycle of a game with MonoGame

We already talked a little about what each method does that appears in the MonoGame template, now we are going to visualize it so that it is understood better.

As you can see, there are some methods that do not appear but are called automatically, the main part is our Game Loop, which is the basis of any videogame, it is in that part that we will program the logic of our game.

Adding content

From the assets that we download, we will start adding content to our game. In the Visual Studio browser window, you will see a folder called Content and inside that folder a small file called Content.mgcb.

Double click on that file to open a program called MonoGame Pipeline that will help us transform our assets into something that MonoGame can read. This program optimizes images, sounds, and fonts so that we can use it with MonoGame on different platforms, so we do not have to do much to make it look good everywhere.

Now with the tool open, we’ll right-click on Content and then Add> New Folder and we’ll name it Sprites

Inside the new folder that we created, we right click and select Add> Existing Item …, Select single_ship.png of the assets that we downloaded and in the new screen we select Copy the file to the directory.

Now we have our sprite inside the Content folder, but we need to do one more step to be used by MonoGame, we must compile our assets. We are going to click on the Build button to transform all our assets into something that MonoGame can read, this will create a file with the same name but with the extension xnb.

Now we can close the tool and go back to Visual Studio.

Adding player on the screen

Now that we have the content in our project, it’s time to use it! First, we must declare a variable to load the sprite in memory.

We use Texture2D since we are loading an image, there are other types but for now, we will not use them. Once we have the variable, we will go to the LoadContent method (remember that we load the graphic content here) to initialize our variable

To our Content we load our texture and we pass the name of the image, without extension, since they all have xnb extension for which it is irrelevant. As we save that image in the Sprites folder, we must indicate that path.

It’s time to draw our sprite on the screen

SpriteBatch is a class that does many things, we will not cover all of them, but with what we cover we will do what is necessary to manage our assets. SpriteBatch is used to handle many sprites at the same time, that is why we need to indicate when it starts and when it ends. With spriteBatch.Begin(); we told MonoGame that we are about to draw our sprites, when we finish drawing all the sprites we use spriteBatch.End();.

Now let’s take a look at spriteBatch.Draw(), this method has many ways to draw our sprites, for now let’s use the method that takes three parameters, these are: playerSprite is the object we want to draw, new Vector2(100 , 100) is the position where we want to draw the sprite and Color.White is the color of the tint we want to give it, as we do not want any special tint then we only leave it blank.

Now it’s time to run our game, and we can see the sprite on the screen.

About the coordinates

In the previous section we saw that to our method spriteBatch.Draw() we passed as a parameter a Vector2 that indicates the position of our sprite, but how does this actually work? In MonoGame, and practically all the engines and frameworks, the screen position is guided by X and Y coordinates originating in the upper left corner.

The axis of the X increases to the right and the axis of the Y increases down, contrary to what we were taught in school. It should also be noted that the position that we give the sprite is relative to the upper left corner of the image, and not the center, this must be remembered very well because then it can give us errors in the calculations and positions.

For better understanding, I show the following image

Summarizing

We have already made our first steps with MonoGame and we were able to put a sprite on the screen. If you want to see the code that you have up to now, you can see it in my Github, there I will be uploading a new branch for each lesson that we are going to see so you can validate your code.