- Update the
Draw()method of the Game1 class to add the code to draw the game board after the code that draws the title screen:if (gameState == GameStates.Playing) { spriteBatch.Begin(); spriteBatch.Draw(backgroundScreen, new Rectangle(0, 0, this.Window.ClientBounds.Width, this.Window.ClientBounds.Height), Color.White); for (int x = 0; x < GameBoard.GameBoardWidth; x++) for (int y = 0; y < GameBoard.GameBoardHeight; y++) { int pixelX = (int)gameBoardDisplayOrigin.X + (x * GamePiece.PieceWidth); int pixelY = (int)gameBoardDisplayOrigin.Y + (y * GamePiece.PieceHeight); spriteBatch.Draw( playingPieces, new Rectangle( pixelX, pixelY, GamePiece.PieceWidth, GamePiece.PieceHeight), EmptyPiece, Color.White); spriteBatch.Draw( playingPieces, new Rectangle( pixelX, pixelY, GamePiece.PieceWidth, GamePiece.PieceHeight), gameBoard.GetSourceRect(x, y), Color.White); } this.Window.Title = playerScore.ToString(); spriteBatch.End(); }
As you can see, the code to draw the game board begins exactly like the code to draw the title screen. Since we are using a background image that takes up the full screen, we draw it exactly the same way as the title screen.
Next, we simply loop through gameBoard to draw the squares. The pixelX and pixelY variables are calculated to determine where on the screen each of the game pieces will be drawn. Since both x and y begin at 0, the (x * GamePiece.PieceWidth) and (y * GamePiece.PieceHeight) will also be equal to zero, resulting in the first square being drawn at the location specified by the gameBoardDisplayOrigin vector.
As x increments, each new piece is drawn 40 pixels further to the right than the previous piece. After a row has been completed, the y value increments, and a new row is started 40 pixels below the previous row.
The first spriteBatch.Draw() call uses Rectangle(pixelX, pixelY, GamePiece.PieceWidth, GamePiece.PieceHeight) as the destination rectangle and EmptyPiece as the source rectangle. Recall that we added this Rectangle to our declarations area as a shortcut to the location of the empty piece on the sprite sheet.
The second spriteBatch.Draw() call uses the same destination rectangle, overlaying the playing piece image onto the empty piece that was just drawn. It asks the gameBoard to provide the source rectangle for the piece it needs to draw.
The player's score is displayed in the window title bar, and spriteBatch.End() is called to finish up the Draw() method.