After completing this chapter, you will be able to:

• Use the most important features of the Microsoft Visual Studio integrated development environment (IDE)
• Use the most appropriate MonoGame project development template
• Describe the functions of all the relevant files in a MonoGame project
• Work with the MonoGame project and application structure
• Use the functions and operations of the Draw/Update loop

Before diving headlong into game creation, it is a good idea to first become familiar with the development environment you will be using. The primary tools you will work with throughout this book are Visual Studio Express and MonoGame.

The fundamental concepts behind programming games are independent from any particular operating system or mobile device. For the purposes of this book and learning the universal building blocks of 2D game development, we will build examples using a Windows Desktop template, which is accessible to anyone using a Windows machine with Visual Studio and MonoGame.

MonoGame is designed to allow maximum code reuse and ease of porting between platforms, so once you’re confident building 2D games, you will have the option to develop games for all popular operating systems including Windows, Mac OS, and Linux, and most popular mobile platforms including Windows Phone, iOS, and Android. MonoGame is even compatible with building games for Playstation Mobile and the OUYA console, and cross-platform support is improving all the time.

The Visual Studio Development Environment

To follow along, you will need to download and install both Visual Studio and MonoGame. If you have yet to install either of these packages, you can refer to the download and installation instructions in the “Downloading and Installing Development Tools” section of Chapter 1 before proceeding.

After you have installed the required tools, you can start creating your first project. Luckily, Visual Studio Express with MonoGame lets you create new projects with minimal effort.

Understanding the MonoGame Framework

The first file you should know about is AssemblyInfo.cs. You can find that file in the Properties folder in Solution Explorer. Overall, AssemblyInfo.cs is not the most interesting source file. However, there are a few important aspects that we can touch upon, the first being the title of the game window. The following code shows the contents of the file. The first line reads [assembly: AssemblyTitle("SimpleMono")]. This code, which was generated automatically, sets the game window’s title to SimpleMono when the project executes. Following this line are many other descriptors for the project, including company and trademark. Also, note the line of code that reads [assembly: Guid("64ac7fb4-d5bf-45ed-b760-92ca9bfc3905")], which represents the unique ID generated for this project.

// General Information about an assembly is controlled through the following
// set of attributes. Change these attribute values to modify the information
// associated with an assembly.
[assembly: AssemblyTitle("SimpleMono")]
[assembly: AssemblyProduct("SimpleMono")]
[assembly: AssemblyDescription("")]
[assembly: AssemblyCompany("")]
[assembly: AssemblyCopyright("Copyright © 2013")]
[assembly: AssemblyTrademark("")]
[assembly: AssemblyCulture("")]
 
// Setting ComVisible to false makes the types in this assembly not visible
// to COM components. If you need to access a type in this assembly from
// COM, set the ComVisible attribute to true on that type.
[assembly: ComVisible(false)]
 
// The following GUID is for the ID of the typelib if this project is exposed to COM
[assembly: Guid("64ac7fb4-d5bf-45ed-b760-92ca9bfc3905")]

The next file of interest is Program.cs. This is the source file that runs your game. Another way to look at it is that this file contains the main() function, or entry point for code execution. First, at the top of the following code is the using System; statement. For those with experience in other languages, the keyword using in this line is similar to the keywords include (of C++) and import (of Java). As you look inside main(), you will see that the code instantiates a Game1 object and invokes its Run() command.

#region Using Statements
using System;
using System.Collections.Generic;
using System.Linq;
#endregion
 
namespace BookExample
{
#if WINDOWS || LINUX
    /// <summary>
    /// The main class.
    /// </summary>
    public static class Program
    {
        /// <summary>
        /// The main entry point for the application.
        /// </summary>
        [STAThread]
        static void Main()
        {
            using (var game = new Game1())
                game.Run();
        }
    }
#endif
}

The last project-generated source code file you should look at is Game1.cs. A shortened example of Game1.cs is shown in the following. First, note that the file inherits from (is a subclass of) the MonoGame’s Game class. This provides the Game1 class with access to code designed to assist in common game tasks, such as initialization, rendering, loading, and updating. You can see this reflected in the override functions that were generated for you (shown following). These functions are invoked by the MonoGame’s Game library in a fixed sequence to support proper initialization and runtime functionality. Because you will be using these Game functions often, you’ll explore them in more depth in upcoming sections.

namespace BookExample
{
    public class Game1 : Game
    {
        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;
 
        public Game1()
        {
            ...
        }
 
        protected override void Initialize()
        {
            ...
        }
 
        protected override void LoadContent()
        {
            ...
        }
 
        protected override void UnloadContent()
        {
            ...
        }
 
        protected override void Update(GameTime gameTime)
        {
            ...
        }
 
        protected override void Draw(GameTime gameTime)
        {
            ...
        }
    }
}

public class Game1 : Micrrosoft.Xna.Framework.Game { ... }

The Draw and Control project

This project demonstrates how to load images into a MonoGame project. Draw these image files as textures and manipulate their positions. Figure 2-8 shows an example of what the project looks like when running.

The project’s controls are as follows:

• Back button (on the controller) or F1 key on the keyboard: Exits the program
• Left thumbstick or the WSAD keys on the keyboard: Moves the image with the white background
• Right thumbstick or the arrow keys on the keyboard: Moves the image with the transparent background

The goals of the project are as follows:

• To understand and experience working with the Content folder and external images
• To understand the differences between .jpg and .png images (the transparency)
• To work with simple game states (position of images)
• To experience the basic drawing coordinate system and the Update/Draw loop

Creating the Draw and Control project

1. Start by creating a new project and naming it DrawAndControl. Recall that in this book we work with the MonoGame Windows OpenGL Project template; however, if you need to, you can refer back to the “Visual Studio Development Environment” section for a more detailed procedure.
2. Next, add the images to the content project in your game. Add a .jpg and a .png file to the project. This project uses UWB.jpg and UWB.png, which you can find in the sample code, in the Chapter02ImagesUsed folder.

   To add an image, right-click the Content folder and select Add Existing Item, as shown in the following image. Images you add to the project will be copied to the bin folder when the project is built. It is essential that these images exist in the bin folder such that they can be deployed as a part of the game.

   

    Note  The .png format supports transparency, or alpha, while the .jpg format does not. Transparency support for an image format means that areas of the image can be clear or partially clear. When an image has transparent parts, it uses the background to fill in those areas. When running the Draw and Control project, as shown in Figure 2-7, the difference between having and not having transparency support is easily recognizable.

   An alternative way of adding images to the Content folder is by dragging images from your file system and dropping them directly into the Content folder. However, with this approach, you must manually set the content build properties of the images added. The following steps show you the procedure.

   • a.  Right-click over the image you just dragged into the Content folder and select Properties, as shown in the following image.

     

   • b.  In the corresponding properties window, make sure the Build Action is set to Content, as shown in the following image.

     

   • c.  In addition, still in the Properties window, ensure the Copy to Output Directory option is set to Copy if newer, as shown in the following image.

     

3. With the images in your project, you can now define the game state. Do this by inserting the following lines of code into your Game1 class.
   • a.  Declare the following instance variables: Texture2D mJPGImage, Vector2 mJPGPosition, Texture2D mPNGImage, and Vector2 mPNGPosition, as shown in the following code:

     public class Game1 : Game
     {
         GraphicsDeviceManager mGraphics;
         SpriteBatch mSpriteBatch;
      
         // Support for loading and drawing the JPG image
         Texture2D mJPGImage;     // The UWB-JPG.jpg image to be loaded
         Vector2 mJPGPosition;    // Top-Left pixel position of UWB-JPG.jpg
      
         // Support for loading and drawing of the PNG image
         Texture2D mPNGImage;     // The UWB-PNG.png image to be loaded
         Vector2 mPNGPosition;    // Top-Left pixel position of UWB-PNG.png
         ...
     }

      Note  This book follows the convention of naming all instance variables with names that begin with a lowercase “m.” Notice that in the preceding code listing we have renamed the template SpriteBatch and Graphics variables accordingly.

   • b.  Next, initialize the game state by setting your images’ starting position within the Initialize() function and loading your external images in the LoadContent() function:

     protected override void Initialize()
     {
         // Initialize the initial image positions.
         mJPGPosition = new Vector2(10f, 10f);
         mPNGPosition = new Vector2(100f, 100f);
      
         // Important to let the base class perform its initialization
         base.Initialize();
     }
      
     protected override void LoadContent()
     {
         // Create a new SpriteBatch, which can be used to draw textures.
         mSpriteBatch = new SpriteBatch(GraphicsDevice);
      
         // Load the images.
         mJPGImage = Content.Load<Texture2D>("UWB-JPG");
         mPNGImage = Content.Load<Texture2D>("UWB-PNG");
     }

4. With the images loaded and ready, you can now draw them to your game world. You do this with the provided SpriteBatch object. As shown in the following code, the SpriteBatch.Begin() call initializes the drawing process, and the two SpriteBatch.Draw() calls add images to the batch to be rendered. When all desired drawing is done, you flush and display the drawn images with a call to the SpriteBatch.End() function. Notice that in the SpriteBatch.End() function, you simply draw the state of the game by rendering the images at the corresponding positions. You should avoid changing the game state information in the Draw() function.

    Important  Changes to the game state belong in the Update() function, with a few exceptions. Mixing the two functions will cause trouble because their calling frequencies are independent from each other.

   protected override void Draw(GameTime gameTime)
   {
       // Clear to background color
       GraphicsDevice.Clear(Color.CornflowerBlue);
    
       mSpriteBatch.Begin(); // Initialize drawing support
    
       // Draw the JPGImage
       mSpriteBatch.Draw(mJPGImage, mJPGPosition, Color.White);
    
       // Draw the PNGImage
       mSpriteBatch.Draw(mPNGImage, mPNGPosition, Color.White);
    
       mSpriteBatch.End(); // Inform graphics system we are done drawing
    
       base.Draw(gameTime);
   }

5. The last step is to update the position of the images based on the input from the user. As you can see in the following code, at every update you add to the images’ current position by the gamepad’s thumbstick displacement values. In this case, notice that the Update() function updates the game state only by changing the various instance variables. You should avoid drawing any of the game objects in the Update() function. Additionally, if you prefer to use the mouse and keyboard, code for this is also provided. Both the keyboard and mouse are handled by polling the current state for the key or button of interest and modifying the appropriate values. From this point on, projects will use only the game controller for input. If you wish to use the keyboard and mouse, you will need to add the code to your project.

   protected override void Update(GameTime gameTime)
   {
       #region Game Controller
       // Allows the game to exit
       if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
           this.Exit();
    
       // Update the image positions with left/right thumbsticks
       mJPGPosition += GamePad.GetState(PlayerIndex.One).ThumbSticks.Left;
       mPNGPosition += GamePad.GetState(PlayerIndex.One).ThumbSticks.Right;
       #endregion
    
       #region Keyboard
       // Allows the game to exit
       if (Keyboard.GetState().IsKeyDown(Keys.Escape))
           this.Exit();
    
       // Update the image positions with Arrow keys
       if (Keyboard.GetState().IsKeyDown(Keys.Left))
           mJPGPosition.X--;
       if (Keyboard.GetState().IsKeyDown(Keys.Right))
           mJPGPosition.X++;
       if (Keyboard.GetState().IsKeyDown(Keys.Up))
           mJPGPosition.Y--;
       if (Keyboard.GetState().IsKeyDown(Keys.Down))
           mJPGPosition.Y++;
    
       // Update the image positions with AWSD
       if (Keyboard.GetState().IsKeyDown(Keys.A))
           mPNGPosition.X--;
       if (Keyboard.GetState().IsKeyDown(Keys.D))
           mPNGPosition.X++;
       if (Keyboard.GetState().IsKeyDown(Keys.W))
           mPNGPosition.Y--;
       if (Keyboard.GetState().IsKeyDown(Keys.S))
           mPNGPosition.Y++;
       #endregion
    
       #region Mouse
       // Poll mouse state
       MouseState mMouseState = Mouse.GetState();
    
       // If left mouse button is pressed
       if (mMouseState.LeftButton == ButtonState.Pressed)
           mJPGPosition = new Vector2(mMouseState.X, mMouseState.Y);
    
       // If right mouse button is pressed
       if (mMouseState.RightButton == ButtonState.Pressed)
           mPNGPosition = new Vector2(mMouseState.X, mMouseState.Y);
       #endregion
        
       base.Update(gameTime);
   }

The project is now ready. Build the project to see if any errors occur. If not, run the project and explore the program by moving the images around.

The Input Wrapper project

This project demonstrates how to unify the interaction with game controller and keyboard input devices. Figure 2-9 shows an example of what the project looks like when running. Note that this project appears identical to the previous one with the only difference being the code that handles user’s input.

The project’s controls are as follows:

• Back button (on the controller) or F1 key on the keyboard: Exits the program
• Left thumbstick or the WSAD keys on the keyboard: Moves the image with the white background
• Right thumbstick or the arrow keys on the keyboard: Moves the image with the transparent background

The goal of the project is as follows:

• To understand how to design a wrapper class to unify the game controller and keyboard input

Creating the Input Wrapper project

1. Start by creating a new project and naming it InputWrapper.
2. Add a new source file into your project by right-clicking over the project name and selecting Add New Item, as shown in the following image.

   

3. Select a new C# class, and name the file InputWrapper.cs, as show in the following image.

   

4. Double-click the newly created InputWrapper.cs file to open it for editing.
   • a.  Include all the references to necessary libraries for working with the keyboard with the following using statements.

     using Microsoft.Xna.Framework;
     using Microsoft.Xna.Framework.Input;
     using Microsoft.Xna.Framework.Graphics;

   • b.  Define AllInputButtons outside of the InputWrapper class, an internal structure that captures button functionality of the game controller. The internal keyword ensures that the AllInputButtons structure is accessible only from within this library.

     internal struct AllInputButtons
     {
                   ...
     }

   • c.  Within the AllInputButtons structure, define the keys for all the buttons that we will work with. In the following, we define the K key for the game controller A button, L key for the B button, and so on.

     private const Keys kA_ButtonKey = Keys.K;
     private const Keys kB_ButtonKey = Keys.L;
     private const Keys kX_ButtonKey = Keys.J;
     private const Keys kY_ButtonKey = Keys.I;
     private const Keys kBack_ButtonKey = Keys.F1;
     private const Keys kStart_ButtonKey = Keys.F2;

      Note  Variables that begin with the letter k represent a constant.

   • d.  Continue to work in AllInputButtons structure, define a GetState() function to poll the state of the corresponding keyboard key or the game controller button if one is connected. Notice the order upon which the states are polled: keyboard followed by game controller. This order means that when a game controller and the keyboard are both present, if a player types on the keyboard and presses the corresponding game controller button at the same time, we will process the keyboard input.

     private ButtonState GetState(ButtonState gamePadButtonState, Keys key)
     {
             if (Keyboard.GetState().IsKeyDown(key))
                  return ButtonState.Pressed;
                 
             if ((GamePad.GetState(PlayerIndex.One).IsConnected))
                  return gamePadButtonState;
      
             return ButtonState.Released;
     }

   • e.  Final task in AllInputButtons structure is to define assessors with corresponding button names that will call the GetState() function. The following shows the assessors for the A, B, Back, Start, X, and Y buttons.

     public ButtonState A {
             get { return GetState(GamePad.GetState(PlayerIndex.One).Buttons.A,
                                     kA_ButtonKey); } }
     public ButtonState B {
             get { return GetState(GamePad.GetState(PlayerIndex.One).Buttons.B,
                                     kB_ButtonKey);  } }
     public ButtonState Back {
             get { return GetState(GamePad.GetState(PlayerIndex.One).Buttons.Back,
                                     kBack_ButtonKey); } }
     public ButtonState Start {
             get { return GetState(GamePad.GetState(PlayerIndex.One).Buttons.Start,
                                     kStart_ButtonKey); } }
     public ButtonState X {
             get { return GetState(GamePad.GetState(PlayerIndex.One).Buttons.X,
                                     kX_ButtonKey); } }
     public ButtonState Y {
             get { return GetState(GamePad.GetState(PlayerIndex.One).Buttons.Y,
                                     kY_ButtonKey); } }

   • f.  We must repeat the preceding steps b to e to define internal structures AllInputTriggers and AllThumbSticks for wrapping game controller triggers and thumbsticks.
   • g.  For AllInputTriggers, the left and right triggers are defined to be the N and M keys, and a keyboard trigger will return a floating point value of 0.75. The GetTriggerState() function implements the similar priority of checking the keyboard before the game controller.

     internal struct AllInputTriggers
     {
             private const Keys kLeftTrigger = Keys.N;
             private const Keys kRightTrigger = Keys.M;
             const float kKeyTriggerValue = 0.75f;
      
             private float GetTriggerState(float gamePadTrigger, Keys key)
             {
                 if (Keyboard.GetState().IsKeyDown(key))
                     return kKeyTriggerValue;
      
                 if ((GamePad.GetState(PlayerIndex.One).IsConnected))
                     return gamePadTrigger;
      
                 return 0f;
             }
      
             public float Left
             {
                     get { return GetTriggerState(
                                     GamePad.GetState(PlayerIndex.One).Triggers.Left,
                                     kLeftTrigger); }
             }
      
             public float Right
             {
                     get { return GetTriggerState(
                                     GamePad.GetState(PlayerIndex.One).Triggers.Right,
                                     kRightTrigger); }
             }
     }

   • h.  For AllThumbSticks, the left thumbstick’s positive and negative X movements are mapped to A and D keys, the corresponding Y movements are mapped to W and S keys. The right thumbstick’s movements are mapped to the corresponding arrow keys. The defined ThumbStickState() function polls both the game controller and keyboard to accumulate the returned movement values.

     internal struct AllThumbSticks
     {
             const Keys kLeftThumbStickUp = Keys.W;
             const Keys kLeftThumbStickDown = Keys.S;
             const Keys kLeftThumbStickLeft = Keys.A;
             const Keys kLeftThumbStickRight = Keys.D;
      
             const Keys kRightThumbStickUp = Keys.Up;
             const Keys kRightThumbStickDown = Keys.Down;
             const Keys kRightThumbStickLeft = Keys.Left;
             const Keys kRightThumbStickRight = Keys.Right;
      
             const float kKeyDownValue = 0.75f;
      
             private Vector2 ThumbStickState(Vector2 thumbStickValue,
                                     Keys up, Keys down, Keys left, Keys right)
             {
                 Vector2 r = new Vector2(0f, 0f);
                 if ((GamePad.GetState(PlayerIndex.One).IsConnected))
                 {
                     r = thumbStickValue;
                 }
                 if (Keyboard.GetState().IsKeyDown(up))
                     r.Y += kKeyDownValue;
                 if (Keyboard.GetState().IsKeyDown(down))
                     r.Y -= kKeyDownValue;
                 if (Keyboard.GetState().IsKeyDown(left))
                     r.X -= kKeyDownValue;
                 if (Keyboard.GetState().IsKeyDown(right))
                     r.X += kKeyDownValue;
      
                 return r;
             }
      
             public Vector2 Left
             {
                 get {
                     return ThumbStickState(GamePad.GetState(PlayerIndex.One).ThumbSticks.Left,
                                     kLeftThumbStickUp, kLeftThumbStickDown,
                                     kLeftThumbStickLeft, kLeftThumbStickRight); }
             }
      
             public Vector2 Right {
                     return ThumbStickState(GamePad.GetState(PlayerIndex.One).ThumbSticks.Right,
                                     kRightThumbStickUp, kRightThumbStickDown,
                                     kRightThumbStickLeft, kRightThumbStickRight); }
                   }
     }

   • i.  With all the supporting structures, the InputWrapper class can simply define instances of corresponding structures with names identical to those from the GamePad class.

     static class InputWrapper
     {
             static public AllInputButtons Buttons = new AllInputButtons();
             static public AllThumbSticks ThumbSticks = new AllThumbSticks();
             static public AllInputTriggers Triggers = new AllInputTriggers();
     }

5. Finally, we can poll input status by calling the newly defined InputWrapper facilities instead of checking the system GamePad and Keyboard classes. This is achieved by replacing the corresponding functions in the Update() function of the Game1 class (in Game1.cs).

   protected override void Update(GameTime gameTime)
   {
           // Allows the game to exit
           if (InputWrapper.Buttons.Back == ButtonState.Pressed)
                 this.Exit();
    
           // Update the image positions with left/right thumbsticks
                mJPGPosition += InputWrapper.ThumbSticks.Left;
           mPNGPosition += InputWrapper.ThumbSticks.Right;
   }

For the rest of examples in this book, we will always poll input devices using the InputWrapper class. In this way, all examples will function correctly with or without a compatible game controller.