Rewrite all chapters to use new atlas for gum integration in 19

Author: AristurtleDev

articles/tutorials/building_2d_games/16_working_with_spritefonts/images/font_added.png

@@ -191,7 +191,7 @@ First, we'll need to create a SpriteFont Definition.  Open the *Content.mgcb* co
 
 ### Download the Font File
 
-Next, right-click the following TTF font and choose "Save Link as..." and save it in the same directory as the *gameFont.spriteFont* file we just created.
+Next, right-click the following TTF font and choose "Save Link as..." and save it in the same directory as the *04B_30.spriteFont* file we just created.
 
 - [04B_30.ttf](./files/04B_30.ttf)
 

articles/tutorials/building_2d_games/16_working_with_spritefonts/index.md

@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+This file contains an xml description of a font, and will be read by the XNA
+Framework Content Pipeline. Follow the comments to customize the appearance
+of the font in your game, and to change the characters which are available to draw
+with.
+-->
+<XnaContent xmlns:Graphics="Microsoft.Xna.Framework.Content.Pipeline.Graphics">
+  <Asset Type="Graphics:FontDescription">
+
+    <!--
+    Modify this string to change the font that will be imported.
+    -->
+    <FontName>04B_30.ttf</FontName>
+
+    <!--
+    Size is a float value, measured in points. Modify this value to change
+    the size of the font.
+    -->
+    <Size>87.5</Size>
+
+    <!--
+    Spacing is a float value, measured in pixels. Modify this value to change
+    the amount of spacing in between characters.
+    -->
+    <Spacing>0</Spacing>
+
+    <!--
+    UseKerning controls the layout of the font. If this value is true, kerning information
+    will be used when placing characters.
+    -->
+    <UseKerning>true</UseKerning>
+
+    <!--
+    Style controls the style of the font. Valid entries are "Regular", "Bold", "Italic",
+    and "Bold, Italic", and are case sensitive.
+    -->
+    <Style>Regular</Style>
+
+    <!--
+    If you uncomment this line, the default character will be substituted if you draw
+    or measure text that contains characters which were not included in the font.
+    -->
+    <!-- <DefaultCharacter>*</DefaultCharacter> -->
+
+    <!--
+    CharacterRegions control what letters are available in the font. Every
+    character from Start to End will be built and made available for drawing. The
+    default range is from 32, (ASCII space), to 126, ('~'), covering the basic Latin
+    character set. The characters are ordered according to the Unicode standard.
+    See the documentation for more information.
+    -->
+    <CharacterRegions>
+      <CharacterRegion>
+        <Start>&#32;</Start>
+        <End>&#126;</End>
+      </CharacterRegion>
+    </CharacterRegions>
+  </Asset>
+</XnaContent>

articles/tutorials/building_2d_games/17_scenes/files/04B_30_5x.spritefont

@@ -111,7 +111,19 @@ The key changes here are:
 
 ## Updating the Game
 
-With the scene architecture in place, the game can now be updated so that it is broken down into scenes. We'll create two scenes; a title scene and a gameplay scene.
+With the scene architecture in place, the game can now be updated so that it is broken down into scenes. We'll create two scenes; a title scene and a gameplay scene.  First, however, we need to add an additional SpriteFont Description that will be used during the title scene to display the title of the game. Open the *Content.mgcb* content project file in the MGCB Editor and perform the following:
+
+1. Right-click the *fonts* directory and choose *Add* > *New Item...*.
+2. Select *SpriteFont Description (.spritefont)* from the options
+3. Name the file *04B_30_5x.spritefont* and click *Create*.
+
+| ![Figure 17-1: The *04B_30_5x.spritefont* file created in the MGCB Editor](./images/font_added.png) |
+| :-------------------------------------------------------------------------------------------------: |
+|             **Figure 17-1: The *04B_30_5x.spritefont* file created in the MGCB Editor**             |
+
+Next, open the *04B_30_5x.spritefont* file and make the following changes:
+
+[!code-xml[](./snippets/04B_30_5x.spritefont?highlight=4-5)]
 
 ### The Title Scene
 
@@ -296,7 +308,7 @@ The `Game1` class is now much simpler as most of the game logic has been moved t
 Running the game now, we can see that once the game screen comes up, the title scene is displayed with the animated slime and the press enter prompt.  The background music starts playing on this scene as well.  Pressing enter from here will switch to the game scene where the game starts and we can play the game implemented thus far.
 
 | ![Figure 17-2: The game launching with the title screen first, then transitioning to the game play screen when enter is pressed](./videos/gameplay.webm) |
-|:--------------------------------------------------------------------------------------------------------------------------------------------------------:|
+| :------------------------------------------------------------------------------------------------------------------------------------------------------: |
 |            **Figure 17-2: The game launching with the title screen first, then transitioning to the game play screen when enter is pressed**             |
 
 ## Conclusion

articles/tutorials/building_2d_games/17_scenes/images/font_added.png

@@ -2,7 +2,7 @@
 <XnaContent xmlns:Graphics="Microsoft.Xna.Framework.Content.Pipeline.Graphics">
   <Asset Type="Graphics:FontDescription">
     <FontName>04B_30.ttf</FontName>
-    <Size>85</Size>
+    <Size>87.5</Size>
     <Spacing>0</Spacing>
     <UseKerning>true</UseKerning>
     <Style>Regular</Style>

articles/tutorials/building_2d_games/17_scenes/index.md

@@ -110,12 +110,15 @@ public override void LoadContent()
 
         // Create the slime animated sprite from the atlas.
         _slime = atlas.CreateAnimatedSprite("slime-animation");
+        _slime.Scale = new Vector2(4.0f, 4.0f);
 
         // Create the bat animated sprite from the atlas.
         _bat = atlas.CreateAnimatedSprite("bat-animation");
+        _bat.Scale = new Vector2(4.0f, 4.0f);
 
-        // Load the tilemap from the XML configuration file.
+        // Create the tilemap from the XML configuration file.
         _tilemap = Tilemap.FromFile(Content, "images/tilemap-definition.xml");
+        _tilemap.Scale = new Vector2(4.0f, 4.0f);
 
         // Load the bounce sound effect
         _bounceSoundEffect = Content.Load<SoundEffect>("audio/bounce");

…/17_scenes/snippets/titleFont.spritefont …/17_scenes/snippets/04B_30_5x.spritefontarticles/tutorials/building_2d_games/17_scenes/snippets/titleFont.spritefont renamed to articles/tutorials/building_2d_games/17_scenes/snippets/04B_30_5x.spritefont articles/tutorials/building_2d_games/17_scenes/snippets/titleFont.spritefont renamed to articles/tutorials/building_2d_games/17_scenes/snippets/04B_30_5x.spritefont

@@ -163,7 +163,7 @@ Next, add this texture to your content project using the MGCB Editor:
 
 Now that we have the background pattern texture added, let's update the `TitleScene` class to implement the scrolling background. Open the *TitleScene.cs* file in the game project and update it to the following
 
-[!code-csharp[](./snippets/titlescene.cs?highlight=39-50,79-81,92-93,104-113,120-13)]
+[!code-csharp[](./snippets/titlescene.cs?highlight=39-50,79-81,92-93,104-113,120-123)]
 
 The key changes here are
 
@@ -177,7 +177,7 @@ The key changes here are
 - In `Draw`, a new sprite batch begin/end block is added that uses [**SamplerState.PointWrap**](xref:Microsoft.Xna.Framework.Graphics.SamplerState.PointWrap) and draws the background pattern to the destination rectangle using a source rectangle with the offset calculations.
 
 > [!NOTE]
-> We use two separate sprite batch begin/end blocks for this.  The first [**SamplerState.PointWrap**](xref:Microsoft.Xna.Framework.Graphics.SamplerState.PointWrap) to draw the background and the second uses [**SamplerState.PointClamp**](xref:Microsoft.Xna.Framework.Graphics.SamplerState.PointClamp) to draw the rest of the scene.
+> We use two separate sprite batch begin/end blocks for this.  The first uses [**SamplerState.PointWrap**](xref:Microsoft.Xna.Framework.Graphics.SamplerState.PointWrap) to draw the background and the second uses [**SamplerState.PointClamp**](xref:Microsoft.Xna.Framework.Graphics.SamplerState.PointClamp) to draw the rest of the scene.
 >
 > This separation is necessary because changing the sampler state requires ending the current sprite batch and beginning a new one.