First Stumbling Steps with MonoGame

This little game of Pong is my first attempt to build anything in MonoGame (MG). In fact it's my first attempt to build any kind of game in almost 20 years. I've explained why I've chosen to start with MG rather than a more full-featured engine such as Unity or Godot in a general blog post that I wrote.

Once I figured out how to use the Content Builder tool to load assets, modify things like SpriteFonts, it was relatively straight forward. I've found the MG official documentation to be a little sparse but one thing I have found helpful is this 'textbook' from Kansas University to accompany their CIS 580: Game Programming course. Sadly, I couldn't find any other details about the course, but this material serves as a kind of extended tutorial.

An Elusive Bug

I did have one incredibly irritating issue which took hours to track down. When I started writing the game the only viewable area was contained within the game board, which is represented by an asset measuring 455 pixels high.

Later on, I added a score bar to the top of the screen; the board would render below it. The scorebar was 47 pixels high. So this meant that I had to redo the code for clamping the movement of the paddles and for bouncing the ball off the top and bottom edges of the playable area. 

I defined a Rectangle to represent the 'playArea' but something was off - the paddles were moving a little off the bottom edge of the screen and also the ball was dipping just off screen before bouncing up. It looked like the calculations were off by around ~23 pixels, so I figured I must have been incorrectly calculating this playArea and somehow cutting the score bar height in half.

I don't know how many times I went over the code, and I just couldn't see anything wrong in the calculations. I had to step away from it for a while and come back with fresh eyes. Eventually I found the culprit and it turned out to be nothing to do with these calculations at all!

Whilst stepping through the debugger, I noticed that the viewport for the GraphicsDevice was 480 pixels which was too short... by 22 pixels! (455+47 = 502). This is why it looked like it was the score bar that was the problem, especially as the bug was only introduced when adding that. So here's how I was setting the viewport:

    _graphics.PreferredBackBufferWidth = _board.Width;
    _graphics.PreferredBackBufferHeight = _scoreBar.getHeight() + _board.Height;

This was correct! What on earth was going on? Turns out I was missing one little line of code, one that I didn't knew I needed...

   _graphics.ApplyChanges();

#facepalm

I could have read and re-read my code a million times and as long as I was assuming there had to be a problem with the calculations I was never going to find it. I just happened to see the ApplyChanges() call in a tutorial I was looking at and the penny dropped. 

Ahh the joys of working with a new framework or library that you don't have a clue how to use properly!