Time for action – drawing Speller

To draw the visual components of our Speller game , perform the following steps:

1. 1. Alter the GraphicsDevice.Clear(Color.CornflowerBlue) call and replace Color.CornflowerBlue with Color.Black to set the background color.

2. 2. Add the following code after the call to clear the display:

   spriteBatch.Begin();
   spriteBatch.Draw(playerSquare, playerPosition, Color.White);
   
   foreach (GameLetter letter in letters)
   {
       Color letterColor = Color.White;
   
       if (letter.WasHit)
           letterColor = Color.Red;
   
       spriteBatch.DrawString(
           letterFont, 
           letter.Letter, 
           letter.Position, 
           letterColor);
   }
   
   spriteBatch.DrawString(
       letterFont, 
       "Spell: ", 
       new Vector2(
           this.Window.ClientBounds.Width / 2 - 100,
           this.Window.ClientBounds.Height - 25), 
       Color.White);
   
   string beforeWord = currentWord.Substring(0, currentLetterIndex);
   string currentLetter = currentWord.Substring(currentLetterIndex, 1);
   string afterWord = "";
   
   if (currentWord.Length > currentLetterIndex)afterWord = currentWord.Substring(currentLetterIndex + 1);
   
   spriteBatch.DrawString(
       letterFont, 
       beforeWord, 
       new Vector2(
           this.Window.ClientBounds.Width / 2,
           this.Window.ClientBounds.Height - 25), 
       Color.Green);
   
   spriteBatch.DrawString(
       letterFont, 
       currentLetter, 
       new Vector2(
           this.Window.ClientBounds.Width / 2 +   
               letterFont.MeasureString(beforeWord).X,
           this.Window.ClientBounds.Height - 25), 
       Color.Yellow);
   
   spriteBatch.DrawString(
       letterFont, 
       afterWord, 
       new Vector2(
         this.Window.ClientBounds.Width / 2 + 
            letterFont.MeasureString(beforeWord+currentLetterIndex).X,
         this.Window.ClientBounds.Height - 25), 
       Color.LightBlue);
   
   spriteBatch.DrawString(
       letterFont, 
       "Score: " + playerScore.ToString(), 
       Vector2.Zero, 
       Color.White);
   
   spriteBatch.End();

What just happened?

When using the SpriteBatch class, any calls to draw graphics or text must be wrapped in calls to Begin() and End(). SpriteBatch.Begin() prepares the rendering system for drawing 2D graphics and sets up a specialized render state. This is necessary because all 2D graphics in XNA are actually drawn in 3D, with the projection and orientation configurations in the render state to display the 2D images properly.

In our case, the only graphical image we are drawing is the square that represents the player. We draw this with a simple call to SpriteBatch.Draw(), which requires the texture we will use, the location where the texture will be drawn on the screen (relative to the upper-left corner of the display area), and a tint color. Because our square image is white, we could set any color we wish here and the player's square would take on that color when displayed. We will use that to our advantage in just a moment when we draw the text of the word the player is trying to spell.

After the player has been drawn, we loop through each of the letters in the letters list and use the SpriteBatch.DrawString() method to draw the letter at its position, using the letterFont we created earlier. Normally, we will draw the letters in white, but if the player runs into this letter (and it is not the letter they are supposed to hit) we will draw it in red.

Next, we need to display the word that the player is attempting to spell. We display the text Spell: near the bottom center of the display, using the bounds of the current window to determine the location to draw.

In order to colorize the word properly, we need to split the word into different parts as what the player has already spelled, the current letter they are targeting, and the letters after the current letter. We do this using the Substring() method of the string class, and then draw these three components with different color tints. We utilize the MeasureString() method of letterFont to determine how much space each of these components occupies on the screen so that we can position the subsequent strings properly.

Finally, we display the player's score at the upper-left corner of the screen.